html css流式布局、浮动布局、定位布局相信讲解
时间:2018-09-27
本文章向大家介绍html css流式布局、浮动布局、定位布局相信讲解,需要的朋友可以参考一下
一.文档流
1.概念
normal flow(普通流,常规流)将窗体自上而下分成一行一行,块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素。一个连续具有逻辑上下的页面整体,出现在页面中的显示内容,均可以理解为文档流中。
2.BFC(Block formatting context)
块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
3.BFC规则
- 内部的Box会在垂直方向,一个接一个地放置。
- Box自身垂直方向的位置由margin-top决定,属于同一个BFC的两个相邻Box的margin会发生重叠。
- Box自身水平方向的位置由margin左或右决定(具体已经参照BFC方位),属于同一个BFC的两个相邻Box的margin会发生叠加。
二.浮动布局
1.概念
通过让元素浮动,可以使元素在水平上左右移动,再通过margin属性调整位置,就是使当前元素脱离文档流,相当于浮动起来一样,浮动的框可以左右移动,直至它的外边缘遇到包含框或另一个浮动框的边缘。
2.基本语法
float:left | right
3.浮动的印象
- 对附近的元素布局造成改变,使得布局混乱。
- 因为i浮动元素脱离了文档流,会出现一种高度坍塌的现象:原来的父容器高度是当前元素撑开的,但是当该元素浮动后,脱离文档流浮动起来,那父容器的高度就会坍塌(前提是父容器高度小于该浮动元素)
4.清浮动
目的:对父级所在容器中的Block-level Box布局不产生影响
原理:再浮动布局情况下,让父级获得合适的高度
1.浮动的父级设置高度
sup{
height:npx;
}
2.浮动的父级设置overflow
sup{
overflow:hidden;
}
3.浮动的父级兄弟设置clear
brother{
clear: left | right | both;
}
4.浮动的父级伪类清浮动
sup:after{
content:"";
display:block;
clear:both;
}
三.流式布局
1.概念
流式布局是页面元素的宽度按照分辨率进行适配调整,但整体布局不变.就是布局脱离固定值限制,可以根据页面情况改变相应发生改变。
2.流式布局相关操作
1.百分比设置 %
如:width: 90%;
2.窗口比设置 vw|vh
如:width: 90vw;
3.字体控制 em|rem
em为相对大小,大小为最近设置字体大小的父级规定的字体大小
rem为html字体大小
四.定位布局
1.概念
定位布局的目的:让目标标签在指定参考系下任意布局
2.基本语法
position:static | relative | absolute | fixed
- static:静态定位,默认定位.
- relative:相对定位,未脱离文档流,以自身原有位置作为参考坐标系.
- absolute:绝对定位,完全脱离文档流,以最近定位父级作为参考坐标系.
- fixed:固定定位,完全脱离文档流,以文档窗口作为参考坐标系.
定位开启后,四个定位方位便会开启,且四个方位均参与布局,如果发生冲突,左右取左,上下取上
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Centos 7 使用mailx发送邮件
- Centos 7 备份MySQL
- Centos 7 备份MySQL/MongoDB并发邮件脚本
- Nginx启动报错:sbin/nginx: error while loading shared libraries: libpcre.so.1: cannot open shared object
- 有赞美业店铺装修前端解决方案
- nginx部署react项目
- Golang 标准库 限流器 time/rate 设计与实现
- Node搭建简易的UDP服务器
- cordova run android 下载gradle报timeout
- How we redesign the NSQ-NSQ重塑之客户端
- [PHP] 使用php生成下载csv文件
- 深入浅出MySQL crash safe
- Cordova+React+Ant.design项目搭建
- ubuntu配置ZeroTier
- 有赞零售小票打印图片二值化方案