一、CSS盒子模型知识点总结
CSS盒子模型是一个抽象的概念,用于描述网页中元素的布局和外观。它决定了元素如何在页面上渲染和布局。每个HTML元素都可以看作是一个矩形的盒子,这个盒子由四个部分组成:内容(content)、内边距(padding)、边框(border)和外边距(margin)。
CSS盒子模型的组成部分
1.内容(content):元素的主体部分,包含了元素的文本、图片或其他媒体内容。可以通过width和height属性来设置其大小。
2.内边距(padding):位于内容和边框之间,用于增加元素内部的空间。可以通过padding-top、padding-right、padding-bottom和padding-left属性来设置。
3.边框(border):围绕内容和内边距的线条,用于区分不同的元素。可以通过border-width、border-style和border-color属性来设置。
4.外边距(margin):元素与其他元素之间的空间,可以通过margin-top、margin-right、margin-bottom和margin-left属性来设置。
如图:
CSS盒子模型的类型
1.标准盒子模型:内容的宽度和高度不包括内边距和边框。如图:
标准盒子模型盒子宽度计算方式:
元素的总宽度 = 内容的宽度 + 左侧内边距 + 右侧内边距 + 左侧边框 + 右侧边框 + 左侧外边距 + 右侧外边距。
2.怪异盒子模型:内容的宽度和高度包括内边距和边框。如图:
怪异盒子模型盒子宽度计算方式
元素的总宽度 = 内容的宽度 + 左侧内边距 + 右侧内边距 + 左侧边框 + 右侧边框。
内外边距的区别
内边距(Padding)
影响:设置内边距会使元素的总宽度或高度增加,因为内边距是计算在元素尺寸内的。
外边距(Margin)
影响:设置外边距不会影响元素本身的宽度或高度,但会影响元素在页面中的位置。
区别
1.位置:内边距位于元素的内部,即内容和边框之间;而外边距位于元素的外部,即元素边框和其他元素之间。
2.作用:内边距用于调整元素内部的空间,而外边距用于调整元素之间的空间。
3.影响:内边距会增加元素的总尺寸,而外边距不会影响元素自身的尺寸,但会影响布局。
二、电商(淘宝)三个页面
登录页
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝登录页面</title>
<style>
*{
margin: 0px;
}
.head{
height: 100px;
background-color: rgb(241, 240, 240);
}
.body{
height: 390px;
background-color: rgb(241, 240, 240);
}
.foot{
height: 300px;
background-color: rgb(241, 240, 240);
}
.left{
width: 20%;
height: 390px;
background-color: rgb(241, 240, 240);
float: left;
}
.middle{
width: 58%;
height: 390px;
background-color: white;
float: left;
border: 1px solid white;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.right{
width: 20%;
height: 390px;
background-color: rgb(241, 240, 240);
float: left;
}
.a{
width: 60%;
height: 100%;
float: left;
}
.content{
width: 100%;
height: 50%;
}
.zhanghao,.mima{
height: 20%;
padding: 8px;
border: 1px solid black;
}
.content > div{
width: 100%;
height: 30%;
}
.a > .content{
margin-top: 10px;
}
.button{
width: 515px;
padding: 4px 4px;
background-color: rgba(232, 84, 16, 0.973);
color: white;
border: none;
}
.title{
width: 100%;
height: 15%;
}
.title > div{
width: 50%;
height: 30%;
float: left;
text-align: center;
}
.otherway{
width: 100%;
height: 20%;
}
.a > .otherway{
margin-top: 10px;
}
.way{
width: 100%;
height: 50%;
text-align: center;
}
.forget{
width: 100%;
height: 40%;
text-align: center;
}
.b{
width: 35%;
height: 100%;
float: left;
}
</style>
</head>
<body>
<div class="head">
<img src="./31235d3376331baa5815abc972c673c.png" alt="">
</div>
<div class="body">
<div class="left"></div>
<div class="middle">
<div class="a">
<div class="title">
<div><h1>密码登录</h1></div>
<div><h1>短信登录</h1></div>
</div>
<div class="content">
<div class="count">
<input type="zhanghao" id="zhanghao" name="zhanghao" placeholder="帐号名/邮箱/手机号" size="70" class="zhanghao" required >
</div>
<div class="password">
<input type="mima" id="mima" name="mima" placeholder="请输入登录密码" size="70" class="mima" required>
</div>
<div class="denglu">
<button type="button" class="button"><h1>登录</h1></button>
</div>
</div>
<div class="otherway">
<div class="way">支付宝登录 | 钉钉登录</div>
<div class="forget">免费注册 | 忘记账号名 | 忘记密码</div>
</div>
<div class=""></div>
</div>
<div class="b">
<img src="./二维码.png" alt="" width="100%" height="100%">
</div>
</div>
<div class="right"></div>
</div>
<div class="foot"></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>淘宝商品页</title>
<style>
.top{
width: 100%;
height: 50px;
}
.top > div{
width: 50%;
height: 30px;
float: left;
text-align: center;
}
.title{
width: 1520px;
height: 80px;
}
.picture{
width: 20%;
position: absolute;
float: left;
}
.search{
float: right;
margin-right: 100px;
margin-top: 20px;
}
.sousuo{
background-color: orangered;
color: white;
border: none;
}
.goods > div{
display: inline-block;
}
.foot{
width: 1520px;
height: 100px;
text-align: center;
}
.a{
width: 280px;
height: 330px;
}
.pro-introduce,.pro-price,.pro-boss,.pro-sale{
color: rgb(167, 164, 164);
padding-right: 20px;
}
</style>
</head>
<body>
<div class="top">
<div class="user">
<p><b>中国大陆</b> 亲,请登录 免费注册 手机版淘宝 网页无障碍</p>
</div>
<div class="home">
<p>淘宝网首页 我的淘宝 购物车 收藏夹 商品分类 免费开店 千牛卖家中心 帮助中心</p>
</div>
</div>
<div class="title">
<div class="picture">
<img src="./淘宝热卖.png" width="200px" height="80px">
</div>
<div class="search">
<input type="searchbox" name="searchbox" class="searchbox" size="50">
<button type="sousuo" name="sousuo" class="sousuo">搜索</button>
</div>
</div>
<div class="goods">
<div class="a">
<dl>
<dd>
<img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
<div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
<div class="pro-price"><span>¥1398</span></div>
<div class="pro-boss"><span>妙采旗舰店</span></div>
<div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
</dd>
</dl>
</div>
<div class="a">
<dl>
<dd>
<img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
<div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
<div class="pro-price"><span>¥1398</span></div>
<div class="pro-boss"><span>妙采旗舰店</span></div>
<div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
</dd>
</dl>
</div>
<div class="a">
<dl>
<dd>
<img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
<div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
<div class="pro-price"><span>¥1398</span></div>
<div class="pro-boss"><span>妙采旗舰店</span></div>
<div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
</dd>
</dl>
</div>
<div class="a">
<dl>
<dd>
<img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
<div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
<div class="pro-price"><span>¥1398</span></div>
<div class="pro-boss"><span>妙采旗舰店</span></div>
<div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
</dd>
</dl>
</div>
<div class="a">
<dl>
<dd>
<img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
<div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
<div class="pro-price"><span>¥1398</span></div>
<div class="pro-boss"><span>妙采旗舰店</span></div>
<div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
</dd>
</dl>
</div>
<div class="a">
<dl>
<dd>
<img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
<div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
<div class="pro-price"><span>¥1398</span></div>
<div class="pro-boss"><span>妙采旗舰店</span></div>
<div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
</dd>
</dl>
</div>
<div class="a">
<dl>
<dd>
<img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
<div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
<div class="pro-price"><span>¥1398</span></div>
<div class="pro-boss"><span>妙采旗舰店</span></div>
<div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
</dd>
</dl>
</div>
<div class="a">
<dl>
<dd>
<img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
<div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
<div class="pro-price"><span>¥1398</span></div>
<div class="pro-boss"><span>妙采旗舰店</span></div>
<div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
</dd>
</dl>
</div>
<div class="a">
<dl>
<dd>
<img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
<div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
<div class="pro-price"><span>¥1398</span></div>
<div class="pro-boss"><span>妙采旗舰店</span></div>
<div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
</dd>
</dl>
</div>
<div class="a">
<dl>
<dd>
<img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
<div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
<div class="pro-price"><span>¥1398</span></div>
<div class="pro-boss"><span>妙采旗舰店</span></div>
<div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
</dd>
</dl>
</div>
<div class="a">
<dl>
<dd>
<img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
<div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
<div class="pro-price"><span>¥1398</span></div>
<div class="pro-boss"><span>妙采旗舰店</span></div>
<div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
</dd>
</dl>
</div>
<div class="a">
<dl>
<dd>
<img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
<div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
<div class="pro-price"><span>¥1398</span></div>
<div class="pro-boss"><span>妙采旗舰店</span></div>
<div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
</dd>
</dl>
</div>
<div class="a">
<dl>
<dd>
<img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
<div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
<div class="pro-price"><span>¥1398</span></div>
<div class="pro-boss"><span>妙采旗舰店</span></div>
<div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
</dd>
</dl>
</div>
<div class="a">
<dl>
<dd>
<img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
<div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
<div class="pro-price"><span>¥1398</span></div>
<div class="pro-boss"><span>妙采旗舰店</span></div>
<div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
</dd>
</dl>
</div>
<div class="a">
<dl>
<dd>
<img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
<div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
<div class="pro-price"><span>¥1398</span></div>
<div class="pro-boss"><span>妙采旗舰店</span></div>
<div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
</dd>
</dl>
</div>
<div class="a">
<dl>
<dd>
<img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
<div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
<div class="pro-price"><span>¥1398</span></div>
<div class="pro-boss"><span>妙采旗舰店</span></div>
<div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
</dd>
</dl>
</div>
<div class="a">
<dl>
<dd>
<img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
<div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
<div class="pro-price"><span>¥1398</span></div>
<div class="pro-boss"><span>妙采旗舰店</span></div>
<div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
</dd>
</dl>
</div>
<div class="a">
<dl>
<dd>
<img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
<div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
<div class="pro-price"><span>¥1398</span></div>
<div class="pro-boss"><span>妙采旗舰店</span></div>
<div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
</dd>
</dl>
</div>
<div class="a">
<dl>
<dd>
<img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
<div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
<div class="pro-price"><span>¥1398</span></div>
<div class="pro-boss"><span>妙采旗舰店</span></div>
<div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
</dd>
</dl>
</div>
<div class="a">
<dl>
<dd>
<img src="https://img.alicdn.com/imgextra/i3/131964716/O1CN01NN11fy1khyoU0hq9N_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" width="180px" height="198px">
<div class="pro-introduce"><span>妙采旗舰店中老年小衫真丝上衣时尚洋气妈妈装桑蚕丝洋气短袖T</span></div>
<div class="pro-price"><span>¥1398</span></div>
<div class="pro-boss"><span>妙采旗舰店</span></div>
<div class="pro-sale"><div class="pro-font"><span>月销 1w+</span></div></div>
</dd>
</dl>
</div>
</div>
<div class="foot">
<a id="previouspage" href="#previouspage">
<button type="previouspage" name="previouspage" class="previouspage">上一页</button>
</a>
<a href="#nextpage" id="nextpage">
<button type="nextpage" name="nextpage" class="nextpage">下一页</button>
</a>
<a href="#home" id="home">
<button type="home" name="home" class="home">首页</button>
</a>
</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>购物车</title>
<style>
.head{
width: 100%;
height: 100px;
}
.title{
color: orangered;
}
.head > div{
width: 50%;
height: 100%;
float: left;
}
.search{
padding-top: 35px;
text-align: right;
}
.sousuo{
background-color: orangered;
color: white;
border: none;
}
.body{
width: 100%;
height: 400px;
text-align: center;
}
.foot{
width: 100%;
height: 300px;
text-align: center;
}
</style>
</head>
<body>
<div class="head">
<div class="title">
<h1> <big>淘宝</big> 购物车</h1>
</div>
<div class="search">
<input type="searchbox"name="searchbox" class="searchbox">
<button type="sousuo" name="sousuo" class="sousuo">搜索</button>
</div>
</div>
<div class="body">
<img src="./购物车.png" width="800px" height="400px">
</div>
<div class="foot">
<img src="./链接.png" width="1500px" height="400px">
</div>
</body>
</html>
运行结果:下面的链接什么的都是抠图