盒子以及盒子扩展
盒子
盒子是用来实现将网页区域化的一个非常重要的工具,盒子使得网页各部分十分清晰的被分开,对于程序员十分友好(。。。),并且使得网页更加容易维护。
盒子的常用属性
宽和高这两个属性就不说了
内边距
padding为内编剧边距
该属性是用于调整盒子内部字体距离盒子边框的距离。
写法
1.四值法
把四个方向的属性全写出来
或者一个一个的写.但是要给定方向
2.三值法
3.二值法
边框
其实也就是让我们能够亲眼看到盒子的边界在哪里
边框种类
边框属性
外边距
基本与内边距相同：margin为外边距
盒子扩展
利用边框做一个三角形
效果图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>大家好</title>
<style>
div{
width: 0;
height: 0;
/*清除默认宽高*/
border:30px white solid;
/*以边框撑出来一个正方形*/
border-top-color: red;
border-bottom: 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
居中(文字与盒子)
盒子居中
双值法：(像素大小)px,auto--------可以做到水平居中
文字居中
1.水平方向文字居中
2.垂直方向文字居中
清空默认样式
很多标签都有默认样式,就比如说ul,ol标签前面的点和a标签的下划线
内容溢出隐藏
当文字很多时,可以将那些超出我们盒子范围的文字隐藏起来。
overflow:hidden