课堂笔记
1.文本的垂直居中
行间距与行高设置相同
height: 40px;
line-height: 40px;
2.文本的水平居中
text-align: center;
3.text-indent:首行缩进
text-indent: 2em; 1em 就是一个汉字的宽度
4.超链接去掉下划线
text-decoration: none;
5.在一个盒子中有图片和文字 需要文字垂直居中
给图片添加样式
vertical-align: middle;
6.去掉 ul ol的序号
li{list-style: none;}
表格的细线边框
以前学过的html表格边框很粗,这里只需要CSS一句话就可以美观起来。 让我们真的相信,CSS就是我们的白马王子(白雪公主)。
table{ border-collapse:collapse; } collapse 单词是合并的意思
border-collapse:collapse; 表示边框合并在一起。
圆角边框(CSS3)
从此以后,我们的世界不只有矩形。radius 半径(距离)
语法格式:
border-radius: 左上角 右上角 右下角 左下角;
内边距
注意: 后面跟几个数值表示的意思是不一样的。
值的个数 | 表达意思 |
---|---|
1个值 | padding:上下左右边距 比如padding: 3px; 表示上下左右都是3像素 |
2个值 | padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素 |
3个值 | padding:上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素 |
4个值 | padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针 |
文字盒子居中图片和背景
-
文字水平居中 text-align: center
-
盒子水平居中 左右margin 改为 auto
text-align: center; 文字居中水平 margin: 10px auto; 盒子水平居中 左右margin 改为 auto