原创力文档02CSS边框边距、浮动定位综述
CSS边框与边距
知识点：
? CSS中边框的使用
? CSS中边距的使用
1. CSS中边框的使用
? 边框属性：
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允许你规定元素边框的样式、宽度和颜色。
常见的边框属性及说明：
属性名称 属性值 说明
border-color 十六进制 可依次设置上右下左边框颜色
英文名称 border-color:red(四边均为红色)
三原色 border-color:red green
(上下为红色，左右为绿色)
border-color:red green blue
(上为红色、左右为绿色、下为蓝色)
border-color:red green blue yellow
(上右下左分别为红绿蓝黄)
border-style none 不显示边线
dotted 点线
dashed 虚线
solid 实线
double 双线
border-width 边框宽度 border-width:0.2cm 0.3cm 0.4cm 0.5cm;
border-width:1 2 3 4;（上右下左）
eg：
css代码：
div {
width: 100px;
height: 100px;
background: darksalmon;
border-color: red yellow blue black;（上右下左）
border-style: solid;
border-width: 1px 3px 5px 10px; （上右下左）
}
html代码：
div/div
效果：
? 边框的简化设置：
格式:
边框宽度 - 边框样式 - 边框颜色
border: 5px solid red
eg：
css代码：
div {
width: 100px;
height: 100px;
background: darksalmon;
border: 5px solid red;
}
html代码：
div/div
效果：
2. CSS中边距的使用
css盒子模型：所有HTML元素可以看作盒子。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。如下图所示：
? 外边距margin属性：
属性名称 属性值 说明
margin-bottom auto 自动调整边距
长度/百分比 设置下边距
margin-left auto 自动调整边距
长度/百分比 设置左边距
margin-right auto 自动调整边距
长度/百分比 设置右边距
margin-top auto 自动调整边距
长度/百分比 设置上端边距
eg：
css代码：
div {
width: 100px;
height: 100px;
background: darksalmon;
border: 5px solid red;
margin-top: 50px;
margin-left: 20px;
}
html代码：
div/div
效果：
? margin属性简写方案：
格式:
margin: 20px 40px （上下，左右 ）
margin: 20px 60px 100px（上，左右，下）
margin: 10px 20px 30px 40px（上，右，下，左）
? 内边距padding属性（内填充）：
属性名称 属性值 说明
padding-bottom 长度/百分比 元素下端内边距
padding-left 长度/百分比 元素左端内边距
padding-right 长度/百分比 元
文档评论（0）