关闭

css 框模型

标签: css框模型
144人阅读 评论(0) 收藏 举报
分类:

(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)外边距合并

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

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

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:71062次
    • 积分:2435
    • 等级:
    • 排名:第15249名
    • 原创:174篇
    • 转载:46篇
    • 译文:0篇
    • 评论:0条