写给后台人员看的前端开发指南-布局篇

蔚落 2022-05-26 04:07 246阅读 0赞

原文：[https://blog.csdn.net/qq\_35440678/article/details/53073194][https_blog.csdn.net_qq_35440678_article_details_53073194]

后台人员刚开始写前端页面，最最头疼的要数页面布局了：

\- 想让某个元素居中，网上找了半天也没有一个好的方法？   
\- 加个了float：left怎么整个页面都乱套了？   
\- 怎么让这个元素换行，怎么让那个元素不换行？   
\- 怎么把这几个div横向排列不换行？   
\- 看别人的代码满屏都是div，眼花缭乱？   
\- 书了看了，网上的教程也跟着学了，为什么等到自己要真正开始写的时候却写不出来，那么多标签、那么多css样式，要用哪个？   
\- …

本人自己也兜兜转转学了很久，看了很多视频教程还有经典书籍，比如《HTML5权威指南》、《CSS权威指南》、《Javascript高级程序指南》、《锋利的jquery》。看书的时候都能看懂，但是真正上手随便写个简单页面时感觉整个人都蒙了，不知道从何写起。仔细想想除了缺乏实践，但更重要的是前端还是和后台开发有着很大的本质区别，我个人总结主要有：

*  后台是单语言，入门和掌握的点比较单一，比如你学php、C/C++、java、python其中的一种，只要买一本入门教程，按照里面的例子写就算入门了，代码都是单线程顺序执行，执行流程比较清晰。而前端则需要HMTL、CSS、JS三者一起共同来实现，因此学习的知识比较分散，而且没有经历过实践的话会比较乱；
 *  前端知识基本靠实践和经验，而这恰恰是经典书籍所欠缺的，书本上都是介绍基本概念，每一个标签、每一个样式的使用，而实际页面需要多方面结合；
 *  前端知识太灵活多变，框架一年甚至几个月大变血一次。

总之，就是后台开发写前端很难，思维模式差别很大。虽然大多数人认为写后台的才是真的的抵达技术巅峰，每天接触的是服务器、数据库、高并发、海量、TCP、黑客。但是却被前端的标签、样式弄得死去活来。   
鉴于自己学习前端的痛苦经历，写下这篇博客，希望给那些后台人员想写前端或者转前端的人的一些实用的建议。   
好了，废话不多说，下面进入正题。   
希望本文能达到一个目的：看完后基本能实现自定义布局，掌握一些基本布局技巧、能做出自己想要的页面布局。

#### 首先，理解几个和布局相关的概念： ####

*  理清行内元素和块级元素
 *  理解盒子模型。width、height、margin、padding、bodder
 *  position属性定位
 *  float属性
 *  display属性

#### 行内元素、块级元素 ####

相信大家都接触过这两个概念了，那我问一个问题，为什么要搞清楚这两个概念，很简单明确知道哪些标签是行内元素、哪些标签是块级元素对布局有直接影响。主要区别是：

> 行内元素只是行内的元素，不换行   
> 块级元素是一个元素沾满一行，如果两个块级元素写在一起（比如两个div），默认是分两行展示，除非设置float或者display（后面会讲到），此外块级元素还可以设置边距（盒子模型属性）。   
> 行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

因此，判断一个位置到底是用行内元素还是块级元素很明显的一个判断方法就是是否需要换行或者是否需要设置长宽和上下边框/距。 首先选用行内元素，比如在一行中有一个文字需要变颜色/加粗，那么直接用行内元素span即可。   
[看哪些是行内元素，哪些是块级元素][Link 1]

#### 盒模型 ####

盒子模型，相信大家也是听到烂了，核心就是margin、padding加上width、height影响一个块级元素的大小。   
[看资料][Link 2]

#### position属性 ####

[w3c定义][w3c]

<table style="width:780px;text-align:center;color:rgb(69,69,69);font-family:'-apple-system', 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif, SimHei, SimSun;font-size:16px;background-color:rgb(255,255,255);"> 
 <thead> 
  <tr> 
   <th style="vertical-align:middle;">值</th> 
   <th style="vertical-align:middle;">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="vertical-align:middle;">absolute</td> 
   <td style="vertical-align:middle;">生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">fixed</td> 
   <td style="vertical-align:middle;">生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">relative</td> 
   <td style="vertical-align:middle;">生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">static</td> 
   <td style="vertical-align:middle;">默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:middle;">inherit</td> 
   <td style="vertical-align:middle;">规定应该从父元素继承 position 属性的值。</td> 
  </tr> 
 </tbody> 
</table>

#### display属性 ####

display 属性规定元素应该生成的框的类型。[w3c定义][w3c 1]

看了上面的知识估计还是一头雾水，没有关系，下面进行实践结合：

#### 轻松布局第一条：子元素使用绝对定位 ####

父元素设置position:relative   
子元素：position:absolute,”left”, “top”, “right” 以及 “bottom”   
可以定位子元素到任意位置。

#### 轻松布局第二条：行内元素与块级元素转换 ####

行内元素->块级元素：display:block ,块状元素是独占整行的，可以设置宽高   
块级元素->行内元素：display:inline-block，排版可以同放一行。   
有了这个转换就不用float：left难以控制的布局。

#### 轻松布局第三条：宽高从里到外 ####

盒子模型大小从最里面的元素开始往上设置，最先设置最里面元素的width和height已经margin和padding。那样外层的div就会自动被撑开，不需要显示声明了。

### 几条实践技巧 ###

#### 单行文字水平/垂直居中 ####

水平居中可以设置：text-align:center，垂直居中对于单行有个技巧设置行高等于整体高度：line-height:40px;

#### 什么时候用float:left布局 ####

[http://zh.learnlayout.com/float.html][http_zh.learnlayout.com_float.html]   
float 可用于实现文字环绕图片   
[https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-layout.html][https_leohxj.gitbooks.io_front-end-database_content_html-and-css-basic_css-layout.html]

##### 善用ul/li #####

对于明显列表项的使用ul/li，代替对个div布局，而是使用ul/li里面包含div

#### html/css/js书写流畅 ####

很明显是先写html页面布局，将页面先拆解写出html结构，然后利用css渲染。

[https_blog.csdn.net_qq_35440678_article_details_53073194]: https://blog.csdn.net/qq_35440678/article/details/53073194
[Link 1]: http://blog.csdn.net/sykent/article/details/7738408
[Link 2]: http://zh.learnlayout.com/box-model.html
[w3c]: http://www.w3school.com.cn/cssref/pr_class_position.asp
[w3c 1]: http://www.w3school.com.cn/cssref/pr_class_display.asp
[http_zh.learnlayout.com_float.html]: http://zh.learnlayout.com/float.html
[https_leohxj.gitbooks.io_front-end-database_content_html-and-css-basic_css-layout.html]: https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-layout.html