css 基础小集合

一：标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

（1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区  别： IE的content部分把 border 和 padding计算了进去;

二：CSS选择符有哪些？哪些属性可以继承？

*   1.id选择器（ # myid）
    2.类选择器（.myclassname）
    3.标签选择器（div, h1, p）
    4.相邻选择器（h1 + p）
    5.子选择器（ul > li）
    6.后代选择器（li a）
    7.通配符选择器（ * ）
    8.属性选择器（a[rel = "external"]）
    9.伪类选择器（a:hover, li:nth-child）

*   可继承的样式： font-size font-family color, UL LI DL DD DT;

*   不可继承的样式：border padding margin width height ;

三：CSS优先级算法如何计算？

*   优先级就近原则，同权重情况下样式定义最近者为准;

*   载入样式以最后载入的定位为准;

优先级为:
   !important >  id > class > tag
    important 比 内联优先级高

四：display有哪些值？说明他们的作用。

  block         块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
  none          缺省值。象行内元素类型一样显示。
  inline        行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
  inline-block  默认宽度为内容宽度，可以设置宽高，同行显示。
  list-item     象块类型元素一样显示，并添加样式列表标记。
  table         此元素会作为块级表格来显示。
  inherit       规定应该从父元素继承 display 属性的值。

  flex          弹性盒子，默认有两条轴，横轴和纵轴，默认横轴为主轴（默认自左向右）纵轴为辅轴（默认自上而下）。设置了display：flex的容器（也就是父元素）的属性有：

flex-direction：决定主轴的方向，即项目排列的方向、
flex-wrap：决定当排列不下时是否换行以及换行的方式，
justify-content：决定item在主轴上的对齐方式，
flex-flow：是flex-direction和flex-wrap的简写形式，
align-items：决定了item在交叉轴上的对齐方式，
align-content；定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

  box             可伸缩框；09年提出后演变成flex
可伸缩框属性（Flexible Box）
属性 描述
box-align 规定如何对齐框的子元素。
box-direction 规定框的子元素的显示方向。
box-flex 规定框的子元素是否可伸缩。
box-flex-group 将可伸缩元素分配到柔性分组。
box-lines 规定当超出父元素框的空间时，是否换行显示。
box-ordinal-group 规定框的子元素的显示次序。
box-orient 规定框的子元素是否应水平或垂直排列。

box-pack 规定水平框中的水平位置或者垂直框中的垂直位置。

五：为什么要初始化CSS样式。

- 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

- 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议）

淘宝的样式初始化代码：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

六：什么是CSS 预处理器 / 后处理器？

- 预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，
  还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。

- 后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的
  是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

七：实现三个DIV等分排布在一行（考察border-box）

1：box-flex：1  规定框的子元素是否可伸缩其尺寸。
提示：可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。

2.display:flex 弹性盒子布局

八：box-sizing 属性content-box和border-box

content-box 是W3C的标准盒模型 元素宽度=内容宽度+padding+border

border-box 是ie的怪异盒模型  他的元素宽度等于内容宽度  内容宽度包含了padding和border

比如有时候在元素基础上添加内距padding或border会将布局撑破 但是使用border-box就可以轻松完成