码迷,mamicode.com
首页 > Web开发 > 详细

正式回归css

时间:2015-10-15 15:54:29      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:

前言:之前做web前端项目的时候才零星接触前端的知识,没有系统的整理出知识体系,所以在入行(web前端)两个月时,发觉css在页面布局起着至关重要的作用,良好的搭建页面布局,在后来写js也非常有帮助,因为考虑到页面的拓展性(产品需求设计需求)所以这就是重新回归的原因!

 

回归思考:

CSS  要点:

1.对齐

2.居中,垂直,水平

3.浮动,闭合浮动

4.细节(reset  这种重置行的要怎么更好的利用,然后更好的应用到自己的项目)

1.CSS inherit  继承父容器的特性 指大小,颜色,背景

其实尺寸用途并没有很大,在相对彧颜色,背景可能有自己的优势

where 

when

与height or width :100% 不同的是

connection

flexibility

 

2.text-align:justify

从张鑫旭的博客回来,对此CSS实现的文本对齐有一点启蒙,justify 本意是拉伸之间的空格使左右两端对齐,在文本中设置可以完成目标。

看demo(暂时放在jsffidle):https://jsfiddle.net/deqntw16/

如果是例如  列表项,或者内敛元素,最后一行没对齐(一行的话就是第一行)!

那怎么办?

剖析一下justify的原理:文本或列表超过一行,元素之间有间距,然后用我们的justify就可以了

所以按照这个原理,在最后添加如  inline-block( 宽度100%,高度0 )就可以实现了。

结构ok 了 但是 有的时候撑开非常难看!

所以目的在于使得最后一行 左对齐  

1.同样填充“一条线”的inline-block 然后平衡整行的列表项(即 放置跟上一行相同数量的列表项)从而造成假象

2.可以单独对最后一行做letter-spacing 的调整

=============================================================

正式回归css

标签:

原文地址:http://www.cnblogs.com/belongcai/p/4878343.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!