码迷,mamicode.com
首页 > 其他好文 > 详细

前端基础01-布局中所遵循的规范或是通例

时间:2016-07-24 00:25:20      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:

布局中所遵循的规范或是通例

  一般是遵循从上到下,从左到右的一个顺序。就从页面的稳定性上来说,优先考虑使用标准流,其次才考虑浮动或是定位。

遵循标准流的元素中,又以宽高最稳定,先把大的框架实例化出来,再进行细节的布局。能用padding的优先考虑padding(内边距),其实才考虑margin(外边距)。如果没有margin的边距合并或是共享的问题话,也是可以比较愉快的使用margin的。

我们网页的布局其实就像是在搭积木。将一块块的盒子组合在一块,使其呈现一个漂亮的页面效果。Html中任何一个元素都可以看成一个盒模型,都有宽高,内外边距。

行内元素的宽高不起作用,只有块级元素的宽高有效。行内元素的左右边距是起效果的。为了让行内元素也可能拥有宽高,可以有两种办法:

第一种是让行内元素转换成块级元素或是行内块元素,代码如下:

display: block,      display: inline-block

第二种是给行内元素添加浮动或是定位,浮动或是定位了的元素脱离标准流的控制了,就会自动的拥有宽高的效果。

用到的块级元素有: div, p, ul,li,dl,dt,dd,h2,h3

用到的行内元素有: span,a,del,

用到的行内块元素有:img,input,button 注意行内块元素想邻排列默认有几像素的间距,只能通过浮动解决这个问题。

前端基础01-布局中所遵循的规范或是通例

标签:

原文地址:http://www.cnblogs.com/The-End-Hero/p/5699793.html

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