目录
边框 border
1.边框样式 border-style:solid 实线边框 dashed 虚线边框 dotted点线边框
2.边框颜色 border-color
3.复合写法:border: 1px solid black 简写没有顺序
4.给上下边框分别设置 border-top border-bottom right left
边框会影响盒子实际使用的大小1.测量盒子的大小不量边框,如果测量是时候包含了边框,则需要width/height减去边框
表格的边框
给表格设置边框不仅需要给表格(<table>)设置,还需要给单元格设置(<td>)
通过上面的方法设置边框后,两个单元格的边界时黏在一起的,通过border-collapse 合并相邻的边框
内容 content
即书写在盒子里面的内容
内边距 padding
1.padding-top bottom right left
2.复合写法:后面有一个值代表上下左右都有
有两个代表上下 左右
三个代表上 左右
四个代表上右下左
2.padding影响盒子大小,会把盒子撑大,用width和height减去多出来的内边距大小为原来盒子大小
3.padding不会撑开盒子的情况:如果盒子本身没有指定width和height属性,则padding不会撑开盒子大小
外边距 margin
1.margin-yop bottom left right
2.margin和padding的简写一样
3.块级盒子水平居中对齐(见上面的style)
<style>
.huhuhu {
background-color:pink;
width: 300px;
height: 300px;
margin:0 auto;
}
</style>
<div class="huhuhu"></div>
输出结果
4.行内元素和行内块元素水平居中:text-align:center
5.相邻块元素的合并:当上下两个块元素相遇时,如果上面的元素有下边距,下面的元素有上边距,题目之间的垂直间距不是bottom与top的和,而是去两者中较大的
6.嵌套块元素垂直外边距的塌陷:如果两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值
<style>
.hu{
width:400px;
height:400px;
background-color: purple;
margin-top: 50px;
}
.huhu{
width:200px;
height:200px;
background-color: pink;
margin-top:100px;
}
</style>
<div class="hu">
<div class="huhu"></div>
</div>
如果我们有如图所示的一个盒子,我们想要的输出结果是子div元素可以直接向下移动,从而有居中的效果,我们加了这样一句代码margin-top:100px;
结果却是父div整个下降了100像素,这样的情况就叫嵌套块元素垂直外边距的塌陷
我们可以用这三个方法解决
border:1px solid transparent;
/* 为父元素定义一个透明的上边框 */
padding:1px;
/* 为父元素定义一个内边距 */
overflow:hidden;
/* 隐藏浮动 */
清除内外边距
/* css的第一句代码 */
* {
padding:0;
margin:0;
}
行内元素只设置左右内外边距,不要设置上下内外边距,但是转化为块级元素就可以了