选择器

上下文选择器

  1. 包含选择符

    tag1 tag2 {} // 匹配祖先和后代
    
  2. 子选择符>

    tag1 > tag2 {} // 匹配父元素与子元素
    
  3. 紧邻同胞选择符+

    tag1 + tag2 {} // tag2必须紧跟在tag1后
    
  4. 一般同胞选择符~

    tag1 ~ tag2 {} // tag2跟(不需要紧跟)在tag1后
    
  5. 通用选择符*

ID和类选择器

  1. 类选择符.

    .class-name {}
    p.class-name {}
    
  2. ID选择器#

    #id {}
    

属性选择器

  1. 属性名选择器

    tag[attr] {}
    img[title] { border: 2px solid blue; }
    
  2. 属性值选择器

    tag[attr="value"] {}
    img[title="red flower"] { border: 4px solid green; }
    

伪类选择器

  1. 链接伪类

    • link 初始状态
    • visited 点击过的链接
    • hover 悬停的链接
    • active 链接正在被点击(鼠标按下但未释放)
  2. focus伪类

    e:focus 获得焦点

    input:focus { border: 1px solid blue; }
    
  3. target伪类

    e:target 如果用户点击一个指向页面中其他元素的链接,那么那个元素就是target

    eg: wikipedia点击引用时

    <a href="#more-info">More info</a>
    <h2 id="more-info">Info</h2>
    <style>
      #more-info:target { background: #eee; }
    </style>
    
  4. 结构化伪类

    • :first-child , :last-child
    • :nth-child eg: li:nth-child(3) {}

伪元素选择器

  1. ::first-letter

    p::first-letter { font-size: 300%; } // 首字母放大效果
    
  2. ::first-line

  3. ::before , ::after

    在特定元素前面或后面添加特殊内容。一般用作Unicode图标、CSS动画

    p.age::before { content: "Age: "; }
    p.age::after  { content: "years."; }
    

层叠

浏览器层叠样式的顺序:

  1. 浏览器默认样式表
  2. 用户样式表
  3. 作者链接样式表(按顺序)
  4. 作者嵌入样式
  5. 作者行内样式

层叠规则

  1. 找到应用给每个元素和属性的所有声明
  2. 按照顺序和权重排序
  3. 按特指度排序(specificity)
  4. 顺序决定权重

计算特指度(specificity)

I - C - E

  • I for id
  • C for class
  • E for element

eg: 1-99-0 < 2-0-0

总结

  1. 包含ID的选择符 > 包含类的选择符 > 包含标签名的选择符
  2. 行内样式 > 嵌入样式 > 链接样式 (后声明 > 先声明)
  3. 设定的样式 > 继承的样式

盒模型

垂直方向上外边距是叠加的,直到一个元素的外边距碰到另一个元素的边框为止

块级元素、行内元素

  1. 没宽度的盒子

    没宽度的元素始终会扩展到填满其父元素的宽度为止。 添加水平边框、内边距和外边距会导致内容宽度减少,减少量等于水平边框、内边距和外边距的和

  2. 有宽度的盒子

    为设定了宽度的盒子添加边框、内边距和外边距,会导致盒子扩展得更宽。 实际上,盒子的width属性设定的只是盒子内容区的宽度,而非盒子要占据的水平宽度。

IE盒模型与W3C盒模型对比

W3C:

box-sizing: content-box;

IE盒模型:盒子的宽度为content + padding + boder的宽度

box-sizing: border-box;

IE6双倍边距BUG

触发条件:块级元素为浮动状态时,给元素添加margin-left/right时会出现双倍边距(左右)

解决:CSS Hack + display: inline

布局

三栏固定宽度

如果布局中的栏是浮动的,而且设定了宽度,不要去动它,而是把内容放到内部div里,动这个div

浮动滑移解法:

  1. 从设定的元素宽度中减去添加的水平外边距、边框和内边距的宽度和。
  2. 在容器内部的元素上添加内边距或外边距。(例如在容器内部加上一个没有宽度的div)
  3. 使用 CSS3 的box-sizing属性切换盒子缩放方式,比如section {box-sizing: border-box;}。应用box-sizing属性后,给section添加边框和内边距都不会增大盒子,相反会导致内容变窄。

三栏-中栏流动布局

div#threecol>div#twocol+aside

其中twocol要加上负的右栏宽度,中栏margin-left/right为左右两栏的宽度

#threecol twocol aside 左栏都要浮动,中栏无须浮动

IE7+可以使用display: table-cell直接实现一个流动中栏布局

组件

多级菜单显示隐藏

善用 display:none; && display: block;

position: absolute; 绝对定位很重要 top/left: 100%;为上/左移一个元素的宽度

position: relative; + display: block/inline-block; 可以让<a>块级显示

CSS画三角形

做一个无宽度无高度盒子,border三面颜色为透明,一面填色,即可得到想要的三角形

.box4 {
  width: 0;
  height: 0;
  border: 15px solid;
  border-color: transparent #F00 transparent transparent;
}

使用::after伪类可以做成一个聊天栏箭头的样式

See the Pen QbdxBL by banbanchs (@banbanchs) on CodePen.

小工具:三角形生成器

CSS画圆

利用CSS的border-radius属性即可画出完美的圆

border-radius: 50%;

See the Pen CSS Border Radius by Jessica Eldredge (@jessabean) on CodePen.

注意是50%,因为两个角共享100%

参考:Border-radius: 50% vs 100%

小技巧

在父元素中添加padding: 1px;可防止子元素外边距叠加 边距折叠相关:[](http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html)

绝对布局居中元素

position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0px);

小工具

响应式布局

  • 媒体查询。根据屏幕宽度提供css规则
  • 流式布局。使用em/百分比等相对单位设定页面总体宽度
  • 弹性图片。使用相对单位确保图片再大也不会超过其容器

媒体查询

媒体类型

  • all
  • handled
  • print
  • screen

媒体特性

  • min-device-width/max-device-width:匹配设备屏幕尺寸
  • min-width/max-width:匹配浏览器宽度
  • orientation: portrait/landscape:匹配设备是横屏还是竖屏

让浏览器不缩小网页

<meta name="viewport" content="width=device-width; maximumscale=1.0" />

@media规则:

改变打印时样式

@media print {
  nav {
    display: none;
  }
}

只在屏幕宽度不大于568像素时应用

@media screen and (max-width: 568px) {
  .column {
    float: none;
    width: 96%;
    margin: 0 auto;
  }
}

CSS Hack

清除浮动

最常用的是这个,Bootstrap中使用的clearfix mixin

.clearfix {
  *zoom: 1;   /* For IE6/7 */
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

顺序

  • 先普通元素再特定元素
  • 先整体再局部
  • 先布局再表现
  • 先完成再兼容