初学CSS （盒子）

课堂笔记

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 顺时针

文字盒子居中图片和背景

1. 文字水平居中 text-align: center

2. 盒子水平居中 左右margin 改为 auto

text-align: center;  文字居中水平 
margin: 10px auto;  盒子水平居中  左右margin 改为 auto