CSS常见样式-上

块级元素(block-level)	行内元素(内联、inline-level)
可以包含块级和行内	只能包含文本和行内
占据一整行空间	占据自身宽度空间
设置宽高会生效	设置宽高会无效
设置内外边距生效	设置内外边距左右方向生效，上下会失效 （视觉上上下方向会被撑开，上下边框的位置会受影响， 但不会影响元素实际高度）

• block-level
  div h1 h2 h3 h4 h5 h6 p hr form ul dl ol pre table li dd dt tr td th
• inline-level
  em strong span a br img button input label select textarea code script

css继承

子元素会继承父元素的某些css属性

一、 不可继承的属性

• display
• 文本属性
  vertical-align text-decoration text-shadow white-space unicode-bidi
• 盒模型属性
  width height margin margin-top margin-right margin-bottom margin-left border border-style border-top-style border-right-style border-bottom-style border-left-style border-width border-top-width border-right-right border-bottom-width border-left-width border-color border-top-color border-right-color border-bottom-color border-left-color border-top border-right border-bottom border-left padding padding-top padding-right padding-bottom padding-left
• 背景属性
  background background-color background-image background-repeat background-position background-attachment
• 定位属性
  float clear position top right bottom left min-width min-height max-width max-height overflow clip z-index
• 生成内容属性
  content counter-reset counter-increment
• 轮廓样式属性
  outline-style outline-width outline-color outline
• 页面样式属性
  size page-break-before page-break-after
• 声音样式属性
  pause-before pause-after pause cue-before cue-after cue play-during

二、可继承的属性

• 字体属性
  font font-family font-weight font-size font-style font-variant font-stretch font-size-adjust
• 文本属性
  text-indent text-align line-height word-spacing letter-spacing text-transform direction color
• 元素可见属性
  visibility
• 表格布局属性
  caption-side border-collapse border-spacing empty-cells table-layout
• 列表布局属性
  list-style-type list-style-image list-style-position list-style
• 生成内容属性
  quotes
• 光标属性
  cursor
• 页面样式属性
  page page-break-inside windows orphans
• 声音样式属性
  speak speak-punctuation speak-numeral speak-header speech-rate volume voice-family pitch pitch-range stress richness azimuth elevation

水平居中

• 块级元素 margin: 0 auto;
• 行内元素 text-align: center;

CSS实现三角形

利用border，宽高设置为0，用四个方向的border实现三角形

<style>
  .box {
    height: 0;
    width: 0;
    border-top: solid 30px red;
    border-right: solid 30px green;
    border-bottom: solid 30px yellow;
    border-left: solid 30px blue;
  }
</style>
<div class="box"></div>

单行文本溢出加...

white-space: nowrap;
overflow: hidden;
text-overflow: elliapse;

px、em、rem区别

	px	em	rem
区别	固定单位，设置后，字体大小为设置的值	相对单位，相对于父元素字体大小	相对单位，相对于根元素(html)字体大小