写点什么

CSS(八)——CSS 盒模型

发布于: 2021 年 01 月 29 日
CSS(八)——CSS盒模型

1.盒模型基本概念


我们可以好好看一下这张图;



盒模型:相框边框 - > border ;画和相框边框的距离(内边距) -> padding;相框之间的距离(外边距) -> margin


2.边框


<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">	#d1{		width:100px;		height:100px;		/* 边框宽度(粗细) */		border-width: 10px;		/* 边框颜色 */		border-color: red;		/* 边框样式 */		border-style:solid;	}	#d2{		width:100px;		height:100px;		border:10px blue dashed;	}	#d3{		width:100px;		height:100px;		border-top:5px blue dashed;		border-right:5px red solid;		border-bottom:5px blue dashed;		border-left:5px red dotted;	}</style></head><body><div id="d1">内容1</div><div id="d2">内容2</div><div id="d3">内容3</div></body></html>
复制代码


运行结果:



3.内边距


用 padding 设置内边距;


<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">	#d1{		width:100px;		height:100px;		/* 边框宽度(粗细) */		border-width: 10px;		/* 边框颜色 */		border-color: red;		/* 边框样式 */		border-style:solid;		/* 设置内边距 */		padding:40px;	}	#d2{		width:100px;		height:100px;		border:10px blue dashed;		/* 按照上、右、下、左的顺序设置 */		padding:20px 10px 5px 2px;	}	#d3{		width:100px;		height:100px;		/* 设置边框样式 */		border-top:5px blue dashed;		border-right:5px red solid;		border-bottom:5px blue dashed;		border-left:5px red dotted;		/* 设置内边距 */		padding-top:20px;		padding-right:10px;		padding-bottom:5px;		padding-left:2px;	}</style></head><body><div id="d1">内容1</div><div id="d2">内容2</div><div id="d3">内容3</div></body></html>
复制代码


运行结果:


 

这里我们可以点击页面,查看检查:



我们这边可以看到具体的盒子模型,各种数据都能看到,非常方便!


4.外边距


<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">	#d1{		width:100px;		height:100px;		/* 边框宽度(粗细) */		border-width: 10px;		/* 边框颜色 */		border-color: red;		/* 边框样式 */		border-style:solid;		/* 设置内边距 */		padding:40px;		/* 设置外边距 */		margin:20px;	}	#d2{		width:100px;		height:100px;		border:10px blue dashed;		/* 按照上、右、下、左的顺序设置 */		padding:20px 10px 5px 2px;		/* 按照上、右、下、左的顺序设置 */		margin:20px 10px 5px 2px;	}	#d3{		width:100px;		height:100px;		/* 设置边框样式 */		border-top:5px blue dashed;		border-right:5px red solid;		border-bottom:5px blue dashed;		border-left:5px red dotted;		/* 设置内边距 */		padding-top:20px;		padding-right:10px;		padding-bottom:5px;		padding-left:2px;		/* 设置外边距 */		margin-top:20px;		margin-right:10px;		margin-bottom:5px;		margin-left:2px;	}</style></head><body><div id="d1">内容1</div><div id="d2">内容2</div><div id="d3">内容3</div></body></html>
复制代码


运行结果: 



5.网页布局与盒模型

1.标准文档流;


标准文档流:指在不使用其他与排列和定位相关的特殊 CSS 规则时,各种元素的排列规则;即不同的浏览器解析 CSS 样式的规则基本上是按照标准文档流来解析的;


2.块级元素 VS 行内元素;


块级元素:以一个块的形式展现,跟同级的兄弟块依次竖直排列,左右撑满,比如<div>; 

行内元素:以普通的一个 DOM 节点展现,跟同级的兄弟元素横向排列,排满后,自动换行,比如<span>;


<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><h1>块内元素</h1><div>块1</div><div>块2</div><div>块3</div><h1>行级元素</h1><span>行1</span><span>行2</span><span>行3</span></body></html>
复制代码


运行结果:



6.盒子在标准流中的定位

1.行内元素之间的水平 margin;


距离为:(margin-right)+(margin-left);


<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><!-- 行1的右边的margin为10px --><span style="margin-right: 10px">行1</span><!-- 行2的左边的margin为10px --><span style="margin-left: 10px">行2</span></body></html>
复制代码


运行结果:



2.块级元素之间的竖直 margin;


距离为:margin-bottom 与 margin-top 之间的较大者!


<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><!-- 块1的下边的margin为10px --><div style="margin-bottom: 10px">块1</div><!-- 块2的上边的margin为5px --><div style="margin-top: 5px">块2</div></body></html>
复制代码


运行结果:


 

注意:这个上下之间的距离是 margin-bottom 与 margin-top 之间的较大者,并不是相加!

3.嵌套盒子之间的 margin;


子块的 margin 将以父块的内容为参考!


<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><!-- 块1的周围的margin为10px --><div style="margin: 10px">块1<!-- 块2的上边的margin为20px --><div style="margin-top: 20px">块2</div></div></body></html>
复制代码


这里我们用两个 div 块嵌套,其中块 1 为父块,块 2 为子块;


这里块 1 和块 2 作为一个整体,上下左右的 margin 均为 10px;而块 1 与块 2 之间的上下距离又为 20px; 并不能超过界线!


所以说子块的 margin 将以父块的内容为参考!


运行结果:



4.margin 的属性可以设置成负值;


<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><!-- 块1的周围的margin为10px --><span style="margin: 10px">块1</span><!-- 块2的周围的margin为-30px,这样会导致块2向左偏移,从而导致重叠--><span style="margin: -30px">块2</span></body></html>
复制代码


这样设置成负值会导致块 2 向块 1 偏移,从而会出现重叠现象;


运行结果:




我是【程序员的时光】,热爱技术分享,信仰终身学习,爱健身,会点厨艺的热血青年,我们下期再见!


发布于: 2021 年 01 月 29 日阅读数: 19
用户头像

程序员的路,会越来越精彩! 2020.04.30 加入

公众号:程序员的时光 记录学习编程的一路时光,从小白到现在也能稳操胜券; 主要从事Java后台开发,数据结构与算法,设计模式等等; 欢迎一起交流,分享经验,学习进步!

评论

发布
暂无评论
CSS(八)——CSS盒模型