提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
CSS盒模型简介
CSS盒模型简介
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
Margin(外边距) :清除边框外的区域,外边距是透明的。
Border(边框) :围绕在内边距和内容外的边框。
Padding(内边距) :清除内容周围的区域,内边距是透明的。
Content(内容) : 盒子的内容,显示文本和图像
一、什么是盒模型
盒模型 规定了网页元素如何显示以及元素间相互关系,它本质上是一个盒子,封装周围的 HTML 元素。
二、组成
1.宽度(width)高度(height)颜色(color)
代码如下(示例):
div{
width: 100px;
height: 100px;
background-color: blue;
}
导出(示例)
2.内边距(padding)
1.属性
padding-top:内容上边距
padding-bottom:内容下边距
padding-left:内容左边距
padding-right:内容右边距
2.代码
div{
height: 100px;
width:100px;
background-color: red;
border: 20px blue solid;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
padding-top: 30px;
}
导出(示例)
3.提示
当省略方向时,padding 属性接受 1~4 个值:
1.当只指定一个值时,该值会统一应用到全部四个边的内边距上。
2.指定两个值时,第一个值会应用于上边和下边的内边距,第二个值应用于左边和右边。
3.指定三个值时,第一个值应用于上边,第二个值应用于右边和左边,第三个则应用于下边的内边距。
4.指定四个值时,依次(顺时针方向)作为上边,右边,下边,和左边的内边距
简单来说就是顺时针赋值,从上开始。
3.边框(border)
1.属性
border-width:边框的值(从上开始,顺时针顺序)
border-color:边框的颜色
border-style:边框的样式
2.代码
1.圆角代码
div{
width: 0px;
height:0px;
border:80px solid transparent;
border-bottom-color:yellow;
border-radius: 50%;
}
导出(示例)
2.三角形代码
div{
width:0px;
height:0px;
border: 60px solid transparent;
border-right-color: red;
border-radius: 0px;
}
导出(示例)
4.外边距(margin)
1.属性
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。
2.代码(奥运五环)
*{
margin:0px;
padding:0px;
}
div{
width:100px;
height: 100px;
border:10px solid blue;
border-radius: 100px;
}
.d2{
margin-left:100px;
margin-top:-120px;
border-color: black;
}
.d3{
margin-left:200px;
margin-top: -120px;
border-color:red ;
}
.d4{
margin-left: 50px;
margin-top: -60px;
border-color: yellow;
}
.d5{
margin-top: -120px;
margin-left: 150px;
border-color:green ;
}
导出(示例)
3.注意
1.叠压现象
常态下,兄弟标签的上下间距以最大值为准
2.塌陷问题
1.原因
常态下,父级的的第一个子级标签是个块标签名,并且使用了margin或者margin-top
2.解决方案
1.在父级使用border
2.不使用margin-top,在父级使用padding-top
3.在父级使用overflew:hidden
三.怪异盒模型
正常盒向外扩展,怪异盒模型向内压缩
四.总结
把上述文章的内容简单整理成一个思维导图,方便理解掌握