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)流布局.在使用流布局模型时,各种控件可以按特定的要求来排列,在窗口内容发生变化时,比如窗口大小 ...
随机推荐
- topthink/think-swoole 扩展包的使用 之 Task
本想自己适配的,奈何keng貌似不少,所以果断选择官方提供的包来适配233... 默认条件:thinkphp5.1.*版本下,且安装了swoole扩展 主要演示:task 任务的投递 友情提示:在sw ...
- java并发初探CountDownLatch
java并发初探CountDownLatch CountDownLatch是同步工具类能够允许一个或者多个线程等待直到其他线程完成操作. 当前前程A调用CountDownLatch的await方法进入 ...
- 华为轮值CEO,富士康却坚持独裁，二者究竟有什么不一样？
谈到深圳龙华的大企业,人们会很自然地想到华为和富士康,两家公司毗邻,有两个门仅仅隔着一条马路,都是世界500强,对国家,对社区的经济发展有着重要贡献,员工压力最大的时候,也都出现过自杀的情况,一个讲究 ...
- 【rabbitmq】Queueingconsumer被废止后老代码如何做的解决方案
amqp-client 3.x之前的rabbitmq版本有个消费者的写法是借助于Queueingconsumer的: QueueingConsumer consumer = new QueueingC ...
- SciPy 优化
章节 SciPy 介绍 SciPy 安装 SciPy 基础功能 SciPy 特殊函数 SciPy k均值聚类 SciPy 常量 SciPy fftpack(傅里叶变换) SciPy 积分 SciPy ...
- python-python基础2
本章内容: 1.列表.元组 2.字典 3.集合 4.文件操作 5.字符编码与转码 一.列表.元组操作 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 names= ...
- MQTT 协议学习： QoS等级 与 会话
背景 QoS 等级 与 通信的流程有关,直接影响了整个通信.而且篇幅比较长,所以我觉得应该单独拎出来讲一下. 概念 QoS 代表了 服务质量等级. 设置上,由2 位 的二进制控制,且值不允许为 3(0 ...
- MySQL设置各类字符集
一.查看字符集编码: 登录mysql show variables like '%character%'; 二.修改编码: 编辑/etc/my.cnf ,设置后的配置文件如下: [root@node0 ...
- 【转置】使用mysql转置表格行和列
1.原始表 2.查询结果表 3.查询语句 1 SELECT 2 year1, 3 SUM( CASE WHEN mon= 1 THEN account END ) AS m1, 4 SUM( CASE ...
- Linux-lsxxx
Linux-lsxxx ls list directory contents 列出文件及目录 lsattr List file attributes on a Linux second extende ...