Day 3-note

Day 3

1.标准流布局

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

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

3. display属性

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

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

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

2.float

1. float属性

left(左浮动)
right(右浮动)

3.内容环绕现象

浮动内容环绕现象：

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

4.清除浮动

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

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

2）清除浮动的方法

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

5.定位

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

initial/static  --  不定位，默认值，但是body的不是它们
absolute  --  绝对定位，相对第一个position属性不是initial/static的父标签进行定位
relative  --  相对定位相对标准流定位(相对于原标签在标准流中的位置进行定位)
fixed  --  相对浏览器定位
sticky  --  定位保持网页中最后一个块在最后面(网页滚动的时候在浏览器的最下面，网页不超过一屏在内容后面)

2. left\right\top\botton

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

6.盒子模型

1. html中每个可见的标签都是一个盒子模型，由content、padding、border、margin组成
   1）content -- 内容，设置宽和高其实是设置内容的大小，添加子标签是添加在内容上；设置背景颜色和背景图都会作用于内容部分
   2）padding -- 内容外面的可见部分(默认没有)，有4个方向；设置padding会让标签变大设置背景颜色和背景图都会作用于padding部分

/*2.padding*/
/*一起设置4个方向的padding的值为50px*/
/*padding: 50px;*/

3）border -- 边框，有4个方向，可以单独控制每个方向的大小、颜色、样式

/*3.border
 * 1）一起设置
 * 格式 - border:边框的宽度  边框样式  边框颜色
* 边框样式 - solid实线、dashed虚线、dotted*/

4）margin -- 内边距，有4个方向，不可见，但是占位置

/*4.margin*/
/*1) 一起设置*/
/*margin: 20px;*/