【前端三件套——CSS】盒子模型加浮动等于热气球

最新推荐文章于 2022-09-30 00:12:42 发布

前端小刘不怕牛牛

最新推荐文章于 2022-09-30 00:12:42 发布

阅读量1.4k

点赞数 63

分类专栏：前端笔记文章标签： css javascript 前端

本文链接：https://blog.csdn.net/weixin_62542181/article/details/124847362

版权

本文详细介绍了CSS中的盒子模型，包括内容区域、边框、内边距和外边距，以及如何设置这些属性。此外，还讲解了浮动的概念及其在网页布局中的应用，如何清除浮动对后续元素的影响，以及结构伪类选择器和伪元素的使用。通过对这些基础知识的掌握，能更好地理解和实现前端页面布局。

摘要由CSDN通过智能技术生成

盒子模型

概念： 网页页面中每一个标签，我们都可以理解为一个“盒子”

好处： 更加方便进行布局，也就是在美工美眉给我们发来设计图时，作为切图仔的我们就可以将页面中每个元素理解成盒子，合理地摆放、嵌套进行布局。

组成： 盒子由四部分组成——
内容区域content
内边距区域padding
边框区域border
外边距区域margin
在这里插入图片描述

盒子尺寸包括border、padding、以及content

width和height属性的设置默认就是内容区域的大小
前面也说过，取值是数字+px即可

width:100px;
height:100px;

和font、background一样，border也可以连写
border：粗细样式颜色

border:10px solid red;

边框与内容区域之间的距离
padding 可以直接连写，最多是个值，分别的方向指的是上右下左，没错就是顺时针的方向

padding:10px 20px 30px 40px;

在这里插入图片描述
padding的取值设置1位，2位，3位都是可以的

那些没有被赋值的padding方向怎么办？
答案：看对面的

假设你只赋了三个值，左边没赋，那么左边就会默认设置为和你右边设置的值一样，也就是第二个值

同理，如果你想要盒子上下内边距一样，左右内边距一样，只需要设

关注