后台开发写前端的思路

前端 专栏收录该内容
24 篇文章 1 订阅

后台人员刚开始写前端页面,最最头疼的要数页面布局了: 
- 想让某个元素居中,网上找了半天也没有一个好的方法? 
- 加个了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即可。 
看哪些是行内元素,哪些是块级元素


块级元素(block)特性:

  • 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
  • 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性:
  • 和相邻的内联元素在同一行;
  • 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;
块级元素主要有:
  •  address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有:
  • a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,
         textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素):
  • applet ,button ,del ,iframe , ins ,map ,object , script
CSS中块级、内联元素的应用:
 
       利用CSS我们可以摆脱上面表格里HTML标签归类的限制,自由地在不同标签/元素上应用我们需要的属性。
       主要用的CSS样式有以下三个:
  • display:block  -- 显示为块级元素
  • display:inline  -- 显示为内联元素
  • dipslay:inline-block -- 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性
        我们常将<ul>元素加上display:inline-block样式,原本垂直的列表就可以水平显示了。

题外话:最近整理有关块级元素和内联元素区别的有关知识,网上找了不少相关的文章,发现大家的理解似乎都有误,我自己亲自测试了下,发现了不少的问题:
  1. 内联元素的margin-left / margin-right及padding-left / padding-rigtht是可以控制的,所以可以通过这4个属性来控制内联元素的宽度。
  2. 内联元素的内部也可以放块级元素标签,而且内部的块级元素标签会撑大外部的内联标签,所以可以通过放块元素来控制内联元素的高度(网上介绍的是内联元素只能放文本及其他内联元素)
             例如: <a> 
                              <div style="width:100px;height:100px;">测试</div>
                          </a>

附录:col, colgroup, frameset, html, style, table, tbody, tfoot, thead, title, tr, td 等几个元素标签是只读的,也就是不能使用innerHTML等进行动态赋值.



盒模型

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

position属性

w3c定义

描述
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative 生成相对定位的元素,相对于其正常位置进行定位。因此,”left:20” 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。

display属性

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

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

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

父元素设置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 
float 可用于实现文字环绕图片 
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渲染



还可以参考其他文章

http://www.cnblogs.com/XYQ-208910/category/872633.html

转自:http://blog.csdn.net/qq_35440678/article/category/6311522

  • 0
    点赞
  • 0
    评论
  • 8
    收藏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值