CSS入门八之盒子属性
2020-12-14 本文已影响0人
码农修行之路
盒子的组成：内容、内填充、边框、外边距
- 内容 无非是盒子里面放置的东西 有宽高属性
- 内填充 无非是盒子内容和盒子本身的间距
- 边框 无非是盒子外面包裹的一层东西
- 外边距 无非是盒子距窗口的间距
从上面解释来说：其属性有width、height、padding、margin、border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>盒子属性</title>
<style type="text/css">
* {
/*去除默认样式 属性*/
margin: 0;
padding: 0;
}
.box {
width: 100px;/*盒子内容的宽度*/
height: 100px;/*盒子内容的高度*/
padding: 10px;/*盒子内容到盒子边框的距离*/
margin: 20px;/*盒子距离父元素的间距*/
border: 2px solid #000;/*盒子外边框*/
}
.box_padding {
width: 100px;
height: 100px;
/* 分别设置盒子的内边距 上、右、下、左*/
/*padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;*/
/* 内边距可以从网页中 检查中查看 */
/* 简写 四个属性值 分别是 上10px 右20px 下30px 左40px */
/* padding: 10px 20px 30px 40px; */
/* 简写 三个属性值 分别是 上10px 左右20px 下40px */
/* padding: 10px 20px 30px; */
/* 简写 两个属性值 分别是 上下10px 左右20px*/
/* padding: 10px 20px; */
/* 简写 一个属性值 代表上下左右都是10px */
/* padding: 10px; */
/* padding 属性是有方向的 可以同时表示四个方向 顺序是：顺时针（上右下左） */
/* 同样的外边距 和 内边距的属性值的方向和简写的描述一样 */
/* 分别设置盒子的外边距 上、右、下、左*/
/* margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; */
/* 简写 一个属性值 代表上下左右外边距都是10px */
/* margin: 10px; */
/* 简写 两个属性值 分别是 上下外边距10px 左右外边距20px*/
/* margin: 10px 20px; */
/* 简写 三个属性值 分别是 上外边距10px 左右外边距20px 下外边距40px */
/* margin: 10px 20px 30px; */
/* 简写 四个属性值 分别是 上外边距10px 右外边距20px 下外边距30px 左外边距40px */
/* margin: 10px 20px 30px 40px; */
border: 1px solid #f00;
}
/* margin 属性塌陷现象 */
/* 竖直方向塌陷现象 */
/*.box_margin1 {
width: 100px;
height: 100px;
background-color: #f00;
margin-bottom: 20px;
}
.box_margin2 {
width: 100px;
height: 100px;
background-color: #0f0;
margin-top: 40px;
}*/
/* 横向margin值是叠加的 没有塌陷现象 */
.box_margin1 {
width: 100px;
height: 100px;
background-color: #f00;
margin-right: 20px;
float: left;
}
.box_margin2 {
width: 100px;
height: 100px;
background-color: #0f0;
margin-left: 40px;
float: left;
}
/* 上面两个盒子竖直方向的margin值并没有叠加 反而是margin-top: 40px; 生效 由此可以得出以下结论
1. 在标准文档流中 竖直方向 的margin值是不会叠加的 它会取较大的值
2. 横向方向是没有塌陷现象
3. 根据上一条 可以推断出 float元素是没有margin塌陷现象的
*/
/* margin居中 */
.box_margin3 {
width: 100px;
height: 100px;
background-color: #0f0;
/*margin: auto auto;*/
/*margin: 0px auto;*/
margin-right: auto;
margin-left: auto;
/* float:left; */
}
/* 1. 设置居中时 盒子一定要有固定的宽度 否则占据父元素的100%宽度 */
/* 2. 行内元素没有宽高属性 要想实现水平居中 可以外面包裹个块元素 或者 转换成块元素 */
/* 3. 浮动元素不能水平居中 */
/* 4. margin 只能实现盒子的水平居中 而文本的水平居中时使用 text-align:center; */
/* 5. 一般使用父元素的padding 而不是使用子元素的margin */
</style>
</head>
<body>
<div class="box">盒子</div>
<!-- 1. 盒子的总宽度为 内容宽度 + 左右内边距 + 左右边框宽度 -->
<!-- 2. 盒子的中高度为 内容高度 + 上下内边距 + 上下边框宽度 -->
<!-- 注意：盒子的高度一般不设置 是由盒子内容决定的 -->
<div class="box_padding">padding属性</div>
<div class="box_margin1">margin属性一</div>
<div class="box_margin2">margin属性二</div>
<div class="box_margin3">margin属性三</div>
</body>
</html>
padding
- padding-top、right、bottom、left ，padding 属性是有方向的 可以同时表示四个方向 顺序是：顺时针（上右下左）
- 内边距可以从网页中 检查中查看 简写形式四种 以上述代码为例：
简写 一个属性值 代表上下左右都是10px -> padding: 10px;
简写 两个属性值 分别是 上下10px 左右20px ->padding: 10px 20px;
简写 三个属性值 分别是 上10px 左右20px 下40px -> padding: 10px 20px 30px;
简写 四个属性值 分别是 上10px 右20px 下30px 左40px -> padding: 10px 20px 30px 40px;
margin
- margin-top、right、bottom、left ，margin 属性是有方向的 可以同时表示四个方向 顺序是：顺时针（上右下左）
- 外边距同样可以从网页检查中看出 图形看出来 以上述代码为例：
简写 一个属性值 代表上下左右外边距都是10px -> margin: 10px;
简写 两个属性值 分别是 上下外边距10px 左右外边距20px ->margin: 10px 20px;
简写 三个属性值 分别是 上外边距10px 左右外边距20px 下外边距40px -> margin: 10px 20px 30px;
简写 四个属性值 分别是 上外边距10px 右外边距20px 下外边距30px 左外边距40px -> margin: 10px 20px 30px 40px;
- margin塌陷现象：
1. 竖直方向塌陷现象
2. 横向margin值是叠加的 没有塌陷现象
3. float元素是没有margin塌陷现象的 - margin居中：
1. 设置居中时 盒子一定要有固定的宽度 否则占据父元素的100%宽度
2. 行内元素没有宽高属性 要想实现水平居中 可以外面包裹个块元素 或者 转换成块元素
3. 浮动元素不能水平居中
4. margin 只能实现盒子的水平居中 而文本的水平居中时使用 text-align:center;
5. 一般使用父元素的padding 而不是使用子元素的margin
