Comments (5)
- 浮动
float:浮动,有左浮动、右浮动、不浮动;浮动的元素不占据正常的文档流
clear:清除浮动,使元素回到正常的文档流中, - 定位
有相对定位relative、绝对定位absolute、固定定位fixed,还有默认的static;
相对定位是相对于元素原本在文档流中位置的定位;
绝对定位是相对于其包含块定位,其边界根据偏移属性放置;包含块是不等于static的祖先元素
固定定位是根据浏览器窗口来定位
relative/absolute/fixed可以激活top/right/bottom/left/z-index属性 - 盒模型
有ie盒模型和w3c标准模型;
ie盒模型的内容区包含border/padding
w3c标准模型是由margin/border/padding/content四个部分组成
from notebook.
-
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 规定是否应该轮流反向播放动画。
from notebook.
-
伪类/伪元素
-
伪类分动态伪类和静态伪类
动态伪类::focus, :hover, :active.
静态伪类::link, :visited, :first-child. -
伪元素
:first-line, :first-letter, :before, :after.
nth-child/nth-of-type
from notebook.
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
项目的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
from notebook.
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
from notebook.
Related Issues (20)
- async2.6.1源码分析之waterfall HOT 2
- async2.6.1源码分析之parallel HOT 1
- async2.6.1源码分析之asyncify
- async2.6.1源码分析之auto
- redux 源码解读
- throttle vs debounce HOT 2
- transducer in javascript HOT 2
- http/2 - High Performance Browser Networking
- http/2 入门
- 二进制浮点数的存储解读
- 尾递归(TCO)
- $elemMatch vs. Dot Notation
- 抽象语法树例子
- three 流光效果 HOT 1
- three 相关资料 HOT 2
- react-intl 单复数转换 HOT 2
- web3 HOT 2
- react
- three 视角调整 HOT 2
- shader 函数
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from notebook.