1.position属性值
1.position属性值:
static(默认)、
relative相对(top,left相对自身位置),不脱离文档流、
absolute绝对(top,left属性相对于最近一个不为static的父元素)脱离文档流、
fixed固定布局,相对于屏幕视口,不会随屏幕滚动而改变、
sticky粘性布局,可以看成相对定位和固定定位的组合
2.行内元素和块状元素
2.行内元素和块状元素
块状元素:div 、h系列标签,p标签,ul,ol,table
行内元素:span、img、input、a、b、br(设置宽高无效)
3.flex布局
3.flex布局
概念:display属性为flex/inline-flex的父元素称为伸缩容器,它的所有子项成为伸缩项;
伸缩容器上的属性有:
justify-content:flex-start(默认值) 、flex-end、center、space-between、space-around每个项目两侧间隔相等(项目在主轴上的对齐方式)
align-items:strech(默认值,未设置高度占满容器)、flex-start、flex-end、center、base-line(项目的第一行文字基线)–(项目在交叉轴对齐方式)
align-content:(项目多根轴线的对齐方式,如果只有一根,该值不起作用)flex-start | flex-end | center | space-between | space-around | stretch;
flex-direction:row(默认)、row-reverse、column、column-reverse
flex-wrap:no-wrap(默认)、wrap、wrap-reverse
flex-flow:flex-direction和flex-wrap简写
伸缩子项上的属性:
flex-grow:0(默认不拉伸)
flex-shrink:1(位置不够默认缩小)
flex-basis:auto项目本来的大小(默认)
flex(&-grow,&-shrink,&-basis简称):后两个属性可以省略
order:项目排列顺序(数字越小越靠前)
align-self:auto(默认表示继承父类的align-items)、flex-start、flex-end、center、baseline、strech子项单独的对齐方式
4.rem
4.rem
(1)获取屏幕宽度:
var width = document.documentElement.clientWidth
(2)获取根元素:
var htmlNode = document.querySelector(‘html’)
(3)设置根元素的字体大小为屏幕宽度
htmlNode.style.fontSize = width + ‘px’
5.重绘和回流:
5.重绘和回流:
概念:
回流:某个部分发生了变化影响了布局,就需要倒回去重新渲染;
重绘:只是改变节点的颜色等不影响其他元素布局,将只发生重绘;
浏览器渲染的过程:
(1)解析HTML生成DOM树,解析CSS生成CSSOM树
(2)DOM和CSSOM树结合生成渲染树
(3)根据渲染树进行回流得到节点的几何信息
(4)根据渲染树及回流得到的几何信息,得到节点的绝对像素
6.水平垂直居中布局
6.水平垂直居中布局:
水平垂直居中的实现方法:
(1)元素已知宽高:
{
position:absolute;
top:50%;
left:50%;
margin:-height/2 0 0 -width/2
}
(2)元素未知宽高:
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
(3)flex实现:
{
display:flex;
justify-content:center;
align-items:center;
}
(4)grid
body,html{
height:100%;
display:grid;
}
{
margin:auto;
}
7.层叠上下文
7.层叠上下文:
(z-index生效问题:z-index只有在定位元素,并且position不为static才有效)
从下到上面的层叠顺序:
background–>-->z-index<0–>block–>float–>inline-block–>z-index>0
参考:
https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
层叠准则:
1.谁大谁上:当具有明显的水平层叠标识时,如z-index,在同一层叠上下文领域时,层叠值大的那个覆盖小的那个;
2.后来居上:层叠水平一致,层叠顺序相同,在DOM流中处于后面的元素会覆盖前面的元素;
层叠上下文的特性:
层叠上下文的层叠水平比普通元素高;
层叠上下文可以阻断元素的混合模式;
层叠上下文可以嵌套,内部层叠上下文及其所有子元素均受制于外部的层叠上下文
每个层叠上下文和兄弟元素独立,也就是当进行层叠变化或渲染的时候,只需要考虑后代元素。
每个层叠上下文是自成体系的,当元素发生层叠的时候,整个元素被认为是在父层叠上下文的层叠顺序中。
层叠上下文的创建:
1.根元素HTML:根层叠上下文;
2.定位元素与传统层叠上下文:position:relative/absolute,以及FireFox/IE下含有position:fixed声明的定位元素,当其z-index不是auto的时候会创建层叠上下文;
3.CSS3与新时代的层叠上下文元素:
(1)z-index不为auto的flex项(父元素为flex、inline-flex)(颠覆了我们对z-index只能和定位元素一起使用,此处z-index可以和非定位元素flex使用)
(2)opacity与层叠上下文;(半透明元素具有层叠上下文)
(3)transform与层叠上下文
(4)mix-blend-mode与层叠上下文
(5)filter与层叠上下文(CSS3规范中的滤镜)
。。。
层叠上下文与层叠顺序:
1.如果层叠上下文元素不依赖于z-index,其层叠顺序是z-index:auto可以看成与z-index:0同级别
2.如果依赖z-index由z-index大小决定
–定位元素在普通元素上面的原因:
元素一旦成为定位元素,z-index自动生效,为auto,也就是0级别的
8.BFC
8.BFC:
概念:块级格式化上下文,创建BFC的盒子是独立布局,盒子里面的元素样式不影响外面元素的布局;
产生BFC的方式:
1、position:absolute
2、float元素
3、display:inline-block
4、overflow不为visiable
5、display:flex
常见的创建BFC方法:position:absolute、float、overflow:hidden
BFC的作用:
(1)包含浮动元素,用BFC清除浮动
高度塌陷问题,父元素中子元素为浮动,会发生高度塌陷
(2)不被浮动元素覆盖
左浮动,右不浮动,发生遮盖,overflow:hidden清除
(3)阻止外边距折叠
当子元素属于同一个BFC会发生外边距折叠,将子元素建一个新的BFC可以解决外边距折叠
8.1脱离文档流的三种方式:
8.1脱离文档流的三种方式:
(1)HTML根元素
(2)float元素
(3)position:absolute或fixed