HTML从基础到精通（十二）

vlambda
2020-04-05

HTML从基础到精通（十二）

今天给大家带来HTML的常用的三种布局方式，这也是之前内容的延申，这一部分也是相当重要的。

固定布局

今天给大家带来的第一种布局方式就是固定布局，这也是html中最常见最简单的布局方式，但是同时它具有很多的局限性，是其他布局方式的基础。（今天就不给大家带来程序截图了，给大家看一下源码）

<! DOCTYPE html >

< html >

< head >

< meta charset= "UTF-8" >

< title >固定布局 </ title >

< style type= "text/css" >

margin: 0;

padding: 0;

}

html, body{

width: 100% ;

height: 100%;

}

.fixedlayout{

width: 800px ;

background: black;

padding: 10px;

margin: 100px auto ;

overflow: hidden;

}

.left{

width: 380px;

height: 200px;

background: grey;

text-align: center;

line-height: 200px;

display: inline-block;

margin: 0px 15px ;

float: left;

}

.right{

width: 380px;

height: 200px;

background: blueviolet ;

text-align: center;

line-height: 200px ;

display: inline-block;

float: left;

}

</ style >

</ head >

< body >

</ body >

< div class= "fixedlayout" >

< div class= "left" >

我是固定布局1

</ div >

< div class= "right" >

我是固定布局2

</ div >

</ html >

流式布局

流式布局也叫百分比布局。把元素的宽,高,margin,padding不再用固定数值,改用百分比,这样元素的高,margin,padding 会根据页面的尺寸随时调整，已达到适应当前页面的目的.

width:宽度的百分比是相对于父盒子width内容宽的比。没有父盒子就是相对于浏览器的宽。
height:高度的百分比是相对于父盒子height内容高的比。
padding,margin.:padding和margin不管任何方向百分比都是相对于父盒子width内容宽的比。
border：不能书写百分数

子盒子如果绝对定位，width百分比参考的是距离最近，且有定位的父盒子的width（算上padding.）；

height百分比参考的是距离最近，且有定位的父盒子的height（算上padding.）。
padding,margin百分比参考的是距离最近，且有定位的父盒子的width（算上padding.）。

HTML从基础到精通（十二）

<! DOCTYPE html >

< html >

< head >

< meta charset= "UTF-8" >

< title >流式布局 </ title >

< style type= "text/css" >

margin: 0;

padding: 0;

}

html, body{

width: 100% ;

height: 100%;

}

.fixedlayout{

width: 80%;

background: black;

padding: 10px;

margin: 100px auto ;

overflow: hidden;

}

.left{

width: 40%;

height: 200px;

background: gray;

text-align: center;

line-height: 200px;

display: inline-block;

margin: 0px 15px ;

float: left;

}

.right{

width: 40%;

height: 200px;

background: blueviolet;

text-align: center;

line-height: 200px ;

display: inline-block;

float: left;

}

</ style >

</ head >

< body >

</ body >

< div class= "fixedlayout" >

< div class= "left" >

我是流式布局1

</ div >

< div class= "right" >

我是流式布局1

</ div >

</ html >

弹性盒布局

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

<! DOCTYPE html >

< html >

< head >

< meta charset= "utf-8" >

< title >弹性盒1 </ title >

< style >

margin: 0 auto;

padding: 10px;

}

.flex-container {

display: -webkit-flex;

display: flex;

width: 400px;

height: 250px;

background-color: lightgrey;

}

.flex-item {

background-color: cornflowerblue;

width: 100px;

height: 100px;

margin: 10px;

}

</ style >

</ head >

< body >

< div class= "flex-container" >

< div class= "flex-item" >项目 1 </ div >

< div class= "flex-item" >项目 2 </ div >

< div class= "flex-item" >项目 3 </ div >

</ div >

</ body >

</ html >

<! DOCTYPE html >

< html >

< head >

< meta charset= "utf-8" >

< title >弹性盒2 </ title >

< style >

margin: 0 auto;

}

body {

direction: rtl;

padding: 10px;

}

.flex-container {

display: -webkit-flex;

display: flex;

width: 400px;

height: 250px;

background-color: lightgrey;

}

.flex-item {

background-color: cornflowerblue;

width: 100px;

height: 100px;

margin: 10px;

}

</ style >

</ head >

< body >

< div class= "flex-container" >

