盒子模型
前端开发
1.PC端页面
2.移动端页面
3.移动端app
4.微信小程序
5.电视猫、云视厅、奇异果
6.ATM操作界面
盒子模型
把页面内的所有div当作是一个矩形的盒子
这个盒子将会包含:外边距(margin)、内边距(padding)、边框(border)、内容(content)
margin 外边距的使用方法
<!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>
/* 选中页面上所有类名为 txt 的元素 */
.txt {
/* 外边距:一个元素与另一个元素的距离 */
/* margin:上 右 下 左; */
/* 单位是px 像素 */
margin: 0px 20px 0px 0px;
margin: 100px 20px 0px 100px;
}
.top {
width: 100px;
height: 100px;
background-color: pink;
/* 下外边距 */
margin: 0px 0px 100px 0px;
}
/* 外边距重叠 */
.box {
width: 300px;
height: 300px;
background-color: skyblue;
/* 外边距 */
/* margin:上 右 下 左; */
margin: 100px 20px 0px 100px;
}
/* 根据方向写属性 */
.box2 {
width: 300px;
height: 300px;
background-color: pink;
/* top right bottom left */
margin-top: 100px;
margin-right: 100px;
margin-bottom: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<!-- <span class="txt">这是一个行内元素</span>
<span class="txt">暑期游新玩法折射消费新趋势</span> -->
<div class="top"></div>
<div class="box"></div>
<div class="box2"></div>
<span>1234567890-</span>
</body>
</html>
padding 内边距的使用方法
<!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>
/* 内边距:将内容与元素边缘的距离 增加 从而把盒元素撑大
那么这个元素在网页里面占用的大小就会改变
*/
/* padding:上 右 下 左; */
/* padding:上 左右 下 */
/* padding:上下 左右 */
/* padding:上下左右 */
.txt {
color: orange;
background-color: skyblue;
padding: 10px 10px 10px 10px;
padding: 20px 10px 30px;
padding: 20px 10px;
}
.box {
width: 100px;
height: 100px;
background-color: purple;
color: springgreen;
/* 方向 */
padding-left: 100px;
padding-top: 100px;
padding-bottom: 100px;
padding-right: 100px;
}
.fahter {
width: 300px;
height: 50px;
}
</style>
</head>
<body>
<div class="fahter">
<span class="txt">东京大楼爆炸瞬间 有人高喊快逃</span>
</div>
<div class="box">
东京大楼爆炸瞬间 有人高喊快逃
</div>
</body>
</html>
border 边框的使用方法
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
/* 边框 border */
/* 粗细px 样式 颜色(十六进制 单词 rgb) */
border: 10px solid pink;
/* none:没有边框即忽略所有边框的宽度(默认值) */
/* solid:边框为单实线(最为常用的) */
/* dashed:边框为虚线 */
/* dotted:边框为点线 */
/* double:边框为双实线 */
border-top: 10px solid pink;
border-right: 10px dashed skyblue;
border-bottom: 10px dotted purple;
border-left: 10px double springgreen;
}
</style>
</head>
<body>
<div class="box"></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>
.box {
width: 300px;
height: 300px;
background-color: pink;
/* 边框圆角 */
/* border-radius: 左上角 右上角 右下角 左下角;*/
/* border-radius: 20px 0px 0px 0px; */
/* border-radius: 150px 150px 150px 150px; */
/* border-radius: 50% 50% 50% 50%; */
border-radius: 50%;
}
/* 扇形 */
.box2 {
width: 300px;
height: 300px;
background-color: skyblue;
border-radius: 0px 300px 0px 0px;
}
/* 半圆 */
.box3 {
width: 300px;
height: 150px;
background-color: purple;
border-radius: 150px 150px 0px 0px;
}
.content {
width: 500px;
height: 100px;
}
.content div {
display: inline-block;
}
.content .left {
width: 100px;
height: 100px;
background-color: skyblue;
/* border-radius: 左上角 右上角 右下角 左下角; */
border-radius: 50px 0px 0px 50px;
}
.content .center {
width: 200px;
height: 100px;
background-color: pink;
}
.content .right {
width: 100px;
height: 100px;
background-color: skyblue;
/* border-radius: 左上角 右上角 右下角 左下角; */
border-radius: 0px 50px 50px 0px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="content">
<div class="left"></div>
<div class="center"></div>
<div class="right"></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>
/* 选择器 *(通配符)选中页面内所有元素 */
* {
padding: 0px;
margin: 0px;
}
.box{
width: 300px;
height: 600px;
border: 1px solid red;
/* 水平居中 */
text-align: center;
/* 行高 */
/* line-height : 如果多行文本 自身的高/文本行数 */
line-height: 600px;
line-height: 150px;
}
</style>
</head>
<body>
<p>123456789</p>
<ol>
<li>首页1</li>
<li>首页2</li>
<li>首页3</li>
<li>首页4</li>
</ol>
<ul>
<li>首页1</li>
<li>首页2</li>
<li>首页3</li>
<li>首页4</li>
</ul>
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容1</dd>
<dd>内容1</dd>
</dl>
<h1>一级标题</h1>
<div class="box">
<p>唧唧复唧唧,</p>
<p>木兰买手机,</p>
<p>oppoR11,</p>
<p>拍照更清晰。</p>
</div>
</body>
</html>
外边距合并问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
/* border: 1px solid #000; */
}
/* .box1{
margin-bottom: 30px;
} */
.box2{
margin-top: 80px;
}
.box3{
width: 400px;
height: 370px;
background-color: red;
/* margin-top: 80px; */
/* 1.换成内边距来做 */
/* padding-top: 30px; */
/* 2.给父元素添加 1px 的上边框或上内边距 */
/* border-top: 1px solid #000; */
/* padding-top: 1px; */
/* 3.给父元素添加 voerflow:hidden; */
overflow: hidden;
}
.box4{
width: 600px;
height: 200px;
background-color: pink;
margin: 50px;
}
</style>
</head>
<body>
<!-- 解决外边距合并问题 相邻元素:只给其中一个设置外边距 -->
<!-- <div class="box1"></div> -->
<!-- <div class="box2"></div> -->
<div class="box3">
<div class="box4"></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>
.box{
width: 260px;
height: 260px;
background-color:pink;
border: 10px solid red;
margin: 20px;
padding: 10px;
}
.box2{
width: 300px;
height: 300px;
background-color:pink;
border: 10px solid red;
margin: 20px;
padding: 10px;
/* 把box2设置为 ie盒子模型 */
box-sizing: border-box;
}
/* 标准盒子模型 :width+border+padding+margin */
/* IE盒子模型:width+margin 会自动算到content里面去 */
</style>
</head>
<body>
<div class="box">
小谷
</div>
<div class="box2">
小谷
</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>
* {
margin: 0px;
padding: 0px;
}
.box {
width: 800px;
height: 200px;
background-color: black;
margin: 0 auto;
}
.box h1 {
color: white;
text-align: center;
line-height: 200px;
font-size: 100px;
/* text-shadow: x y 模糊程度 color; */
text-shadow: -4px -4px 0px #00FFFF, 4px 4px 0px #DC143C;
/* #00FFFF #DC143C*/
}
/* box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影; */
.box2 {
width: 300px;
height: 300px;
background-color: #9932CC;
margin: 100px auto;
/* 盒子阴影 */
box-shadow: 4px 4px 10px 2px gray;
box-shadow: 4px 4px 10px 2px gray inset;
}
/* .box2:hover {
} */
</style>
</head>
<body>
<div class="box">
<h1>🎶🐅</h1>
</div>
<div class="box2"></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>
.box {
width: 300px;
height: 300px;
border: 1px solid red;
/* visible(默认) : 不剪切内容也不添加滚动条。 */
/* auto : 超出自动显示滚动条,不超出不显示滚动条 */
/* hidden : 不显示超过对象尺寸的内容,超出的部分隐藏掉 */
/* scroll : 不管超出内容否,总是显示滚动条 */
overflow: auto;
overflow: hidden;
overflow: scroll;
}
</style>
</head>
<body>
<div class="box">
11111111111111
</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>
* {
margin: 0px;
padding: 0px;
}
.content {
width: 405px;
height: 400px;
}
.content .top div,
.content .bottom div {
display: inline-block;
}
.content .top {
width: 100%;
height: 200px;
}
.content .bottom .right,
.content .top .left {
width: 200px;
height: 200px;
/* 渐变色 */
background-image: linear-gradient(to right bottom, skyblue, pink);
/* border-radius: 左上角 右上角 右下角 左下角; */
border-radius: 0px 200px 0px 200px;
}
.content .bottom .left,
.content .top .right {
width: 200px;
height: 200px;
/* 渐变色 */
background-image: linear-gradient(to right top, skyblue, pink);
/* border-radius: 左上角 右上角 右下角 左下角; */
border-radius: 200px 0px 200px 0px;
}
.content .bottom .left {
background-image: linear-gradient(to right top, aqua, springgreen);
}
.content .bottom .right {
background-image: linear-gradient(to right top, #FF4500, #C71585);
}
</style>
</head>
<body>
<div class="content">
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</body>
</html>