盒模型
盒子模型,框模型(box model)
-css将页面中所有元素都设置为了一个矩形的盒子
-将元素设置为矩形的盒子后,对页面的布局就变成将不同的盒子摆放到不同的位置
-每一个盒子都由一下几个部分组成
内容区(content)
内边距(padding)
边框(border)
外边框(margin)
内容区(content),元素中的所有的子元素和文本内容都在内容区中排列 内容区的大小由width 和height 两个属性来设置 width 设置内容区的宽度 height 社长内容区的高度
边框(border)边框属于盒子边缘,边框里边属于盒子内部,出了边框都是盒子的外部
要设置边框需要至少设置三个样式:
边框的大小会影响整个盒子的大小
边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-styl
01.盒子模型介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
/*
内容区(content),元素中的所有的子元素和文本内容都在内容区中排列
内容区的大小由width 和height 两个属性来设置
width 设置内容区的宽度
height 社长内容区的高度
*/
width: 200px;
height: 200px;
background-color: #bfa;
/*
边框(border)边框属于盒子边缘,边框里边属于盒子内部,出了边框都是盒子的外部
要设置边框需要至少设置三个样式:
边框的大小会影响整个盒子的大小
边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style
*/
border-width: 10px; (此时盒子的长为220)
border-color: red;
border-style: solid;
}
</style>
</head>
<body>
<!--
盒模型,盒子模型,框模型(box model)
-css将页面中所有元素都设置为了一个矩形的盒子
-将元素设置为矩形的盒子后,对页面的布局就变成将不同的盒子摆放到不同的位置
-每一个盒子都由一下几个部分组成
内容区(content)
内边距(padding)
边框(border)
外边框(margin)
-->
<div class="box1"></div>
</body>
</html>
02盒子模型边框
边框
边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-styleborder-width:10px;
默认值 :一般都是3个像素
border-width可以用来指定四个方向的边框的宽度
值情况
四个值:上 右 下 左
三个值:上 左右 下
两个值; 上下 左右
一个值:上下左右除了border-width还有一组 border-xxx-width
xxx可以表示 top right bottom left
单独用来指定某一个边的长度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/*
边框
边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style
border-width:10px;
默认值 :一般都是3个像素
border-width可以用来指定四个方向的边框的宽度
值情况
四个值:上 右 下 左
三个值:上 左右 下
两个值; 上下 左右
一个值:上下左右
除了border-width还有一组 border-xxx-width
xxx可以表示 top right bottom left
单独用来指定某一个边的长度
*/
/* border-width: 10px 20px 30px 40px;*/
/* border-top-width: 10px;
border-left-width: 30px;*/
/*color: red;*/
/*
border-color用来指定边框的颜色,同时可以分别指定四个边的边框
规则和border-wi一样
border-color也可以不写,如果不写则自动使用color的颜色值
*/
/* border-color: orange;*/
/* border-color: orange red yellow greenyellow;
border-color: orange;
多条同时在读最后一条, border-style情况一样(自己总结)
*/
/* border-color: orange;*/
/* 如果border-color和color都写了,最后执行border-color(无论二者顺序如何)*/
/*
border-style指定边框的样式
solid 表示实线
dotted 点状虚线
dashed 虚线
double 双线
border-style的默认值是none 表示没有边框
*/
/* border-style: solid dotted dashed double;*/
/* 自己总结
border-width: 10px;
border-color: red;
border-style: solid;
在这三个组合中
当没有border-width: 10px;时 默认值是三像素
当没有 border-color: red;时 默认值是黑色
当没有border-style: solid;是 默认是没有边框
*/
/*