2018-09-19 CSS布局
今天主要学习CSS布局。
一、标准流和display属性
1.标准流：浏览器对标签默认的布局方式就是标准流
2.标准流布局原则：
块级：a.块级标签一个占一行(不管标签的宽度是否是父标签的宽度)。
b.默认宽度是父标签的宽度，默认高度是内容的高度
c.直接设置宽高有效
行内块标签：
a.多个行内块可以在一行显示
b.默认的宽高都是内容的宽高
c.直接设置宽高有效
行内标签：
a.多个行内可以在一行显示
b.默认的宽高都是内容的宽高
c.直接设置宽高无效
3.display属性：转换标签的性质
block:块级
inline:行内
inline-block:行内块
注意：行内块标签和其他标签之间默认有间隙，而且这个间隙无法消除
二、浮动
1.怎么浮动
通过给float属性赋值为left或者right来让标签浮动。浮动会让标签脱流。
浮动的目的就是让竖着显示的可以横着来(针对块)
2.浮动的效果:
a.所有的标签浮动后，一行可以显示多个；默认的宽高是内容的大小；可以设置宽度和高度
b.一行显示不了的时候才会自动换行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id="div1" style="background-color: rgba(255,255,0,0.3); width: 50%; height: 100px; float: left;">
</div>
<div id="" style="background-color: slateblue;width: 40%; height: 150px; float: left;">
</div>
<div id="div2">
</div>
</body>
</html>
三、清除浮动
1.定义：
清除浮动：清除浮动不是将标签的浮动给去掉，而是清除因为浮动而产生的高度塌陷的问题。
高度塌陷：父标签不浮动，子标签浮动，并且不设置父标签的高度，就会产生高度塌陷的问题(父标签)。
2.方法
方案一：添加空盒子，在高度塌陷的标签(父标签)的最后添加一个空的div,并设置样式clear的值为both。
方案二：给父标签添加样式设置overflow的值为hidden。
方案三: 万能清除法。
#father:after{
display: block;
clear: both;
content: '.';
visibility: hidden;
height: 0;
}
#father{
zoom: 1;
注意：father为父标签。
四、定位
CSS中可以通过left,right,bottom,top属性来设置标签到上下左右的距离(但是默认情况下这些值不是都有效的);
想要让定位属性有效，必须通过position属性来设置参考对象。
1.position
initial: 默认值, 没有相对定位。
absolute: 相对第一个非static/initial父标签进行定位。
relative: 相对于自己在标准流中位置来定位。（当标签本身不希望去定位，只是想让自己的子标签可以相对本身来定位的时候使用）。
fixed：相对于浏览器定位。
sticky:当网页的内容不超过一屏(不滚动)的时候，就按照标准流进行定位。超过了就相对浏览器定位。
2.注意：如果想要设置right值要保证相对标签的宽度是确定的。如果想要设置bottom值要保证相对对象的高度是确定的。
3.技巧：当遇到某个方向定位死活都无效的时候，可以尝试让这个标签浮动，然后再定位。
