布局相关
1 设置宽高
width 和 height 赋值像素或者百分比
宽度可以通过百分比设置，高度不生效。
2 设置位置 ：
外边距：
margin 指当前元素距父元素或者相邻元素的距离
格式： margin-top (left right bottom)
margin:10px 四个外边距都是10px
margin:10px 20px 上下10px 左右20px
margin : 0 auto 居中
margin: 10px 20px 30px 40px 上 右下左
内边距：
元素内容距元素边框的距离,***改变内边距的值，元素的宽高会随着改变***
浏览器默认会给一些元素添加内边距或者外边距，所以工作的时候会使用以下代码
把默认内外边距清零，从而达到不同浏览器效果统一的目的
格式：
*{
padding:0;
margin:0;
}
3 边框(border)：
border:2px solid red; -- 设置元素的边框(可以同时设置边框的宽度、样式、颜色)
border属性可以拆分为如下设置:
border- 2px; -- 设置元素边框的宽度
border-style: solid; -- 设置元素边框的样式
border-color: red; -- 设置元素边框的颜色
其中border-width、border-style、border-color也可以按照上右下左方向进行拆分，以border-width为例：
border-top- 2px; -- 设置上边框的宽度
border-left- 2px; -- 设置左边框的宽度
border-right- 2px; -- 设置右边框的宽度
border-bottom- 2px; -- 设置下边框的宽度
4 盒子模型
CSS渲染页面的时候，使用了一种规则，就是盒子模型
盒子模型包括了12个数值，分别是：外边距的上下左右
，内边距的上下左右，边框的上下左右。
··· 一个元素在页面中所占宽度的公式：
（左外边距+左边框的宽度+左内边距）+内容宽度+右内边距+右边框的宽度+右外边距
盒子模型显示元素的注意事项
块级元素：
1 默认占一行，宽度默认100%，高度默认内容高度。
2 上下相邻的两个块级元素，上下外边距会有坍塌效果。
会取两个外边距的最大值
行内元素：
1 默认多个行内元素占一行。
2 不可以设置宽高，宽高为内容的宽高。
3 给行内元素设置左右外边距/边框/内边距都会生效，上下的不生效或显示异常。
5 颜色赋值
赋值方式
/*通过颜色名称赋值*/
/*background-color: red;*/
/*通过6位数的十六进制赋值
每两个值表示一个颜色 红绿蓝*/
/*background-color: #ff00ff;*/
/*3位的十六进制写法*/
/*background-color:fff; */
/*通过rgb 10进制赋值*/
/*background-color: rgb(255,0,0);*/
/*通过rgb 10进制赋值 带透明值 a = alpha(0-1)*/
background-color: rgba(0,0,255,1);
6 背景属性
background-color：设置背景颜色
background-image：设置背景图片，url('图片的路径');
background-repeat：设置或检索对象的背景图像是否及如何铺排，常用取值：
repeat(默认值,重复排列)
repeat-x(横向重复排列,但纵向不重复)
repaet-y(纵向重复排列,但横向不重复)
no-repeat(不重复)
background-position：设置或检索对象的背景图像位置
background: 背景颜色 背景图片 背景图片是否重复 背景图片的位置7 文本属性
1、text-align：设置元素中文本水平对齐方式，其常用取值为:
left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐
2、text-decoration：设置文本的下划线样式，其常用取值为:
underline: 有下划线
none: 没有下划线
3、text-indent：设置文本首行缩进，单位: 像素/百分比
4、letter-spacing：设置字符间隔/间距，其常用取值为:
normal
像素值
5、text-shadow：设置字体阴影，其取值为:
像素值 像素值 像素值 颜色值
第一个值为阴影水平位移，第二个值为阴影垂直位移，第三个值为阴影扩散值，第四个值为阴影颜色
圆角属性： boeder-radius:2px;
光标样式：cursor:pointer;
8 溢出属性 overflow
visible:溢出部分可见
hidden：溢出部分隐藏
scroll:溢出部分滚动显示
9 display属性:
该属性控制元素的显示方式
block：块级元素的默认值
默认情况下独占一行
可以设置宽高
inline：行内元素的默认值
默认情况下多个行内元素可以处在同一行
一般不能设置宽高
inline-block：行内块元素
多个元素既可以显示在同一行, 也可以设置宽和高
none：表示隐藏元素
10 元素类型(了解)
div/span/p 都是一个容器标签，用于包裹其他内容（这些元素本身不具备太多的样式！）
p: 块级元素，默认独占一行，用于包裹一段文本（写文章时用于p标签包裹每一段内容）
div: 块级元素，默认独占一行，用于包裹其他内容，将样式设置在div上，就可以作用在div的内容上。
span：行内元素，默认可以和其他元素显示在同一行。
(1)块级元素（block）
默认情况下，块级元素独占一行
可以设置宽和高，如果设置了就是设置的宽和高
如果不设置宽和高，其中宽是默认填满父元素，而高是由内容决定(由内容支撑)
比如: div/p/h1~h6/form/table 等元素都是块级元素
(2)行内元素（inline）
默认情况下，多个行内元素可以处在同一行
不能设置宽和高
比如: span/input/img/i/b 等元素都是行内元素
(3)行内块元素（inline-block）
既具备行内元素的特征(可以同行显示)，还具备块级元素的特征(可以设置宽和高)