CSS合集

1. position属性

   三种定位机制：普通流，浮动和绝对定位。
   position属性分别为static|relative|absolute|fixed|sticky|inherit
   static为元素默认属性,没有定位（忽略z-index,left,bottom,right,top声明）
   relative是相对于自身原本的位置进行偏移，可设置left，bottom等属性进行定位；
   absolute是相对于static以外的父元素的第一个祖先元素进行定位，可以设置 left,right,bottom，top来定位。
   fixed是绝对定位，相对于浏览器窗口进行定位，可通过left,bottom,right,top进行定位
   sticky:在屏幕范围内该元素位置并不受到定位影响，当位置要超过屏幕范围内时，定位变成fixed,设置left和top变为固定位置的效果，目前只有Firefox和safari.

2. 浮动定位

   浮动定位作为定位机制的一种，可以通过float属性设置左右浮动，浮动元素不在文档的普通流中，所以计算父元素的高度时不考虑在内.
   与position的兼容效果：
   元素同时利用position:relative,float,(top/left/bottom)等属性，则元素先浮动到相应的位置，后根据left的距离来发生偏移。
   若同时利用position:absolute及float属性，则float失效；

3. 清除浮动方式

   1.添加新的元素 clear:both；
   2.建立BFC,overflow为auto或者是hidden.浮动元素会计算在内。
   3.：after伪元素，设置clear:both，zoom:1兼容IE；
   4.父级设定高度；

4. BFC

   BFC：块级执行上下文，会创建一个块级上下文，容器的子元素不会影响外面元素，主要包括：容器高度会包括浮动元素在内；内部Box会在垂直方向，一个接一个放置；且垂直方向的距离由margin决定；BFC区域不会与浮动box重叠；
   产生BFC的情况：
   position为absolute或者是fixed;overflow不为visible;float不为none;display:flex|table-cell|inline-block.

5. 盒子模型

   主要分为两种盒子，标准盒子和怪异盒子（IE）
   标准盒子：范围包括margin+padding+border+width;
   怪异盒子：范围包括margin+width。width包括border+padding.
   可以通过box-sizing属性设置选择哪种盒子来渲染元素；属性为content-box|border-box;

6. CSS3动画

   主要的属性有@keyframes和animation来设置动画。Transform和transition属性。CSS3属性需要注意浏览器兼容问题：(-webkit|-o-|-ms-|-moz-)
   @keyframes主要是用来指定规则创建动画，可以用from-to或者是0%-100%来设置动画的开始和完成，animation属性是简写属性，可设置animation-name|animation-duration|animation-timing-function|animation-delay|animation-iteration-count|animation-direction.
   animation-name—动画名称
   animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
   animation-timing-function规定动画的曲线 可设置为linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier（n,n,n,n）在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
   animation-delay—开始之前的延迟时间
   animation-iteration-count: n|infinite;播放次数，几次或者无限次；
   animation-direction: normal|alternate;正常播放或者轮流反向播放；
   transform:rotate|scale|skew|translate|matrix;
   rotate:可以设置角度deg来进行旋转；
   translate：可设置垂直方向和水平方向的偏移。
   scale:设置水平和垂直方向的缩放；
   skew:skew(x,y)使元素在水平和垂直方向同时扭曲
   transform-origin:可改变中心焦点
   transition:css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值.两种属性：transition-duration|transition-timing-function:ease|ease-in|ease-out|ease-in-out.

7. CSS选择器

   div>p    选择父元素为div的所有p元素div+p    选择紧接着div元素之后的p元素[attribute]    [target]    选择带有 target 属性所有元素。 [attribute=value]  [target=_blank] 选择 target="_blank" 的所有元素。   [attribute~=value]    [title~=flower]    选择 title 属性包含单词 "flower" 的所有元素。 [attribute|=value] [lang|=en]  选择 lang 属性值以 "en" 开头的所有元素。p：first-of-type   选择属于其父元素的首个p元素的每个<p>元素p : last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。   p:only-child   选择属于其父元素的唯一子元素的每个 <p> 元素。p:nth-child(2)   选择属于其父元素的第二个子元素的每个 <p> 元素。p:last-child   选择属于其父元素最后一个子元素每个 <p> 元素。

8. em和rem的区别？

   em和rem都是浏览器将相对单位转换为像素值。em 和 rem 单位之间的区别是浏览器根据谁来转化成px值 理解这种差异是决定何时使用哪个单元的关键。当使用rem单位，他们转化为像素单位大小取决于页根元素的字体大小，即HTML元素的字体元素。而em是相对于使用em单位的元素的字体大小。之所以父级元素的字体大小可以影响em，是因为继承的原因。

9. flex布局

   flex布局可以自动调整元素在容器空间的大小。主要是分为主轴和侧轴。主要是分为主容器和项目。主要有 flex-direction|align-items|justify-content||flex-wrap||flex-flow.
   flex-direction 决定项目沿着主轴的排列方向（row|row-reverse|column|column-reverse）
   align-items： 决定项目相对于侧轴的排列方式 stretch||center||baseline||flex-end|flex-end
   justify-content:决定项目相对于主轴的排列方式 flex-start|flex-end|center|space-around|space-between
   flex-wrap:项目的换行方式 nowrap||wrap|wrap-reverse
   align-content属性用于多行的Flex容器
   项目属性：order||flex-grow||flex-shrink||flex-basis||align-self

10. 三栏布局

    主要方法：
    1.float属性，流式布局
    2.BFC三栏布局 float+overflow:hidden
    3.双飞翼布局，（main内容可以优先加载）主要是通过margin负边距
    4.圣杯布局
    5.flex布局
    6.table布局
    7.绝对定位布局
    两栏布局和三栏布局差不多。

11. 元素居中方法
    见博客http://blog.csdn.net/rheawang/article/details/74552199

12. 块级元素，行内元素，行内块级元素

    行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
    块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
    空元素:br、meta、hr、link、input、img
    区别：
    行内元素：和其他元素都在一行上；行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
    块级元素：独占一行，其宽度自动填满其父元素宽度；3.宽度始终是与浏览器宽度一样，与内容无关
    ；它可以容纳内联元素和其他块元素；display属性为block；块级元素的垂直相邻外边距margin会合并。
    inline-block: 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)

13. 可继承属性和不可继承属性

    可继承属性：字体系列属性，文本系列属性，文本可见性visibility,表格布局属性，列表布局属性，页面样式属性；
    不可继承属性：盒子系列属性(width,margin,padding,border),文本属性，display,背景属性，定位属性，轮廓样式属性。
    所有元素可继承：visibility和cursor。
    内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-f amily、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、 direction。
    块状元素可继承：text-indent和text-align。
    列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
    表格元素可继承：border-collapse。

14. link和@import的区别？

    link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
    其次是兼容性上的问题，@import CSS2时才引入。
    link 是一个html 的一个标签 ，而@import 是css 的一个标签
    另外相对于href与src的区别，href是引用，src主要为引入资源。

15. 渐进增强和优雅降级
    渐进增强是针对低版本的浏览器进行构建页面，完成基本功能后，再针对高级浏览器进行效果和交互功能以达到更好的体验。
    优雅降级是一开始就构建完整的站点功能，然后针对低版本的浏览器进行测试和修复。例如CSS hack.