1、基础知识
* 行内元素inline、块级元素block
*文字基线
2、flex布局
容器成员:flex item
- 采用flex布局的元素,其所有子元素(而非后代元素)自动成为容器成员
容器构成:item默认按照主轴排列
- 水平的主轴main axis
- 垂直的交叉轴cross axis
容器属性
- flex-direction:row | row-reverse | column | column-reverse,属性决定主轴的方向(即项目的排列方向)。
- flex-wrap:nowrap(通过调整item大小) | wrap | wrap-reverse
- 默认情况下,项目都排在一条线(又称"轴线")上。
flex-wrap
属性定义,如果一条轴线排不下,如何换行。
- 默认情况下,项目都排在一条线(又称"轴线")上。
- flex-flow: || ;
- justify-content:flex-start | flex-end | center | space-between | space-around;
- 属性定义了项目在主轴上的对齐方式。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍
- space-between 两端对齐,项目之间的间隔都相等
- align-items:flex-start | flex-end | center | baseline | stretch;
- 属性定义项目在交叉轴上如何对齐
- 属性是针对单独的每一个flex子项起作用,它的基本单位是每一个子项,在所有情况下都有效果(当然要看具体的属性值)。
- baseline对齐,就是以基线(字母f的)为基准对齐:而是英文字母“x”的下端沿。
- align-content:flex-start | flex-end | center | space-between | space-around | stretch;
- 属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
- 将flex子项作为一个整体起作用,它的基本单位是子项构成的行,只在两种情况下有效果:①子项多行且flex容器高度固定 ②子项单行,flex容器高度固定且设置了
flex-wrap:wrap;
- align-item与align-content的区别
- 深入理解flex-grow、flex-shrink、flex-basis
项目属性
- order:;属性用来定义项目的排列顺序。数值越小,排列越靠前,默认为 0
- flex-grow:;定义项目的放大比例,默认为 0 ,即如果存在剩余空间,也不放大.
- flex-shrink:定义了项目的缩小比例,默认为 1 ,即如果空间不足,该项目将缩小。
- flex-basis: | auto;属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为
auto
,即项目的本来大小。- 它可以设为跟
width
或height
属性一样的值(比如350px),则项目将占据固定空间。 - 当主轴设置为水平时,当设置了
flex-basis
,设置的项目宽度值会失效,flex-basis
需要跟flex-grow
和flex-shrink
配合使用才能生效。因为如果空间不匹配,会自适应的,因此要配合使用,控制不匹配时的空间 - 在flex容器分配剩余空间前flex子项在主轴方向上的初始尺寸。flex子项在主轴方向上的实际尺寸是根据元素自身尺寸、
flex-basis
、flex-grow
、flex-shrink
等属性共同决定的。
- 它可以设为跟
- flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
- align-self:auto | flex-start | flex-end | center | baseline | stretch;允许单个项目有与其他项目不一样的对齐方式
flex:1
等同于设置flex: 1 1 0%
。等分项目flex:auto
等同于设置flex: 1 1 auto
。按照各自比例伸缩
3、居中/常见布局
position布局
-
只有当position是除了static之外的定位方式的时候,top left right bottom才会生效,否则无效
-
position:static,按照文档流一个个布局
-
position:relative,没有脱离文档流,相对的是它原本在文档流中的位置而进行的偏移
-
position:absolute,
使用absoult定位的元素脱离文档流后,就只能根据祖先类元素(父类以上)进行定位,而这个祖先类还必须是以postion非static方式定位的
left
: 表示设置元素左边缘的偏移量。
-
position:fixed,脱离了文档流,并且能够根据top、right、left、bottom属性进行定位,但不同的是
fixed是根据窗口为原点进行偏移定位的,也就是说它不会根据滚动条的滚动而进行偏移
。
居中手段
-
水平且垂直:
-
绝对定位与负边距(上、左)实现(已知高度宽度)
-
绝对定位与margin:auto(已知高度宽度)
#container { position: relative; height:100px;//必须有个高度 } #center { position: absolute; top: 0; left: 0; right: 0; bottom: 0; /*auto是计算剩余空间然后平分,从而实现居中*/ margin: auto;//注意此处的写法 }
-
绝对定位+transform
-
flex(必须有高度)
-
flex/grid与margin:auto(最简单写法)
#container { height: 100vh;//必须有高度 display: grid; } #center { margin: auto; }
-
-
行内元素(如果不是用display:inline-block强转块级元素)
-
水平居中:text-align:center
-
垂直居中:
- 单行:line-height设置为元素高度;
- 多行:flex-firection:column(为啥);表布局的vertical-align:middle可以实现
-
-
块级元素
- 单个水平居中:
- margin:0 auto
- position:absolute;left:50%;transform:translateX(-50%);向左平移自身宽度的50%
- flex+justify-content
- 多个水平居中:
- flex+justify-content
- inline-block,text-align:center
- 垂直居中:
- 已知高度:absolute+负margin,通过绝对定位元素距离顶部50%,并设置margin-top向上偏移元素高度的一半,就可以实现了。
- 未知高度:absolute+transform,当垂直居中的元素的高度和宽度未知时,可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中(Y轴反向是向上)
- flex+align-items
- 单个水平居中:
-
浮动元素
- 水平居中
- 对于定宽的浮动元素,通过子元素设置relative+负margin
- 对于不定宽的浮动元素,父子容器都用相对定位?
- 通用方法:flex布局
- 水平居中
-
绝对定位元素水平居中:子元素绝对定位,并margin:0 auto
4、重绘回流
- 前置知识:
- 浏览器使用流式布局模型
- 浏览器会把HTML解析为DOM,把CSS解析为CSSOM,DOM与CSSOM合并就形成了Render Tree
- 有了renderTree,我们就知道了所有节点的样式,然后计算她们在页面上的大小和位置,最后把节点绘制到页面上
- 计算通常只遍历一次,table布局可能需要多次计算
- 回流必定导致重绘,重绘不一定回流
- 回流:渲染树中的每个节点都被分配一个在屏幕上的位置和大小。这个过程称为布局或回流(reflow)。
- 定义:当renderTree中部分或全部元素的尺寸、结构、或某些属性发生改变时,浏览器重新渲染部分或全部文档的过程成为回流
- 导致回流的操作:
- 页面首次渲染
- 浏览器窗口大小发生改变
- 元素尺寸、位置、内容、字体大小发生改变
- 添加或删除 可见 的DOM元素
- 激活CSS伪类
- 查询某些属性或调用某些方法
- 重绘:浏览器使用 GPU 或 CPU 将布局后的元素绘制到屏幕上。这个过程称为绘制或重绘(repaint)。
- 定义:当页面中元素样式的改变并不影响它在文档流中的位置时(例如,Color、background-color、visibility等),浏览器会将新样式赋予给元素并重新绘制它
- 性能影响:回流比重绘代价更高,有时候仅仅回流一个单一元素,其父元素与其子元素也会回流
- 如何避免
- CSS:避免使用table布局,尽可能在DOM树最末端改变class,避免设置多层内联样式,避免使用CSS表达式,将动画效果应用到position属性为absolute或fixed的元素上
- js:避免频繁操作样式与DOM;可以先将元素设置为display:none,操作结束后再显示出来
- 使用绝对定位,脱离文档流,否则会引起父元素及后续元素频繁回流
5、层叠上下文
6、浮动与清除浮动
首先了解浮动是:脱离文档流,但不脱离文本流,浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素**。
- 脱离文档流,也就是说不会影响普通元素的布局
对自身的影响:形成“块”BFC;位置尽量靠上;位置尽量靠左(右)
对兄弟的影响:上面贴非float元素;旁边贴float元素;不影响其他块级元素;影响其他块级元素内部文本
对父级元素的影响:从布局上“消失”;高度塌陷(父级元素里面没有东西,即便设置了高宽,还是会变成0)
清除浮动:
- clear:在父级元素末尾添加的元素必须是一个块级元素;利用:after和:before在元素内插入两个元素块,从而达到清除浮动的效果。
- clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素,底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间
- BFC:overflow:auto;
//利用:after和:before在元素内插入两个元素块,从而达到清除浮动的效果。
.container2::after{
content: 'aaa';
clear:both;
display: block;
visibility: hidden;
height:0;
}
尽量往上往左靠,所以案例中把第二个float写在前面,就可以实现三栏布局了
7、BFC视觉格式化模型
BFC定义了盒box的生成,盒主要包括块盒、行内盒、匿名盒等,盒的类型由display决定,也就是用于决定块级盒的布局及浮动相互影响范围的一个区域。
什么元素会创建BFC:
- 根元素
- 浮动元素、绝对定位元素、行内块元素、overflow的值不为visible的元素
- 弹性元素、网格元素
- 表格的标题和单元格
- 匿名表格单元格元素
BFC的范围:包含创建它的元素的所有子元素,但是不包括创建了新的BFC的子元素的内部元素,隔离特性
BFC的特性:
BFC
内部的块级盒会在垂直方向上一个接一个排列 ①- 同一个
BFC
下的相邻块级元素可能发生外边距折叠,创建新的BFC
可以避免的外边距折叠 ② - 每个元素的外边距盒(margin box)的左边与包含块边框盒(border box)的左边相接触(从右向左的格式化,则相反),即使存在浮动也是如此 ③
- 浮动盒的区域不会和
BFC
重叠 ④ - 计算
BFC
的高度时,浮动元素也会参与计算,毕竟不会重叠? ⑤
BFC的应用:
- 清除浮动(高度塌陷)
- 防止外边距折叠:外边距折叠指的是相邻块级元素的上下外边距(margin)会合并(折叠)成一个外边距
- 自适应多栏布局:由于盒子的 margin box 的左边和包含块 border box 的左边相接触,同时浮动盒的区域不会和
BFC
重叠,所以中间栏的宽度会自适应,示例。
8、CSS选择器与优先级
选择器:
选择器 | 用法 | 示例 |
---|---|---|
标签选择器 | 选择特定的 HTML 标签 | p { color: red; } |
类选择器 | 选择使用特定类名的元素 | .my-class { color: blue; } |
ID 选择器 | 选择使用特定 ID 的元素 | #my-id { font-size: 24px; } |
属性选择器 | 选择具有特定属性的元素 | [title] { font-weight: bold; } |
后代选择器 | 选择指定元素的后代元素 | ul li { list-style: none; } |
子元素选择器 | 选择指定元素的直接子元素 | ul > li { list-style: none; } |
相邻兄弟选择器 | 选择紧接在指定元素后面的同级元素 | h2 + p { font-style: italic; } |
通用兄弟选择器 | 选择在指定元素后面的所有同级元素 | h2 ~ p { font-style: italic; } |
:hover 伪类选择器 | 选择元素在鼠标悬停在上方时的状态 | a:hover { text-decoration: underline; } |
:focus 伪类选择器 | 选择元素在获得焦点时的状态 | input:focus { border: 2px solid blue; } |
:active | 选择元素在被点击时的状态 | button:active { background-color: green; } |
:nth-child() | 选择父元素中的第 N 个子元素 | li:nth-child(odd) { background-color: #eee; } |
:first-child | 选择父元素中的第一个子元素 | li:first-child { font-weight: bold; } |
:last-child | 选择父元素中的最后一个子元素 | li:last-child { font-weight: bold; } |
:not() | 排除指定的元素 | input:not([type="submit"]) { border: 1px solid #ccc; } |
:checked | 选择被选中的表单元素 | input[type="checkbox"]:checked { background-color: yellow; } |
:before | 在元素内容前面添加样式(伪元素) | p:before { content: ">> "; } |
:after | 在元素内容后面添加样式(伪元素) | p:after { content: " <<" } |
- id选择器(#myid)
- 类选择器(.myclass)
- 属性选择器(a[rel=“external”])
- 伪类选择器(a:hover, li:nth-child)
- 标签选择器(div, h1,p)
- 相邻选择器(h1 + p)
- 子选择器(ul > li)
- 后代选择器(li a)
- 通配符选择器(*)
优先级
!important
- 内联样式(1000)
- ID选择器(0100)
- 类选择器/属性选择器/伪类选择器(0010)
- 元素选择器/伪元素选择器(0001)
- 关系选择器/通配符选择器*(0000)
带!important 标记的样式属性优先级最高; 样式表的来源相同时:`!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 、盒子模型
box-sizing属性:
- context-box:默认,且是w3c的标准盒子模型
- border-box:IE传统盒子模型
- padding-box:width、height只包括content+padding,不包括边框border
**标准盒子模型:**content+padding+border+margin,高度宽度是content
**低版本IE:**content+padding+border+margin,高度宽度是content+padding+border
9、HTML5新特性、语义化
**语义化标签:**header\nav\main\article\section\aside\footer
语义化的优点:
- 在
没CSS样式的情况下,页面整体也会呈现很好的结构效果
代码结构清晰
,易于阅读,利于开发和维护
方便其他设备解析(如屏幕阅读器)根据语义渲染网页。有利于搜索引擎优化(SEO)
,搜索引擎爬虫会根据不同的标签来赋予不同的权重
10、隐藏元素
1.opacity:0
,该元素隐藏起来了,但不会改变页面布局,并且,如果该元素已经绑定 一些事件,如click 事件,那么点击该区域,也能触发点击事件的
2.visibility:hidden
,该元素隐藏起来了,但不会改变页面布局,但是不会触发该元素已 经绑定的事件 ,隐藏对应元素,在文档布局中仍保留原来的空间(重绘)
3.display:none
,把元素隐藏起来,并且会改变页面布局,可以理解成在页面中把该元素。 不显示对应的元素,在文档布局中不再分配空间(回流+重绘)
z-index
属性值并不是在任何元素上都有效果。它仅在定位元素(定义了position
属性,且属性值为非static
值的元素)上有效果。
11、px和rem的区别
px:像素单位
rem:相对于根元素的大小