search

msforest / notebook

好记性不如烂笔头，记录知识的点点滴滴。
https://github.com/msforest/notebook/wiki
0 stars 0 forks source link

css 知识点 #11

Open msforest opened 7 years ago

msforest commented 7 years ago

css3 flex实例

css 选择器

getComputedStyle

选择器

  1. 分组 对不同的标签使用同一个规则

    div, span, a, input{
font-size: 24px;
}

  2. 类选择器／ID选择器

列出一些特别的表达式

.class1.class2{     // 仅表示选择同时包含这些类名的元素（类名的顺序不限）
    color: red;
}

.class1 .class2{    // 同等于后代选择器
    color: red;
}

.class1, class2{    // 同1:分组
    color: red;
}
  1. 属性选择器 
    
img[src]{
content: attr(alt);
}

img[src="1.png"]{ content: attr(alt); }

img[src~="1.png"]{ // src值包含1.png content: attr(alt); }

img[src^="1.png"]{ // 以1.png开头 content: attr(alt); }

img[src$="1.png"]{ // 以1.png结尾 content: attr(alt); }

img[src*="1.png"]{ // 包含1.png content: attr(alt); }


4. 后代选择器

div span{ // div元素下的所有span，不管span元素属于第几代 color: red; }

div > span{ // div元素的子span元素 color: red; }

h1 + p{ // 选择相邻兄弟元素 color: red; }



## 选择器的特殊性

选择器的特殊性分为四个等级：a,b,c,d.

- 若样式为行内样式，则a=1;
- b等于ID选择器的总数；
- c等于类、伪类和属性选择器的数量；
- d等于类型选择器和伪元素选择器的数量。

使用这些规则可以计算出任何css选择器的特殊性：

| 选择器 | 特殊性 | 以10为基数的特殊性 |
| - | :-: | -: |
| style='' | 1,0,0,0 | 1000 |
| #id #id1 | 0,2,0,0 | 200 |
| #id .class | 0,1,1,0 | 110 |
| div#id | 0,1,0,1 | 101 |
| #id | 0,1,0,0 | 100 |
| p.class .class1 | 0,0,2,1 | 21 |
| p.class | 0,0,1,1 | 11 |
| div p | 0,0,0,2 | 2 |
| p | 0,0,0,1 | 1 |

基本上，用style属性编写的规则总是比其他任何规则特殊，具有ID选择器的规则总是比没有ID选择器的规则特殊，具有类选择器的规则比只有类型选择器的规则特殊。最后，如果两个规则的特殊性相同，那么后定义的规则优先。
综合所有规则：important>行内样式>id>class>标签>通用样式
msforest commented 7 years ago
  1. 浮动 float:浮动，有左浮动、右浮动、不浮动；浮动的元素不占据正常的文档流 clear:清除浮动，使元素回到正常的文档流中，
  2. 定位 有相对定位relative、绝对定位absolute、固定定位fixed，还有默认的static； 相对定位是相对于元素原本在文档流中位置的定位； 绝对定位是相对于其包含块定位，其边界根据偏移属性放置；包含块是不等于static的祖先元素 固定定位是根据浏览器窗口来定位 relative/absolute/fixed可以激活top/right/bottom/left/z-index属性
  3. 盒模型 有ie盒模型和w3c标准模型； ie盒模型的内容区包含border/padding w3c标准模型是由margin/border/padding/content四个部分组成
msforest commented 7 years ago
msforest commented 7 years ago

nth-child/nth-of-type

msforest commented 7 years ago

css3 flex实例学习参考

flexbox-examples flex布局教程 medium

flex的两个概念：容器container和项目item 容器的6个相关属性：

flex

项目的6个相关属性：

image image image image image

msforest commented 6 years ago

getComputedStyle

从字面意思来看，是获取计算后的style，即获取当前元素所有最终的css属性值。

css样式定义分三种：

获取这些样式的有：style / currentStyle / getComputedStyle

用法：

<style>
a {
    width: 100px;
}
</style>
<a style="float:left">text</a>
<script>
document.querySelector('a').style.float // left
document.querySelector('a').style.width // ''
document.querySelector('a').style.setProperty('width', '10px', 'important')
document.querySelector('a').style.removeProperty('width')

document.querySelector('a').currentStyle.getAttribute('cssFloat')   // left
document.querySelector('a').currentStyle.getAttribute('width')   // 100px

document.defaultView.getComputedStyle(document.querySelector('a'), null).getPropertyValue('float')  // left
document.defaultView.getComputedStyle(document.querySelector('a'), null).getPropertyValue('width')  // 100px
</script>

document / document.documentElement / node.ownerDocument / node.ownerDocument.defaultView / window / document.defaultView

这也是为什么很多地方都用document.defaultView.getComputedStyle，而不是直接用window.getComputedStyle。

https://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/ https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle