(6)CSS框模型之一
来源:互联网 发布:软件选型评分表 编辑:程序博客网 时间:2024/06/01 08:10
CSS处理每一个元素的方式就好像元素位于一个框中一样。
网页上的所有元素都可以加上边框,对于块级别元素和内联元素,其边框的显示有所区别:块级别元素总是新的一行开始,故块级别元素的框会占据浏览器(或父元素)全部宽度;而内联元素的框并不占据正行。
(一)边框属性
1. border-color 属性用于控制边框颜色。该属性的值可以是颜色名,十六进制颜色编码或者红绿蓝组分的值
可以使用border-bottom-color,border-right-color,border-top-color和border-left-color单独改变位于底部、右部、顶部或左边的边框的颜色属性。
2. border-style属性用于控制边框线的样式。默认值为none,表示不显示边框
可以使用border-bottom-style,border-right-style,border-top-style和border-left-style单独改变位于底部、右部、顶部或左边的边框的线条样式属性。
3. border-width属性用于设置边框宽度。
通常使用像素值作为属性值,也可以使用(thin,medium和thick),但效果依赖于浏览器。
可以使用border-bottom-width,border-right-width,border-top-width和border-left-width单独改变位于底部、右部、顶部或左边的边框的宽度属性。
4. border属性可以在一个属性中同时指定边框线的颜色、样式和宽度。
例如:border: 4px solid red;
可以使用border-bottom,border-right,border-top和border-left单独改变位于底部、右部、顶部或左边的边框的样式。
测试效果图如下:
测试CSS代码如下:
.c1 { border: red solid thin;}.c2 { border: #ff0000 dashed medium; }.c3 { border: rgb(255,0,0) inset thick; }.c4 { border: rgb(255,0,0) outset 4px; }测试HTML代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><html><head><meta charset="utf-8" /> <base href="/testsmarty/templates/"></base><title>框模型</title><link rel="stylesheet" type="text/css" href="text1.css"></head><body><p class="c1">The CSS WG published two Candidate Recommendations: CSS Writing Modes Level 3 and CSS Shapes Module Level 1; an updated Working Draft: CSS Lists and Counters Module Level 3; and an update to a Recommendation (editorial changes only): CSS Namespaces Module Level 3.</p><p class="c2">The CSS WG published two Candidate Recommendations: CSS Writing Modes Level 3 and CSS Shapes Module Level 1; an updated Working Draft: CSS Lists and Counters Module Level 3; and an update to a Recommendation (editorial changes only): CSS Namespaces Module Level 3.</p><p class="c3">The CSS WG published two Candidate Recommendations: CSS Writing Modes Level 3 and CSS Shapes Module Level 1; an updated Working Draft: CSS Lists and Counters Module Level 3; and an update to a Recommendation (editorial changes only): CSS Namespaces Module Level 3.</p><p class="c4">The CSS WG published two Candidate Recommendations: CSS Writing Modes Level 3 and CSS Shapes Module Level 1; an updated Working Draft: CSS Lists and Counters Module Level 3; and an update to a Recommendation (editorial changes only): CSS Namespaces Module Level 3.</p></body></html>
(二)padding属性指定元素内容与边框的空间量。
通常情况下该属性的值以像素大小指定(也可以使用其他长度单位、百分比或者inherit指定)。默认情况下元素的内边距不会继承(例如body元素设置了padding属性,body内部元素也不会有内边距),只有在某些元素的padding属性值使用了inherit时,该元素的内边距使用父元素的内边距值。
可以使用padding-bottom、padding-top、padding-left和padding-right分别指定框各个内侧的内边距。
效果图如下:
css代码如下:
.c1 {border: red solid thin;padding-top: 25px;padding-bottom: 50px;padding-left: 5px;padding-right: 20px;}HTML代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><html><head><meta charset="utf-8" /> <base href="/testsmarty/templates/"></base><title>框模型之padding</title><link rel="stylesheet" type="text/css" href="text2.css"></head><body><p class="c1">The CSS WG published two Candidate Recommendations: CSS Writing Modes Level 3 and CSS Shapes Module Level 1; an updated Working Draft: CSS Lists and Counters Module Level 3; and an update to a Recommendation (editorial changes only): CSS Namespaces Module Level 3.</p></body></html>
(三)margin属性用于控制框之间的距离
它的值可以是长度、百分比或inherit。与padding属性一样,margin属性的值不会被子元素继承,除非子元素的margin属性使用了inherit值。需要注意的是,当一个框与另一个框相邻时,两个框边距只会是较大的那一个值。
可以使用margin-bottom、margin-top、margin-left和margin-right分别制定框各个外侧的页边距。
效果图如下:
CSS代码如下:
p {border: red solid thin;padding: 10px;}.c1 { margin: 20px; }.c2 { margin: 40px; }.c3 { margin: 80px; }
HTML代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><html><head><meta charset="utf-8" /> <base href="/testsmarty/templates/"></base><title>框模型之padding</title><link rel="stylesheet" type="text/css" href="text3.css"></head><body><p class="c1">The CSS WG published two Candidate Recommendations: CSS Writing Modes Level 3 and CSS Shapes Module Level 1; an updated Working Draft: CSS Lists and Counters Module Level 3; and an update to a Recommendation (editorial changes only): CSS Namespaces Module Level 3.</p><p class="c2">The CSS WG published two Candidate Recommendations: CSS Writing Modes Level 3 and CSS Shapes Module Level 1; an updated Working Draft: CSS Lists and Counters Module Level 3; and an update to a Recommendation (editorial changes only): CSS Namespaces Module Level 3.</p><p class="c3">The CSS WG published two Candidate Recommendations: CSS Writing Modes Level 3 and CSS Shapes Module Level 1; an updated Working Draft: CSS Lists and Counters Module Level 3; and an update to a Recommendation (editorial changes only): CSS Namespaces Module Level 3.</p></body></html>
- (6)CSS框模型之一
- CSS 框模型(八)
- CSS学习笔记(二)--CSS框模型/CSS定位
- CSS 框模型 盒子模型
- CSS框模型(盒子模型)padding与border属性
- (7)CSS框模型之二
- css框模型(padding,margin,border)
- css知识点(框模型)-20141022
- CSS 框模型(Box Model)
- CSS基础(三)基础框模型
- CSS 框模型
- CSS框模型
- CSS 框模型解析
- CSS 框模型概述
- CSS 框模型概述
- CSS 的框模型
- CSS 框模型概述
- css框模型概述
- C++中* (星号) 与取址 介绍
- Disruptor一个开源的高效内存无锁队列
- mysql 日志设置
- pentaho使用步骤简介
- 符号表的搜索,当一个槽中有数据时,使用下面的槽,以此类推
- (6)CSS框模型之一
- 8 数码问题
- 阿里巴巴 面试经历
- cmap用法,很详细(转载)
- centos rsync安装配置使用
- 回调函数的概念及其使用 .
- iPhone/iOS UIView contentMode transform:变形
- HTTP WARNING: HTTP/1.1 403 Forbidden (Nagios monitor)
- 树