前端css基础篇（二）css样式与盒模型
一、css 字体样式属性
①font-size:字号大小
font-size属性属于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位，其中相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少，
②font-family:字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用
p{font-family:"微软雅黑"；}
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直接找到合适的字体（IE6等老式浏览器支持奇数会有bug）
③font-weight:
参数
normal:正常的字体。相当于number为400
bold：粗体。相当于number为700。也相当于b对象的作用
bolder：IE5 +特粗体
lighter:IE5+细体
number：IE+100|200|300|400|500|600|700|800|900
说明：设置文本字体的粗细。
④font-style:字体风格
字体倾斜除了用i和em标签之外，可以使用css来实现
参数
font-style属性用于定义字体风格，如斜体、倾斜或正常字体
normal:默认值，浏览器会显示标准字体
italic：斜体
oblique：浏览器会显示倾斜的字体样式
⑤font:综合设置字体样式（重点）
font属性用于对字体样式进行字体综合设置，其基本语法格式如下
选择器｛font：font-style font-weight font-size/line-height font-family;｝
使用font属性时，必须按上面的语法格式顺序写，不能更换顺序，各个属性以空格隔开。
注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
二、css外观属性
①color:文本颜色
color属性用于定义文本的颜色，取值方式有三种
- 预定义颜色值，如red，green,blue等
- 十六进制，如#FF0000
- RGB代码，如红色可以表示rgb（255.0,0）或rgb（100%,%0,%0）。
- 需要注意如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写0%。
②line-height：行间距
line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的时像素px
③text-align：水平对齐的方式
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性如下：
left：左对齐（默认值）
right：右对齐
center：居中对齐
是让盒子里面内容水平居中，而不是让盒子居中对齐
④text-indent:首行 缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不同的单位数值，em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位。
1em就是一个字的宽度，如果是汉字的段落，1em就是一个汉字的宽度
⑤text-decoration 文本的装饰
text-decoration 通常我们用于给链接修改装饰效果
三、标签显示模式（display）
（1）块级元素（block）
每个块级元素通常都会独自占据一整行或者多行，可以设置宽度，高度，对齐等属性，常用于网页布局和网页结构的搭建。
常见块级元素有h、p、div、ul、ol、li等
块级元素的特点：
① 总是从新行开始
② 高度、行高、外边距以及内边距都可以控制
③ 宽度默认是容器的100%；
④ 可以容纳内联元素和其他块元素
（2）行内元素（inline）
行内元素（内联元素）不占独立区域，仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽、高对齐等属性，常用于控制页面中文本的样式
常见的行内元素有a、strong、b、em、i、del、s、ins、u、span等，其中span标签是最典型的行内元素
行内元素特点
①和相邻行内元素在一行上。
②高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
③行内元素只能容纳文本或其他行内元素（a特殊）
注意
1.只有文字才能组成段落，因此p里面不能放块级元素，同理还有h、dt，它们都是文字类的块级标签，里面不能放其他块级元素
2.链接里面不能再放链接。
（3）行内块元素（inline-block）
在行内元素中有几个特殊的标签-、、,可以对它们设置宽高和对齐属性，有些资料可能会称为它们为行内元素。
行内块元素的特点：
① 和相邻行内元素（行内块）在一行上从左往右显示，但是之间会有空白缝隙
② 默认宽度是它本身内容的宽度。
③ 高度，行高、外边距以及内边距都可以控制
display：none；隐藏、消失
如果设置了display：none；这个css属性，会将这个元素在页面中完全消失。如果想再让这个消失的元素显示出来，给这个元素设置display：block；
四、css盒子模型
在html页面中，html相当于一个仓库，有很多盒子（货物）：盒子和盒子之间的距离（margin外边距），盒子里面的内容（width/height），盒子的边框（border）,盒子内容与边框的距离（padding内边距）
-
width 宽
-
height 高
-
padding 内边距
同margin外边距，四个方向内边距 -
margin:外边距
margin：1px 2px 3px 4px;上 右 下 左
margin：1px 2px 3px 上 左右 下
margin：1px 2px 上下 左右
margin：1px；设置了四个方向的值 -
border：1px solid red；边框 solid实线
盒子计算公式
- 元素实际宽度=宽度width+padding-left/padding-right+border-left/border-right
- 元素实际高度=高度height+padding-top/padding-bottom+border-top/border-bottom
- 元素的实际大小只会受到padding和border影响，跟margin没有关系
标准盒模型
标准模型中，内容（content）的宽高只是内容（content）的宽高
IE盒模型
IE模型中内容（content）的宽高是内容（content）+填充（padding)+边框（border）的总宽高。
css两种盒模型设置
box-sizing默认的是content-box（标准盒模型）
/* 标准模型 */
box-sizing：content-box；
/* IE模型 */
``box-sizing：border-box；`
标准盒模型与IE盒模型区别
俩种盒模型盒子宽高的计算公式是一样的都是content宽高+padding+border；但是content内容的计算不一样
标准盒模型content(内容)宽高=width/height
IE盒模型content(内容)宽高宽高=width/height+padding+border
margin兼容问题
（一）相邻块元素垂直外边距的合并
一个元素设置margin-bottom，另一个元素设置margin-top，这俩个值不会相加，会取最大值（这个元素是平级、同级关系的时候）
解决方案：尽可能避免
(二)嵌套块元素垂直外边距合并
对于俩个嵌套关系的块元素，如果父元素没有上内边距padding-top及边距，则，父元素的上外边距margin-top会与子元素的上外边距发生合并，合并后的外边距为俩者的最大者，也是属于第三种margin-top的值传递问题
（三）margin-top的值传递问题
当父级 元素没有设置padding-top和border-top值时，给子元素设置了margin-top值时，这个值就会传递给父级元素
解决方案：
① 给父级元素overflow：hidden；超出隐藏
②不要给子级元素设置margin-top,给我们的父级元素padding-top；（常用）
border边框
border：1px solid red;“常用”
border-width：1px；边框的宽度
border-style：solid；边框的样式
border-color:red;边框的颜色
border三角形
border-width是控制三角形的大小‘
给这个元素设置width：0；
transparent透明度
