前端基础--布局

曾经终败给现在 2022-03-26 11:44 334阅读 0赞

开发工具与关键技术：DW ；简单页面布局。  
作者：刘佳明  
撰写时间：2019年1月16日

我们现阶段的布局方式有三种较为常用

1.  定位
2.  浮动
3.  弹性布局  
    在熟悉DW 的使用之后；我们开始来运用盒模型；它在编程中的官方名称为多栏式布局；

在it界内更多的是叫作盒模型；

其主要的作用就是为了在一个页面内，能够简便的把标签之间的父子级别的关系条理清楚

多使用定位；浮动这两类来调动标签的位置；

“大盒子套着小盒子，盒子又连着多间距” 这句话也能够很好的帮助我们记忆盒模型的又一大特点；盒子与盒子之间又又着间距来细微的调整

以下是未使用定位；浮动的代码及页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 1]  
我们能够很明显的看到两个名为“con”和“cos”相对于名为“contain”的标签（ 也就是他们的父级标签）互相堆叠在一起  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 2]  
定位  
下面为添加定位后的表现  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 3]  
定位的使用：  
先相对，后绝对  
position: relative ;/*相对定位*/ 用于需要调正标签的父级上；

position: absolute;/*绝对定位*/ 用于需要调正标签的上；  
top:0px; //离上面的距离为0px;  
right:0px; //离右面的距离为0px;

在相对定位的后面可添加位置的相关代码：便于更好的调正位置

.cod{
    	width:300px;/*宽度为300px*/
    	height:100px;/*高度为100px*/
    	background:#E8D738;/*背景颜色为#E8D738(淡黄色)*/
    	position: absolute;/*绝对定位*/
    	top:0px;
    	right:0px;
    	/*	float:right;*/
    
    }
    .cof{
    	width:300px;/*宽度为300px*/
    	height:100px;/*高度为100px*/
    	background:#C46ED7;/*背景颜色为#C46ED7(淡紫色)*/
    	position: absolute;/*;绝对定位*/
    	top:0px;
    	right:0px;
    	/*float:right;*/
    
    }

接下来我们在“con”的标签内放置一个h3 标签 来看看边距的影响  
Margin-left：0px  
Margin-right：0px  
Margin-top：0px  
Margin-bottom：0px

![在这里插入图片描述][20190117091352939.png]  
![在这里插入图片描述][20190117091956122.png]  
![在这里插入图片描述][20190117092013487.png]  
说到边距的使用；我个人现阶段在边距的应用中认为：内边距padding 和外边距margin 的区分不必太过纠结；在同一标签的环境下，去分别使用两个边距 ；效果的区别并不大  
SD

浮动  
把定位的代码注释；使用浮动同样可完成  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 4]

.cod{
    	width:300px;/*宽度为300px*/
    	height:100px;/*高度为100px*/
    	background:#E8D738;/*背景颜色为#E8D738(淡黄色)*/
    	/*position: absolute;绝对定位
    	top:0px;
    	right:0px;*/
    		float:right;
    
    }
    .cof{
    	width:300px;/*宽度为300px*/
    	height:100px;/*高度为100px*/
    	background:#C46ED7;/*背景颜色为#C46ED7(淡紫色)*/
    	/*position: absolute;绝对定位
    	top:0px;
    	right:0px;*/
    	float:right;
    
    }

弹性布局  
在网页设计d的布局中有三种方法；定位，浮动，弹性布局；这其中前两种方法，在处理一些特殊的页面布局时，操作太麻烦，较为繁琐，而弹性布局能够很好的解决这些问题；这就促使了弹性布局在布局中的重要性；

在弹性布局中将父子级的关系作出了特别的定义；  
将父级称之为容器； 父级容器  
将子级称之为项目； 子级项目

注意：在使用了display : flex; (即弹性布局)后，在容器（父级）中关于定位，浮动，边距等属性将会失效；

在容器中加入display : flex; 容器中的项目就会出现并排显示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 5]

.contain{
    	width:500px; /*宽度为200px*/
    	height:300px;/*高度为100px*/
    	background: #eee;/*背景颜色为red(红色)*/
    	/*position: relative;*//*相对定位*/
    	display: flex;
    	
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 6]  
下面是在弹性布局中最为常用的几个属性；

在使用弹性布局前，首先要清楚属性效果的依据是什么？  
弹性布局中的各类位置属性；大多是根据容器的主轴位置来改变项目的位置；  
在百度是我们可以百度到关于弹性布局主轴的描绘图；具体如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 7]  
主轴分为水平轴和交叉轴；  
Main axis水平轴 main start 为开始部分；main end未结束部分。  
Cross axis水平轴 cross start 为开始部分；cross end未结束部分。

flex-direction 决定了主轴的位置及方向

.contain{
    	width:500px; /*宽度为200px*/
    	height:300px;/*高度为100px*/
    	background: #eee;/*背景颜色为red(红色)*/
    	/*position: relative;*//*相对定位*/
    	display: flex;
    	flex-direction:column;
    	/*flex-direction:column-reverse;
    	flex-direction:row;
    	flex-direction:row-reverse;*/
    }

Flex-direction:column;的效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 9]  
Flex-wrap:表示在轴线上是否换行  
Flex-wrap:nowrap;  
Flex-wrap:wrap;  
Flex-wrap:nowrap-reverse;;  
该属性要起效果需多个标签  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 10]  
flex-wrap: wrap; 效果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 11]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 12]  
Justify-content:表示项目在主轴上的堆成；  
justify-content: flex-start  
justify-content: flex-end;  
justify-content: center;  
justify-content: space-between;  
justify-content: space-around;

其中justify-content: center;效果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 13]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 14]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 15]  
以上便是应用弹性布局来代替定位，浮动的属性；很简单三句属性代码就可完成；  
（注：以上弹性布局仅为容器（‘父级’）的属性）；

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70]: /images/20220326/bb47c626b4494dad9b66be26983a1e9e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 1]: /images/20220326/c04e9bf07a694502b043defaab7d84cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 2]: /images/20220326/ad0b4109805243f48fdcee2fd972861d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 3]: /images/20220326/382e03879f94424b8b90206941d4bd5e.png
[20190117091352939.png]: /images/20220326/4e65d8f61f8d476bb8c2f3fb0d3ae70c.png
[20190117091956122.png]: /images/20220326/fbdae92151714e3fb666af4af58a22ba.png
[20190117092013487.png]: /images/20220326/a55851e5e3954f3c81e7df6195d3d2fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 4]: /images/20220326/7a6ac4df0796483daaf3d7fe48528c77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 5]: /images/20220326/7b09c52fe0eb4b5bab7e7500564b8d32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 6]: /images/20220326/ad8e4d920ad8491cbe2b86d549b4d94c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 7]: /images/20220326/79734f953c56419b971afe7c9337bbbf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 8]: /images/20220326/578b15714f4a4ba49ea454f77c652d30.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 9]: /images/20220326/96f49218ba7a4512a2f978169d71bc57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 10]: /images/20220326/76df98c73ff54f61a7d666c2a6da4ad8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 11]: /images/20220326/b0510bb690204f74bb37d5fb713c650e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 12]: /images/20220326/f58528d8889541069364aefed7f5b914.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 13]: /images/20220326/462fbc749ab742ba80e1f651b4b2559d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 14]: /images/20220326/185ffbf796974c60b1616eb090d21c29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 15]: /images/20220326/2a69a57fe6984bfaa9ac7ddf9240835e.png