文本的样式

对英文统一格式化 :text-transform:none；默认
capitaliza首字母大写 uppercase全部大写 lowercase全部小写
文本的修饰 为文本加线 :text-decoration:
underline下划线 overline上划线 line-through删除线
去除超链接的下划线：text-decoration:none;
指定字符和字符间距：letter-spacing:10px;
设置单词的间距：word-spacing:10px; 用空格判断
对齐文本：text-align:left; 两端对齐：justify;
首行缩进：text-indent:20px; font-size:20px; text-indent:2em; em随着fone-size变化，
是两个的意思

行间距

行高 line-height:40px; 字号默认16px;
行间距等于行高减去字号
可以直接px 也可以% line-height:100%; 相对于字号的100% font-size:20px;
1等于100%一倍的行高
字体大小的后面设置行高 30px/50px(行高); 行高写到font后面 父亲的高度和行高一致，可以垂直居中
height：200px; line-height:200px;

盒模型

边框 border
内间距 padding
内容区（子元素） content
外边距 边框 margin
border-width:边框宽度 10px 20px 30px 40px;
border-color: 边框颜色
border-style:solid实线 边框样式
border-top-width:上面边框的宽度

边框

默认边框 3px 黑色
边框样式：border-width:10px; border-color:red; border-style:solid; 缺一不可
border:red solid 10px;简写
border-left:red solid 10px; 只有左边框
border-top:10px red solid; 只有上边框
border-bottom:10px red solid; 只有下边框

内边距 padding

想要只有右侧没有边框，先把四条边框都设置了，然后再把有边框设为none
border:10px solid red; border-right:none;
盒子的大小 是由内容区+内边距+边框
盒子可见框的宽 两边边框+内边距+内容区的宽
盒子可见框的高 上下边框+上下的内边距+高
内边距影响盒子的大小

外边距 margin-left:auto;

外边距是指盒子其他盒子之间的距离 扩大了实际的占地面积
设置左和上会改变盒子的位置
margin-top:100px;
margin-left:100px;
margin-bottom:-100px 两个盒子会重叠

最大限度靠右 水平方向有效左右
margin-left:auto;+margin-right:auto; 水平居中
负值 auto 适合外边距
margin：0 auto；水平居中

外边距的重叠

垂直方向的外边距是重叠的 ，兄弟和兄弟之间，取最的值，
发生重叠要两个要点：1是相邻的 2是垂直 并且不是取和，取最大值
父子元素的垂直方向外边距相邻了，子元素设置的外边距回传给父元素
加内容加边框加内边距都是让相邻的元素不相邻

浏览器的默认样式

清除浏览器的默认样式
*{
padding:0
margin:0
}

内联元素的盒模型

内联元素不能设置宽高
内联元素可以在水平方向设置内边距
内联元素也可以设置垂直方向的内边距，不影响界面布局
内联元素可以设置边框，但是垂直方向的边框不会影响页面布局，但是水平方向的会影响
内联元素支持水平方向的外边距，水平之间的外边距是求和的，垂直方向的外边距不好使

display和visibility

display可以修改元素的类型
block 块元素
inline 内联元素
inline-block 行内块
display:none； 不显示元素，并且这个元素不会在页面中占有位置
visibility:hidden; 不显示元素，但是会在页面中占有位置
visibility:visible; 不显示元素，也不会在页面中占有位置

。