CSS布局学习

一，CSS布局

CSS布局就是定义网页各个元素的排列方式，把元素按正确的大小，摆放在正确的位置上

传统PC端布局的三种方式，需要互相配合使用

1，普通流，标准流

2，浮动

3，定位

二，标准流

定义：浏览器在显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

常见标准流排版规则：

1，块级元素：从上往下，垂直布局，独占一行

2，行内元素或行内块元素：从左到右，水平布局，空间不够自动折行

（一）块级元素

display：block ，可设置元素为块级元素，独占一行

典型的块级元素标签：div ，p ，h ，ul ，li ，dl ，dd 等

特点：可以设置宽高，不设置的话宽度相当于父级100%，高度默认由内容撑开

（二）行内元素

display：inline ，可设置元素为行内元素，可以在一行显示，如果超过宽度，会自动换行

行内元素标签：a ，span ，img ，strong ，ins ，em 等

特点：不能设置宽高，宽高由内容撑开

（三）行内块元素

display：inline-block ，可以设置元素为行内块元素（也就是内联块级元素）

行内块元素标签：input ，text area ，button ，select ，img

特点：一行可以显示多个，可以设置宽高，融合了块元素和行内元素

总结应用：块元素、行内元素、行内块元素，三者是可以相互转化的，转化为哪一类根据布局的                      需求来进行调整，例如a标签，想要给它设置宽高，那么就设置a标签为块元素，添加                      display：block转化；想要多个div显示在一行还可以设置宽高，设置display：