【日常记录】CSS常用布局技巧

CSS常用布局技巧

整理目前学会的布局技巧，后续会添加更多。

1.左右布局

利用float
做法：

1.给父元素添加clearfix类

   .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }

2. 给子元素设置float
效果预览

2.左中右布局

1. 给父元素添加clearfix类，代码同上
2. 给子元素设置float
效果预览

3.水平居中

1. 块元素定宽

margin：0 auto;
text-align:center

2. 内联元素
给父元素设置text-align:center
给子元素设置display:inline-block

4. 垂直居中

假设父元素是高度确定的块元素
1. 子元素是行内元素，高度是由其内容撑开的
设置父元素的line-height与其高度一致
2. 子元素是不定高块级元素
给父元素设定display:table-cell;vertical-align:middle;
3. 子元素是定高块元素
计算子元素的margin-top或margin-bottom，为（父元素高度-子元素高度）/ 2。

5.其他

理解文档流对我们进行布局有益。
文档流：Normal Flow
直接看英文反而更容易理解这个词语的含义，直译 （正常的流动）
何谓正常的流动：我们没有改变默认布局规则下的页面布局方式。
默认的布局方式：

1. 块级元素按照在文档中书写出现的顺序放置 —自上而下，每个元素各占一行，它们会被设置好的margin 分隔。
2. 内联元素从左往右，宽度不够就换行。
3. 两个或多个块级元素的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。

元素的高度由什么决定
div高度由其内部文档流元素的高度总和决定。
span元素的高度由建议行高和字体的相关设计决定的。总之，这个span的高度归根到底还是由设计师决定的，前端无法确定。

本文为番茄小火锅的原创文章，版权归本人和饥人谷所有，转载请注明出处。