css 框模型

原创 2016年05月31日 17:52:10

(1)内边距padding:在边框和内容区之间,控制该区域最简单的属性是padding属性。padding属性定义元素边框和元素内容之间的空白区域。

padding属性接收长度值或百分比值,但不允许使用负值。

eg:h1{padding:10px}  /*h1元素的各边都有10像素的内边距*/

         h1{padding:10px 0.25em 2ex 20%}/*按照上右下左的顺序分别设置个变得内边距,各边均可以使用不同的单位或百分比值。*/

--->单边内边距属性:

padding-top:上

padding-right:右

padding-bottom:下

padding-left:左

--->如果出现h1{padding:20px 30px}/*表示这个表格的上下内边距是20px,左右内边距是30px*/

(2)边框border:是围绕元素内容和内边距的一条或多条线。border属性允许你规定元素边框的样式、宽度和颜色。

在一条语句中定义边框,

格式为:

border:宽度(width) 样式(style) 颜色(color)

border:1px solid red;

border-top-style / border-top-width / border-top-color

样式 border-style:

none 定义无边框。
hidden 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。

宽度 border-width:

描述
thin 定义细的边框。
medium 默认。定义中等的边框。
thick 定义粗的边框。
length 允许您自定义边框的宽度。
inherit 规定应该从父元素继承边框宽度。

颜色 border-color:

描述
color_name 规定颜色值为颜色名称的边框颜色(比如 red)。
hex_number 规定颜色值为十六进制值的边框颜色(比如 #ff0000)。
rgb_number 规定颜色值为 rgb 代码的边框颜色(比如 rgb(255,0,0))。
transparent 默认值。边框颜色为透明。
inherit 规定应该从父元素继承边框颜色。

(3)外边距 margin:

margiin-top / margin-right / margin-bottom / margin-left

描述
auto 浏览器计算外边距。
length 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的外边距。
inherit 规定应该从父元素继承外边距。

(4)外边距合并

外边距合并指的是,当两个垂直外边距相遇时,他们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Css样式详解--框模型

1.Css框模型基本概念; 在 CSS 中,元素的width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。 2....

CSS框模型中关于外边距(margin)折叠的情况

最近做了个项目,居然在一个小小的css问题上折腾了很久很是纠结——外边距折叠的问题。今天难得清闲,就把这个问题研究了一下,才发现大有学问,所以写篇博文整理一下,以便更加牢记!   外边距折叠,指...
  • newcnzz
  • newcnzz
  • 2012年09月18日 16:29
  • 1120

CSS 框模型和定位

Css盒子模型(Box Model)CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。 元素内容:element 宽度:width 高度:heigh...

CSS框模型笔记

框模型(Box Model)规定了元素框处理元素内容、内边距(padding),外边距(margin),边框(border)。边框位于外边距与内边距之间。框模型里所说的高度和宽度是指的是元素的高和宽,...

css框模型(padding,margin,border)

在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的尺寸...

css框模型

1.css框模型的概述 css框模型是由内边距,边框,外边距构成。如下图所示: 其中背景应用于内容,内边距和边框 我们可以通过设置页面内所有的元素来改变内,外边距。语法如下: *{ margi...

【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之二:控制框(Controlling Box)的形成

关于可视化模型的包含块,已经在“说说标准”系列中跟大家分享过了。 这次,跟大家分享另一个比较重要的概念,这个概念也许大家会很熟悉,因为经常挂在嘴边,这就是,块元素和块框,行内元素和行框,以及 d...

CSS框模型中外边距(margin)折叠图文详解

外边距折叠,指的是毗邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距。   触发条件:  毗邻,没有被非空内容、padding、border 或 clear 分隔开的m...

CSS框模型_内边距&边框&外边距

CSS框模型

理解CSS内联元素的框模型

这是原文地址 题外话:我觉得人们常说的盒子模型(box model),其实还不如翻译成框模型。 网页中,每一个元素都被渲染成一个矩形框,根据元素的dispaly属性,可以把这个矩形框分成块级框和内...
  • dhassa
  • dhassa
  • 2017年02月25日 15:46
  • 484
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css 框模型
举报原因:
原因补充:

(最多只允许输入30个字)