标准流
1.什么是标准流
标签在没有添加布局相关的样式的时候，在浏览器中默认的布局方式
块级标签在标准流中是一个占一行（不管宽度是多少），默认宽度是父标签的宽度；设置高度有效
行内标签在标准流中一行可以显示多个；默认大小是内容的大小；设置宽高无效（span、a）
行内块标签在标准流中一行可以显示多个；默认大小是内容的大小；设置宽高有效（img、input）
2.实际布局的结构
a.左右结构是由行内块标签
display属性 - 可以让任何标签变成块级、行内、行内块；隐藏标签
b.脱流/脱标（脱离标准流）
float（浮动）
定位（letf，right，top，bottom，position）
display属性
display属性（css属性）
block（块）
inline（行内）
inline-block（行内快）- 默认左右间隙（因为换行产生的），这个间隙可以通过将父标签的字体大小设置为0来去掉
none（隐藏）
float属性
浮动
浮动会让标签脱流
脱流 - 让标签脱离标准流布局，不管什么标签脱流了
都是一行可以显示多个，默认大小是内容大小，设置宽高有效的方式布局
float属性
left - 向左浮动
right - 向右浮动
文字环绕：被环绕的标签浮动没蚊子不浮动
清除浮动
1.高度塌陷
当父标签不浮动，子标签浮动的时候，父标签就会产生高度塌陷的问题
2.清除浮动
清除浮动指的是清除因为浮动而产生的高度塌陷
a.方法一：添加空盒子
在高度会坍塌的父标签的最后添加一个空的div；然后给空的div的class附一个clear
b.（记住） 方法二 ： overflow
给高度会塌陷的父标签，添加样式设置overflow属性值为hidden
c.方法三：万能清除法
选中会高度塌陷的那个父标签，给after状态添加样式
.clear:after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
定位
1.定位
定位会让标签脱流
2.定位属性：
top - 顶部的距离
bottom - 底部的距离
left - 左边的距离
right - 右边的距离
以上4个属性想要有效，必须通过position属性来说明参考对象
position：
initial和static - 默认值，不能定位（定位无效）
absolute - 绝对定位；以第一个position的值不是默认值的父标签进行定位
（注意：body标签的position不是initial和static）
relative - 相对定位；相对于标准流定位（相对自己在标准流中的位置进行定位）；
一般使用relative是标签本身不需要定位，但是希望自己的子标签相对自己定位的时候使用
fixed - 相对于浏览器定位
sticky - 当浏览器内容没有超过一屏的时候，显示在内容的最下面；当浏览器内容超过一屏bottom有效，
并且显示在浏览器的底部（top和bottom有效，left和right无效）
盒子模型
1.盒子模型
网页上所有的可是标签都是一个盒子模型
一个标签是由4部分组成，分别是：内容content、padding、border、margin；
其中content、padding、border是可见的，margin不可见，但是占位
2.盒子模型的每个部分
content - 标签内容；设置标签的的宽高其实是作用于content；标签中的文字和子标签都添加在content上
padding - 在内容外部，默认是0；可见的，并且背景颜色也作用于padding
border - 边框；默认是0，可见的有四个方向；颜色和大小都是可以单独设置的
/*3.border */
/*单独设
* border - 方向：边框宽度 边框风格 边框颜色
* 边框风格： solid（实线）/dashed（虚线）/dotted（点划线）/double（双线）
*/
网友评论