css笔记

选择器

上下文选择器

包含选择符
```
 tag1 tag2 {} // 匹配祖先和后代
```

子选择符>

 tag1 > tag2 {} // 匹配父元素与子元素

紧邻同胞选择符+

 tag1 + tag2 {} // tag2必须紧跟在tag1后

一般同胞选择符~

 tag1 ~ tag2 {} // tag2跟(不需要紧跟)在tag1后

通用选择符*

ID和类选择器

类选择符.
```
 .class-name {}
 p.class-name {}
```
ID选择器#
```
 #id {}
```

属性选择器

属性名选择器

 tag[attr] {}
 img[title] { border: 2px solid blue; }

属性值选择器

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

伪类选择器

链接伪类
- link 初始状态
- visited 点击过的链接
- hover 悬停的链接
- active 链接正在被点击（鼠标按下但未释放）

focus伪类

e:focus 获得焦点

 input:focus { border: 1px solid blue; }

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>
```
结构化伪类
- :first-child , :last-child
- :nth-child eg: li:nth-child(3) {}

伪元素选择器

::first-letter

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

::first-line
::before , ::after
在特定元素前面或后面添加特殊内容。一般用作Unicode图标、CSS动画
```
 p.age::before { content: "Age: "; }
 p.age::after  { content: "years."; }
```

层叠

浏览器层叠样式的顺序：

浏览器默认样式表
用户样式表
作者链接样式表（按顺序）
作者嵌入样式
作者行内样式

层叠规则

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

计算特指度(specificity)

I - C - E

I for id
C for class
E for element

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

总结

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

盒模型

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

块级元素、行内元素

没宽度的盒子
没宽度的元素始终会扩展到填满其父元素的宽度为止。添加水平边框、内边距和外边距会导致内容宽度减少，减少量等于水平边框、内边距和外边距的和
有宽度的盒子
为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展得更宽。实际上，盒子的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

浮动滑移解法：

从设定的元素宽度中减去添加的水平外边距、边框和内边距的宽度和。
在容器内部的元素上添加内边距或外边距。(例如在容器内部加上一个没有宽度的div)
使用 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三面颜色为透明，一面填色，即可得到想要的三角形

1
2
3
4
5
6
.box4 {
  width: 0;
  height: 0;
  border: 15px solid;
  border-color: transparent #F00 transparent transparent;
}

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

小工具：三角形生成器

CSS画圆

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

border-radius: 50%;

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

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

小技巧

在父元素中添加padding: 1px;可防止子元素外边距叠加边距折叠相关：

绝对布局居中元素

1
2
3
4
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规则：

改变打印时样式

1
2
3
4
5
@media print {
  nav {
    display: none;
  }
}

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

1
2
3
4
5
6
7
@media screen and (max-width: 568px) {
  .column {
    float: none;
    width: 96%;
    margin: 0 auto;
  }
}

CSS Hack

清除浮动

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.clearfix {
  *zoom: 1;   /* For IE6/7 */
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

顺序

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

文章目录

选择器