CSS review

• background-attachment:fixed/scroll/inherit
  背景图像固定/随着页面的其余部分滚动/从父元素继承

文本文字

• text-align:justify
  每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
• text-decoration:overline/line-through/underline/none
• text-transform:uppercase/lowercase/capitalize
• letter-spacing:normal/length/inherit
  默认（规定字符间没有额外的控件）/字间距/继承
• line-height:normal/number/length/%/inherit
  默认/数字与当前字体尺寸相乘来设置行间距/固定/基于当前字体尺寸的百分比行间距/继承
• font-family什么时候用引号
  如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。
• font-size:px/em/%+em
  不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落，请务必使用正确的HTML标签。
  第三种：

  body {font-size:100%;} h1 {font-size:2.5em;} h2 {font-size:1.875em;} p {font-size:0.875em;}

  -font-variant:normal/small-caps/inherit
  默认/以小型大写字体或者正常字体显示文本/继承
  
  

  Paste_Image.png

列表

• list-style:list-style-type list-style-position list-style-image

• list-style-type
  设置列表项标记的类型

  
  
  

  Paste_Image.png
• list-style-position:inside/outside/inherit
  列表项目标记放置在文本以内，且环绕文本根据标记对齐。/默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。/继承。
• list-style-image 使用图像来替换列表项的标记

表格

• border-collapse:collapse
  消除表格边框之间的间隙，因为表和th/ td元素有独立的边界。

盒子模型

Margin - 清除边框区域。Margin没有背景颜色，它是完全透明
Border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
Padding - 清除内容周围的区域。会受到框中填充的背景颜色影响
Content - 盒子的内容，显示文本和图像

边框

• border-style:dotted/dashed/solid/double/groove/ridge/inset/outset/hidden
  点/虚线框/实线/双边界/3D沟槽边界/3D脊边界/3D嵌入边框/3D突出边框/隐藏
• border-width:px/em/thin/medium/thick
• border-color
• border-方向-style

轮廓outlines

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。在border外

• outline-color
• outline-style
• outline-width

display和visibility

如何显示和可不可见

positioning定位

static：HTML元素的默认值，即没有定位，元素出现在正常的流中。
fixed：元素的位置相对于浏览器窗口是固定位置。
Relative ：相对定位元素的定位是相对其正常位置。
absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。

浮动

清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素
一个浮动的例子

对齐

• 块元素对齐
• 中心对齐，使用margin属性
  margin-左右:auto
• position绝对定位

选择器

• 后代（空格）
• 子元素（>）
• 相邻兄弟（+）
  紧接在另一元素后的一个元素，且二者有相同父元素
• 普通相邻兄弟（—）
  所有指定元素的相邻兄弟元素

伪类（pseudo-classes）

• anchor伪类
  :link, :visited, :hover, :active
• 伪类+css
  e.x. : a.red:visited
• 其他伪类
  • :first-letter/:first-line/:first-child
    字母(only块元素)/第一行(only块元素)/第一个子元素
  • :before/:after

  • :lang
    p:lang(it)：为

    元素的lang属性选择一个开始值

    
    
    

    Paste_Image.png

css媒体

Paste_Image.png

属性选择器

• [title]
• [title = x]
• [title ~= x]含有x
• [title |= x]含有x