CSS3一些总结

1.标准流

2.浮动

1. 浮动的元素将脱离标准流
2. 浮动后的元素不会占有原有的位置
3. 浮动有 左浮动 | 右浮动 | 不浮动
4. 浮动的元素不会浮出当前元素的父元素之外，即浮动元素的外边缘不会超出其父元素的内边缘。
5. 浮动元素之间不会重叠。
6. 没有上下浮动
7. 设置浮动属性后，display属性将完全失效，元素将可以设置宽高，且不会独占一行。

1.清除浮动

在使用浮动之后，清除浮动是必不可少的。
语法：

clear: left | right | both

清除浮动的常用方式：

1. 结尾处添加空div标签， clear: both。[或在下一个元素上加 clear: both]
2. 浮动元素的父级div 添加 overflow: hidden;
3. 浮动元素的父级定义宽高属性。

3.定位

1.属性值

1.relative[相对定位]

1. 以当前相对定位的元素 原有的位置 作为参照物 移动指定的距离
2. 相对定位的元素移动后，原有的位置 仍然 会被占用

2.absolute[绝对定位]

1. 绝对定位的元素移动后，原有的位置不会被占用
2. 以其他定位的元素[默认值static不算]作为参照物移动指定的距离
3. 视为树型结构，将当前绝对定位的元素作为叶子节点向树的根级查找最近且具有定位属性的元素作为参照物品，之后进行移动。若查找到根级仍然未找到，则以body作为参照物。

3.fixed[固定定位]

1. 以当前浏览器窗口作为参照物固定元素。页面的滚动不会引起元素位置的变化。

4.static

1. 默认值，无任何意义。

2.z-index[堆叠顺序]

1. 元素使用定位属性后，元素之间可能会发生堆叠。
2. 可以使用z-index属性调整元素之间的重叠顺序
3. z-index属性仅可以在使用了定位的元素上使用
4. 数值型，值越大越在前面，若为负值，则表示越在后面。

4.display

CSS规范规定，每一个网页元素都有一个display属性，用于确定该元素的类型。例如div元素，默认display属性值为"block"，称之为"块元素"，span元素的默认display属性值为"inline"，称之为"行内元素"。
块元素与行元素之间是可以互相转换的。
块元素：具有宽高属性，并且独占一行。
行元素：没有宽高属性，不会独占一行。
行内块元素：具有宽高属性，不会独占一行。
display常见属性值

• none：隐藏对象
• inline：指定对象为内联元素(行内元素)
• block：指定对象为块元素
• inline-block：指定对象为内联块元素
• table-cell：指定对象作为表格单元格
• flex：弹性盒

5.盒子模型

盒子模型是css中一个重要的概念，通过理解盒子模型才能对页面进行更好的排版。
W3C组织建议把网页上的元素看成是一个一个的盒子。
盒子模型主要定义四个区域：内容（content）、内边距（padding）、边框（border）、外边距（margin）
元素实际宽度 = 左右侧外边距 + 左右侧边框 + 内容声明宽度 + 左右侧内边距

1.外边距

围绕在元素边框周围的空白区域

• 会在元素外创建额外的空白区域
• 外边距是透明的
  语法

margin: value;

1.外边距简写

margin: value;	/*四个方向相同*/
margin: value(上下) value(左右);
margin: value(上) value(左右) value(下);
margin: value(上) value(右) value(下) value(左);

2.外边距合并

外边距合并 形成一个外边距

• 块级元素的垂直相邻的外边距会合并
• 行内元素没有外边距。
• 浮动元素的外边距不会合并
• 外边距值可以设置为负值，需要小心使用。

1.上下合并

当两个块状元素上下排列，且都具有外边距属性，则上下以最大的外边距距离进行合并。

2.包含合并

当一个块状元素包含一个块状元素，且都具有外边距属性，则外边距会自动合并。
解决方案：为父块状元素添加一个边框属性即可。

2.边框

• 会扩大元素边框所占用的区域

边框三要素：宽度、边框样式、颜色
语法

border: 1px solid red; /*简写*/
border-width: ; /*可选，边框宽度，默认3像素*/
border-style: ; /*必选，边框样式，不写则不显示边框*/
border-color: ; /*可选，边框颜色，默认黑色*/

边框样式有五种常用样式可选：

• dotted - 点状
• solid - 实线
• double - 双线（宽度最起码设置为3像素，否则显示不下）
• dashed - 虚线
• none - 无边框

3.内边距

• 内容区域和边框之间的空间
• 会扩大元素边框所占用的区域
  语法

padding: value;

值可以为像素或者百分比，不可为负数

1.内边距简写

padding: value;	/*四个方向相同*/
padding: value(上下) value(左右);
padding: value(上) value(左右) value(下);
padding: value(上) value(右) value(下) value(左);

4.盒子模型

• 标准盒（W3C规范标准）

• 怪异盒（IE盒模型）
  通过Box-sizing切换盒子模型

• conteng-box（标准）
  padding和border不被包含在width和height内，元素的实际大小为宽高+border+padding，此为标准模式下的盒模型

• border-box（怪异）
  padding和border被包含在定义的width和height中，元素实际的大小为你定义了多宽就是多宽。此属性为怪异模式下的盒模型。