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

一、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,不过其包含块是视窗本身。

时间: 2024-12-26 12:05:59

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

css框模型、定位、浮动

一.CSS 框模型概述 1.CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框.外边框的方式. 2.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 提示:背景应用于由内容和内边距.边框组成的区域. 二.css内边框 1.元素的内边距在边框和内容区之间.控制该区域最简单的属性是 padding 属性. 2.CSS padding 属性定义元素边框与元素内

CSS框模型,浮动,定位以及其他属性

1.CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式 element : 元素. padding : 内边距,也有资料将其翻译为填充. border : 边框. margin : 外边距,也有资料将其翻译为空白或空白边. 围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的“空白”.设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. * { margin: 0; padding: 0;}

css框模型及position属性

css框模型:1.padding  内边距   数值.百分比    不接受负值 2.margin  外边距    数值.百分比    可以接受负值 例:  padding:50px(上)   50px(左右)    50px (下)  50px(上下) 50px (左右) 50px (上)  50px (右)50px (下)50px (左) display:inline  块级元素转为行内元素 block   行内元素转为块级元素  inline—block  行内块元素 display:non

CSS 框模型

1.CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.外边距和边框的方式. 如左下图表示元素内容.内边距.外边距和边框四者关系 2.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 在 CSS 中,width 和 height 指的是内容区域的宽度和高度.增加内边距.边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸. 假设框的每个边上有 10 个

CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)

CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 内边距.边框和外边距都是可选的,默认值是零.但是,许多元素将由用户代理样式表设置外边距和内边距.可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式.这可以分别进行,也可以使用通用选择

CSS 框模型概述

CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. CSS 框模型概述 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 提示:背景应用于由内容和内边距.边框组成的区域. 内边距.边框和外边距都是可选的,默认值是零.但是,许多元素将由用户代理样式表设置外边距和内边距.可以通过将元素的 margin 和 padding 设置为零来覆盖

CSS 框模型(Box Model)

CSS 框模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容. 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素. 下面的图片说明了框模型(Box Model): 不同部分的说明: Margin - 清除边框区域.Margin没有背景颜色,它是完全透明 Border - 边框周围的填充和内容.边框是受到盒子的背景颜

CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式

转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http://www.cnblogs.com/hh54188/archive/2010/12/28/1919078.html,此外,对于如何计算父元素的width和height,该文章也说明了~ CSS 框模型概述 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框

第十七天学习:CSS框模型

关键字:框模型 学习计划: CSS框模型简介 border特性 padding特性 margin特性 学习记录: CSS框模型(box model) 规定了元素框处理元素内容.内边距.边框和外边距的方式 可以使用CSS分别控制每个框的顶部.底部.左边和右边边框以及页边空白和内边框:并且可以为框的每一边指定不同的宽度和颜色 元素框的最内部分是实际内容,直接包含的内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后面的任何元素. 背景应用于由内容