前端之css

常见元素属性
1. 高宽尺寸

高宽尺寸 高度尺寸：height、max-height、min-height

1. 文本

   Color:设置文本颜色
   Text-indent:文本缩进（可以为负值，常用单位:px、em）
   Text-align：文本水平对齐方式，属性值：left | center | right | justify
   Text-decoration:属性值：none | underline | overline | line-through
   Letter-spacing:字间距，常用单位px或em
   Word-spacing:词间距，常用单位px或em

2. 字体

   font-family:字体类型
   Font-size:字体大小
   Font-weight:设置字体粗细
   属性值：normal | bold | bolder | lighter | 100~900
   400~=normal , 700~=bold
   Font-style：定义字体的风格

3. 背景

   Background
   Background-color:设置背景颜色
   Background-image:设置背景图片，属性值为url()引入图片路径
   Background-position:设置背景位置，两个参数，一个为水平方向，一个为垂直方向，可使用百分比，方位词(如left)，具体数值等定位
   Background-repeat:定义背景图片重复度，默认为repeat
   属性值: repeat | repeat-x | repeat-y | no-repeat

4. 列表

   List-style
   List-style-image:将图片作为列表项标志，属性值用url()参数
   List-style-position:定义列表项标志的位置
   属性值inside | outside

5. 表格

   Border-collapse:设置表格的边框是否被合并为一个单一的边框
   属性值：separate(默认) | collpase(合并)
   Border-spacing:设置相邻单元格的边框间的距离
   Border-spacing:length;定义一个 length 参数，指的是水平和垂直间距
   Border-spacing:length length;第一个设置水平间距，而第二个设置垂直间距
   caption-side:表格标题位置 属性值：top | bottom
   empty-cells:设置空单元格显示方式 属性值：hide | show( 默认)

6. 轮廓

   Outline
   Outline-width:设置轮廓宽度
   Outline-style:设置轮廓样式
   Outline-color:设置轮廓颜色

7. 盒模型

   Padding 内边距
   常用单位：px、em、百分比
   Padding-top / padding-rgiht / padding-bottom / padding-left
   Padding:10px; //四个方向的padding值都为10px
   Padding:10px 20px; //上下的padding值为10px，左右的padding值为20px
   Padding:10px 20px 30px;//上内边距为10，左右内边距为20，下内边距为30
   Padding:10px 20px 30px 40px;//从上内边距开始，按照顺时针方向依次排

   Border 边框
   常用的border属性
   宽度尺寸：width
   单位：像素
   边框线条颜色：border-color
   边框线条样式：border-style（solid实线、dashed虚线、dotted点虚线）
   边框线条宽度：border-width

   Border属性
   上边框：border-top
   下边框：border-bottom
   左边框：border-left
   右边框：border-right
   合起来写：border:1px solid red;

   Margin 外边距
   常用单位：px、em、百分比
   Margin -top / margin-rgiht / margin-bottom / margin-left
   Margin :10px; //四个方向的margin值都为10px
   Margin :10px 20px; //上下的margin值为10px，左右的margin值为20px
   Margin :10px 20px 30px;//上内边距为10，左右内边距为20，下内边距为30
   Margin :10px 20px 30px 40px;//从上内边距开始，按照顺时针方向依次排

   模型包含content尺寸，padding尺寸，border尺寸和margin尺寸
   模型分为标准（w3c）盒模型和IE盒模型：
   标准盒模型盒子尺寸计算方式:
   盒子宽=width(content) + padding-left + padding

样式表优先级：内嵌>内部>外部>浏览器默认缺省
导入外部样式表：@import url(“css/style.css”);

链接与导入两种方式的区别

1.隶属关系不同，link属于HTML标签，@import是css提供的载入方式lingk可以引入其他类型的文件，而@import只能载入css样式2.加载时间和顺序不同，link会优先将css加载到网页中进行编译显示，而@import只能等HTML结构呈现出来后在进行加载渲染3.兼容性不同，link没有任何问题 ，@import只有IE5,1以上才能使用4.DOM模型控制样式，dom改变样式时，只能使用link，@important不受dom模型控制

css选择器：基本选择器，组合选择器，属性选择器

基本选择器:通用选择器，标签选择器，类选择器，ID选择器 ID》类》标签》通用组合选择器：多元素选择器，后代选择器，子选择器，相邻兄弟选择器，普通兄弟选择器属性选择器：存在选择器，相等选择器，包含选择器，选字符选择器，前缀选择器，子串选择器，后缀选择器