2018-10-31 第二阶段 day3-css属性

1.标准流和浮动

1.标准流
标准流布局：在标准流中，块级标签是一个占一行，默认宽度是父标签的宽度，默认高度是内容的高度并且可以设置宽度和高度
行内标签，一行可以显示多个，默认宽度和高度都是内容的宽度和高度，设置宽高无效
行内块，一行可以显示多个，默认宽度和高度都是内容的宽高，设置宽高有效
块级标签：h1-h6, p, hr,ol/ul/dl/il,table, tr, div
行内标签:a, img, td, input, select, option, textarea,span

2.display属性

2.display(设置标签的性质)
block-将标签设置为块级标签
inline-block-将标签设置为行内块标签（注意：一般不会通过将标签转换成行内块来解决，因为行内块标签在显示的时候左右中间会有不能消除的空隙）
inline-将标签设置为行内标签

3.float属性

1.浮动的原理
a.浮动会让标签脱离标准流进行布局（脱流）
b.没有浮动的标签既占池底的位置，也占水面的位置，浮动后只占水面的位置

2.float属性
lef-左浮动
right-右浮动
3.脱流后的布局规则:不管什么标签，脱流后都是一行可以显示多个，可以设置宽度和高度

4.清除浮动

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

2.高度塌陷
当父标签不浮动，并且不设置高度；但是子标签浮动的时候就会产生高度塌陷问题

3.清除浮动的方法：
a.添加空的div： 在父标签的最后添加一个空的div,并且设置样式clear属性的值为both
b.在会塌陷的标签中添加样式，将overflow属性的值设置为hidden

5.文字环绕效果

文字环绕：被环绕的标签(例如图片对应的标签)浮动；文字对应的标签不浮动

6.定位

css可以通过letf,right,top,bottom来对标签进行定位，前提是设置好参考对象
1.定位的属性：
left-标签左边距
right-标签右边距
top-标签上边距
bottom-标签上边距

注意：a.定位需要通过position属性来设置参考对象
b.当标签的宽度固定的时候，同时设置left和right只有left有效(top和bottom同理)
c.可以同时设置left和right,不设置宽度或者宽度值为auto的时候，标签会自动拉伸
2.position属性
initial（默认值）
static-不希望自己的子标签相对自己定位的时候才使用static（）
absolute-相对第一个非static和非initial的父标签进行定位
relative-相对于自己在标准流中的位置定位,如果一个标签希望自己的子标签能够相对自己定位就设置这个标签的position为relative自己不定位
fixed-相当于浏览器定位
sticky-粘性定位，值针对网页底部的标签定位，如果网页内容超过一屏（需要滚动）的时候，相对浏览器定位否则相对标准流定位

7.盒子模型

html中所有可见的标签都是盒子模型，有固定的结构，包括：内容，padding,border,margin四个部分
内容-可见的，设置width和height实质就是设置内容的大小，默认大小跟标签中的内容有关
添加子标签或者设置文字内容，都是添加或者显示在内容部分的
可以background-color会作用于内容部分
padding-可见的，分上下左右四个部分，一般没有默认都是0，
background-color会作用于padding
border-可见的，分上下左右四个部分，一般默认都是0
border的背景颜色需要单独设置
margin-不可见，但是占位置，分上下左右四个部分，一般默认是0