1.盒子模型
在文档中,每个元素都被当成一个盒子模型,描述元素在文档内所占的空间。
每个盒子都由四部分组成:content,padding ,border,margin。
所以我们说, 一个盒子所占的空间大小应该是由这四部分相加的和。
但元素实际所占的宽度,应该是由border+padding+content组成的。其中的content也就是width值。
盒子模型分为IE盒模型和标准盒模型,他们之间唯一的区别是:
IE盒模型中:元素实际所占宽度=width=border+padding+content
标准盒模型中:元素实际所占宽度=width+padding+border
说到这里,就不的不提一下box-sizing属性:
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。也就是说,你可以通过这个属性选择你对某一元素要采取什么样的盒模型。
box-sizing有两个属性值:content-box(对应标准盒模型)和border-box(对应IE盒模型)。
还有一点需要注意,使用这个属性,不同的浏览器有不同的属性名的写法:
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}
2.BFC
BFC我们可以通俗的理解为一个独立的布局环境,也是页面中的一块渲染区域,并且有着一套自己的渲染规则,他决定了其子元素将如何定位,以及与其他元素的关系和相互作用。
BFC是页面元素里一个独立存在作用块,它不影响它外面的布局,外面的元素也不会影响到BFC里面的布局。我们可以把他想象成一个大的包含块,对于其内部的成员,他有着自己的布局规则。(说道这里有木有感觉有点熟悉,好像和弹性布局的感觉优点像哦)
那么,BFC对与其内部的成员有那些布局规则呢?
- 内部的Box会在垂直方向,从顶部开始一个接一个地放置。(包括inline-block box)
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加(垂直外边距叠加)
- 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
- 计算BFC的高度时,浮动元素也参与计算。
BFC在处理与其他元素的关系时,又有什么规则呢?
- BFC的区域不会与float box叠加。
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
我们可以利用BFC解决哪些问题呢?
- 解决margin叠加问题 。(形成新的BFC)
- . BFC 可以包含浮动的元素,清除浮动(解决父元素高度塌陷的问题)
- BFC 可以阻止元素被浮动元素覆盖(两栏自适应布局)
我们要如何触发BFC呢
1. body 根元素
2. 浮动元素:float 除 none 以外的值
3. 绝对定位元素:position (absolute、fixed)
4. display 为 inline-block、table-cells、flex
5. overflow 除了 visible 以外的值 (hidden、auto、scroll)
3.浮动
使用浮动会带来那些影响呢
- 设置了浮动的元素会脱离普通流。
- 浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。
- 元素同时应用了position: absolute及float属性,则float失效。
- 设置浮动的元素只会对它后一个元素造成影响,不会对它前面的元素造成影响 。
- 设置浮动的元素display值会变成block。
- 文字环绕
- 高度塌陷
怎样清除浮动
a.触发BFC,闭合浮动。(看上面)
b.通过在浮动元素的末尾添加一个空元素,设置 clear:both属性。
- 在浮动元素末尾添加新标签。
- 使用 br标签和其自身的 html属性。
- after 伪元素(最优)
4.水平垂直居中
相对于父元素绝对定位+top,left 50%+margin-left margin-top -50%
6.background-*系列属性
https://jsbin.com/xoruwiwipa/edit?html,css,output
css3新添加:http://www.w3school.com.cn/css3/css3_background.asp
7.选择器的优先级和选择器的效率
读取选择器的原则是从右到左。因此,我们书写的右边的最后一个选择器,被称作关键选择器,对于效率有决定性影响。很显然根据ID查找元素比根据className查找效率要高的多。
优先级高的选择器不一定效率高。
优先级判断方法:https://segmentfault.com/a/1190000003860309
8.伪类,伪元素
伪类的操作对象是文档树中已有的元素,而伪元素则创建了一个文档树外的元素。因此,伪类与伪元素的区别在于:有没有创建一个文档树之外的元素。
转载自AlloyTeam:http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/
9.css动画
@keyframes创建动画
animation(动画名称+时长)执行动画
10.css3新特性
1.CSS3 边框(border-radius,box-shadow,border-image)
2.CSS3背景
background-size:规定背景图片的尺寸
background-origin:规定背景图片的定位区域,背景图片可以放置于 content-box、padding-box 或 border-box 区域。
background-clip:规定背景的绘制区域。border-box,padding-box ,border-box
3.CSS3文字效果
text-shadow:文本阴影
word-wrap:规定文本的换行规则。
….
http://www.w3school.com.cn/css3/css3_text_effect.asp
4.CSS3字体
@font-face:可以选择自己喜欢的字体。
您必须首先定义字体的名称(font-family比如 myFirstFont),然后指向该字体文件。
5.CSS3 的 Transitions(过渡), Transforms(转换) 和 Animation(动画)
6.CSS3 的多列布局
7.新增伪类选择器
elem:nth-child(n)
elem:nth-last-child
elem:only-child
elem:nth-of-type(n)
elem:first-of-type和elem:last-of-type
elem:only-of-type
elem:empty
8.可变更的盒模型
box-sizing属性
9.可伸缩的布局方式
弹性布局
11.响应式布局
流式布局+媒体查询+viewport
12.弹性布局
简便、完整、响应式地实现各种页面布局
使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时,元素可预测地运行。
https://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html
13.css hack
选择器hack 属性hack 条件hack
http://blog.csdn.net/freshlover/article/details/12132801