盒子模型 div+css3
边框 border
border:1px solid red;
border-color:边框颜色 上右下左四个边
border-top-color:上边框颜色
border-right-color:右边框颜色
border-bottom-color:下边框颜色
border-left-color:左边框颜色
border-边框粗细 上右下左四个边 thin medium thick 可以是像素
border-top-width
border-right-width
border-bottom-width
border-left-width
border-5px 10px ; 上下为5px 左右为10px
border-5px 10px 20px ; 上为5px 下为20px 左右为10px
border-style:边框样式
dashed 常用
solid 常用
none
hidden
dotted
double
简写：
border:1px solid red; 规范写法
粗细 样式 颜色！
margin:外边距
margin-top
margin-right
margin-bottom
margin-left
margin:5px 10px;上下外边距为5px 左右外边距为10px
margin:0px auto; 网页中的盒子居中显示！
前提：
01.必须是块元素
02.固定宽度
padding:内边距
padding-top
padding-right
padding-bottom
padding-left
padding:5px 10px;上下内边距为5px 左右内边距为10px
盒子模型总尺寸=内容宽度+padding+border+margin
box-sizing:设置盒子模型的大小规则
content-box:盒子的总尺寸
border-box:盒子的宽度或者高度 等于 内容的宽度或者高度
inherit:继承父盒子
圆角属性
border-radius:左上 右上 右下 左下
盒子阴影
box-shadow:inset 10px 10px 1px pink;
inset:阴影类型 内 外
x轴
y轴
阴影半径
阴影颜色
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>边框border</title> <!-- border的常用属性： 01. 设置边框的颜色 border-color 02. 设置边框的粗细 border-width 03. 设置边框的样式 border-style --> <style type="text/css"> /*设置盒子的宽高*/ div{ height: 50px; width: 50px; /* 设置盒子的上边框 border-top-color: red; border-top- 1px; border-top-style: dashed; */ /*同时设置四个边框 border-color: red; border- 2px; border-style: dashed; */ /*简写方式 虽然没有顺序 但是我们推荐使用 先 粗细 再 样式 最后 颜色！*/ border: 1px solid red; } </style> </head> <body> <div></div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>外边距margin</title> <style type="text/css"> *{ /*去掉网页中所有元素的内外边距*/ margin: 0px; padding: 0px; } div{ /*设置盒子的宽高*/ height: 150px; width: 150px; /*设置盒子的边框*/ border: 1px solid red; /*设置外边距 元素以左上角为准 margin-top: 50px; margin-left: 50px; margin-right: 50px; margin-bottom: 50px;*/ /*设置上下20px 左右50px 设置边距的时候 顺序 是 上右下左！ margin: 20px 50px;*/ margin: 20px; } </style> </head> <body> <div><img src="../images/b.png" alt="这是一个图片"></div> <div><img src="../images/b.png" alt="这是一个图片"></div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>内边距padding</title> <style type="text/css"> *{ /*去掉网页中所有元素的内外边距*/ margin: 0px; padding: 0px; } /*设置大盒子*/ #bigBox{ /*设置盒子的宽高*/ height: 200px; width: 200px; /*设置盒子的边框*/ border: 1px solid red; /*padding-left:5px ;设置小盒子距离大盒子的左内边距*/ } /*设置小盒子*/ #image{ /*设置盒子的宽高*/ height: 150px; width: 150px; /*设置盒子的边框*/ border: 1px dashed pink; margin-left: 5px; } </style> </head> <body> <div id="bigBox"> <!--大盒子--> <div id="image"> <!--小盒子--> <img src="../images/b.png" alt="这是一个图片"><!--内容--> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>网页居中</title> <!-- 网页居中的必要条件： 01.必须是一个块元素 02.必须设置固定宽度 --> <style type="text/css"> *{ /*去掉网页中所有元素的内外边距*/ margin: 0px; padding: 0px; } /*设置大盒子*/ div{ height: 200px; /*设置盒子的宽高*/ width: 200px; /*设置盒子的边框*/ border: 1px solid red; /*通过外边距设置 居中*/ margin:0px auto; } </style> </head> <body> <div> <!--大盒子--> </div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>盒子的尺寸boxsizing</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #father{/* 大盒子*/ width: 100px; height: 100px; border: 1px solid red; box-sizing: border-box; } #son{/* 小盒子*/ width: 40px; height: 40px; border: 1px solid yellowgreen; /* box-sizing: content-box;默认值。显示盒子总尺寸*/ /* box-sizing: border-box; 盒子的高度和宽度就是内容的高度和宽度*/ /*如果大盒子 设置了 盒子的尺寸 我们小盒子 可以适应大盒子尺寸*/ box-sizing: inherit; } </style> </head> <body> <div id="father"> <div id="son"></div> </div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>圆角属性</title> <style type="text/css"> div{ height: 50px; width: 50px; border: 1px solid red; border-radius: 5px 20px;/* 左上 右下 5px 右上 左下 20px*/ /*设置圆角属性 简写 默认是 左上 右上 右下 左下 顺时针方向 border-radius: 5px;*/ } </style> </head> <body> <div></div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>设置半圆</title> <style type="text/css"> div{ background: pink; margin: 20px; } 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:50px 0 0 50px ;/* 左上和左下*/ } div:nth-of-type(4){ width: 50px; height: 100px; border-radius: 0 50px 50px 0 ;/* 右上和右下*/ } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>设置圆形和扇形</title> <style type="text/css"> div{ background: pink; margin: 20px; } /*设置圆形*/ div:nth-of-type(1){ width: 50px; height: 50px; border-radius: 50px; } div:nth-of-type(2){ width: 50px; height: 50px; border-radius: 50px 0 0 0;/* 左上*/ } div:nth-of-type(3){ width: 50px; height: 50px; border-radius: 0 50px 0 0;/* 右上*/ } div:nth-of-type(4){ width: 50px; height: 50px; border-radius: 0 0 50px 0;/* 右下*/ } div:nth-of-type(5){ width: 50px; height: 50px; border-radius: 0 0 0 50px;/* 左下*/ } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>盒子阴影</title> <style type="text/css"> div{ height: 50px; width: 50px; border: 1px solid red;/* box-shadow: 10px 10px 1px pink; 外阴影*/ box-shadow:inset 10px 10px 10px pink; /*内阴影*/ } </style> </head> <body> <div></div> </body> </html>