盒模型

最新推荐文章于 2022-04-07 17:55:12 发布

郑怪兽

最新推荐文章于 2022-04-07 17:55:12 发布

阅读量72

点赞数

分类专栏： HTML&CSS 文章标签： html5 css3

本文链接：https://blog.csdn.net/weixin_46285142/article/details/107345595

版权

HTML&CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

盒模型

盒模型是网页的基石，在使用CSS进行网页布局时，我们一定离不开的一个东西————盒模型，一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。
盒子模型对应的CSS属性为:width，height，padding，border，margin。

盒样式–border

border:宽度风格颜色;
border也可以同时设置四个边框的宽度：border：1px 2px 3px 4px
有4个值时为上右下左
有3个值时为上左右下
有2个值时为上下左右
有1个值时为四周边框
边框宽度：border-width
边框颜色：border-color
边框样式：border-style:sold(实线)/dashed(虚线)/dotted(点状)/double(双线)
可单独设置一边：border-left/right/bottom/top
例子：用css实现三角形

    <style>
        div{
            width: 0px;
            height: 0px;
            border-left: 10px solid transparent;
            border-top: 10px solid blue;
            border-right: 10px solid transparent;
        }
    </style>
	<body>
    	<div> </div>
	</body>

盒子样式-padding

1）padding长在盒子的外面，会把盒子撑大
2）作用：控制子元素在父元素中的位置
3）如果想让盒子保持原有的大小：在宽高基础上减掉。如果元素没有设置宽高，则不需要减
4）给单一方向添加padding：padding-top/bottom/left/right
5）padding的设置特点：
padding:30px; 四周
padding:10px 30px; 上下左右
padding:10px 30px 50px 上左右下
padding:10px 30px 50px 100px 上右下左
6）注意：padding不会对背景图的位置造成影响。
padding不能设置负值
不会对背景图造成影响

盒子样式-margin

1）margin长在元素之外，不会撑大元素的大小
2）margin控制的是同级元素之间的位置关系
3）给单一方向添加margin语法：margin-top/right/bottom/left
4) margin设置方法：
margin:30px; 四周
margin:10px 30px; 上下左右
margin:10px 30px 50px 上左右下
margin:10px 30px 50px 100px 上右下左
5）margin：0 auto；让当前元素在父元素左右居中
6）margin常出现的bug：
a：两个相邻元素的上下margin值不会叠加，按照较大值显示，左右不会出现这种情况
b：如果父元素和第一个子元素没有浮动的情况下，给第一个子元素添加margin-top；会错误地放在父元素上面，父元素也会向下滑动，通常用padding值设置

盒子的宽高

盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

郑怪兽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒模型

盒模型盒模型是网页的基石，在使用CSS进行网页布局时，我们一定离不开的一个东西————盒模型，一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。盒子模型对应的CSS属性为:width，height，padding，border，margin。盒样式–borderborder:
复制链接

扫一扫