7.27 行内元素和块状元素 * 精灵图

Posted 2020-09-30 说一是二

# CSS回顾
### CSS的使用
* 元素的style属性内
* style标签内
* link引入外部的css文件 `<link rel="stylesheet" href="">`
* @import url("");  写在css中

### CSS的基本语法
    
    选择器{
        属性:属性值;
    }  

### CSS注释
`/*注释*/`

### CSS的长度单位
* px
* em  
* 百分比
* 绝对单位  cm  mm  pt

### CSS的颜色表示
* 英文单词
* rgb方式
* 16进制

### CSS选择器
* ID选择器
* CLASS选择器
* 元素选择器
* 全局选择器  *
* 组合-- 后代    selecter selecter
* 组合--子元素   selecter>selecter
* 组合--多条件   p.item
* 伪类
    * :link
    * :visited
    * :hover
    * :active




### 选择器优先级    




# CSS的属性
### CSS字体属性
* font-family      sans-serif/serif
* font-size
* font-weight    normal/bold/bolder/lighter/数字
* font-style    normal/italic/oblique
* font-variant: normal/small-caps
* font   `font:[weight/style/variant] size family`


### CSS颜色属性
* color

### CSS文本属性
* letter-spacing   字母间距  默认0px
* word-spacing    单词间距  默认 0px
* text-decoration   值： none/underline/overline/line-through
* text-align    水平对齐方式   left(默认)/right/center
* vertical-align  垂直对齐（基于文字的基线）  baseline/bottom/top/middle/sub/super/text-top/text-bottom/百分比
* text-indent   首行缩进  长度单位
* line-height:  行高  长度单位  设置行高=高 使一行文字垂直居中
* `font:[style/variant/weight] size/line-height family`

### CSS背景属性
* background-color  背景颜色
* background-iamge  背景图片 url()
* background-repeat  背景图片的平铺方式  repeat(默认)/repeat-x/repeat-y/no-repeat
* background-postion  背景图片定位  left/center/right/长度单位  top/center/bottom/长度单位
* background-attachment   背景图片固定或滚动   scroll(默认)/fixed
* `background:color image repeat postion`


### CSS边框属性
* border-width   边框线的宽度 长度单位
* border-color
* border-style   边框线的风格   solid 实线/dotted点线/dashed虚线/double双线 inset 3D凹边...
* border   `border:width style color`
* border-left/right/top/bottom

### CSS鼠标光标属性
* cursor   值  default/pointer/move/crosshair/text/wait


### CSS列表属性
* list-style-type  列表项的图形  disc/circle/square/decimal/lower-roman/upper-roman ....
* list-style-postion   列表项图形的位置   outside/inside
* list-style-iamge    自定义列表图形  url
* 最常见的设置  `list-style:none`

### CSS表格属性
* table-layout   表格布局方式  auto/fixed
* border-collapse  合并单元格边框   separate/collapse
* border-spacing  单元格间距  长度单位
* caption-side     表格标题位置  top/bottom
* empty-cells     没有内容的单元格是否隐藏    show/hide


### CSS sprites css精灵图


# DIV+CSS布局
### 行内元素和块状元素呢
* 块状元素独占一行， 行内元素可以共用一行
* 默认宽度：  块状元素默认宽度由父元素决定  行内元素默认宽度右内容决定
* 块状元素可以设置宽高， 行内元素不可以设置宽高
* 大部分块状元素内部可以嵌套块状或行内， 大部分行内只能嵌套行内
* 外边距，块状没问题，行内只能设置左右


padding 内间距 margin 外间距