开发者俱乐部

标题: 哪些专业的CSS技巧是初级web前端开发工具 [打印本页]

作者: xman    时间: 2016-7-10 06:53
标题: 哪些专业的CSS技巧是初级web前端开发工具
这篇文章的读者应该是刚开始开发,或者准备开始开发前端的有经验的开发者,总结了一些非常有用的可以快速上手的CSS布局技巧。

  HTML的布局特点

  要理解默认的布局流,块级元素是从上到下,行内元素是从左到右。都是左对齐。

  一切皆为框,块级元素与行内元素

  HTML的元素分为二个种类,一个是块级元素,一个是行内元素。块级元素的特点是独自开启一行,且独自中据一行;行内元素的特点是在一行内显示,自己多大就占据多大空间。可以通过display属性来改变元素默认的显示属性。

  常见的块级元素是:div, p, ol, ul, li

  常见的行内元素是: a, img, span

  元素和容器

  对于常见的GUI框架,都有二种东西来做布局,一个是元素(通常叫Widget),另一个是布局管理器,也就是用于管理或者组合Widget用的。在安卓里就是View和ViewGroup。

  使用布局管理器的目的也很简单,就是为了把部分变成整体,方便操作。

  div是用来组合和管理块级元素的。而span是用来组合和管理行内元素。

  建议多多使用div和span来组合和管理你的布局,就像使用ViewGroup来管理和组合View一样。

  理解盒子模型

  其实,有过其他GUI框架经验的人理解盒子模型很容易,margin是border外的间距,padding是border内间距,整体元素占据的空间就是margin+border+padding+元素本身的大小。

  父元素的大小与子元素的关系

  比如安卓,父元素的大小是受子元素影响的,父元素可是基于子元素大小来计算(wrap_content),当子元素超出父元素时,子元素是会被clip的。

  CSS里却灵活的多,默认的,父元素的大小与子元素没有关系,需要分别单独指定,也无法让其wrap_content。当子元素的大小超过了父元素时,是通过overflow属性的决定如何显示的:hidden,表示clip;scoll表示用scrollbar来滚动。

  对齐方式

  左对齐或者右对齐也是布局中常见的需求。对于块元素可以通过float属性来控制,默认的float是left。当设置为right时,就可以把元素右对齐。通常后面跟一个clear: both来清除float属性。因为float会改变默认的布局流,后面所有的元素都将按此方式来排,当然这不是期望的。float的介绍以及关于float都是很好的文章。

  当然,对于position不是static的,就要通过left/right来控制了。

  居中方式

  居中也是非常常见的一个需求。

  让某一个元素在整个屏幕中完全居中

  比如显示一个Dialog,肯定是要在屏幕中央显示的了。 让元素在整体屏幕居中,肯定要把元素从整体文档中拿出来,也就是不能用正常的文档流。所以这个元素应该是position: fixed,然后它的left和top要设置为50%,但是这样子后是元素的左上角是在屏幕正中,所以为了让元素居中还要把元素向左和向上移动其大小的50%,可以通过transform来实现,完整的CSS如下:



  详细的解释请参阅这篇文章

  块级元素的居中方式

  把margin设置为auto一般情况下可以把块级元素居中,但需要指定元素的宽和高,这样浏览器才能计算出来,比如:



  元素内的文字居中

  上面的方法只能让p元素在其父元素内居中,但是它内部的文字仍然不居中,比如当有四个文字时,调好了,居中,但是当只有一个文字时却又不能居中了。这里就要用到一个新的显示属性flex,是flexible的缩写,意思是灵活的布局。比如:



  具体解释可以参考原文以及这里

  定位方式

  默认的流式布局,块级元素从上往下排,一个接着一个的。如果想要让某个元素固定在某个位置,或者想要层叠元素怎么办。现在的Web越来越像客户端,有顶部菜单栏,有侧面菜单栏,有弹出式菜单,在层叠式菜单等等。这些常用且又好用的交互方式又是如何实现的呢? 这就要用到position属性了。position也就是给元素定位,确定其在文档(document)中的位置,默认值是static,也就是从上到下,一个挨着一个。


  relative,absolute以及fixed属性都要同时使用top/right/left/bottom来为元素指定位置,它们的含义是元素距离父元素上/右/左/下的距离。
  大小的度量单位

  元素的宽和高,以及字体大小的单位:


  对于这些单位的详细解释可以参考这篇文章这篇以及这篇

  用相对单位控制图片的大小

  不要用img元素的属性width和height,而是用CSS的width,height,因为img属性width和height仅能使用px作为单位,适配性要差一些,而CSS中的width和height是可以使用rem这种相对单位,适配性要好。



  横向显示一个列表

  把<li>的display属性设置为inline-block即可:



  控制元素的可见性

  有二种方式,一种是把display设置为none,这会让浏览器忽略此元素就好像它不存在一样,在渲染时;另一种方式就是通过visibility属性:



  注意兼容性

  对于一般的属性或者值最好要注意一下子它的兼容性,一般就是在前面加上-webkit-前缀,因为现在四分之三的浏览器都是Webkit系。

  工具

  欲想事,必先利其器。工具对于开发的重要性对于有经验的人不用多说,是事半功倍的。

  开发工具

  开发工具首选Webstorm。这是JetBrains的作品,IDEA IntellJ,PyCharm都是深受广大开发者喜欢的作品,也是我首选的IDE(NotePad和Vim偏执狂请走开),虽然我也喜欢Vim的简洁和高效,但是对于堆代码来说IDE是最高效的。跟IDEA和PyCharm不一样,WebStorm没有社区版本,这意味着试用了30天后就必须想办法了。。

  调试工具

  到今天,几个流行的浏览器都已经有了调度功能,Firefox的Firebugs,Opera的DragonFly,以及Chrome的devtools,Safari也内置了调试工具,至于IE,我还不知道。它们的功能基本上都是一致的:都能实时查看并修改元素,以及元素的CSS属性;能设置JavaScript的断点,单步调试;能查看Console,以及查看Network网络请求以及storage的使用情况。

  可能最受欢迎的还是Chrome的devTools,至少,我是喜欢它。它内置,使用方便,不用装其他的东西,不用什么开发者模式。

  详细的可以看官网介绍(自备梯子)。

  在调试的时候多使用使用感受一下子就好了。多用”审查元素“找到元素,然后在devtools中修改样式,得到合适的样式的值,然后再去修改源码,能大大提高效率。

  移动端的工具

  如今移动端的流量已经超越PC,而且势头还在增长。一大半的前端都是为移动端而生的。

  Chrome DevTools的移动设备模拟器Emulator

  打开DevTools后,可以在左上角看一一个PC和移动设备的小Icon,点了后就进入了移动设备模拟器,它有各种模拟器:iPhone5, 6, 6s, Nexus 5, 6,iPad, iPad Mini等等,还可以模拟网络条件,良心工具啊。

  可以到官方查看更多信息

  Chrome远端调试

  Chrome和Android都是Google的产品,所以难免结合紧密。对于4.3以上的设备,用Chrome可以像调试PC网页那样来调试设备上的网页。只要在PC的Chrome上打开chrome://inpsect,选择网页就可以了。详细信息也请参考官方网站

  参考


  应该经常访问的网站








欢迎光临 开发者俱乐部 (http://xodn.com/) Powered by Discuz! X3.2