< div class= "flex-item" >项目 1 </ div >

< div class= "flex-item" >项目 2 </ div >

< div class= "flex-item" >项目 3 </ div >

</ div >

</ body >

</ html >

<! DOCTYPE html >

< html >

< head >

< meta charset= "utf-8" >

< title >弹性盒3 </ title >

< style >

margin: 0 auto;

padding: 10px;

}

.flex-container {

display: -webkit-flex;

display: flex;

-webkit-flex-direction: column;

flex-direction: column;

width: 400px;

height: 250px;

background-color: lightgrey;

}

.flex-item {

background-color: cornflowerblue;

width: 100px;

height: 100px;

margin: 10px;

}

</ style >

</ head >

< body >

< div class= "flex-container" >

< div class= "flex-item" >项目 1 </ div >

< div class= "flex-item" >项目 2 </ div >

< div class= "flex-item" >项目 3 </ div >

</ div >

</ body >

</ html >

<! DOCTYPE html >

< html >

< head >

< meta charset= "utf-8" >

< title >弹性盒4 </ title >

< style >

margin: 0 auto;

padding: 10px;

}

.flex-container {

display: -webkit-flex;

display: flex;

-webkit-flex-direction: column-reverse;

flex-direction: column-reverse;

width: 400px;

height: 250px;

background-color: lightgrey;

}

.flex-item {

background-color: cornflowerblue;

width: 100px;

height: 100px;

margin: 10px;

}

</ style >

</ head >

< body >

< div class= "flex-container" >

< div class= "flex-item" >项目 1 </ div >

< div class= "flex-item" >项目 2 </ div >

< div class= "flex-item" >项目 3 </ div >

</ div >

</ body >

</ html >

当然还有很多案例，但是由于文章篇幅原因，就不再过多的介绍了。有兴趣的同学可以上W3Cschool、菜鸟教程、CSDN等网站有专门的知识介绍。

浮动布局

此布局上述都有演示浮动布局，此处就不做代码演示，浮动布局关键词，float，可以设置left或者right，他使元素脱离文档流进而达到布局的目的，也是目前一个比较主流的布局方式，但是使用浮动的结束以后，别忘记清除浮动。

定位布局

定位布局也是目前比较常用的一种布局方式，关键词：position: fixed;固定布局，将元素固定在一个位置，不随页面移动而移动，position: relative;相对定位，相对于元素自身定位，不脱离文档流，相当于定义一个参照物，一般和绝对定位结合使用，position: absolute;绝对定位，脱离文档流，一般和相对定位结合使用，如果不定义相对定义，将会相对于整个浏览器定位，所以定位布局，一般情况下都是相对定位和绝对定位结合着来，相当定位相当于划定一个势力范围，制定一个封闭的容器块，然后绝对定位就行对于相对定位来定位，从而达到有效的布局。

<! DOCTYPE html >

< html >

< head >

< meta charset= "UTF-8" >

< title >定位布局 </ title >

< style type= "text/css" >

margin: 0;

padding: 0;

}

html, body{

width: 100% ;

height: 100%;

}

.fix{

width: 200px ;

height: 200px;

background: blanchedalmond ;

position: fixed;

left: 50% ;

top: 50% ;

z-index: 10 ;

margin-left: -100px ;

margin-top: -100px ;

}

.location{

width: 960px;

height: 500px;

background: gray;

padding: 10px;

margin: 100px auto ;

position: relative;

}

.div1{

width: 300px;

height: 300px ;

background: cadetblue ;

position: absolute;

left: 10%;

top: 20% ;

text-align: center;

line-height: 300px;

}

.div2{

width: 300px;

height: 300px ;

background: blueviolet ;

position: absolute;

left: 50%;

top: 20% ;

text-align: center;

line-height: 300px;

}

</ style >

</ head >

< body >

</ body >

< div class= "fix" >

我是固定定位

</ div >

< div class= "location" >

< div class= "div1" >

我是绝对定位1

</ div >

< div class= "div2" >

我是绝对定位2

</ div >

</ html >

今天的内容介绍就到这里，有问题可以留言，下期我们将进入到JavaScript的学习，前面还有不懂的或者很多基础知识不了解的可以去我推荐的几个网站系统学习一下。

END

扫码关注

黄伟丨B1706

更多精彩等着你

vlambda博客
学习文章列表