前端学习——盒模型

最新推荐文章于 2023-11-11 14:20:30 发布

mango660

最新推荐文章于 2023-11-11 14:20:30 发布

阅读量488

点赞数

分类专栏： Web前端文章标签： html 盒模型 html5 css3

本文链接：https://blog.csdn.net/mango660/article/details/106507714

版权

Web前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

快捷键

CTRL + Z 撤销
CTRL + Y 重做

盒模型

组成

内容（content）、内填充（padding）、边框（border)、边界/外边距（margin）
content：盒子内容，元素内容的区域，此区域的宽和高由css样式的width和height构成
padding：内填充，元素内容和边框之间的区域，有上下左右4个方向
border：边框，就是元素的最外层结构，有上下左右4个方向
margin：外边距，该元素与其他元素之间的间距，有上下左右4个方向
盒模型宽度 = content + padding-left + padding-right + border-left-width + border-right-width
盒模型高度 = content + padding-top + padding-bottom + border-top-width + border-bottom-width

复合样式

四个值

10px	10px	10px	10px
上	右	下	左

三个值

10px	10px	10px
上	左右	下

两个值

10px	10px
上下	左右

一个值

10px
上右下左

边框border：可以由宽度(border-width)、样式(border-style)和颜色(border–color)复合而成。

border = border-color + border-width + border-style
border-color = border-top-color + border-bottom-color + border-left-color + border-right-color
border = border-top + border-right + border-bottom + border-left

区块元素居中： margin:0 auto;

盒模型中的问题

外边距重叠

兄弟关系或祖先关系
计算规则

相邻外边距都是正数时，折叠结果为它们两者之间较大的值
相邻外边距都是负数时，折叠结果为两者绝对值的较大值
相邻外边距一正一负时，折叠结果为两者之和
消除父子元素边距重叠的方式：给父元素加边框；给父元素加padding(让他们不相邻)

兼容问题和解决办法

两种盒模型

常规盒模型（内容盒模型）

盒模型宽度 = width + padding-left + padding-right + border-left-width + border-right-width
盒模型高度 = hight + padding-top + padding-bottom + border-top-width + border-bottom-width

怪异盒模型（边框盒模型）

设置的宽高尺寸为边框之内的部分(盒模型) width = 盒模型的宽度

详说

低版本的ie浏览器中用的是怪异盒模型，怪异盒模型中我们为元素设置的宽实际是盒子的宽
标准浏览器的常规盒模型中我们为元素设置的宽是内容的宽
解决办法

box-sizing: border-box/content-box(默认)，该样式用来修改盒模型的种类
一般使用怪异盒模型

代码即样式展现

复合

No.1

<!-- solid 表示实线-->
<body>
	<div style="width: 150px;
                height: 200px;
                padding: 10px;
                border: 2px black solid;
                margin: 5px">
    </div>
</body>

在这里插入图片描述

No.2

<!-- 复合样式-->
 <div style="width: 150px;
             height: 200px;
             padding: 10px 20px;  
             border: 10px green solid;
             margin: 5px">

  </div>

在这里插入图片描述

No.3

<div style="width: 200px;
            height: 200px;
            background-color: hotpink;
            border-top: 20px gold solid;
            border-bottom: solid 30px yellow;
            border-left: solid 50px darkorange
            border-right: solid 60px limegreen;">
</div>

在这里插入图片描述

No.4

<div style="width: 0px;
                height: 0px;
                background-color: hotpink;
                border-top: 30px gold solid;
                border-bottom: solid 30px yellow;
                border-left: solid 30px darkorange;
                border-right: solid 30px limegreen;">

    </div>

在这里插入图片描述

No.5

<!-- transparent 透明色  或者 rgba (0,0,0,0) -->
<div style="width: 0px;
                height: 0px;
                border-bottom: solid 50px limegreen;
                border-left: solid 50px transparent;
                border-right: solid 50px transparent;">
</div>

在这里插入图片描述

外边距重叠

外边距折叠只在垂直方向有；水平方向不发生折叠

<div style="width: 200px; 
			height: 150px; 
			background-color: #ccc; 
			margin-top: 20px; 
			margin-left: 20px; 
			padding-top: 50px;">
			
        	<div style="width: 100px; 
        				height:100px; 
        				background-color: red; 
        				margin-left: 50px;">
        	</div>
</div>

在这里插入图片描述

居中

<div style="width: 100px;
    		height: 100px;
    		background-color: red;
   	 		margin: 100px auto;">
</div>

两种盒模型

<div style="width: 100px; 
			height: 100px; 
			padding: 30px; 
			border: 10px #000 solid; 
			background-color: hotpink;">
</div>
<div style="width: 100px; 
			height: 100px; 
			padding: 30px; 
			border: 10px #000 solid; 
			background-color: limegreen;
			box-sizing: border-box">
</div>

在这里插入图片描述

mango660

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习——盒模型

快捷键CTRL + Z 撤销CTRL + Y 重做盒模型组成内容（content）、内填充（padding）、边框（border)、边界/外边距（margin）content：盒子内容，元素内容的区域，此区域的宽和高由css样式的width和height构成padding：内填充，元素内容和边框之间的区域，有上下左右4个方向border：边框，就是元素的最外层结构，有上下左右4个方向margin：外边距，该元素与其他元素之间的间距，有上下左右4个方向盒模型宽
复制链接

扫一扫

专栏目录