CSS的学习总结

一、CSS概述

　　

CSS英文名：Cascading Style Sheets

中文名：层叠样式表

作用：用于修饰网页信息的显示样式，控制网页的外观；

组成：选择器+一条声明；

选择器：表明要应用规则的元素；

声明：用于表明应该如何显示选择器指定的元素；

语法结构：选择器{属性：属性值} 例：{p:color:#000;}

样式表的种类：1.内部样式表 2.外部样式表 3.行内样式表

 

       选择器通常是需要改变样式的 HTML 元素。

       每条声明由一个属性和一个值组成。

       属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 

1、选择器：

通配符选择器 *{}
标签选择器：p{}
类别选择器：.classname{}
ID选择器：#idname{}
伪类选择器： ：link{} :visited{} :hover{} :active{} 巧记 L-V-H-O
群组选择器：h1,h2,p{}
后代选择器：div a{}
选择器的优先级：id>class>标签

2、文字属性：

字体颜色：color:#000;
字体类型：font-family:Arial/Verdna/sens-serif; 默认的是：Arial
字体大小：font-size:12px;
粗体：font-weight:normal普通显示/bold粗体显示;
斜体：font-style:normal普通显示/italic斜体显示/oblique倾斜;
文字大写：text-transform:uppercase;
文字小写：text-transform:lowercase;

3、段落属性：

文本缩进：text-indent:2em/-2em;//可正可负
文本对齐：text-align:center/left/right;
文本修饰：text-decoration:none/underline/overline/line-through;
行高：line-height:20px;
字符间距:letter-spacing:2px;
词间距：word-spacing:2px;

4、背景属性：

背景颜色：background-color:#f00;
背景图片：background-image:url(“路径”);
背景平铺：background-repeat:repeat(默认)/no-repeat(不平铺)/repeat-x(水平平铺)/repeat-y(垂直平铺);
背景位置：background-position:left/center/right/top/bottom/数值;
背景属性的缩写写法：background:url(路径) no-repeat center top;

5、列表属性：

list-style-type:none;清除列表的项目符号
list-style-img:url(路径);将一个图片作为项目符号使用
list-style-position:;表明项目符号显示的位置
list-style:disc;小圆点
list-style:circle;实心小圆点
list-style:square;实心正方形

6、定位：

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
语法：选择符{position:value;}
static：默认。标准文档流，默认值，无特殊定位，处于文档流中。
relative:相对定位。不脱离文档流，以自身的位置进行偏移。
absolute:绝对定位。脱标不占位，相对于具有定位属性的父级元素（除了静态定位）偏移。如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位。
fixed:固定定位。是绝对定位的一种特殊形式，以浏览器窗口作为参照物。
注：固定定位始终以浏览器窗口为参照物，不管浏览器的滚动条如何滚动，也不管浏览器窗口大小如何变化它始终以浏览器窗口作为参照物。

7、浮动：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
float:left/right;
float:left;左浮动，使块元素在一行显示。
float:right;右浮动，使块元素在一行显示。

8、其它常用属性：

border  边框
width （宽） height （高） 
颜色 border-color ;

样式：border-style: dotted solid dashed none;
宽度：border- 2px;
border:宽度 颜色 样式（不能省略）
上边框颜色 border-top-color:
下边框复合属性 border-bottom:

9、边距和填充

外边距 margin
设置元素外边距的宽度
margin-topottomleft ight
margin 复合属性，顺序为上右下左
padding内边距
内容和边框之间的的距离
padding-topottomleft ight
padding 复合属性 上右下左

10、z-index属性

设置元素的层叠顺序，属性值为无单位的整数值，值较大的元素会叠加在值较小的元素之上
元素可拥有负的z-index属性值，默认值是：auto,默认层是：0层
当没有设置、属性或者层数相同时，后面的元素显示在上面
z-index的属性值，只能为整数，正整数，0，负整数

11、display属性

none不显示
inline-block行内块元素
block块元素
inline行内元素

12、overflow属性

指定对于盒中容纳不下的内容的显示方式
visible可见（默认值）
hidden隐藏
scroll滚动-一定出现滚动条
auto自动-按需出现滚动条

13、visibility 属性

设置可见性
visible：设置对象可视
hidden：设置对象隐藏

visibility:hidden与display:none的区别
visibility:hidden设置不可见的元素也会占据页面上的空间
display:none不可见的元素, 属性不占据页面空间

二、盒子模型

所谓盒子模型，在HTML里，所有页面元素都可以看成一个一个的框（盒子），这些元素与元素之间的距离，元素的边框，元素与元素之间的距离都会影响元素的位置和元素本身的宽和高。

 

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

　　1、matgin外边距

　　元素与元素之间的距离叫做外边距

 

1. margin-top:40px;
3. margin-left:30px;
5. margin-bottom: 40px;
7. margin:10px 20px 30px 40px;/* 上 右 下 左 */
9. margin:10px 20px 30px;/*上 左右 下*/
11. margin:10px 20px;/*上下 左右*/
13. margin:10px;/*上下左右*/

垂直外边距的合并现象：如果两个元素在垂直方向的外边距相遇时，将会有合并的现象，合并后的结果是，取两个外边距之中的较大者来作为两个元素的外边距！

如何让块级元素居中显示：margin：0px auto；（左右自适应）

　　2、border边框

　　n多样式，百度

　　3、padding内边距（填充）

1. padding-top:40px;
3. padding-left:30px;
5. padding-bottom: 40px;
7. padding:10px 20px 30px 40px;/* 上 右 下 左 */
9. padding:10px 20px 30px;/*上 左右 下*/
11. padding:10px 20px;/*上下 左右*/
13. padding:10px;/*上下左右*/

　　元素的实际宽度=元素设置的宽度+元素的左右边框宽度+左右内边距+左右外边距

　　元素的实际高度=元素设置的高度+元素的上下边框宽度+上下内边距+上下外边距