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

关于CSS框模型及定位的概念

时间:2016-01-30 22:35:55      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:

一、CSS框模型(box model)包含了边框(boder)、外边距(margin)、内边距(padding)、宽(width)、高(height)、元素(element)。背景应用于由内容、边框、内边距组成的区域。单边内边距的属性有四个,分别设有上、右、下、左内边距:padding —top   padding—right  padding—bottom  padding—left. 内边距数值可以是阿拉伯数字(单位厘米),也可以是百分比数值。边框的样式在boder—style中设置,可以定义单边样式以及四边同在一个声明中,boder—top—style  boder—right—style  boder—bottom—style  boder—left—style.边框的颜色是在boder—color中,它一次最多可以接受4个颜色值,可以使用任何类型的颜色,例如可以是命名颜色,也可以是十六进制或RGB值,透明边框需要引进transparent属性。margin属性可以接受任何长度单位,可以是像素、英寸、毫米或em,在margin中设置的百分数是相对于父元素而言的,同理,margin中的四个边距和padding的一样。外边距合并指的是当两个垂直边距相遇时,它们将形成一个外边距,合并后的外边距等于两个发生合并的两个外边距的高度较大者。

二、CSS定位(positioning)允许对元素进行定位。CSS中的一个重要概念就是“一切皆为框”,意味着这些元素都显示为内容,div,p,h1等常被成为块级元素,而span,strong等被称为行级元素,可以使用display属性改变生成框的类型。CSS的定位机制有三种:普通流、浮动和绝对定位。通过position属性,选择4种不同类型的定位,这将影响元素框的生成。static:元素框正常生成,块级元素生成矩形框,置于父元素中。relative:元素偏移某个距离,元素保持未定型前的形状,它原本所占位置还存在。absolute:元素框从文档中完全删除,元素原先的位置不存在。fixed:类似于absolute,不过其包含块是视窗本身。

关于CSS框模型及定位的概念

标签:

原文地址:http://www.cnblogs.com/123456can/p/5172043.html

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