前端CSS布局

一.标准流布局

1.标准流布局

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

a.块级标签

一个占一行；默认宽度是父标签的宽度，默认高度是内容的高度；设置宽高有效。
h1~h6、p、div、列表相关…

b.行内标签

一行可以显示多个；默认大小是内容的大小；设置宽度无效。
a、span、label、font.

c.行内块标签

一行可以显示多个；默认大小是内容的大小；设置宽高有效。
img、输入框

2.display属性（css）

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

二. 浮动

1.脱流

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

2.浮动 - float

left - 左浮动
right - 右浮动

三.浮动原理

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

四。浮动应用

1.浮动的应用：

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

五.清除浮动

• 清除浮动： 清除因为浮动而产生的高度塌陷的问题
• 1)高度塌陷: 父标签不浮动并且没有设置高度，子标签浮动就可能产生高度塌陷(没有设置高度的父标签会塌陷)
• 2)清除浮动：
  a.空盒子法：在高度会塌陷的标签的最后添加一个空的div，并且设置它的clear属性为both
  
  
  b.设置overflow: 设置高度会塌陷的标签的overflow属性为hidden

六。定位

1.定位

定位的属性有四个：left、right、top、bottom
left：设置标签的左边到另外一个标签的左边距离
right：设置标签的右边到另外一个标签的右边的距离
top：设置标签顶部到另外一个标签的顶部的距离
bottom：设置标签的底部到另外一个标签底部的距离

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

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

7.盒子模型

1.盒子模型

html中每一个可见的标签不管在任何情况下都是由4个部分组成：content、padding、border和margin
1）content：可见的；设置背景会作用于content；设置标签的宽度和高度其实就是在设置conten的宽度和高度；
标签内容和子标签都是添加到content上的
2）padding：可见的；设置背景会作用于padding；padding有四个方向，每个方向可以单独控制
3）border：可见的；border有四个方向，每个方向也可以单独控制
4）margin：不可见但是占位置；有四个方向，每个方向也可以单独控制

2.padding

可以让标签内容和标签的边框在某个方向上保持一个的距离)
1)同时设置4个方向的padding：paddidng:大小;
2）单独设置指定方向的padding: padding-left、padding-right、padding-top、padding-bottom

3.border

1)同时设置4个方向的border：
border:边框大小 边框样式 边框颜色; (边框样式:solid-实线、dotted-点划线、dashed-虚线、double-双实线)
2)单独设置指定方向的border
border-left、border-right、border-top、border-bottom