一、CSS是用来修饰网页的,还可以配合各种脚本语言动态地对网页各元素进行格式化。
二、CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:
选择器通常是需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性是希望设置的样式属性,每个属性有一个值,属性和值被冒号分开。
三、如果要在HTML元素中设置CSS样式,可以在元素中设置"id" 和 "class"选择器。
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示。
四、文档流
流动方向:
inline元素从左到右,到达最右边换行
block元素从上到下,每一个都另起一行
inline-block元素从左到右,不会分割
宽度:
inline宽度为内部inline元素的和,不能用width指定
block默认自动计算宽度,可用width指定
inline-block结合前面两者,可用width
高度:
inline高度由line-height间接确定,跟height无关
block高度由内部文档流元素决定,可以设height
inline-block跟block相似,可以设置height
五、盒模型
两种盒模型:content-box-内容就是盒子的边界;border-box边框才是盒子的边界
公式:content-box width=内容宽度;border-box width=内容宽度+padding+border
六、CSS布局
float布局
步骤:子元素加上float:left和width
父元素加上.clearfix
flex布局
display:flex
flex-direction:row/column
flex-wrap:wrap
justify-content:center/space between
align-items:center
七、CSS定位
CSS布局平放在界面,CSS定位垂直于界面
position属性
static:默认值,待在文档流里
relative:相对定位,升起来,但不脱离文档流
absolute:绝对定位,定位基准是祖先里的非static
fixed:固定定位,定位基准是viewpoint
sticky:粘滞定位
八、浏览器渲染原理
1、根据HTML构建HTML树(DOM)
2、根据CSS构建CSS树(CSSOM)
3、将两棵树合并成一颗渲染树(render tree)
4、layout布局(文档流、盒模型,计算大小和位置)
5、paint绘制(边框颜色、文字颜色、阴影等)
6、compose合成(根据层叠关系展示画面)
九、CSS动画,transition和animation
CSS transition是元素从一种样式逐渐改变为另一种的效果。
要实现这一点,必须规定两项内容:
指定要添加效果的CSS属性,指定效果的持续时间。
要添加多个样式的变换效果,添加的属性由逗号分隔:
CSS animation是使元素从一种样式逐渐变化为另一种样式的效果。
可以改变任意多的样式任意多的次数。
用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。
0% 是动画的开始,100% 是动画的完成。
要创建 CSS动画,你需要了解 keyframes 规则。
keyframes 规则是创建动画。
keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
指定至少这两个CSS的动画属性绑定向一个选择器:规定动画的名称,规定动画的时长