前端面试常问的CSS盒子模型和flex布局

CSS盒子模型

盒子组成部分

内边距：padding（出现在内容与盒子边缘之间）

边框线：border

外边距：margin（出现在盒子之外）

盒子模型尺寸计算

盒子尺寸=内容尺寸+边框尺寸+内边距尺寸，所以给盒子加上border/padding会撑大盒子。

解决办法：

• 手动做减法，调整内容大小
• 内减模式：box-sizing:border-box

边框线

属性名：border

属性值：边框线粗细 线条样式 颜色

线条样式属性值：

• solid（实线）
• dashed（虚线）
• dotted（点线）

设置单方向边框线

属性名：border-方位名词（bd+方位名词首字母，例如，bdl）

案例：巧用层叠性

内边距

作用：设置内容与盒子边缘之间的举例

属性名：padding-方位词

内边距多值写法：

取值个数	示例	含义
一个值	padding:10px;	四个方向内边距均为10px
四个值	padding:10px 20px 40px 80px;	上: 10px; 右: 20px; 下: 40px; 左: 80px
三个值	padding:10px 40px 80px;	上: 10px; 左右: 40px; 下: 80px
两个值	padding:10px 80px;	上下: 10px; 左右: 80px

外边距

作用：拉开两个盒子之间的距离

属性名：margin

提示：与padding属性值写法、含义相同

版心居中

有宽度的块级元素，左右外边距设置为auto即可。

margin: 0 auto;

外边距问题1：合并现象

场景：垂直排列的兄弟元素，上下 margin会合并。

现象：取两个margin中的较大值生效

外边距问题2：塌陷问题

场景：父子级的标签，子级的添加上外边距会产生塌陷问题。

现象：导致父级一起向下移动

解决方法：

• 取消子级margin，父级设置padding
• 父级设置 overflow:hidden
• 父级设置 border-top（加一个透明边框border-top: 1px solid transparent;）

行内元素内外边距问题

场景：行内元素添加margin和padding，无法改变元素垂直位置。

解决方法：给行内元素添加line-height可以改变垂直位置

模型效果

圆角效果

作用：设置元素的外边框为圆角

属性名：border-radius

属性值：数字+px/百分比

圆角多值写法：

取值个数	示例	含义
一个值	border-radius: 10px;	四个角均为10px
四个值	border-radius: 10px 20px 40px 80px;	左上:10px; 右上:20px; 右下:40px; 左下:80px
三个值	border-radius: 10px 40px 80px;	左上:10px; 右上+左下:40px; 右下:80px
两个值	border-radius: 10px 80px;	左上+右下:10px; 右上+左下:80px

阴影效果

作用：给元素设置阴影效果

属性名：box-shadow

属性值：X轴偏移量、 Y轴偏移量、 模糊半径、 扩散半径、 颜色、 内外阴影

注意:

• X轴偏移量和Y轴偏移量必须书写
• 默认是外阴影，内阴影需要添加inset

清除默认样式

标签其实是自带一些内外边距样式的，所以为了不让这些默认样式干扰到我们，我们需要清除这些默认样式。

一般CSS整体样式清除：

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

元素溢出

作用：控制溢出元素的内容的显示方式。

属性名：overflow

属性值：

• hidden：溢出隐藏
• scroll：溢出滚动(无论是否溢出都显示滚动条)
• auto：溢出滚动（溢出才显示滚动条）

Flex布局

标准流

标准流也叫文档流，是指标签在页面中默认的排布规则，例如：块级元素独占一行，行内元素可以一行显示多个。

浮动

作用：让块级元素水平排列

属性名：float

属性值：

• left：左对齐
• right：右对齐

特点：

• 浮动后的盒子顶对齐。
• 浮动后的盒子具备行内快的特点。
• 浮动后的盒子托标，不占用标准流的位置。

浮动的本质作用是用来实现：图片环绕文字效果。

清除浮动

额外标签法

