文章目录
- 第六章 盒子模型
- 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;