css 知识点

[msforest]

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;
}

3. 属性选择器

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]

2. 浮动
   float:浮动，有左浮动、右浮动、不浮动；浮动的元素不占据正常的文档流
   clear:清除浮动，使元素回到正常的文档流中，
3. 定位
   有相对定位relative、绝对定位absolute、固定定位fixed，还有默认的static；
   相对定位是相对于元素原本在文档流中位置的定位；
   绝对定位是相对于其包含块定位，其边界根据偏移属性放置；包含块是不等于static的祖先元素
   固定定位是根据浏览器窗口来定位
   relative/absolute/fixed可以激活top/right/bottom/left/z-index属性
4. 盒模型
   有ie盒模型和w3c标准模型；
   ie盒模型的内容区包含border/padding
   w3c标准模型是由margin/border/padding/content四个部分组成

[msforest]

• background-clip: 规定背景的定位区域

• background-origin: 规定背景图片的定位区域
  值有：content-box, padding-box, border-box

• transform(转换):

  • scale(0.5，2): 缩放，表示水平方向缩放50%，垂直方向放大一倍；若只有一个参数，表示水平垂直方向都缩小50%
  • skew(30deg,30deg): 倾斜，水平方向倾斜30deg,垂直方向倾斜30deg；若只有一个参数，则水平方向倾斜，垂直方向不倾斜。
  • translate(50px,50px): 移动，水平方向移动50px,垂直方向移动50px；若只有一个参数，则水平方向移动50px,垂直方向不移动。
  • rotate(45deg):旋转，水平方向旋转45deg。

• transition(有四个属性 默认值 all 0 ease 0) 过渡

  • transition-property: 规定设置过渡效果的 CSS 属性的名称。
  • transition-duration 规定完成过渡效果需要多少秒或毫秒。
  • transition-timing-function 规定速度效果的速度曲线。 ease/linear/ease-in/ease-out/ease-in-out/cubic-bezir(自定义时间曲线)
  • transition-delay 定义过渡效果何时开始。

• animation(none 0 ease 0 1 normal)动画: 与keyframes结合使用

  • animation-name 规定需要绑定到选择器的 keyframe 名称
  • animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
  • animation-timing-function 规定动画的速度曲线。
  • animation-delay 规定在动画开始之前的延迟。
  • animation-iteration-count 规定动画应该播放的次数。
  • animation-direction 规定是否应该轮流反向播放动画。

[msforest]

• 伪类／伪元素

• 伪类分动态伪类和静态伪类
  动态伪类：:focus, :hover, :active.
  静态伪类：:link, :visited, :first-child.

• 伪元素
  :first-line, :first-letter, :before, :after.

nth-child/nth-of-type

[msforest]

css3 flex实例学习参考

flexbox-examples
flex布局教程
medium

---

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

• flex-direction 属性决定主轴的方向
  • row | row-reverse | column | column-reverse
• flex-wrap 弹性盒子的子元素超出父容器时是否换行
  • nowrap | wrap | wrap-reverse | initial | inherit
• flex-flow 是flex-direction属性和flex-wrap属性的简写形式
• justify-content 弹性盒子元素在主轴（横轴）方向上的对齐方式
  • flex-start | flex-end | center | space-between | space-around
• align-items 定义项目在交叉轴上如何对齐
  • flex-start | flex-end | center | baseline | stretch
• align-content 定义多根轴线的对齐方式
  • flex-start | flex-end | center | space-between | space-around | stretch

flex

项目的6个相关属性：

• order 弹性盒子的子元素排列顺序
• flex-grow 定义项目的放大比例
• flex-shrink 定义项目的缩小比例
• flex-basis
• flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
• align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
  • auto | flex-start | flex-end | center | baseline | stretch

[msforest]

getComputedStyle

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

css样式定义分三种：

• 内联样式(inline style)
• 行内样式(internal style sheet)
• 外部样式(external style sheet)

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

• style
  • 只能获取内联样式所定义的属性
  • 可读可写可删(getPropertyValue/setProperty/removeProperty)
  • 可通过cssText一次性修改元素样式属性值，避免多次reflow和repaint
• currentStyle
  • 用在兼容IE的黑魔法
  • 可以获取上述三种定义的属性及动态改变的属性值
  • 使用getAttribute方法取值
  • 只读
• getComputedStyle
  • 可获取伪类元素的样式，currentStyle做不到
  • 同currentStyle，�获取当前元素所有最终的css属性值
  • 使用getPropertyValue方法取值
  • 只读

用法：

<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是提供给脚本操作DOM元素的接口，指向的是整个文档(#document)
• document.documentElement指向的是文档的根元素(html),只读属性
• node.ownerDocument === document //可以快速获取document,实现其他功能
• document.defaultView指向的是提供给脚本的一个全局访问变量，在js脚本里就是等于window
• node.ownerDocument.defaultView === document.defaultView === window

这也是为什么很多地方都用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