当前位置：首页 > news >正文

CSS记录

news 2025/8/28 8:04:30

1.标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

标准盒子模型box-sizing: border-box; 宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

通过属性box-sizing进行区分，标准盒模型box-sizing为默认值：content-box; 低版本IE盒子模型box-sizing:border-box

2.IE盒模型——实际运用场景

如以下整个区域分为外面的边框和绿色框的商品展示区。外面的边框区域宽高固定。如果想要让绿色框的商品展示区随着外面的边框的宽高自适应，就可以设置父级容器box-sizing: border-box；子级设置width和height为100%即可。这个是外部宽高固定的情况下

如果宽高不固定就可以使用标准盒模型

3.flex布局

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

3.1思考？有三个div，在不适用flex布局的前提下，想让其横向布局怎么实现？

使用浮动float; ——float:left 全部向左浮动
display改为行内块级元素; —— 三个子元素中使用display: inline-block
定位

3.2 flex-wrap指定 flex 元素单行显示还是多行显示。

nowrap（默认）：不换行（如果子元素宽度超过父容器宽度会压缩子元素宽度）
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方

3.3不使用display:flex情况下，怎么让几个div横向居中？

横向：子元素中display:inline-block或者float浮动，或者定位

横向居中：父级元素中使用text-align:center

注意定位一般能不用就不用，因为定位布局会脱离文档流

4.重点：如何让一个盒子水平垂直居中

行内块级水平垂直居中方案（子元素使用display: inline-block；vertical-align: middle; 父元素使用text-align: center; line-height: 元素高度）
通过定位实现水平垂直居中：分为知道子元素宽高和不知道子元素宽高两种情况（父相子绝定位+margin/transform）
使用flex布局

4.1 块级行内水平居中

子元素使用display: inline-block；vertical-align: middle; 父元素使用text-align: center; line-height: 元素高度

注意：ertical-align: middle必须设置在子元素中

<style>.parent {width: 400px;height: 400px;background-color: gray;margin: 0 auto;line-height: 400px;text-align: center;}.child {width: 200px;height: 200px;background-color: aqua;display: inline-block;/* 注意垂直居中设置在子元素中 */   vertical-align: middle;}</style>
</head>
<body><div class="parent"><div class="child"></div></div>
</body>

4.2通过定位实现水平垂直居中：分为知道子元素宽高和不知道子元素宽高两种情况

知道宽高情况下：父元素相对定位，子元素绝对定位；left:50%和top:50%; margin-top:负子元素高度一半；margin-top:负子元素宽度一半；

不知道宽高时：使用transform。父元素相对定位，子元素绝对定位；left:50%和top:50%; transform: translate(-50%,-50%)

<style>.parent {width: 400px;height: 400px;background-color: gray;margin: 0 auto;position: relative;}.child {width: 200px;height: 200px;background-color: aqua;position: absolute;top:50%;left: 50%;/* transform: translate(-50%,-50%); */margin-top: -100px;margin-left: -100px;}</style>
</head><body><div class="parent"><div class="child"></div></div>
</body>

4.3使用flex布局

5.用纯CSS创建一个三角形的原理是什么？宽高设置为0，其中边框宽度设置为宽度宽，边框任意三边颜色设置为透明transparent

/*加一个四色的正方形*/
width: 100px;
height: 100px;
border-top: 1px solid purple;
border-left: 1px solid orange;
border-right: 1px solid blue;
border-bottom: 1px solid #ff0000;
/*四个三角形*/width: 0;height: 0;border-top: 100px solid purple;border-left: 100px solid orange;border-right: 100px solid blue;border-bottom: 100px solid #ff0000;/*元素宽度和高度设置为0，设置一个边框为元素宽度一样，给其他三边边框颜色设置为透明属性transparent，就能形成三角形*/width: 0;height: 0;border-top: 100px solid transparent;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 100px solid #ff0000;