一、常用样式
CSS中有两种常用的样式，分别为：
- 布局常用样式
- 文本常用样式
以下将对这两种样式进行演示和说明
1、布局常用样式
width设置元素(标签)的宽度，如: width:100px；
height 设置元素(标签)的高度，如: height:200px；
background 设置元素背景色或者背景图片，如 : background:gold；设置元素背景色为金色
border设置元素四周的边框，如: border:1px solid black；设置元素四周边框是1像素宽的黑色实线 （solid是实线条，dashed是虚线）
代码演示：
例：设置一个四周边框是1像素宽的黑色虚线
运行结果
2、文本常用样式
color 设置文字的颜色，如: color:red;
font-size 设置文字的大小，如: font-size:12px;
font-family 设置文字的字体，如 : font-family：'微软雅黑'；为了避免中文字不兼容，一般写成: font-family:'Microsoft Yahei';
font-weight 设置文字是否加粗，如: font-weight:bold;设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高，如:line-height:24px;表示文字高度加上文字上下的间距是24px﹐也就是每一行占有的高度是24px
text-decoration设置文字的下划线，如: text-decoration:none;将文字下划线去掉
二、常用属性
1、display属性
display属性是用来设置元素的类型及隐藏的，常用的属性有:
- none元素隐藏且不占位置
- block元素以块元素显示 （默认）
代码演示：
- 将第二个标签的文本值给隐藏起来
隐藏前和隐藏后的运行结果比较
2、overflow属性
overflow的设置项∶
visible 默认值内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
代码演示：
先设置一个长方体边框
在这个长方体里写入比较长的数据，这时我们会看到数据溢出的现象
- 这时利用overflow中的hidden设置项，发现内容被修剪，其余内容不可见
- 但是，这并不是我们想要达到的效果，我们希望能够在长方体中看到所有数据
- 于是我们把hidden换成scroll，看其效果如何
再把scroll换成auto，看其效果 ，因为是水平方向上有数据溢出，所以就只出现水平滚动条
三、外边距和内边距
1、padding内边距
padding:定义元素边框与元素内容之间的空白区域。
padding-top、padding-bottom、padding-right、padding-left
padding:25px 50px 75px 100px; 上、右、下、左
padding:25px 50px 75px; 上、左右、下
padding:25px 50px; 上下、左右
padding:25px; 上下左右
代码演示：
- 先设置一个正方体边框 ，并在边框内写入内容
查看内边距，鼠标右键，点击检查，会看到右下方有一个正方体，可以把这个正方体看成是一个盒子，这个盒子中可以看到内边距的内容。
设置内边距：padding:25px 50px 75px; 上、左右、下
2、margin外边距
margin:设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
margin-top、margin-bottom、margin-right、margin-left
margin:25px 50px 75px 100px; 上、右、下、左
margin:25px50px 75px; 上、左右、下
margin:25px 50px; 上下、左右
margin:25px; 上下左右
margin的用法和padding相同，可参照以上步骤使用。
