CSS常见样式

• 块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别

• 块级元素
  div h1 h2 h3 h4 h5 h6 p hr
  form ul dl ol pre table
  li dd dt tr td th
• 行内元素
  em strong span a br img
  button input label select
  textarea code script

• 区别
  块级可以包含块级和行内，行内只能包含文本和行内
  块级占据一整行空间，行内占据自身宽度空间
  块级元素可以设置宽高，行内元素不能设置
  margin和padding行内元素可以设置左右间距，块级都可

• 什么是 CSS 继承?
  子元素从父元素继承属性；当一个非继承属性没有指定值时，则取属性的初始值.
• 哪些属性能继承，哪些不能？

• 继承属性
  border-collapse
  border-spacing
  caption-side
  color
  cursor
  direction
  font (其中包括 font-family , font-size , font-weight , font-style)
  letter-spacing
  line-height
  list-style (其中包括 list-style-image , list-style-position , list-style-type)
  text-align
  text-indent
  text-transform
  visibility
  white-space
  word-spacing
  字体呀，文本呀，颜色等的设置都是可继承属性
• 非继承属性
  z-index
  width (其中包括 min-width , max-width)
  display
  float
  clear
  vertical-align
  unicode-bidi
  position
  top
  bottom
  left
  right
  text-decoration
  background (其中包括 background-color , background-image , background-position , background-attachment , background-repeat)
  border (其中包括 border-color , border-style , border-width , border-spacing and so on)
  padding (其中包括 padding-left , padding-right , padding-top , padding-bottom)
  margin (其中包括 margin-left , margin-right , margin-top , margin-bottom)
  outline (其中包括 outline-color , outline-style , outline-width)
  clip
  content
  非继承属性大部分都是一些和定位呀，浮动呀，盒子模型呀等有关
  参考地址

• 如何让块级元素水平居中？

• 先设置width（<界面width），再设置margin: auto;

• 如何让行内元素水平居中?

• text-align: center.
• 运用盒模型flex.
  display： flex;
  justify-content: center;

• 用 CSS 实现一个三角形

CSS三角形.png

• 单行文本溢出加 ...如何实现?
  .card > h3{
  white-space: nowrap; /*单行文本超出边框宽度，nowrap不折行*/
  overflow: hidden; /*超出文本隐藏*/
  text-overflow: ellipsis; /*溢出变...*/
  }

• px, em, rem 有什么区别

• px:像素，可直接设置数值，如12px，但不能小于浏览器的最小值12px
• em:相对单位，相对于父元素字体大小

• rem:相对单位，相对于根元素(html)字体大小

  
  CSS样式px，em，rem.png
  

  根元素body为20px，text为body的子元素，p和h3为text的子元素，可见p元素下的字体被放大了4倍，变成了80px；而h3下的字体为20px.

• 解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?

font字体的设置.png

代码1
代码2
代码3
代码4
代码5