HTML的三种布局：DIV+CSS、FLEX、GRID
Div+css布局
也就是盒子模型，有W3C盒子模型，IE盒子模型。盒子模型由四部分组成margin、border、padding、content。
怎么区别这两种模型呢，区别在于w3c中的width是content的宽，IE的width是content+border+padding。
具体的可以看下面的图：
W3C盒子（标准盒子）：
IE盒子：
Flex弹性布局
通过使用display：flex；或者display：inline-flex；坏处就是不能再设置子元素的float、clear、vertical-align。
在这里面主要是在元素里建立主轴（main axis、横向的、水平的），交叉轴（cross axis、垂直的，竖向的）。主轴从左到右，左是main start，右是main end，之间是main size。交叉轴是从上到下，上是cross start，下是cross end，之间是cross size。
如图所示：
就用这个为例子嘛：
<div class="box">
<p class="item">1</p>
<p class="item">2</p>
</div>
在父元素div.box中可以设置的属性有六个：
1.flex-direction：row | row-reverse | column | column-reverse;
解释：这个主要用于设置子元素的排列顺序。row表示横向排列，从左到右；row-reverse表示横向排列，从右到左；column表示竖向排列，从上到下；column-reverse表示竖向排列，从下到上。
2.flex-warp:nowarp | warp | warp-reverse;
解释：设置元素的换行，nowarp表示不换行；warp表示换行，按一般的规律换到下面去；warp-reverse表示换行，不过换行是换到这一行的上面去。
3.flex-flow
解释：他是flex-direction和flex-warp的简写，默认值是row，nowarp。
4.justify-content： flex-start | center | flex-end | space-between | space-around ；
解释：元素在主轴上的对齐方式。 flex-start左对齐；center居中；flex-end右对齐；space-between两端对齐；space-around四周对齐。
5.align-items: flex-start | center | flex-end | baseline | stretch ;
解释：元素在交叉轴上的对齐方式。flex-start上对齐；center居中对齐； flex-end下对齐；baseline文字基线对齐；stretch没有高度或高度为auto时自动充满高度。
6.align-content：flex-start | center | flex-end | space-between | space-around | stretch；
解释：主轴和交叉轴同时出现时的对齐方式。flex-start左上角对齐；center中间对齐；flex-end右下角对齐；space-between两端对齐，轴线之间平均分布；space-around每根轴线两侧间隔线相等；stretch沿交叉轴方向填充。
子元素（div.item）的六个属性：
1.order：number ;
解释：设置元素的排列顺序，数值越小越靠前，默认为0。
2.flex-grow：number；
解释:元素放大的比例，默认为0.
3.flex-shrink：number；
解释：元素缩小比例，默认为1；
4.flex-basis：length | auto；
解释：元素占据的固定空间，默认auto。
5.flex：none| auto | 其他值；
解释：flex-grow、flex-shrink、flex-basis的简写，默认值为0，1，auto。none表示（0，0，auto），auto表示（1，1，auto）。
6.align-self：auto | flex-start | center | flex-end | baseline | baseline | stretch；
解释：允许单个元素与其他元素不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示基础呢个父元素的align-items若无父元素，则等同于stretch。
我贴一个我自己的例子嘛：（主要是通过写骰子里面的圆点的位置来练习的）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*基本的元素样子*/
.box{
width: 300px;
height: 300px;
border: 1px solid red;
margin: 15px auto;
background-color: gainsboro;
}
.item{
background-color: fuchsia;
width: 60px;
height: 60px;
border-radius: 30px;
margin: 15px;
border: 1px solid black;
text-align: center;
line-height: 60px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="box">
<p class="item">1</p>
<p class="item">2</p>
</div>
<!--flex样式-->
<style>
.box{
display:flex;
}
/*1*/
/*.box{
display:flex;
}*/
/*2*/
/*.box{
justify-content: center;
}*/
/*3*/
/*.box{
justify-content: flex-end;
}*/
/*4*/
/*.box{
align-items: center;
}*/
/*5*/
/*.box{
justify-content: center;
}
.item{
align-self: center;
}*/
/*或者*/
/*.box{
justify-content: center;
align-items: center;
}*/
/*6*/
/*.box{
justify-content: flex-end;
align-items: center;
}*/
/*7*/
/*.box{
align-items: flex-end;
}*/
/*8*/
/*.box{
justify-content: center;
align-items: flex-end;
}*/
/*9*/
/*.box{
justify-content: flex-end;
align-items: flex-end;
}*/
/*12*/
/*13*/
/*.box{
flex-direction: row;
justify-content: space-between;
}*/
/*14*/
/*.box{
flex-direction: column;
}*/
/*15*/
/*.box{}
.item:nth-child(2){
align-self: center;
}*/
/*16*/
/*.box{
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.item:nth-child(1){
align-self: flex-start;
}*/
/*17*/
/*.box{
flex-direction: column;
align-content: space-between;
}*/
/*18*/
/*.box{
align-items: center;
}
.item:nth-child(1){
align-self: flex-start;
}
.item:nth-child(2){
align-self: flex-end;
}*/
/*或者*/
/*.box{
align-items: flex-end;
}
.item:nth-child(1){
align-self: flex-start;
}*/
/*19*/
/*.box{
justify-content: space-between;
}
.item:nth-child(2){
align-self: flex-end;
}*/
</style>
</body>
</html>
Grid网格布局
通过display：grid；或者display：inline-grid；网格线将元素分成一个一个的小格子。
如图，每一条线都是网格线，水平的网格线从上到下一次是网格线1、网格线2、网格线3；垂直的网格线是网格线1、网格线2、网格线3、网格线4。
给元素划分网格父元素会使用到如下的属性：
1.grid-temlate-columns：number/perecent；划分列。可以有多个值（可以是具体的100px也可以是百分比），每一个值代表一列。
2.grin-template-rows：number/percent；划分行。与划分列的规则一样。
子元素可以独占一个网格也可以占多个网格，属性设置如下：
1.grid-columns-start：number；元素从哪个网格线列开始。
2.grid-columns-end：number；元素到哪个网格线列结束。
3.grid-row-start：元素从哪个网格线行开始；
4.grid-row-end：元素从哪个网格行结束；
1~4这几个属性就相当于设置元素的跨几行、跨几列这样。
下面是我自己写的例子，仅供参考哦：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.warpper{
display: grid;
border: 3px solid aquamarine;
text-align: center;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
div:nth-child(1) {
background-color: firebrick;
}
div:nth-child(2) {
background-color: forestgreen;
}
div:nth-child(3) {
background-color: fuchsia;
}
div:nth-child(4) {
background-color: cornflowerblue;
}
div:nth-child(5) {
background-color: gold;
}
div:nth-child(6) {
background-color: greenyellow;
}
.item1{
grid-column-start: 1;
grid-column-end: 3;
}
.item3{
grid-row-start: 2;
grid-row-end: 4;
}
.item4{
grid-column-start: 2;
grid-column-end: 4;
}
</style>
</head>
<body>
<div class="warpper">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
以上就是我自己对与HTML中的三种布局的认识，有不足的地方还请各位帮我指出来，这样下次就会多加注意啦！！！谢谢
我想我应该把我自己参考学习的博客贴出来的，可是不知道怎么弄，我再研究下，这样下一篇就可以贴出来
HTML的三种布局：DIV+CSS、FLEX、GRID的更多相关文章
- CSS三种布局模型是什么？
在网页中,元素有三种布局模型:流动模型(Flow) 默认的.浮动模型 (Float).层模型(Layer).下面我们来看一下这三种布局模型. 三种布局模型介绍: 1.流动模型(Flow) 流动(Flo ...
- JavaGUI三种布局管理器FlowLayout,BorderLayout,GridLayout的使用
三种布局管理器 流式布局FlowLayout package GUI; import java.awt.*; import java.awt.event.WindowAdapter; import j ...
- 三种方法实现CSS三栏布局
本文由云+社区发表 作者:前端林子 本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果 1.方法一:自身浮动的方法 实现方法:需要左栏向左浮动,右栏向右浮动,中间设左右margin来 ...
- HTML中放置CSS的三种方式和CSS选择器
(一)在HTML中使用CSS样式的方式一般有三种: 1 内联引用 2 内部引用 3 外部引用. 第一种:内联引用(也叫行内引用) 就是把CSS样式直接作用在HTML标签中. <p style ...
- HTML布局四剑客-Flex,Grid,Table,Float
前言 在HTML布局中有很多的选择,同一种表现方式可以使用不同的方法来实现.下面来对四种最常见的布局方式进行阐述和解释,它们分别是Float,Table,Grid和Flex Float 第一位出场的就 ...
- css三种布局方式
第一种布局方式:标准流(文档流) 标准流即为元素默认的显示方式.如块级元素独占一行,行内元素可以在一行显示. 第二种布局方式:浮动,float属性 浮动对应的css属性是float:left/righ ...
- 【Android学习】三种布局<include />、<merge />、<ViewStub />
1.布局重用<include /> <include />标签能够重用布局文件,使用起来非常简单 <include layout="@layout/layout ...
- Python连载61-tkinter三种布局
一.pack布局举例 #pack布局案例 import tkinter baseFrame = tkinter.Tk() #以下代码都是创建一个组件,然后布局 btn1 = tkinter.Butto ...
- css之页面三列布局
左右两边宽度固定,中间自适应 第一种方法:左右两边绝对定位 html代码 <div class="left"></div> <div class=&q ...
随机推荐
- Linux笔记（固定USB摄像头硬件端口，绑定前后置摄像头）
在Android的系统会有前置摄像头和后置摄像头的定义,摄像头分为SOC类型的摄像头和USB这一类的摄像头,接下要分析就是USB摄像头这一类 . 一般在android或者linux系统中分析一个模块, ...
- Gluon炼丹（Kaggle 120种狗分类，迁移学习加双模型融合）
这是在kaggle上的一个练习比赛,使用的是ImageNet数据集的子集. 注意,mxnet版本要高于0.12.1b2017112. 下载数据集. train.zip test.zip labels ...
- JAVA基础2——类初始化相关执行顺序
类初始化相关执行顺序 几个概念说明 代码块的含义与作用 static静态代码块: 一般用于初始化类中的静态变量.比如:给静态的数组或者list变量赋初值.使用static静态代码块进行初始化与直接在定 ...
- Nova控制节点集群
#Nova控制节点集群 openstack pike 部署 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html ##Nova控制节点集群 # control ...
- 大数据学习系列之一 ----- Hadoop环境搭建(单机)
一.环境选择 1,服务器选择 阿里云服务器:入门型(按量付费) 操作系统:linux CentOS 6.8 Cpu:1核 内存:1G 硬盘:40G ip:39.108.77.250 2,配置选择 JD ...
- Android破解学习之路（一）——简单的登录破解
最近突然心血如潮开始学了Android破解,初入门,便是将经验记录下来. 准备工作: 1.一个登录简单APP 在我们破解之前,我们需要做一个简单的登录APP,输入相应的账号与密码便是弹出登录成功的对话 ...
- 51Nod 2006 飞行员配对（二分图最大匹配）
链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=2006 思路: 二分匹配 注意n m的关系 代码: #include ...
- YiShop_如何选择B2C商城开发商
说到B2C商城开发,现在网上搜索能搜出来一大堆开发公司的信息出来.面对如果巨大的信息用户应该如果去评估和判断哪家更适合自己呢!其实开发B2C商城不仅体现在一家开发公司本身的具体实力,还体现在对每一个商 ...
- day7、用户登陆出现-bash-4.1$错误的原因
有时候在使用用户登陆Linux系统时会出现-bash-4.1$错误,不显示用户名,路径信息. 原因:用户家目录里面与环境变量有关的文件被删除所导致的 .bash_profile .bashrc 这两个 ...
- 灵感手环第一步——0.96寸OLED显示实验
这算是我这个系列的第一篇博客吧.首先要解决的就是屏幕显示问题.我选择了目前新兴起的OLED显示模块. OLED(OrganicLightEmittingDiode),中文译作有机发光二极管,目前被广泛 ...