HTML布局梳理
布局是一个很艺术的话题，即使是相同的HTML文档结构，但加上不同的css样式就会呈现出不同的效果。接下来就来总结一下html常用的布局。
一、布局的分类：
根据页面板块分类：
页面的板块主要是根据栏目的行、列组合起来的，这里的行列组合是根据网页显示效果确定的，而不是HTML结构，如：单行版式，三行版式，多行多列版式。
根据显示特性分类：
根据元素的呈现性质来分类。如：自然流动布局，浮动布局，
定位布局，混合布局等。
根据布局性质分类：
根据页面宽度的设置单位进行分类，列如：固定宽度布局（以像素为单位定义网页宽度），流动宽度布局（以百分比为单位定义网页宽度），液态宽度布局（以恩为单位定义网页宽度），除此之外还可以混合多种取值方式单位进行布局。
Css页面布局包括两种基本方法：float和position，float 用来设计浮动布局，position用来设计定位布局
二、具体的布局：
定位布局：
优点比较精确，缺点是不能适应浏览器的大小。
主要使用position样式来进行定位元素，定位元素又可以分为绝对定位（position:absolute）和相对定位（position:relative），绝对定位的对象是脱离正常的文档流，使用top，right，bottom，left等属性进行绝对定位，其层次关系顺序可以通过z-index属性来定义。相对定位是遵循正常的文档流，top，right，bottom，left等属性在正常的文档流中进行偏移位置。
定位包含框：
在定位布局中右一个比较重要的概念叫做定位包含框，定位包含框定义了所包含的绝对定位元素的坐标参考对象，凡是被定义相对定位，绝对定位或固定定位的元素都会拥有一个定位包含框的功能，如果没有明确定位包含框，则将以body为定位包含框，即以窗口四边为定位参考系。
浮动布局：
主要是使用float样式来定义元素的浮动，浮动可以设为左浮动（float：left）右浮动（float：right）不浮动（float：none）当你设置了元素为浮动元素的时候元素对象的display会被自动忽略，所以浮动元素的大小由它所包含元素的大小决定。
如何清除元素的浮动的，我们可以使用clear元素来清除浮动，当clear：none的时候允许两边都可以有浮动对象、当clear：left的时候不允许左边有浮动对象、当clear：right的时候不允许有右浮动对象、当clear：both的时候不允许元素左右两边有浮动对象。
弹性布局：
弹性布局又称flex布局，可以用弹性布局来做相应式网站
弹性布局中两个重要的概念：
容器：需要添加弹性布局的父元素。
项目：弹性布局容器的每一个子元素，称为项目。
弹性布局中的两个基本方向：
主轴：在弹性布局月汇总，我们会通过属性规定水平、垂直方向为主轴。
交叉轴：与主轴垂直的另一个方向，称为交叉轴。
弹性布局的使用:只有将容器的display属性设置为flex就行了以下是基础的实例：
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
#div {
width: 400px;
height: 400px;
background-color: yellow;
display: flex;
}
#div div {
width: 50px;
height: 100px;
color: white;
font-size: 30px;
}
.div1 {
background: #0000FF;
}
.div2 {
background: #3190D4;
}
.div3 {
background: #99CCFF;
}
.div4 {
background: #B0C4DE;
}
</style>
<div id="div">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
</div>
</body>
</html>
UI如下：
仅仅知道如何写一个最基础的弹性布局实例时不够的，接下来将介绍关于弹性布局所使用到的css属性，使得你在布局中自如的应对多种需求。
弹性布局的作用于容器的6大属性：
1.flex-direction属性规定灵活项目的方向:
其值可以是：
row 默认值。灵活的项目将水平显示，正如一个行一样。
row-reverse：与 row 相同，但是以相反的顺序。
column：灵活的项目将垂直显示，正如一个列一样。
column-reverse：与 column 相同，但是以相反的顺序。
inherit：从父元素继承该属性。请参阅 inherit。
2.flex-wrap属性定义，如果一条轴线排不下，如何换行。
nowrap（默认）：不换行。当容器宽度不够时，每个项目会被挤压宽度；
wrap： 换行，并且第一行在容器最上方；
wrap-reverse： 换行，并且第一行在容器最下方。
3.flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。
flex-direction 属性规定灵活项目的方向。
flex-wrap 属性规定灵活项目是否拆行或拆列。
注意：如果元素不是弹性盒对象的元素，则 flex-flow 属性不起作用。
4.order 设置弹性盒对象元素的顺序。
实例：
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
#div {
width: 210px;
height: 210px;
background-color: yellow;
display: flex;
}
#div div {
width: 80px;
height: 80px;
color: white;
font-size: 30px;
}
.div1 {
background: #0000FF;
order: 2;
}
.div2 {
background: #3190D4;
order: 1;
}
.div3 {
background: #99CCFF;
order: 4;
}
.div4 {
background: #B0C4DE;
order: 3;
}
</style>
<div id="div">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
</div>
</body>
主要在样式部分，UI如下：
注意：如果元素不是弹性盒对象的元素，则 order 属性不起作用。
4.align-items定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
stretch:默认值。元素被拉伸以适应容器。
如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制
center；元素位于容器的中心。
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
flex-start：元素位于容器的开头。
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：元素位于容器的结尾。
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
baseline：元素位于容器的基线上。
如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
5.justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
flex-start:默认值。项目位于容器的开头。
flex-end:项目位于容器的结尾.
center:项目位于容器的中心。
space-between：项目位于各行之间留有空白的容器内。
space-around：项目位于各行之前、之间、之后都留有空白的容器内。
6.align-content在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
提示：使用 justify-content 属性对齐主轴上的各项（水平）。
注意：容器内必须有多行的项目，该属性才能渲染出效果。
弹性布局的作用于项目的6大属性：
1.order 设置弹性盒对象元素的顺序。
实例：
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
#div {
width: 200px;
height: 200px;
background-color: yellow;
display: flex;
}
#div div {
width: 80px;
height: 80px;
color: white;
font-size: 30px;
}
.div1 {
background: #0000FF;
order: 2;
}
.div2 {
order: 3;
background: #3190D4;
}
.div3 {
order: 4;
background: #99CCFF;
}
.div4 {
order: 1;
background: #B0C4DE;
}
</style>
<div id="div">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
</div>
</body>
注意：如果元素不是弹性盒对象的元素，则 order 属性不起作用。
2.flex-grow 属性用于设置或检索弹性盒子的扩展比率。。
number：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
style样式代码如下：
<style>
#div {
width: 200px;
height: 200px;
background-color: yellow;
display: flex;
}
#div div {
width: 30px;
height: 30px;
color: white;
font-size: 30px;
}
.div1 {
flex-grow: 3;
background: #0000FF;
}
.div2 {
flex-grow: 1;
background: #3190D4;
}
.div3 {
background: #99CCFF;
}
.div4 {
background: #B0C4DE;
}
</style>
注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。
3.flex-shrink设置或检索弹性盒的收缩比率。
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
flex-shrink 的值越大收缩的越多。
number：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。
注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。
4.flex-basis设置或检索弹性盒伸缩基准值。
number：一个长度单位或者一个百分比，规定灵活项目的初始长度。
注意：如果元素不是弹性盒对象的元素，则 flex-basis 属性不起作用。设置了flex-basis之后项目的width属性失效了。
5.align-self 定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。(文字的行高、字体大小会影响每行的基线)
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
注意：align-self 属性可重写灵活容器的 align-items 属性。
6.flex复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
https://www.cnblogs.com/jerehedu/p/7358329.html
响应式布局：
https://blog.csdn.net/lesouls/article/details/81454568
响应式布局是为了一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。、
响应式布局的优缺点：
优点在于面对不同分辨率的设备灵活性强，能够解决多设备兼容性问题
缺点在于兼容所耗费的工作量大效率，代码累赘，会出现隐藏无用的元素，加载时间加长
设计思路：
第一步：设置meta标签
viewport是网页默认的宽度和高度，上面这行代码的意思是：网页宽度默认等于屏幕宽度 （width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
第二步：通过CSS3中的媒介查询设置不同设备的样式表
不使用px绝对宽度
（1）width:auto; / width:XX%;
（2）字体大小是页面默认大小的100%，即16像素。字体不要使用绝对大小"PX"，要使用相对大小“REM”
html{font-size:62.5%;} body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }
HTML布局梳理的更多相关文章
- css3 flex弹性盒子布局梳理，打通任督二脉
挺早就接触了css的flex布局,深入使用也就是在近期移动端开发.老来多健忘,只能自己梳理一下知识点,当做温故知新吧. ,请原谅小白的才疏学浅,写的不到位的地方请指正. flex属性用于设置或检索弹性 ...
- ConstraintLayoutDemo【约束性布局知识梳理】【基于1.1.3】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 在较新版本的Android Studio中新建项目默认使用 ConstraintLayout进行布局的. ConstraintLay ...
- Flex 布局知识点梳理
传统的布局方案,在针对特殊布局时会很不方便,比如垂直居中,把一个容器等分为N列等等.自从 Flex 出现以后,这些都迎刃而解了,本文对Flex相关内容做一个简单梳理. 什么是 Flex Flex 是 ...
- css-flex布局知识梳理
一.传统的布局 布局的传统解决方案,基于盒装模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 二. Flex的 ...
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- flex弹性布局学习笔记
前言 资料来源于网络,本人只是对此作了一下操作,记录于此以便以后查阅.目的在于梳理自己前端凌乱的知识点. 本文根据 Brian Franco 的一个flexbox.scss库来记录 入职新公司前对移动 ...
- HTML布局篇之双飞翼（圣杯）布局
最近在写页面的时候,总是为布局头疼,倒不是不能布出来,就是感觉不系统,没有成一个体系的感觉.所以决定自己写博文,梳理一下思路. 常用的布局方式大致可以分为三种: 浮动布局 Float 负边距(双飞翼) ...
- WPF之旅（三）- 布局之StackPanel
说到WPF的界面布局,相信很多朋友都写过Html代码.在WPF中,大多数程序都使用类似Web的(flow)流布局.在使用流布局模型时,各种控件可以按特定的要求来排列,在窗口内容发生变化时,比如窗口大小 ...
随机推荐
- mabatis--查询缓存
1.mybatis提供查询缓存,用于减轻数据库压力,提高数据库性能. 2.mybatis提供一级缓存.二级缓存: 3.一级缓存是SqlSession级别的缓存.在SqlSession对象中,存在一个数 ...
- luogu P3357 最长k可重线段集问题
这题和3358一模一样,建模形式直接不用变,就两点不一样,一是len变化了,加入y后再更新即可,还有就是可能会出现x0=x1的情况,即一条开线段垂直x轴,如果我们依旧按照上一题的建图方法,就会出现负权 ...
- django+centos+mariadb读写分离完美实现（上）-mysql主从备份实现
首先画图一张,用来展示今天要做的事情,读写分离,个人理解就是使用mysql主从备份的原理,让两个数据库同时为自己提供服务.其中主库负责数据保存,从库负责数据展示,可以一主一从,也可以一主多从.从而降低 ...
- docker-compose 修改zabbix images 添加微信报警插件 时间同步 中文乱码 添加grafana美化zabbix
我们先来看一下我们要修改得 zabbix.yaml github https://github.com/bboysoulcn/awesome-dockercompose ve ...
- Python测试进阶——（6）Bash脚本启动Python监控程序并传递PID
用HiBench执行Hadoop——Sort测试用例,进入 /HiBench-master/bin/workloads/micro/sort/hadoop 目录下,执行命令: [root@node1 ...
- open-source--攻防世界
题目直接给了源码,发现只要跳过条件就可以得到flag
- HIWORD HIBYTE
#include "pch.h" #include <iostream> #include<Windows.h> int main() { ; WORD i ...
- OpenWRT飞行计划
openwsn飞行计划 工程wiki http://openwsn-berkeley.github.io/firmware/ 2015-12-30 Openwrt 预备 openwrt 未整理 小神器 ...
- 99乘法表（for循环嵌套）
计算乘法表 两个数相乘,外层循环代表被乘数,控制行数:内层代表乘数,控制列数. 循环嵌套,变量名不可以重复. 使用 break 语句让输出的乘法表更简洁. 使用 String 变量,做 String ...
- docker安装centos7镜像
拉取centos7镜像[root@localhost ~]# docker pull centos:71启动镜像centos7,如果不指定 /bin/bash,容器运行后会自动停止[root@loca ...