盒子模型
盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
/*
width和height是内容区
元素中的所有子元素和文本内容都在内容区中排列
*/
width: 200px;
height: 200px;
background-color: yellow;
/*
边框 属于盒子的边缘
设置边框至少三个样式
边框宽度border-width
边框颜色border-color
边框样式border-style
边框的大小会影响整个盒子的大小
*/
border-width: 10px;
border-color: red;
border-style: solid;
}
</style>
</head>
<body>
<!-- CSS
css将页面中的所有元素都设置为了矩形的盒子
盒子的组成
内容区content
内边距padding
外边距margin
边框border
-->
<div class="box1"></div>
</body>
</html>
盒子模型-边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: rgb(0, 255, 247);
/* 要设置边框三个必须写，但是border-width有默认值，不写也有 */
/*
border-width可以指定四个方向 上右下左 顺时针
三个值：上 左右 下
两个值：上下 左右
一个：上下左右
除了border-width
还有border-xxx-width left top right top
*/
border-width: 10px,20px;
border-color: rgb(119, 255, 0);
border-style: solid;
/*
border-color也可以指定四个方向的颜色 上右下左 顺时针
border-color如果不写默认使用color值
*/
/*
border-solid 同样可以四个值
solid实线
dotted点状虚线
dashed虚线
double双线
*/
/* border简洁模式 没有先后顺序 还有border-xxx*/
border:10px orange solid;
border-right: none;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html> 
盒子模型-内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: rgb(0, 255, 247);
border:20px rgb(21, 255, 0) solid;
/*
一个盒子的可见框的大小由内容区+内边距+边框
内边距padding
四个方向
padding-top
padding-bottom
padding-bottom
padding-right
*/
padding: 100px;
padding:100px 20px;
padding: 100px 80px 20px;
padding: 100px 20px 60px 50px;
}
.inner{
width: 100%;
height: 100%;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div class="box1">
<div class="inner">
</div></div>
</body>
</html>
盒子模型-外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: rgb(0, 255, 247);
border:20px rgb(21, 255, 0) solid;
/*
外边距不会影响盒子可见框的大小
但是会影响盒子的位置
同样有四个方向的外边距
设置正值往相反方向走
元素在页面中是自左向右排列，如果设置左和上会移动自己
如果移动其他的则会移动别人margin-bottom则下面的元素会向下移动
margin也可以设置负值
默认情况下设置margin-right不会有所改变
*/
margin-top: 100px;
margin-left: 100px;
margin:100px;
}
.inner{
width: 100%;
height: 100%;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div class="box1">
<div class="inner">
</div></div>
</body>
</html>盒子模型-水平方向布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer{
width: 800px;
height: 200px;
border: 10px greenyellow solid;
}
.inner{
width: 200px;
height: 200px;
background-color: aqua;
/*
元素水平方向的布局
横向布局，元素在其父元素的位置
margin-left
border-left
padding-left
width
padding-right
border-right
margin-left
一个元素在其父元素中，水平布局必须满足一下等式
以上七项相加=父元素的宽度
如果等式不成立，则叫做过度约束
浏览器会自动调整margin-right使成立
七个值中有三个可以设置为auto情况
width
margin-left
margin-right
如果设置为auto 则会自动调整这些auto的值，使等式成立
如果width=auto
则width会被调整为800 如果width不设置，他的默认值就是auto
如果将一个宽度和width都设置为auto，则宽度会调整为最大
如果将三个值都设置为auto，则外边距都是0，宽度最大
如果两个边距设置为auto则平分（常用来居中效果）
*/
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
如果width设置为1000，超过了800，则会把margin-right=-200使等式满足
盒子模型-垂直方向的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer{
height: 100px;
background-color: greenyellow;
overflow: auto;
}
/*
子元素超过父元素，则子元素会从父元素中溢出
使用overflow属性来设置父元素
可选值
visible:直接溢出并显示
hidder:溢出部分直接裁剪
scroll：生成水平方向和垂直方向的滚动条
auto：根据需求自动生成滚动条
overflow-x:
overflow-y:
*/
.inner{
width: 100px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
盒模型-外边距的折叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1,.box2{
width: 200px;
height: 200px;
}
.box1{
margin-top: 100px;
background-color: greenyellow;
margin-bottom: 100px;
}
/*
垂直相邻外边距的重叠（只有垂直方向会）
两种：兄弟元素与父子元素
兄弟元素
两者都是正直，取最大值
一正一付则取两者的和
都是负的则取绝对值较大的
父子元素
子元素的相邻外边距会传递给父元素
父子外边距会影响布局
border-top: 2px red solid;加上这一条则不相邻
*/
.box2{
margin-top: 100px;
background-color: blueviolet;
}
.box3{
width: 200px;
height: 200px;
background-color: violet;
border-top: 2px red solid;
}
.box4{
width: 100px;
height: 100px;
background-color: yellowgreen;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3">
<div class="box4">
</div>
</div>
</body>
</html>
父子元素后面会有更好的解决方法
行内元素的盒模型
浙公网安备 33010602011771号