1.CSS3 的新特性有哪些
点我查看
CSS3 选择器 .
CSS3 边框与圆角
CSS3 圆角 border-radius: 属性值由两个参数值构成: value1 / value2,值之间用 / 分隔,value1 代表圆角的水平半径,value2 代表圆角的垂直半径盒阴影 box-shadow: 语法:box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影
CSS3 背景与渐变
重要的几个:background-image
语法:backgroundimage:url(‘1.jpg),url(‘2.jpg’)
background-origin
定义:设置背景图像的原始起始位置
语法:background-origin:border-box / padding-box / content-box(背景图片坐标原点与这三个有关系)
background-repeat
定义:设置是否及如何重复背景图像,默认地,背景图像在水平和垂直方向上重复。
background-size
定义:指定背景图像的大小
语法:background-size:number / % / cover / contain
太多了,本宝宝休息一下再写
CSS3 过渡
CSS3 变换
CSS3 动画
2.flex
这篇讲的很全简单易懂 一方面是在父容器的几个属性,另一些就是子元素的属性
父:
* flex-direction 子元素排列方向
* flex-wrap 如果一条轴线排不下,如何换行
* flex-flow flex-direction 属性和 flex-wrap 属性的简写形式
* justify-content 在主轴上的对齐方式
* align-items 在交叉轴上如何对齐
* align-content 多根轴线的对齐方式
子:
* order
* flex-grow
* flex-shrink
* flex-basis
* flex
* align-self
3.BFC
盒模型和 BFC
内部的 box 会在垂直方向,一个接一个的放置
每个元素的 margin box 的左边,与包含块 border box 的左边相接触(对于从做往右的格式化,否则相反)
box 垂直方向的距离由 margin 决定,属于同一个 bfc 的两个相邻 box 的 margin 会发生重叠
bfc 的区域不会与浮动区域的 box 重叠
bfc 是一个页面上的独立的容器,外面的元素不会影响 bfc 里的元素,反过来,里面的也不会影响外面的
计算 bfc 高度的时候,浮动元素也会参与计算
怎么创建 bfc
float 属性不为 none(脱离文档流)
position 为 absolute 或 fixed
display 为 inline-block,table-cell,table-caption,flex,inine-flex
overflow 不为 visible
根元素
应用场景
自适应两栏布局
清除内部浮动
防止垂直 margin 重叠
为什么 overflow:hidden 可以消除 margin 合并?
我们首先要搞清楚为什么会发生 margin 合并。这些元素(包括兄弟、父子元素等)之间之所以会发生 margin 合并,是因为它们属于同一个 BFC。所以,我们就知道怎么办了,只要让它们不属于同一个 BFC 不就可以了?通过 overflow:hidden 创建了一个 BFC
为什么 overflow:hidden 可以清除浮动的影响?
当给.parent 设置 ”overflow:hidden” 时,实际上创建了一个超级属性 BFC,此超级属性反过来决定了 ”height:auto” 是如何计算的。在“BFC 布局规则”中提到:计算 BFC 的高度时,浮动元素也参与计算。因此,父元素在计算其高度时,加入了浮动元素的高度,“顺便”达成了清除浮动的目标,所以父元素就包裹住了子元素。
为什么 overflow:hidden…
link、import、require 的区别 import 和 require
require 是运行时调用,所以 require 理论上可以运用在代码的任何地方 import 是编译时调用,所以必须放在文件开头
link 和 import
当一个页面被加载的时候(就是被浏览者浏览的时候),link 引用的 CSS 会同时被加载,而 @import 引用的 CSS 会等到页面全部被下载完再加载。所以有时候浏览 @import 加载 CSS 的页面时会没有样式(就是闪烁),网速慢的时候还挺明显。