第六章

第六章

盒子模型

1.边框（border）

1.边框颜色
border-color

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UzS7ZJi2-1610870351366)(D:\笔记\捕获.PNG)]

2.边框粗细
border-width 
属性值：thin              细边框
       medium            中等边框（默认）
       thick             粗边框
       像素值             
例：border-width:15px;
    border-width:thin;
    border-width:thin medium thick 10px;      上、右、下、左（顺时针顺序）
    

3.边框样式
border-style
属性值：none               无边框
       hidden             与“none”类似，用于表时，解决边框冲突 
       dotted             点状边框，在大部分浏览器中显示为实线
       dashed             虚线，在大多数浏览器中显示为实线
       solid              实线
       double             双线，双线的宽度等于 border-width 的值
可以有1~4个值
border-style:dotted solid double dashed;      上、右、下、左（顺时针顺序）
border-style:dotted solid double;             上、左右、下
border-style:dotted solid;                    上下、左右
border-style:dotted;                          上下左右

4.border的简写
border-width
border-style
border-color
例：border:5px solid red;

5.圆角边框
border-radius: 20px  10px  50px  30px;
注：四个属性按顺时针排序（从左上、右上、右下、左下）；
    有一个值为负数时，全部失去弧度，变成正方形

制作圆形
div{
     width: 100px;
     height: 100px;
     border: 4px solid red;
     border-radius: 50%;
   }
注：元素的宽度和高度必须相同；
    圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

制作半圆
注：制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值；
    制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

制作扇形
“三同，一不同”：
    “三同”是元素宽度、高度、圆角半径相同；
    “一不同”是圆角取值位置不同

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kzBNke3T-1610870351367)(D:\笔记\圆角边框.PNG)]

2.外边距（margin）

margin-top
margin-bottom
margin-left
margin-right
margin

例：margin:25px 50px 75px 100px;              上、右、下、左（顺时针顺序）
   margin:25px 50px 75px;                     上、左右、下
   margin:25px 50px;                          上下、左右
   margin:25px;                               上下左右


特殊用法：寻找所有margin，适用网页居中对齐样式（*用于寻找所有margin）
     *{margin:0px  auto;}
注：该语句作用于全局，优先级较低，可被后续定位更精确的语句覆盖效果（使用时可先覆盖全局再局部修改）

3.内边距（padding）

padding-top
padding-bottom
padding-left 
padding-right
padding

简写顺序同上

4.盒子模型的尺寸

盒子模型总尺寸 = margin + border + padding + width

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SSGf9Gm7-1610870351369)(D:\笔记\尺寸.PNG)]

box-sizing
语法：box-sizing：content-box  |  border-box  |  inherit;
注：“content-box”，默认值，盒子的总尺度；
    “border-box”，盒子的宽度或高度，等于元素内容的宽度或高度；
    “inherit”，元素继承父元素的盒子模型模式

5.盒子阴影

语法：box-shadow:inset  x-offset  y-offset  blur-radius  color;
注：“inset”，阴影类型内阴影
    “x-offset”，X轴位移，指定阴影水平位移量；（左负右正）
    “y-offset”，y轴位移，指定阴影垂直位移量；（上负下正）
    “blur-radius”，阴影模糊半径阴影向外模糊的模糊范围；
    “color”，阴影颜色，定义绘制阴影时所使用的颜色