CSS盒子模型——看这一篇就够了

欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。
致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨

边框粗细：border-width：px
边框样式：border-style：solid（实线）、dashed（虚线）、dotted（点线）；
边框颜色：border-color：red;
边框复合写法：border：px style color；
边框分开写法：border-top：px style color；其余边同理
合并相邻边框：border-collapse；

2、content：盒子内容

就是自己想输入的内容

 <style>
        div {
            width: 100px;
            height: 100px;
            /* 边框粗细、样式、颜色 */
            border: 1px dashed #ccc;
        }
    </style>

<body>
    <div>
        /* 内容 */
        这里是content
    </div>
</body>

3、padding：内边距

就是边框与内容之间的距离
语法：padding-left/right/top/bottom：左内/右内/上内/下内边距
我们要注意：padding会把盒子撑大；
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

此时给上面的盒子一个padding值，会发现内容离左边框远了，并且盒子变大了

4、外边距：margin

控制盒子与盒子之间的距离
margin-left/right/top/bottom ：左外/右外/上外/下外边距

典型应用：让块级盒子水平居中，但必须满足盒子指定了宽度、盒子左右的外边距都设置为auto
即：margin：0 auto；

行内元素或者行内块元素水平居中给其父元素添加text-align：center即可

在上面的div下面加一个p标签：

p {
            width: 500px;
            height: 50px;
            background-color: rgb(192, 93, 167);
            border: 1px solid red;
            /* 外上边距 */
            margin-top: 50px;
            text-align: center;
        }

    <p>
        我和上面的div很远，而且还居中
    </p>

会发现div和p之间的距离因为margin值而变大

外边距合并
相邻块元素垂直外边距的合并：
取大值生效，所以只给一个加外边距就行

嵌套块元素垂直外边距的塌陷：
取大值生效，解决方案：

可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow：hidden

清除内外边距： 网页元素很多自带默认的内外边距，布局前清除下网页元素的内外边距。

* {
  padding:0；  /* 清除内边距 */
  margin:0;  /* 清除外边距 */
}

5、文字阴影
text-shadow：
h-shadow 必需。水平阴影的位置。允许负值。测试
v-shadow 必需。垂直阴影的位置。允许负值。测试
blur 可选。模糊的距离。测试
color 可选。阴影的颜色。

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

6、圆角边框，给边框设置圆角
border-radius：px/百分比
border-radius：10px 20px 30px 40px;顺时针转
单独写：border-top-left-radius
两个值：给对角线加

盒子模型是非常重要的，在之后的学习中会经常用到，所以一定要掌握

二、每日面试题

一、清除浮动

不清除浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式：
{clear:both;height:0;overflow:hidden;}
给浮动元素父级设置高度
父级同时浮动（需要给父级同级元素添加浮动）
父级设置成inline-block，其margin: 0 auto居中方式失效
给父级添加overflow:hidden 清除浮动方法
万能清除法 after伪类清浮动（现在主流方法，推荐使用）

.float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}

二、css选择器有哪些，选择器的优先级
id选择器
类选择器
属性选择器
伪类选择器
标签选择器
伪元素选择器
通配符选择器

优先级： 内联样式 > ID选择器(100)> 类选择器(10) = 属性选择器 = 伪类选择器 > 元素选择器(1) = 关系选择器 = 伪元素选择器 > 通配符选择器(0)
!important
后代选择器选全部
子代选择器只选亲孩子

本期到这里就结束了，感谢阅读！有问题留言，及时回复

下期：CSS浮动
点赞加关注，持续更新实用技巧、热门资源、软件教程等
有任何软件影视教程资源考证资料等需求留言即可

淘先锋技术网

CSS盒子模型——看这一篇就够了

目录

一、CSS盒模型

二、每日面试题

一、CSS盒模型

二、每日面试题