css知识整理

定位

文档流

是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子占据自己的位置。

relative

相对元素定位，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移

absolute

绝对定位，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。

fixed

生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。

static

默认值。没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。约等于标准流

inherit

从父元素继承position属性的值。

总结：

• relative相对正常位置，absolute相对最近的已定位父元素。
• relative不可以设置大小，absolute可以设置大小。
• absolute和fixed的块元素会自动转化为行内块元素。模式转换
• 定位元素是浮动在正常的文档流之上的，可以用z-index属性来设置元素的层级。
• 父相子绝

使用场景

当页面中出现盒子压盒子的效果是，推荐使用定位。

拓展

标准流盒子居中：

margin： 0 auto；

绝对定位的盒子居中显示

left：50%；/*父元素的宽度一半*/
margin-left：/*元素自己的宽度一半*/

浮动特性

• 浮动的盒子会向左向右浮动，碰到父元素边界，浮动元素、未浮动的元素才停下来
• 相邻元素的块元素可以并在一行，超出父元素宽度就换行
• 浮动让行内元素自动转化为行内块元素
• 浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字环绕的效果
• 父元素内整体浮动的元素无法撑开父元素，需要清除浮动，如果不清除浮动，父盒子的宽度为0
• 浮动元素之间没有垂直margin的合并
• 浮动的盒子不需要给宽，大小根据自己的内容决定。

元素分类

块元素

代表标签

div，p，ul，li，h1~h6，dl，dt，dd

特点

• 支持全部的样式
• 如果没有设置宽度，默认的宽度为父级宽度100%
• 盒子占据一行，即使设置了宽度

内联元素（行内元素）

代表标签

a，span，em，b，strong，i

特点

• 支持部分样式（不支持宽，高，margin上下，padding上下）
• 宽高由内容决定
• 盒子并在一行
• 代码换行，盒子之间会产生间距
• 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置垂直对齐方式

解决内联元素间隙的方法

• 去掉内联元素之间的换行
• 将内联元素的父级设置font-size为0，内联元素自身再设置font-size

内联块元素（行内块元素）

特点

• 支持全部样式
• 如果没有设置宽高，宽高由内容决定
• 盒子并在一行
• 代码换行，盒子会产生间距
• 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置垂直对齐方式

应用场景

实际开发中，块元素用的比较多，所以经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。

转载于:https://www.cnblogs.com/zhoujingguoguo/p/11539577.html