前端面试笔试题目-CSS专项练习（进阶）

jasmine_qiqi

已于 2022-03-26 14:14:01 修改

阅读量2k

点赞数 2

文章标签：前端 html css

于 2022-03-26 10:14:09 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45065754/article/details/123751253

版权

1、盒模型（content-box）

盒模型是CSS的核心概念，页面中的所有元素都被看作一个矩形盒子，这个盒子包含元素的内容、内边距、边框和外边距。
默认盒模型的width和height只会作用于盒子的内容区，而通过"box-sizing"属性可以改变计算盒子大小的方式。“box-sizing"的默认值为"content-box”，把值只作用于内容区。
默认情况下，width和height是指盒子的内容区域的大小，如果此时给盒子添加内边距或边框，那么会导致整个盒子变大。
现在给类名为"content-box"的盒子设置宽度、高度都为"80px"、内边距为"5px"、边框为"5px solid black"，此时可以打开调试工具查看该盒子的大小，会发现该盒子实际是一个长度为"100px"的正方形，并不是"80px"。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
     
                margin: 0;
                padding: 0;
            }
            .content-box{
     
                width:80px;
                height:80px;
                padding:5px;
                border:5px solid black;
            }
        </style>
    </head>
    <body>
        <div class="content-box"></div>
    </body>
</html>

总结：

标准盒子模型总宽度：width+padding+border+margin

2、盒模型（border-box）

现在给类名为"border-box"的盒子设置"box-sizing"属性为"border-box"，此时width和height的值不仅会作用于内容区，并且还会包括内边距和边框。
很多人将"border-box"称为怪异盒模型，其实并不怪异。因为现实中的盒子就是这样测量的。比如快递盒，当用安全气囊包裹易碎物品时，填充物就可以视为"padding"，无论填充物有多厚，也不会影响盒子的整体大小。
现在再给类名为"border-box"的盒子设置宽度、高度都为"100px"、内边距为"5px"、边框为"5px solid black"，此时通过调试工具会发现盒子的实际大小并没有因为添加了内边距或边框而被撑大。"border-box"在布局中可以让开发者减少不必要的烦恼，如添加内边距、边框之后盒子大小发生变化影响到整体布局的效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
     
                margin: 0;
                padding: 0;
            }
            .border-box{
     
                width:100px;
                height:100px;
                padding:5px;
                border:5px solid black;
                box-sizing:border-box;
            }
        </style>
    </head>
    <body>
    	<div class="border-box"></div>
    </body>
</html>

总结：

怪异盒子模型总宽度：width+margin

3、盒模型- 外边距折叠（margin）

常规块盒子有一种机制叫外边距折叠，即垂直方向上的两个外边距相遇时，会折叠成一个外边距，且折叠之后的外边距高度为两者之中较大的那一个。
现在给类名为"top"、“bottom"两个盒子都设置宽度、高度且都为"100px”、都设置外边距且都为"10px"，可以添加任意颜色便于区分两个盒子。此时通过调试工具可以发现两个盒子之间的距离为"10px"，并不是"20px"，说明已经发生了外边距折叠。
外边距折叠好像很奇怪，实际上却很有用。当一个页面包含了多个段落，如果没有外边距折叠，从第二个段落开始，所有段落的间距都是最上方段落的上外边距的两倍，有了外边距折叠，段落间距才会相等。
如果想要清除两个盒子之间的外边距折叠，可以给目标盒子设置以下属性：
1、display: inline-block
2、float属性值不是"none"的元素
3、绝对定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
     
                margin: 0;
                padding: 0;
            }
            .top{
     
                width:100px;
                height:100px;
                margin:10px;
                background-color:black;
            }
            .bottom{
     
                width:100px;
                height:100px;
                margin:10px;
                background-color:red;
                position:absolute;
                /*display:inline-block;*/
                /*float:left;*/
            }
        </style>
    </head>
    <body>
        <section class="top"></section>
        <section class="bottom"></section>
    </body>
</html>

总结：

解决外边框折叠：
1、position:absolute;
2、display:inline-block;
3、float:left/right;

3、浮动（float）

浮动盒子可以向左、右移动，直到它的外边沿接触父级的外边沿或另一个浮动盒子的外边沿。浮动盒子会脱离常规文档流，所以文档流中的元素几乎认为浮动盒子不存在。
1、现在给"body"标签设置宽度为300px，再给类为"left"、“center”、"right"的盒子（左、中、右盒子）皆设置宽度、高度且都为100px，三个盒子的颜色可以自定义以便于观测。
2、继续给中间盒子设置"float: left"属性，此时中间盒子已经是一个浮动盒子，不再占据流中的位置空间，右盒子上升到了浮动盒子的区域并且被浮动盒子覆盖住了。
3、现在再给左、右盒子皆设置"float: left"属性，此时三个盒子水平排列在一行上。重设左盒子的宽度、高度皆为120px，可以观察到因为"body"盒子较窄，所以右盒子被迫换行并且因为左盒子的高度超过了中间盒子，右盒子被卡在了中间盒子下方。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
     
                margin: 0;
                padding: 0;
            }
            body{
     
                width:300px;
            }
            .left{
     
                width:120px;
                height:120px;
                background-color:black;
                float:left;
            }