盒模型

最新推荐文章于 2022-10-12 20:41:46 发布

Cupid510

最新推荐文章于 2022-10-12 20:41:46 发布

阅读量58

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_44283432/article/details/108091821

版权

css 专栏收录该内容

17 篇文章 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

Cupid510

关注

0
点赞
踩
0

收藏

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

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

扫一扫