day21_CSS布局

1.标准流布局

1.什么是标准流

在没有给标签通过CSS布局的时候，标签在浏览器中有一套默认的布局规则，这个规则就是标准流布局

2.标准流布局规则

1. 块级标签：一个占一行(不管标签本身的宽度),设置宽高有效，默认宽度是父标签的宽度,默认高度是内容的高度
   例如: p,h1-h6,hr,div...
   2）行内标签：一行可以有多个；默认大小是内容的大小；设置宽度无效
   例如：a,font,label,,span
2. 行内块标签：一行可以显示多个;默认大小是内容的大小;设置宽度有效
   例如：input,button,img

3.display属性

block - 块级标签
inline - 行内标签
inline-block - 行内块
none - 隐藏

4.脱流/脱标

只要标签脱流,标准的流的规则全部失效;不管什么样的标签在脱离标准流的情况下都是按照以下规则进行布局：
一行可以显示多个;默认大小是内容的大小;设置宽度有效

浮动和定位都可以让标签脱流

2.浮动

float属性

left(左浮动)
right(右浮动)
浮动能够让标签脱流

3.内容环绕现象

浮动内容环绕现象：
被环绕标签浮动，环绕的内容的容器标签不浮动

4.清除浮动

清除浮动:

清除浮动是清除因为浮动而产生的高度塌陷的问题

1) 高度塌陷

当父标签不浮动，并且不设置固定高度；子标签浮动就会产生高度塌陷的问题

2) 清除浮动的方法

a.空盒子法：在高度会塌陷的标签的最后添加一个空的div，并且设置这个空的div的样式的clear属性为both
b.设置高度会塌陷的标签的样式的overflow属性为hidden
c.万能清除法：给高度会塌陷的标签的after状态添加样式{display: block;clear: both;content: "";visibility: hidden;height: 0;}
再给高度会塌陷的标签添加样式属性zoom的值为1

/*IE浏览器才支持:after，zoom(IE转有属性)可解决ie6,ie7浮动问题*/
.clear2:after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.clear2{
zoom: 1; /*为了兼容IE*/
}

5.定位

定位

1.position属性 - 选中定位的标签的参考对象

initial/static - 不定位
absolute - 绝对定位，相对第一个position属性不是initial/static的父标签进行定位
relative - 相对定位，相对标准流定位(相对于原标签在标准流中的位置)
fixed - 相对于浏览器定位
sticky - 定位保持网页中最后一个块在最后面(网页滚动的时候在浏览器的最下面，网页不超过一屏时在内容的最下面)
(类似于微博和手机QQ端最下面的一栏)

2.left\right\top\bottom

设置当前标签的左右上下到参考对象的左右上下的距离
注意：在不给position属性的时候直接设置left\right\top\bottom属性无效

6.盒子模型

盒子模型
html中每个可见的标签都是一个盒子模型，由content、padding、border、margin组成

1. content - 内容,设置宽和高其实是设置盒子内容的大小;添加子标签是添加在内容上的
   设置背景颜色和背景图都会作用于内容部分
2. padding - 内容外面的可见部分(默认没有),有四个方向；设置padding会让标签变大
   即内边距,和内容颜色相同
3. border - 边框,有四个方法，可以单独控制每个方向的大小、颜色、样式
4. margin - 外边距，有四个方向，不可见，但是占位置