目录
一.盒子模型的介绍
1.盒子的的概念
-
页面中的每一个标签,都可看作是一个"盒子",通过盒子的视角更方便的进行布局
-
浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个矩形区域,我们也形象的称之为盒子
2.盒子模型
-
CSS中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成,这就是盒子模型
二.边框(border)
-
属性值:单个取值的连写,取值之间以空格隔开
-
如:border:10px solid red;三个属性的意思 粗细 边框样式 颜色
-
简写:bd+Tab键
-
solid 实线
dashed 虚线
dotted 点线
三.内边距(padding)
作用:设置 边框 与 内容区域 之间的距离
取值 | 示例 | 含义 |
---|---|---|
一个值 | padding:10px; | 上右下左都设置为10px |
两个值 | padding:10px 20px; | 上下设置为10px、左右设置为20px |
三个值 | padding:10px 20px 30px; | 上设置为10px、左右设置为20px、下设置为30px |
四个值 | padding:10px 20px 30px 40px; | 上设置为10px、右设置为20px、下设置为30px、左设置为40px |
从上开始赋值,然后顺时针赋值,如果没有设置赋值的,看对面的!!
单方向设置 方向名词 top right bottom left 如padding-top:10px;
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
/* padding :添加了四个方向的内边距 */
padding: 50px;
/* padding 属性可以当做复合属性使用,表示单独设置某个方向的内边距 */
/* padding 最多取4个值 */
/* 四个值分别代表:上 右 下 左 */
/* padding: 10px 20px 30px 40px; */
/* 三个值 : 上 左右 下*/
/* padding: 10px 40px 80px; */
/* 两个值 : 上下 左右 */
padding: 10px 20px;
/*多值写法 顺时针 上右下左 如果遇到数不够看对面 */
}
</style>
</head>
<body>
<div>文字</div>
</body>
四.外边距(margin)
设置边框以外,盒子与盒子之间的距离
从上开始赋值,然后顺时针赋值,如果没有设置赋值的,看对面的!!
单方向设置 方向名词 top right bottom left 如margin-top:10px;
外边距和内边距代码内容都是差不多的!!
五.CSS3盒子模型(自动内减)
当盒子被border撑大后,如何满足需求?
给盒子设置属性box-sizing:border-box;即可.
优点:浏览器会自动计算多余大小,自动在内容中减去
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
border: 10px solid #000;
padding: 20px;
/* 内减模式 */
/* 变成CSS3的盒子模型 好处:加了border和padding不需要手动减法 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div></div>
</body>
六.清除默认内外边距
* {
margin: 0;
padding: 0;
}
七.版心居中
<style>
div {
width: 1000px;
height: 300px;
background-color: pink;
/* 版心居中 */
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 版心:网页的有效内容 -->
<!-- 版心居中 -->
<div>版心居中</div>
</body>
八.外边距折叠现象- ①合并现象
垂直布局的块级元素,上下的margin会合并
结果:最终两者距离为margin的最大值
解决方法:避免就好
-
只给其中一个盒子设置margin即可
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.one {
margin-bottom: 50px;
}
.two {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="one">11</div>
<div class="two">22</div>
</body>
八.1.外边距折叠现象- ②塌陷现象
-
互相嵌套的块级元素,子元素的margin-top会作用在父元素上
-
结果会导致父元素一起往下移动
解决方案:
-
给父元素设置border-top或者padding-top(分割父子元素的margin-top)
-
给父元素设置overflow:hidden
-
转换成行内块元素
-
设置浮动