文章目录
- 第六章 盒子模型
- 6.1 border边框
- 6.2 border-width粗细
- 6.3 border-style边框样式
- 6.4 border简写
- 6.5 margin外边距
- 6.6 padding内边距
- 6.7 盒子模型尺寸
- 6.8 box-sizing
- 6.9 border-radius圆角边框
- 6.9.1 制作圆形
- 6.9.2 半圆
- 6.9.3 四分之一圆
- 6.10 box-shadow盒子阴影
第六章 盒子模型
6.1 border边框
属性 | 说明 | 示例 |
---|---|---|
border-top-color | 上边框颜色 | border-top-color:#369; |
border-right-color | 右边框颜色 | border-right-color:#369; |
border-bottom-color | 下边框颜色 | border-bottom-color:#fae45b; |
border-left-color | 左边框颜色 | border-left-color:#efcd56; |
border-color | 四个边框为同一颜色 | border-color:#eeff34; |
上、下边框颜色:#369左、右边框颜色*:*#000 | border-color:#369 #000; | |
上边框颜色:#369左、右边框颜色:#000下边框颜色:#f00 | border-color:#369 #000 #f00; | |
上、右、下、左边框颜色:#369、#000、#f00、#00f | border-color:#369 #000 #f00 #00f; |
6.2 border-width粗细
thin/ medium /thick /像素值
div{border-top-width:5px; border-right-width:10px; border-bottom-width:8px; border-left-width:22px; border-width:5px ; border-width:20px 2px;border-width:5px 1px 6px;border-width:1px 3px 5px 2px;
}
6.3 border-style边框样式
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
div{border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-style:solid ; border-style:solid dotted;border-style:solid dotted dashed;border-style:solid dotted dashed double;
}
6.4 border简写
div{border:1px solid #3a6587;border: 1px dashed red;
}
6.5 margin外边距
网页居中的必要条件:
- 块元素
- 固定宽度
margin{0px,auto} /* 设置居中; */div{margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
margin :3px 5px 7px 4px;
margin :3px 5px;
margin :3px 5px 7px;
margin :8px;
}
6.6 padding内边距
div{
padding-left:10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom:8px;
padding:20px 5px 8px 10px ;
padding:10px 5px;
padding:30px 8px 10px ;
padding:10px;
}
6.7 盒子模型尺寸
盒子模型总尺寸=border+padding+margin+内容宽度
6.8 box-sizing
box-sizing:消除 padding
和border
边框把盒子撑大的效果,即盒子的大小不变,其设置的边距会往里缩。
div{box-sizing: border-box ;/* content-box:默认值,盒子的总尺度border-box:盒子的宽度或高度等于元素内容的宽度或高度inherit:元素继承父元素的盒子模型模式*/box-sizing:content-box | border-box | inherit;}
6.9 border-radius圆角边框
div{border-radius: 20px 10px 50px 30px;/*顺时针*/
}
6.9.1 制作圆形
border-radius属性制作圆形的两个要点:
-
元素的宽度和高度必须相同
-
圆角的半径为元素宽度的一半,或者直接设置圆角半径值为50%
div{width: 100px;height: 100px;border: 4px solid red;border-radius: 50%;}
-
另:
span
变圆:用padding
撑开span{padding: 0 6px;background-color: pink;color: white;border-radius: 50%;}
6.9.2 半圆
border-radius属性制作半圆形的两个要点
- 制作上半圆或下半圆时,元素的宽度是高度的2倍,而且圆角半径为元素的高度值
- 制作左半圆或右半圆时,元素的高度是宽度的2倍,而且圆角半径为元素的宽度值
/* 右半圆 */
.div_one{width: 50px;height: 100px;border-radius: 0 50px 50px 0;}
/* 左半圆 */
.div_two{width: 50px;height: 100px;border-radius:50px 0 0 50px ;
}
6.9.3 四分之一圆
利用border-radius属性制作扇形遵循“三同,一不同”原则
- 三同”是元素宽度、高度、圆角半径相同
- 一不同”是圆角取值位置不同
/* 左上四分之一 */
.div_six{width: 50px;height: 50px;border-radius: 50px 0 0 0;
}
/* 右下四分之一圆 */
.right_boo{width: 50px;height: 50px;border-radius: 0 0 50px 0 ;
}
6.10 box-shadow盒子阴影
box-shadow:inset x-offset y-offset blur-radius color;
inset:阴影类型内阴影/从外层的阴影(开始时)改变阴影内侧阴影s
x-offset :X轴位移,指定阴影水平位移量
blur-radius:半径
color:颜色
/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
inset:阴影类型内阴影/从外层的阴影(开始时)改变阴影内侧阴影s
x-offset :X轴位移,指定阴影水平位移量
blur-radius:半径
color:颜色
/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;