CSS网页盒子

良风抚旧

已于 2022-01-23 15:45:58 修改

阅读量978

点赞数 1

分类专栏：前端文章标签： css css3 前端

于 2022-01-20 18:21:05 首次发布

本文链接：https://blog.csdn.net/arcofcosmos/article/details/122607468

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

网页盒子的组成部分

css中元素基本都可看做一个盒子，如div,p等标签都是盒子
一个盒子由以下几部分组成：

border边框
content内容
padding内边距 //即边框与内容之间的距离
margin外边距 //边框与其它盒子边框之间的距离

border边框属性

border-width: 5px;                 //边框宽度
border-style: dotted;			   //边框样式，例如实线，虚线，点线
border-color: red;				   //边框颜色
border-collapse: collapse;		   //合并相邻的边框，常用于表格中单元格边框合并

border: 5px dotted red; 		   //边框属性复合写法，无特定顺序
border-top: 5px dotted red; 	   //利用复合写法可以将边框任意一遍改变样式
border-bottom: 5px dotted red; 
border-left: 5px dotted red; 
border-right: 5px dotted red; 

//利用css层叠性改变顶端为蓝色，其余为红。不可颠倒上下两条语句顺序
border: 5px dotted red;
border-top: 5px dotted blue;

注意border边框的宽度不会算入盒子的宽高中，也就是说盒子的大小会加上边框的宽度才是最终盒子的大小。border属性会影响到盒子的实际大小。

通常为了保持盒子大小，会让盒子的原始宽高减去多出来的边框宽度。

内边距padding属性

padding-left: 10px;						//左内边距
padding-right: 10px;					//右内边距
padding-top: 10px;						//上内边距
padding-botton: 10px;					//下内边距

//padding复合属性
padding: 10px;					//一个值为上下左右同时设置
padding: 10px 20px;				//两个值为上下内边距为10px，左右内边距为20px
padding: 10px 20px 30px;		//三个值为上内边距为10，左右内边距为20，下内边距为30
padding: 10px 20px 30px 40px;	//四个值为上10，右20，下30，左40，顺时针方向依次设置

注意padding也会影响盒子的大小，如果盒子已经有了宽度，再指定内边距会撑大盒子，因为padding默认内边距是0。

通常为了保持盒子大小，会让盒子的原始宽高减去多出来的内边距。如果不指定盒子的宽度，则设置padding不会撑大。

外边距margin属性

margin-left: 10px;						//左外边距
margin-right: 10px;						//右外边距
margin-top: 10px;						//上外边距
margin-botton: 10px;					//下外边距

//margin复合属性
margin: 10px;					//一个值为上下左右同时设置
margin: 10px 20px;				//两个值为上下外边距为10px，左右外边距为20px
margin: 10px 20px 30px;		    //三个值为上外边距为10，左右外边距为20，下外边距为30
margin: 10px 20px 30px 40px;	//四个值为上10，右20，下30，左40，顺时针方向依次设置

//设置c1和c2两个盒子的距离，.c1和.c2两个选择器语句只用写一个即可
<style>
	div {
		color: red;
	}
	.c1 {
		margin-bottom: 20px;			//相对于c1来说应设置下外边距
	}
	.c2 {
		margin-top: 20px;				//相对于c2来说应设置上外边距
	}
	
</style>
<body>
	<div class = "c1"></div>
	<div class = "c2"></div>
</body>

margin外边距可以使盒子水平居中：

盒子必须指定了宽度
盒子左右的外边距设置为auto

选择器 {
	width: 200px;
	margin: 0 auto;
}

//常见居中auto设置方法
margin: auto;
margin: 0 auto;				//上下外边距为0
margin-left: auto; margin-right: auto;

以上水平居中方法对块级元素有效，如果是行内元素与行内块元素，则对其父标签元素设置text-align: center即可。

嵌套块元素垂直外边距塌陷问题

对于父子关系（嵌套关系）的块元素，父元素设置上外边距后子元素再设置上外边距会导致父元素上外边距再往下塌陷，无法达到想要的效果。

//解决方法
1. 为父元素设置上边框	
2. 为父元素设置上内边距
3. 父元素添加属性overflow: hidden

注意浮动的盒子不会有内外边距塌陷的问题。
清除内外边距

不同浏览器的网页元素都有默认的内外边距，在进行网页布局前，首先清除网页元素内外边距。

* {
	padding: 0;			//清除内边距
	margin: 0;			//清除外边距
}

行内元素为了照顾其兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级元素与行内块元素可以设置。

良风抚旧

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS网页盒子

网页盒子的组成部分css中元素基本都可看做一个盒子，如div,p等标签都是盒子一个盒子由以下几部分组成：border边框content内容padding内边距 //即边框与内容之间的距离margin外边距 //边框与其它盒子边框之间的距离border边框属性border-width: 5px; //边框宽度border-style: dotted;
复制链接

扫一扫

专栏目录