少年,请不要轻视浮动,定位,布局(盒模型,flex,grid)
2018-03-14 20:54
525 查看
文档流
首先我们先了解一个概念,文档流“Normal flow”是css中定位的一种默认情况,平时我们所说的BFC、IFC等都是“Normal flow”的情况下的规则。
常规情况下脱离文档流的是float,absolute,fixed。英文文档解释的意思,当元素浮动的时候,会先遵循“Normal flow”的规则,然后尽可能的向俩边靠。所以float并不是会脱离文档流,反而是依赖于文档流。position中的absolute和fixed的情况下,官方文档解释说会完全脱离“Normal flow”。至于文本流,我自己还没有看到这种解释的。在“Normal flow”中,BFC规则中,文本会围绕在浮动元素旁边。出现了这种现象,可能国人就自定义了“文本流”这种东西。
总结:表面上看,float脱离了“文档流”,没有脱离“文本流”;position中的absolute和fixed全部脱离。这种解释也合情合理,是标准答案。
浮动和浮动的清除
定位和定位的常用方法
fixed和absolute:两者的效果在没有滚动条的时候是一样的
区别:fixed是固定定位,absolute是绝对定位。Fixed块有滚动条之后不显示。
relative和absolute:absolute块脱离文档流,relative会保留定位块原来的位置
static是默认的定位
注意:absolute相对于父元素定位,父元素必须是absolute和relative定位
脱离文档流的定位:absolute,fixed,浮动布局之flex
display:flex; display:-webkit-flex;//safari
Justify-content:主轴(默认水平)
Align-content:垂直轴
Flex-wrap:是否换行(默认不换行)
Flex-direction:方向(column,column-reverse)
Align-content和align-items的相同点和不同点:都是对侧轴的对齐方式,不同点是align-content是对多行,align-items是对一行,不是对整个容器
布局之grid
详情见:https://www.jianshu.com/p/d183265a8dad
首先我们先了解一个概念,文档流“Normal flow”是css中定位的一种默认情况,平时我们所说的BFC、IFC等都是“Normal flow”的情况下的规则。
常规情况下脱离文档流的是float,absolute,fixed。英文文档解释的意思,当元素浮动的时候,会先遵循“Normal flow”的规则,然后尽可能的向俩边靠。所以float并不是会脱离文档流,反而是依赖于文档流。position中的absolute和fixed的情况下,官方文档解释说会完全脱离“Normal flow”。至于文本流,我自己还没有看到这种解释的。在“Normal flow”中,BFC规则中,文本会围绕在浮动元素旁边。出现了这种现象,可能国人就自定义了“文本流”这种东西。
总结:表面上看,float脱离了“文档流”,没有脱离“文本流”;position中的absolute和fixed全部脱离。这种解释也合情合理,是标准答案。
浮动和浮动的清除
定位和定位的常用方法
fixed和absolute:两者的效果在没有滚动条的时候是一样的
区别:fixed是固定定位,absolute是绝对定位。Fixed块有滚动条之后不显示。
relative和absolute:absolute块脱离文档流,relative会保留定位块原来的位置
static是默认的定位
注意:absolute相对于父元素定位,父元素必须是absolute和relative定位
脱离文档流的定位:absolute,fixed,浮动布局之flex
display:flex; display:-webkit-flex;//safari
Justify-content:主轴(默认水平)
Align-content:垂直轴
Flex-wrap:是否换行(默认不换行)
Flex-direction:方向(column,column-reverse)
Align-content和align-items的相同点和不同点:都是对侧轴的对齐方式,不同点是align-content是对多行,align-items是对一行,不是对整个容器
布局之grid
详情见:https://www.jianshu.com/p/d183265a8dad
相关文章推荐
- 两列布局(浮动、定位、flex)和三列布局(圣杯、双飞翼、flex)
- 网页布局基础——文档流、盒子模型、浮动、定位
- CSS 选择器 样式 浮动 盒子模型 块元素 内联元素 内联块元素 定位 权重
- CSS之定位、居中、浮动及利用浮动设计网页布局和导航
- DIV+CSS布局之解读浮动定位
- css布局之浮动模型&&左右两栏自适应布局
- h5学习之10(html中页面内容布局的方法流式布局,浮动布局,定位布局,弹性布局)
- HTML5培训第10节课堂笔记(盒子模型、行内与块级、float、定位、html5布局)
- 浮动 定位 盒模型
- CSS基础之盒子模型及浮动布局
- CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
- DIV CSS布局中绝对定位和浮动用法
- CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法
- Css三种基本的布局模型包含层模型的三种定位
- React Native-4.React Native布局属性练习之flexBox模型实战
- 网页布局方式:浮动和定位
- 三种可视化格式模型:普通文档流、相对定位与绝对定位、浮动
- css浮动于定位-布局的基础
- 浮动布局:Flexbox
- css的核心内容 标准流、盒子模型、浮动、定位等分析