01 CSS

都挺好，刚刚好

已于 2022-09-28 15:42:15 修改

阅读量175

点赞数

分类专栏：面试题文章标签： css html html5

于 2020-10-20 18:03:14 首次发布

本文链接：https://blog.csdn.net/seimeii/article/details/109183989

版权

面试题专栏收录该内容

29 篇文章 1 订阅

订阅专栏

1、如何让一个盒子垂直水平方向居中

1. 定位1 需要知道盒子的宽高

2. 定位2 盒子必须要有宽度和高度但是不用考虑必须是多少

3. 定位3 只兼容到IE9以上

4. display：flex （IE10 移动端经常使用这个）

在这里插入图片描述

5. js方法 js实现就是模拟css写样式

在这里插入图片描述

6. 基本不怎么使用 display：table-cell 主要是控制文本的所以要将盒子变成文本固定宽高的父级

在这里插入图片描述

2、CSS盒子模型

content、padding、border、margin

标准盒模型（content-box）、ie怪异盒模型（border-box）、flex弹性伸缩盒模型、column多列盒模型

怪异盒模型的好处，固定到border控制宽高，不用重新计算padding和border

1. 其实我们最常用的就是标准盒模型，标准盒模型写的width和height代表的是内容的宽高，并不是盒子的宽高，盒子的宽高是content+padding+border计算得来的，这个容易在项目中遇到一些问题，

padding和border都会撑大盒子，所以给了盒子padding和border之后，需要手动更改一下宽高，后来CSS3添加了ie盒模型，我们写的宽高是盒子的大小，当我们给盒子添加了padding与border值之后，盒子的大小不会改变，会自动缩放内容，这个用起来比较方便，所以我在真实项目中大多数都使用IE盒模型。

2. 在做移动端开发的时候，多应用于flex弹性伸缩盒模型

flex详见阮一峰的flex布局

3. 多列布局（基本上不用）

4. 多突出自己项目中遇到哪些问题点，所以我用了这种方案，它能帮助我解决哪些问题。并且提出自己看过一些源码，它是怎么做的。

3、几大经典布局

–左右固定、中间自适应

1. 圣杯布局

      ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201020180917536.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NlaW1laWk=,size_16,color_FFFFFF,t_70#pic_center)

在这里插入图片描述