在父级元素内容的最后添加一个块级元素，设置CSS属性clear：both。这种方法简单易懂，但会增加不必要的HTML标记，降低代码的语义化和维护性。

<div class="parent">
    <div class="float-left">浮动元素</div>
    <div class="float-right">浮动元素</div>
    <div style="clear:both;"></div>
</div>

伪元素法

单伪元素法：这是额外标签法的升级版，使用CSS伪元素来代替额外的空标签。

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

双伪元素法：在父元素的内容前后都添加伪元素，这样可以确保兼容性更好。

.parent:before,
.parent:after {
    content: "";
    display: table;
}
.parent:after {
    clear: both;
}
.parent {
    *zoom: 1; /* 如果需要兼容IE6和IE7，可以加上这个属性 */
}

overflow属性

给浮动元素的父元素设置overflow: hidden或overflow: auto属性可以触发块级格式化上下文（Block Formatting Context, BFC），从而清除浮动。这种方法代码简洁，但可能会导致内容被意外隐藏或出现滚动条。

.parent {
    overflow: hidden; /* 或者 overflow: auto; */
}

clearfix类

使用 clearfix 类是清除浮动的一种常见且推荐的做法。这种方法利用了CSS的伪元素，并且不会在HTML中添加额外的标签。

下面是如何定义和使用 clearfix 类的步骤：

1. 首先，在CSS中定义一个名为 .clearfix 的类：

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

2. 然后，在你的HTML中，只需要在浮动元素的父容器上添加 clearfix 类：

   <div class="parent clearfix">
       <div class="float-left">浮动元素</div>
       <div class="float-right">浮动元素</div>
       <!-- clearfix类会确保这里的浮动被清除 -->
   </div>
   

Flex组成

设置方式：给父元素设置display:flex，子元素可以自动挤压或者拉伸。

组成部分：

• 弹性容器
• 弹性盒子
• 主轴：默认在水平方向
• 侧轴/交叉轴：默认在垂直方向

所有属性：

作用	属性
创建flex容器	dispaly：flex
修改主轴方向	flex-direction
主轴对齐方式	justify-content
侧轴对齐方式	align-items
行对齐方式	align-content
单独控制对齐	align-self
弹性盒子换行	flex-wrap
弹性伸缩比	flex

主轴对齐

属性名：jsutify-content

属性值：

• flex-start：（默认值）弹性盒子从起点开始依次排序
• flex-end：弹性盒子从终点开始依次排序
• center：弹性盒子沿主轴居中排列
• space-between：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间（两侧没缝隙）
• space-around：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧（缝隙一样大）
• space-evenly：弹性搁置沿主轴均匀排列，弹性盒子与容器之间间距相等（中间两倍缝隙）

侧轴对齐

属性名：align-items

属性值：

• stretch：弹性盒子沿侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向则默认拉伸）
• center：弹性盒子沿侧轴居中排列
• flex-start：弹性盒子从起点开始依次排列
• flex-end：弹性盒子终点开始依次排列

单独控制对齐

属性名： align-self

属性值：与侧轴对齐方式一致👆

案例：

.box div{
	width:100px;
	height:100px;
	background-color:pink;
	border-radius:50%;
}

.box div:nth-child(2){
	align-self:center;	//单独让第二个小圆居中
}

弹性盒子换行

弹性至可以自动挤压或拉伸，默认情况下，所有弹性盒子都得一行上显示。

属性名：flex-wrap

属性值：

• weap：换行
• nowrap：不换行（默认）

修改主轴方向

属性名：flex-direction

属性值：

• row：水平方向，从左向右（默认）
• column：垂直方向，从上往下
• row-reverse：水平方向，从左到右
• column-reverse：垂直方向，从下往上

弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸。

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数。

圣杯布局

圣杯布局的原理：两侧固定，中间自适应。

.left,
.right{
	width:100px;
	background-color:skyblue;
}
.center{
	flex:1;
	background-color:pink;
}