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)流布局.在使用流布局模型时,各种控件可以按特定的要求来排列,在窗口内容发生变化时,比如窗口大小 ...
随机推荐
- java并发之Future与Callable使用
java并发之Future与Callable使用 这篇文章需要大家知道线程.线程池的知识,尤其是线程池. 有的时候我们要获取线程的执行结果,这个时候就需要用到Callable.Future.Futur ...
- 四、java基础-面向过程_对象_类中可出现的因素
1.面向过程和面向对象区别: 1)面向过程:开发一个应用程序.一个项目,必须先了解整个过程,了解各个步骤.模块间的因果关系,使的面向过程方式去开发程序时,代码和代码之间的关联程度是非常强.所以其中任何 ...
- 学习笔记：中国剩余定理（CRT）
引入 常想起在空间里见过的一些智力题,这个题你见过吗: 一堆苹果,\(3\)个\(3\)个地取剩\(1\)个,\(5\)个\(5\)个地取剩\(1\)个,\(7\)个\(7\)个地取剩\(2\)个,苹 ...
- redis中关闭rdb跟aof
https://zm10.sm-tc.cn/?src=l4uLj8XQ0IiIiNGdip2KlJDRnJCS0JaRmZCbmouelpPSzc%2FJz8vJxtGXi5KT&uid=49 ...
- 阿里云服务器win2003下iis整合tomcat共享80端口
阿里云服务器win2003下iis整合tomcat共享80端口 很多机器都用tomcat跟IIS部署不同网站.最近买了阿里云的服务器.于是也想玩一下.网上百度了很多方法.但是都有缺陷说的不是很清楚.通 ...
- Python面试2未完待续
Python面试重点(基础篇) 注意:只有必答题部分计算分值,补充题不计算分值. 第一部分 必答题(每题2分) 简述列举了解的编程语言及语言间的区别? c语言是编译型语言,运行速度快,但翻译时间长py ...
- 《动手学深度学习》系列笔记 —— 语言模型（n元语法、随机采样、连续采样）
目录 1. 语言模型 2. n元语法 3. 语言模型数据集 4. 时序数据的采样 4.1 随机采样 4.2 相邻采样 一段自然语言文本可以看作是一个离散时间序列,给定一个长度为\(T\)的词的序列\( ...
- Project导入RedMine甘特图展示
前端时间因公司业务需要使用RedMine来管理项目进度. 但是使用其自带的csv导入工具无法完成导入. 而我是java开发,并不会所谓的ruby语言,自然无法在段时间内完成此导入功能的修改. so,经 ...
- java核心-多线程(4)-线程类基础知识
1.并发 <1>使用并发的一个重要原因是提高执行效率.由于I/O等情况阻塞,单个任务并不能充分利用CPU时间.所以在单处理器的机器上也应该使用并发. <2>为了实现并发,操作系 ...
- 1.HDFS分布式文件系统
HDFS概述及设计目标 如果让我们自己设计一个分布式文件存储系统,怎么做? HDFS设计目标 非常巨大的分布式文件系统 运行在普通廉价的硬件上 易扩展,为用户提供性能不错的文件存储系统 HDFS架构 ...