属性
作⽤padding-left 左内边距padding-right 右内边距padding-top 上内边距padding-bottom 下内边距写法意思padding:10px；上下左右内边距均为 10像素padding:5px 10px；上下内边距是5像素，左右内边距是10像素padding:5px 10px 15px；上内边距是5px ，左右内边距是10px ，下边距是15px padding:5px 10px 15px 20px；上是5px ，右是10px ，下是15px ，左是20px  从上顺时针（⼆）css 盒⼦模型
记录前端学习过程，⽅便查漏补缺，如有错误，请评论告知~
⼀、⽹页布局的本质
⽹页布局过程：
　1、先准备好相关的⽹页元素，⽹页元素基本都是盒⼦Box
　2、利⽤CSS 设置好盒⼦样式，然后摆放到相应位置
　3、往盒⼦⾥装内容
⽹页布局的核⼼本质：就是利⽤CSS 摆盒⼦。
⼆、盒⼦模型
所谓盒⼦模型：就是把HTML 页⾯中的布局元素看作是⼀个矩形的盒⼦，也就是⼀个盛装内容的容器。
CSS 盒⼦模型本质上是⼀个盒⼦，封装周围的HTML 元素，它包括：边框、外边框、内边距和实际内容其中：
content ：实际内容
padding （内边距）：盒⼦边框与内容之间的距离
margin （外边距）：盒⼦与盒⼦之间的距离
border （边框）：字⾯意思
三、内边距（padding ）
padding 属性⽤于设置内边距，即边框与内容之间的距离
padding 属性的复合写法可以有⼀到四个值也
可以单独
指
定
padding 值：padding-top ：10px; （其他⽅位同理）
注：padding 可能会影响盒⼦的实际⼤⼩。
属性
作⽤margin-left
左外边距margin-right
右外边距margin-top
上外边距margin-bottom
下外边距
如上图，⼀个100 x 100的盒⼦，在设置padding 为30px 以后，盒⼦实际⼤⼩变为160 x 160
因此在使⽤时，应当注意padding 对盒⼦⼤⼩的影响，以设置盒⼦的最终⼤⼩。
⽽当盒⼦没有设置width 或height 时，padding 不会撑开盒⼦，会和⽗级盒⼦⼀样宽/⾼
四、外边距（margin ）
1、margin 属性⽤于设置外边距，即控制盒⼦和盒⼦之间的距离
margin 的复合写法所代表的意义与padding ⼀致 margin 可以让块级盒⼦⽔平居中    前提条件是必须指定了width ⾏内元素、⾏内块元素设置⽔平居中，只需要给其⽗元素添加text-align ：center 即可.box {    width:100px;    margin:0 auto;
}以下写法均可：
margin ：数值 auto;
margin ：auto;
margin-left ：auto; margin-right ：auto
2、外边距合并问题
当上下相邻的两个块级元素（兄弟关系）相遇时，如果上⾯的元素有下外边距 margin-bottom ，下⾯的元素有上外边距 margin-top 时，则他们之间的垂直距离不是两个之和。
⽽是取两者中较⼤的值作为两个盒⼦之间的垂直距离
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.one {
margin-bottom: 100px;
}
.
two {
margin-top: 200px;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
</body>
</html>
代码测试
解决：这种情况尽量只给⼀个盒⼦添加margin值
3、嵌套块元素垂直外边距的塌陷问题
对于两个嵌套关系（⽗⼦关系）的块元素，为⼦元素设置上外边距或⽗⼦同时拥有上外边距时，此时⽗元素会塌陷较⼤的外边距值（即：只会移动⽗元素，⼦元素不会移动，移动的距离取决于较⼤的那个外边距值）
通过浮动、固定、绝对定位等的盒⼦不会出现这种问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
width: 400px;
height: 400px;
background-color: purple;
/* ⽗元素的margin-top值⼤于⼦元素，所以会塌陷⽗元素的上外边框值，即：⽗元素距离上⽅200px */
margin-top: 200px;
/* overflow: hidden; */
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
测试代码
解决：
1. 可以为⽗元素添加上边框，如：border-top：1px solid transparent（透明）;
2. 可以为⽗元素添加上内边距
3. 可以为⽗元素添加：overflow：hidden（常⽤，因为不⽤改变盒⼦的⼤⼩）
4、清除内外边距
⽹页很多元素都带有默认的内外边距，⽽且不同的浏览器默认的也不⼀致。因此在布局前，要清除下⽹页元素的内外边距。
/* 这也是css的第⼀句话~ */
* {
padding: 0;  /*  清除内边距  */
margin: 0;    /*  清除外边距  */
}
注：⾏内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置内外上下边距。（可以转换成块元素或⾏内块元素）对于块元素和⾏内块元素则没有要求
五、边框（border）
1、border可以设置元素的边框。边框由：边框宽度（粗细）、边框样式、边框颜⾊三部分组成
border：boeder-width || border-style || border-color
padding是外边距还是内边距
其中 border-style可以设置如下值：
none：默认值，没有边框
solid：最常⽤，单实线边框
dashed：虚线边框
dotted：点线边框
复合写法：border：5px solid red；⽆顺序
注：边框和影响盒⼦的⼤⼩
合并相邻边框（表格）：border-collapse：collapse;
2、圆⾓边框  border-radius
此属性对于图⽚同样适⽤
border-radius：10px（半径）
圆：半径 = 盒⼦⾼度的⼀半或直接写  50%
其他写法：
border-top-right-radius：右上⾓的圆⾓
border-bottom-left：左下⾓的圆⾓其他同理

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。