前言：
今天姐妹们对“css盒子模型视频讲解”大致比较重视，朋友们都需要学习一些“css盒子模型视频讲解”的相关知识。那么小编也在网摘上收集了一些对于“css盒子模型视频讲解””的相关知识，希望你们能喜欢，朋友们一起来了解一下吧！3、盒子模型
本章目标
理解盒子模型及其构成会计算盒子模型尺寸会使用盒子模型的两种解析方式来布局网页会使用圆角属性给网页元素添加圆角效果会使用盒子阴影属性给网页元素添加阴影效果3.1、什么是盒子模型
讲解盒子模型及属性，并说明边框、外边框和内边框都是四个边，最后介绍盒子模型的立体结构.
在这里插入图片描述
在这里插入图片描述
3.2、边框
边框颜色 border-color
边框颜色设置方式与文本颜色对比讲解，都是使用十六进制强调同时设置4个边框颜色时，顺序为上右下左详细讲解分别上、下、左、右各边框颜色的不同设置方式，及属性值的顺序
在这里插入图片描述
边框粗细 border-width
thinmediumthick像素值 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; 边框样式 border-stylenonehiddendotteddashedsoliddouble 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; border简写 同时设置边框的颜色、粗细和样式
border:1px solid #3a6587;border: 1px dashed red;
在这里插入图片描述
3.3、内外边距
外边距 margin
margin-topmargin-rightmargin-bottommargin-left
margin-top: 1 pxmargin-right : 2 pxmargin-bottom : 2 pxmargin-left : 1 pxmargin :3px 5px 7px 4px;margin :3px 5px;margin :3px 5px 7px;margin :8px;
外边距的妙用：网页居中对齐
margin:0px auto;
网页居中对齐的必要条件
块元素固定宽度
在这里插入图片描述
内边距 padding
padding-leftpadding-rightpadding-toppadding-bottom
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;3.4、盒子型模尺寸
在这里插入图片描述
box-sizing
在这里插入图片描述
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>box-sizing</title><style>div{width: 100px;height: 100px;padding: 5px;margin: 10px;border: 1px solid #000000;box-sizing: border-box;/*box-sizing: content-box; /!* 默认值*!/*/}</style></head><body><div></div></body></html>3.5、圆角边框border-radius: 20px 10px 50px 30px;
四个属性值按顺时针排列
在这里插入图片描述
border-radius制作特殊图形：圆形
利用border-radius属性制作圆形的两个要点
元素的宽度和高度必须相同圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
div{width: 100px;height: 100px;border: 4px solid red;border-radius: 50%;}<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>border-radius制作圆形</title> <style> div{ width: 100px; height: 100px; border: 4px solid red; border-radius: 50%; } </style></head><body> <div></div></body></html>使用border-radius制作特殊图形：半圆形
利用border-radius属性制作半圆形的两个要点
制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值
在这里插入图片描述
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>border-radius制作半圆形</title> <style> div{ background: red; margin: 30px; } div:nth-of-type(1){ width: 100px; height: 50px; border-radius: 50px 50px 0 0; } div:nth-of-type(2){ width: 100px; height: 50px; border-radius:0 0 50px 50px; } div:nth-of-type(3){ width: 50px; height: 100px; border-radius:0 50px 50px 0; } div:nth-of-type(4){ width: 50px; height: 100px; border-radius: 50px 0 0 50px; } </style></head><body> <div></div> <div></div> <div></div> <div></div></body></html>使用border-radius制作特殊图形：扇形
利用border-radius属性制作扇形遵循“三同，一不同”原则
“三同”是元素宽度、高度、圆角半径相同“一不同”是圆角取值位置不同
在这里插入图片描述
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title>border-radius制作扇形</title> <style> div{ background: red; margin: 30px; } div:nth-of-type(1){ width: 50px; height: 50px; border-radius: 50px 0 0 0; } div:nth-of-type(2){ width: 50px; height: 50px; border-radius:0 50px 0 0; } div:nth-of-type(3){ width: 50px; height: 50px; border-radius:0 0 50px 0; } div:nth-of-type(4){ width: 50px; height: 50px; border-radius: 0 0 0 50px; } </style></head><body> <div></div> <div></div> <div></div> <div></div></body></html>3.6、盒子阴影在这里插入图片描述
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title>box-shadow的使用</title> <style> div{ width: 100px; height: 100px; border: 1px solid red; border-radius: 8px; margin: 20px; /*box-shadow: 20px 10px 10px #06c; /!*内阴影*!/*/ /*box-shadow: 0px 0px 20px #06c; /!*只设置模糊半径的阴影 *!/*/ box-shadow: inset 3px 3px 10px #06c; /*内阴影*/ } </style></head><body><div></div></body></html>3.7、小结在这里插入图片描述
标签： #css盒子模型视频讲解 #html圆角盒子 #html设置盒子圆角属性
