前端第三天

CSS布局

一、标准流布局

1.标准流布局

标签在没有布局相关的属性的时候，默认的布局方式就是标准流布局。

• 块级标签：一个占一行；默认宽度是父标签的宽度，默认高度是内容的高度；设置宽高有效。（ h1~h6、p、div、列表相关…）
• 行内标签：一行可以显示多个；默认大小是内容的大小；设置宽度无效。（a、span、label、font…）
• 行内块标签：一行可以显示多个；默认大小是内容的大小；设置宽高有效。（img、输入框）

2.display属性（css）

• block：将标签修改成块级标签
• inline： 将标签修改成行内标签
• inline-block： 将标签修改成行内块
• none：隐藏标签

二、浮动

1.脱流

让标签脱离标准流，不再按照标准流的方式进行布局。浮动和定位都可以让标签脱流。
所有的标签，只要脱离了标准流，布局的方式就只有一种：一行显示多个；默认大小是内容大小；设置宽高有效。

2.浮动 - float

• left - 左浮动
• right - 右浮动

3.浮动原理

如果块标签不浮动，占水面和池底的空间，并且还带着玻璃砖；浮动的标签，只占水面的空间。

4.浮动的应用

• 竖着显示的横着来（页面布局）
• 文字环绕: 被环绕的块浮动，文字块不浮动

5.清除浮动

清除浮动： 清除因为浮动而产生的高度塌陷的问题。
高度塌陷: 父标签不浮动并且没有设置高度，子标签浮动就可能产生高度塌陷(没有设置高度的父标签会塌陷)。
清除浮动：

• 空盒子法：在高度会塌陷的标签的最后添加一个空的div，并且设置它的clear属性为both
• 设置overflow: 设置高度会塌陷的标签的overflow属性为hidden

三、定位

1.定位

定位的属性有四个：left、right、top、bottom

• left：设置标签的左边到另外一个标签的左边距离
• right：设置标签的右边到另外一个标签的右边的距离
• top：设置标签顶部到另外一个标签的顶部的距离
• bottom：设置标签的底部到另外一个标签底部的距离

2.选择定位的参考对象：position

• static/initial(默认值，body例外)：不选参考对象，不定位（设置距离直接无效）
• absolute：绝对定位，选择第一个非static/initial的父标签作为参考对象
• relative：相对定位，相对当前标签在标准流中的位置定位（一般用于让自己成为子标签的参考对象的时候用）
• fixed：相对浏览器定位
• sticky

3.盒子模型

html中每一个可见的标签不管在任何情况下都是由4个部分组成：content、padding、border和margin。

• content：可见的；设置背景会作用于content；设置标签的宽度和高度其实就是在设置conten的宽度和高度；标签内容和子标签都是添加到content上的
• padding：可见的；设置背景会作用于padding；padding有四个方向，每个方向可以单独控制
• border：可见的；border有四个方向，每个方向也可以单独控制
• margin：不可见但是占位置；有四个方向，每个方向也可以单独控制