CSS印象不深的小地方

一. margin折叠的条件

　　相邻的外边距会被折叠成一个，取最大值。

　　下图因为红块没有设置边框和内边距、无其它子元素，所以红块的外边距和子元素的外边距折叠成一个

　　

　　判断外边距是否相邻：

　　1. 两个外边距都没有被非空内容、padding、border隔开

　　2. 都属于常规流（浮动元素、inline-block、绝对定位都不属于常规流），可以是相邻的节点，也可以是父子节点

二. CSS3选择器

E[property^="bar"]	某属性值以bar开头的E元素
E[property$="bar"]	某属性值以bar结尾的E元素
E[property*="bar"]	某属性值包含字符串bar
E:nth-child(n)	选择相对于其父元素的第n个子元素，且该子元素是E类型
E:nth-last-child(n)	选择相对于其父元素的倒数第n个子元素，且该子元素是E类型
E:nth-of-type(n)	选择其父元素的第n个E类型子元素，注意区分E:nth-child(n)的差别
E:first-child	E:nth-child(1)
E:last-child	E:nth-last-child(1)
E:only-child	当E为其父元素的唯一子元素时
E:empty	匹配内容为空的E元素
E:target	当url使用锚点引用了页面的对象时，选择匹配E的对象
E:enabled/E:disabled	启用/禁用了的UI元素
E:checked	选择了的UI元素
E:not(s)	不匹配某个选择器的元素
E~F	匹配任何在E元素之后的同级F元素

 

 

 

 

 

 

 

 

 

 

 

 

 

 

三. border-radius

border-radius可以得到一段圆的弧，也可以通过两组值来得到一段椭圆的弧

/*  border-radius : 圆角半径 / 垂直方向的半径   */
border-radius : 10px / 40px;

四. css3 background

　　background-size: 背景缩放大小 cover/contain/数值

　　background-clip: 剪裁起始区域 border-box/padding-box/content-box

　　background-origin: 绘制起始区域 border-box/padding-box/content-box

　　注意简写：

　　background : image color repeat position attachment/size

五. 经典布局（深刻理解负边距和浮动）

　　“双飞翼布局” : 利用负边距对浮动元素的影响，如下图：

　　当两个元素都左浮动时，效果是这样的：

　　

　　给aside块设置负边距后，aside块会遮盖一部分，如下图：

　　

 

六. CSS3多列布局

此布局方式类似于出版报纸，增强了HTML文档的表现力，扩展了应用场景，例如电子出版领域，兼容IE10以上

#para {
      /*列数*/
      -webkit-column-count : 2;
      /*每列固定宽度，但列的实际宽度与容器宽度也有关系*/
      -webkit-column-width : 10em;  
     /*列与列之间的空隙*/
      -webkit-column-gap : 5em;
     /*列中间的分割线*/
      -webkit-column-rule : 6px solid gray;
}

七. 弹性盒布局（为移动而生的强大布局）

　　弹性容器 ：display:flex/inline-flex属性将元素变成弹性容器，flex表现为block，inline-block表现为inline-block。

　　弹性项 ：弹性容器的子元素。

　　主轴线：默认基于行，可通过flex-flow改变方向，从而改变弹性项的排列方向。

　应用在容器上的属性：

.box {
     /*弹性容器*/ 
     display : flex;display : -webkit-flex;
     /*改变主轴线，值为row、row-reverse、column、column-reverse*/
     flex-flow : column; -webkit-flex-flow : column;
     /*主轴线的方向*/
    flex-direction : column;
    /*容器长度不够时，允许换行*/
    flex-wrap : wrap;
    /**/
}

 八、sticky footer效果

大部分网站都有底部栏，当页面内容太少时，整个页面可视元素高度小于窗口的高度，看上去很难看，

所以，完美的效果应该是页面内容少的话，底部栏贴在窗口的底部，页面内容足够长的话，底部栏顺应往下推送。

解决方案：

1、固定高度

2、弹性布局

...