CSS框模型_内边距&边框&外边距
来源:互联网 发布:office替代软件 编辑:程序博客网 时间:2024/05/29 11:47
CSS框模型
- 以元素框(border)为界,元素框内包含内边距(padding)、元素内容(element)。元素框外为外边距(margin)。
- 外边距默认是透明的,因此不会遮挡其后的任何元素。
- 背景应用于由内容和内边距、边框组成的区域,即:不包含外边距。
- 内边距、边框和外边距都是可选的,默认值是零。
- 根据W3C的规范,元素内容占据的空间是由width、height属性设置的,而内容周围的padding、border、margin值是另外计算的。
内边距 [padding]
- padding属性接受长度值或百分比值,不允许使用负值。百分数值是相对于其父元素的width计算的。
- 内边距还包含各个单独的设置:
padding-top
,padding-right
,padding-bottom
,padding-left
。 - 您还可以按照上、右、下、左的顺序分别设置各边的内边距,如:
h1 {padding: 10px 0.25em 2ex 20%;}
- 如果指定了3个值,则数值依次表示上内边距、左右内边距、下内边距,如:
h1 {padding: 10px 5px 15px;}
表示上内边距为10px,左右内边距为5px,下内边距为15px。
- 如果指定了2个值,则数值依次表示上下内边距、左右内边距,如:
td {padding: 0.5cm 2.5cm}
表示单元格的上和下内边距为0.5cm,左和右内边距为2.5cm。
- 如果指定了1个值,则上下左右内边距一致,如:
td {padding: 10px}
表示单元格的上下左右内边距都是10px。
- 总结如下:
- 如果缺少右值,则使用上值。
- 如果缺少下值,则使用上值。
- 如果缺少左值,则使用右值。
边框 [border]
- 每个边框有3个方面:样式、宽度、颜色。
- 有了样式后,才能有宽度、颜色。
p { border: solid medium rgb(250,0,255)}
边框样式 [border-style]
- h、p等标签的默认边框样式为none,所以不显示,如果要显示,需要显式声明。
- 边框样式包含单独设置:
border-top-style
,border-right-style
,border-bottom-style
,border-left-style
。
p.soliddouble { border-style: solid double } <!-- 上下border为solid, 左右border为double -->p.three { border-style: solid double groove } <!-- 上border为solid,左右border为double,下border为groove -->
边框宽度 [border-width]
- 注意:只有边框存在,才可设置边框宽度
- 边框宽度包含单独设置:
border-top-width
,border-right-width
,border-bottom-width
,border-left-width
。
p.one { border-style: solid; <!-- Note: 声明一个样式后再设置宽度!!! --> border-width: 5px 10px 1px medium;}p.two{ border-style: solid; border-width: 5px 10px;}
边框颜色 [border-color]
- 注意:只有边框存在,才可设置边框颜色
- 边框颜色包含单独设置:
border-top-color
,border-right-color
,border-bottom-color
,border-left-color
。 - 边框颜色支持设置为透明(transparent),这种透明边框相当于内边距,因为元素的背景会延伸到边框区域(如果有可见背景的话)。
p.one{ border-style: solid; border-color: #0000ff}p.two{ border-style: solid; border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)}
外边距 [margin]
- 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
- 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。
- 浏览器对许多元素提供了预定的样式,外边距也不例外。如:外边距会在每个段落元素的上面和下面生成“空行”。
- 外边距包含单独设置:
margin-top
,margin-right
,margin-bottom
,margin-left
。
p.margin { margin: 2cm 4cm 3cm 4cm }
外边距合并
- 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。
- 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
- 一般发生下面3种情况的合并:
- 1.当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。
- 2.一个元素包含在另一个元素中时(并且没有内边距或边框把外边距分隔开),它们的上或下外边距会发生合并。
- 3.假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距会发生合并。
这就是一系列的段落元素占用空间非常小的原因,因为它们的所有外边距都合并到一起,形成了一个小的外边距。
更多请参考:W3School
0 0
- CSS框模型_内边距&边框&外边距
- div+css之 css框模型 内边距 边框 外边距 外边距合并
- css 内边距 外边距 边框
- css的字体设置,css的盒子模型,css的盒子模型的边框,盒子模型的内边距属性,盒子模型的外边距属性,
- CSS 5.3 框模型-内边距和外边距
- CSS学习笔记8-内边距、边框和外边距
- CSS学习笔记:内边距、边框和外边距
- 盒模型、内外边距和边框
- CSS 属性 设置外边距 边框属性
- CSS-外边框与内边框属性
- 内边距、边框和外边距
- 边框 内边距及外边距
- CSS-内边距/外边距
- CSS框模型中外边距(margin)折叠图文详解
- CSS 基础(004_外边距)
- html 盒子模型基础(单位,边框,内边距,外边距)(一)
- CSS(三)_表格,盒子模型,边框
- 内边距、边框和外边距的关系
- [C++]单例模式应用
- Codevs 1024 进制转换
- CLOCKS_PER_SEC 在ndk里的值是1000000不是1000
- 聊天机器人中的深度学习,部分1-导论Deep Learning for Chatbots, Part 1 – Introduction
- java 动态加载
- CSS框模型_内边距&边框&外边距
- 用CocoaPods做iOS程序的依赖管理
- fiddler无法监测eclipse,httpclient提交表单中文乱码
- 关于Download failed. There are no HTTP transports available which can complete the requested request
- map key value的排序问题
- 安装jdk/jre:
- 基于深层神经网络的命名实体识别技术
- int float 定点 浮点他们之间的关系
- POJ_2479