1.块级格式化上下文(BFC,blockformattingcontext)
它是一个独立的渲染区域,它规定了在该元素中,常规流块盒的布局。BFC的渲染区域:这个区域由某个HTML元素创建,以下元素会在其内部创建BFC:根元素(html);浮动和绝对定位;overflow不等于visible的块盒。不同BFC它们进行渲染时互不干扰创建BFC的元素,隔绝了它内部和外部的联系,内部的渲染也不会影响到外部。规则:创建BFC的元素,它的自动高度需要计算浮动元素(清除浮动)创建BFC的元素,它的边框盒不会与浮动元素重叠。创建BFC的元素,不会和它的子元素进行外边距合并(加在父元素)。
2.重置文件的作用:引用后在不同的浏览器中把标签重置为成默认的样式,先引用重置文件,再引用自己写的CSS。
3.Flex弹性布局设置flex布局,display设置为flex,当前标签为容器,所有子元素为项目,功能:所有子元素在一行显示。默认情况下,主轴为横轴,起点在左,终点在右,交叉轴为竖轴,起点在上,终点在下容器里的属性:主轴方向:flex-direction(设置主轴的方向):row默认值,项目从左到右依次摆放,column项目从上到下依次摆放,加“-reverse”方向相反。flex-wrap(设置换不换行):nowrap默认值,都在一行显示;wrap换行;注:主轴是水平方向,条件是所有项目的宽度之和大于容器的宽度;主轴是垂直方向,条件,所有项目的高度之和超出容器高度flex-flow:是direction和wrap的缩写方式,例子:flex-flow:column“空格”wrap;justify-content(主轴方向上的对齐方式):flex-start(默认值),左对齐;flex-end,右对齐;center居中;space-between两端对齐,项目之间的间隔都相等;space-around分散对齐,每个项目两侧相等,项目之间的间隔比项目与边框大一倍(先计算剩余空间,将剩余空间除以所有项目的个数,平均分配到每个项目的左右);space-evenly平均分配均匀排列每个元素,每个元素之间的间隔相等。(以上主轴是横轴,当主轴方向是竖轴时,情况类似)。交叉轴方向(默认是垂直方向):align-items(定义项目在交叉轴上如何对
2020-08-09
最新推荐文章于 2020-11-09 17:42:51 发布