CSS盒子模型-CSS设置背景
盒模型
margin
<!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 {height: 100px;background-color: #f00;margin-bottom: 40px;}.container {height: 100px;background-color: #0f0;margin-top: 30px;}</style></head><body><div class="box"></div><div class="container"></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>body {font-size: 0;}.box {display: inline-block;height: 100px;width: 100px;background-color: #f00;/* margin-bottom: 40px; */margin-right: 30px;}.container {display: inline-block;width: 100px;height: 100px;background-color: #0f0;/* margin-top: 30px; */margin-left: 30px;}</style></head><body><div class="box"></div><div class="container"></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>body {font-size: 0;}.box {display: inline-block;height: 100px;width: 100px;background-color: #f00;/* margin-bottom: 40px; *//* margin-right: 30px; */}.container {display: inline-block;width: 100px;height: 100px;background-color: #0f0;/* margin-top: 30px; *//* margin-left: 30px; */margin: 0px 20px;}</style></head><body><div class="box"></div><div class="container"></div></body></html>
padding/margin
<!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 {height: 300px;width: 300px;background-color: #f00;margin-top: 20px;}.container {width: 100px;height: 100px;background-color: #0f0;margin-left: 20px;}</style></head><body><div class="box"><div class="container"></div></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>.box {height: 300px;width: 300px;background-color: #f00;padding-left: 100px;}.container {width: 100px;height: 100px;background-color: #0f0;margin-top: 100px;}</style></head><body><div class="box"><div class="container"></div></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>.box {height: 300px;width: 300px;background-color: #f00;padding-left: 100px;box-sizing: border-box;}.container {width: 100px;height: 100px;background-color: #0f0;margin-top: 100px;}</style></head><body><div class="box"><div class="container"></div></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>.box {height: 300px;width: 300px;background-color: #f00;/* padding-left: 100px;box-sizing: border-box; */}.container {width: 100px;height: 100px;background-color: #0f0;margin-left: 100px;}</style></head><body><div class="box"><div class="container"></div></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>.box {height: 300px;width: 300px;background-color: #f00;/* padding-left: 100px;box-sizing: border-box; */overflow: auto;}.container {width: 100px;height: 100px;background-color: #0f0;margin-left: 100px;margin-top: 100px;}</style></head><body><div class="box"><div class="container"></div></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>.box {height: 300px;width: 300px;background-color: #f00;/* padding-left: 100px;box-sizing: border-box; *//* overflow: auto; */}.container {width: 100px;height: 100px;background-color: #0f0;margin-left: 100px;margin-top: 100px;}</style></head><body><div class="box"><div class="container"></div></div></body></html>
margin上传递
<!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;background-color: #f00;}.container {width: 100px;height: 100px;background-color: #0f0;margin-left: 30px;margin-top: 30px;}</style></head><body><div class="box"><div class="container"></div></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>.box {width: 300px;height: 300px;background-color: #f00;border: 1px solid transparent;}.container {width: 100px;height: 100px;background-color: #0f0;margin-left: 30px;margin-top: 30px;}</style></head><body><div class="box"><div class="container"></div></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>.box {width: 300px;height: 300px;background-color: #f00;/* border: 1px solid transparent; */overflow: auto;}.container {width: 100px;height: 100px;background-color: #0f0;margin-left: 30px;margin-top: 30px;}</style></head><body><div class="box"><div class="container"></div></div></body></html>
如何防止触发传递问题
给父元素设置padding-top/padding-bottom给父元素设置border触发bfc 设置overflow为automargin下传递
<!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: auto;background-color: #f00;}.container {width: 100px;height: 100px;background-color: #0f0;margin-left: 100px;margin-bottom: 100px;}</style></head><body><div class="box"><div class="container"></div></div><div>哈哈哈哈</div></body></html>
margin设置兄弟元素之间的间距padding设置父子元素之间的间距建议
margin折叠
兄弟之间上下margin折叠父子元素之间的折叠折叠
<!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>.box1 {height: 100px;background-color: #f00;margin-bottom: 30px;}.box2 {height: 100px;background-color: #0f0;margin-top: 50px;}</style></head><body><div class="box1"></div><div class="box2"></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>.box1 {height: 100px;background-color: #f00;margin-bottom: 30px;}.box2 {height: 100px;background-color: #0f0;margin-top: 50px;}</style></head><body><div class="box1"></div><div class="box2"></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>body {margin: 0;padding: 0;display: flex;justify-content: center;}.box {width: 100px;height: 100px;background-color: #f00;}</style></head><body><div class="box"></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>body {margin: 0;padding: 0;}.box {width: 100px;height: 100px;margin: 0 auto;background-color: #f00;}</style></head><body><div class="box"></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>body {margin: 0;padding: 0;}.container {width: 800px;height: 150px;background-color: #0f0;}.box {width: 100px;height: 100px;margin: 0 auto;background-color: #f00;}</style></head><body><div class="container"><div class="box"></div></div></body></html>
outline
元素的外轮廓不占据空间 outline-widthoutline-styleoutline-coloroutline<!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: 100px;height: 100px;padding: 30px;background-color: #f00;border: 50px solid orange;outline: 30px solid #0f0;}a {margin-top: 50px;display: block;/* outline: 10px solid #f00; */outline: none;}/* lvfha */input {outline: none;}</style></head><body><div class="box"></div><a href="#">百度一下</a><input type="text" /></body></html>
box-shadow
可以设置一个或者多个阴影<!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: 100px;height: 100px;background-color: #f00;box-shadow: 5px 5px 10px 10px orange inset;}</style></head><body><div class="box"></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>.box {width: 100px;height: 100px;background-color: #f00;box-shadow: 5px 5px 10px 10px orange inset;box-shadow: 5px 5px 10px orange inset;}</style></head><body><div class="box"></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>.box {width: 100px;height: 100px;background-color: #f00;box-shadow: 5px 5px 10px 10px orange inset;box-shadow: 5px 5px 10px orange, 10px 10px 10px green;}</style></head><body><div class="box"></div></body></html>
text-shadow
给文字添加阴影效果<!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 {font-size: 50px;font-weight: 700;/* text-shadow: 5px 5px 5px #f00; */text-shadow: 5px 5px 5px orange, 10px 10px 5px blue, 15px 5px 5px green;}</style></head><body><div class="box">hello Coderwhy</div></body></html>
行内非替换元素的注意事项
padding 左右生效但是上下只是视觉生效，实际不占空间<!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>.content {width: 300px;height: 300px;color: white;background-color: #f00;/* 内边距 */padding: 30px;/* margin: 30px; */}</style></head><body><span class="content"> 我是span内容，哈哈哈 </span>aaaa<div>hehe</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>.content {width: 300px;height: 300px;color: white;background-color: #f00;/* 内边距 *//* padding: 30px; */border: 50px solid orange;/* margin: 30px; */}</style></head><body><span class="content"> 我是span内容，哈哈哈 </span>aaaa<div>hehe</div></body></html>
margin 左右生效但是上下只是视觉生效，实际不占空间
<!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>.content {width: 300px;height: 300px;color: white;background-color: #f00;/* 内边距 *//* padding: 30px; *//* border: 50px solid orange; */margin: 30px;}</style></head><body><span class="content"> 我是span内容，哈哈哈 </span>aaaa<div>hehe</div></body></html>
注意 水平方向生效上下方向生效
前景色和背景色
背景色 扩展到border 前景色 未设置border-color，会使用color的属性值<!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: 100px;height: 100px;background-color: #f00;color: orange;padding: 30px;border: 10px solid;}</style></head><body><div class="box"></div></body></html>
box-sizing
设置盒子模型中宽高的行为 content-box padding，border都布置在width，height外边 border-box padding，border都布置在width，height里边<!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>.box1 {box-sizing: content-box;width: 100px;height: 100px;background-color: #f00;padding: 30px;border: 10px solid orange;}.box2 {box-sizing: border-box;width: 100px;height: 100px;background-color: #f00;padding: 30px;border: 10px solid orange;}</style></head><body><div class="box1"></div><div class="box2"></div></body></html>
盒模型
W3C标准盒子模型IE盒子模型案例练习
案例一<!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>.btn {color: #333;font-size: 14px;text-decoration: none;display: inline-block;width: 70px;height: 25px;line-height: 25px;text-align: center;border-radius: 13px;}.new {background-color: #e1251b;color: #fff;}.vip {background-color: #363634;color: #e5d799;}</style></head><body><aclass="btn new"href="/?channel=99#/home"target="_blank">新人福利</a><aclass="btn vip"href="/new/login.aspx"target="_blank">PLUS会员</a></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>.btn {color: #333;font-size: 14px;text-decoration: none;display: inline-block;cursor: pointer;width: 70px;height: 25px;line-height: 25px;text-align: center;border-radius: 13px;}.btn:hover {background-color: #c81623;color: #fff;}.new {background-color: #e1251b;color: #fff;}.vip {background-color: #363634;color: #e5d799;}</style></head><body><aclass="btn new"href="/?channel=99#/home"target="_blank">新人福利</a><aclass="btn vip"href="/new/login.aspx"target="_blank">PLUS会员</a></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>body,p,h3 {padding: 0;margin: 0;}body {background-color: #f5f5f5;}h3 {font-weight: 400;}a {text-decoration: none;color: #333;font-size: 12px;}.item {display: inline-block;width: 234px;height: 300px;padding: 20px 10px;background-color: #fff;text-align: center;box-sizing: border-box;}.item img {width: 160px;height: 160px;}.item .title {margin-top: 14px;}.item p {color: #999;margin-top: 8px;/* 单行显示 */overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.item .desc {color: #999;margin-top: 8px;}.item .price {margin-top: 14px;}.item .price .new-price {color: #ff6700;}.item .price .old-price {margin-left: 5px;color: #999;text-decoration: line-through;}</style></head><body><a class="item" href="/xiaomipad5pro" target="_blank"><img src="../images/xiaomi01.webp" alt="" /><h3 class="title">小米平板5 Pro</h3><p class="desc">全新12代英特尔处理器，CNC一体精雕工艺，2.5K120Hz高清屏，可选MX550独立显卡</p><div class="price"><span class="new-price">2399元起</span><span class="old-price">2499</span></div></a></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>body,p,h3 {padding: 0;margin: 0;}body {background-color: #f5f5f5;}h3 {font-weight: 400;}a {text-decoration: none;color: #333;font-size: 12px;}body {text-align: center;}.item {display: inline-block;width: 234px;height: 300px;padding: 20px 10px;background-color: #fff;text-align: center;box-sizing: border-box;}.item:hover {box-shadow: 0 5px 20px 5px rgba(0, 0, 0, 0.2);}.item img {width: 160px;height: 160px;}.item .title {margin-top: 14px;}.item p {color: #999;margin-top: 8px;/* 单行显示 */overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.item .desc {color: #999;margin-top: 8px;}.item .price {margin-top: 14px;}.item .price .new-price {color: #ff6700;}.item .price .old-price {margin-left: 5px;color: #999;text-decoration: line-through;}</style></head><body><a class="item" href="/xiaomipad5pro" target="_blank"><img src="../images/xiaomi01.webp" alt="" /><h3 class="title">小米平板5 Pro</h3><p class="desc">全新12代英特尔处理器，CNC一体精雕工艺，2.5K120Hz高清屏，可选MX550独立显卡</p><div class="price"><span class="new-price">2399元起</span><span class="old-price">2499</span></div></a></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>body,p,h3 {padding: 0;margin: 0;}body {background-color: #f5f5f5;font: 12px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei,Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;}h3 {font-weight: 400;}a {text-decoration: none;color: #333;font-size: 12px;}a {display: inline-block;}.item {width: 300px;margin: 0 auto;}.item .album img {width: 100%;border-radius: 8px;}.item .info a {width: 100%;}.item .info p {font-size: 15px;margin-top: 8px;/* 一行 */overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.item .info .anchor {font-size: 13px;color: #888;margin-top: 5px;}.item .info .anchor::before {content: url("../images/widget-up.svg");display: inline-block;width: 16px;height: 16px;position: relative;top: 1px;}</style></head><body><div class="item"><div class="album"><a href="#"><imgsrc="/bfs/archive/9c763bf06b7765462eac62cc0a9a34b260d3f9c8.jpg@672w_378h_1c.webp"referrerpolicy="no-referrer"alt=""/></a></div><div class="info"><a href="#"><p>萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？</p></a><a class="anchor" href="#"><span class="nickname"> Muxi慕喜咩</span><span class="time">3-20</span></a></div></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>body,p,h3 {padding: 0;margin: 0;}body {background-color: #f5f5f5;font: 12px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei,Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;}h3 {font-weight: 400;}a {text-decoration: none;color: #333;font-size: 12px;}a {display: inline-block;}.item {width: 300px;margin: 0 auto;}.item .album img {width: 100%;border-radius: 8px;}.item .info a {width: 100%;}.item .info p {font-size: 15px;margin-top: 8px;/* 一行 *//* overflow: hidden;text-overflow: ellipsis;white-space: nowrap; *//* 多行 */overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}.item .info .anchor {font-size: 13px;color: #888;margin-top: 5px;}.item .info .anchor::before {content: url("../images/widget-up.svg");display: inline-block;width: 16px;height: 16px;position: relative;top: 1px;}</style></head><body><div class="item"><div class="album"><a href="#"><imgsrc="/bfs/archive/9c763bf06b7765462eac62cc0a9a34b260d3f9c8.jpg@672w_378h_1c.webp"referrerpolicy="no-referrer"alt=""/></a></div><div class="info"><a href="#"><p>萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？</p></a><a class="anchor" href="#"><span class="nickname"> Muxi慕喜咩</span><span class="time">3-20</span></a></div></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>body,p,h3 {padding: 0;margin: 0;}body {background-color: #f5f5f5;font: 12px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei,Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;}h3 {font-weight: 400;}a {text-decoration: none;color: #333;font-size: 12px;}a {display: block;}.item {width: 300px;margin: 0 auto;}.item .album img {width: 100%;border-radius: 8px;}/* .item .info a {width: 100%;} */.item .info p {font-size: 15px;margin-top: 8px;/* 一行 *//* overflow: hidden;text-overflow: ellipsis;white-space: nowrap; *//* 多行 */overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}.item .info .anchor {font-size: 13px;color: #888;margin-top: 5px;}.item .info .anchor::before {content: url("../images/widget-up.svg");display: inline-block;width: 16px;height: 16px;position: relative;top: 1px;}</style></head><body><div class="item"><div class="album"><a href="#"><imgsrc="/bfs/archive/9c763bf06b7765462eac62cc0a9a34b260d3f9c8.jpg@672w_378h_1c.webp"referrerpolicy="no-referrer"alt=""/></a></div><div class="info"><a href="#"><p>萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？</p></a><a class="anchor" href="#"><span class="nickname"> Muxi慕喜咩</span><span class="time">3-20</span></a></div></div></body></html>
文本修饰
一行
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
多行
overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical
background-image
设置元素的背景图片 盖在background-color， background-color仍然存在多张图片 第一张图片将显示在最上面，其他图片按顺序层叠在下面依次放在后面 1 2 3 4在后面<!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: 600px;height: 600px;background-color: #f00;/* 背景图片 */background-image: url("../images/kobe01.jpg");background-repeat: no-repeat;}</style></head><body><div class="box"></div></body></html>
background-repeat
设置背景图片是否平铺 repeat 平铺no-repeat 不平铺repeat-x 只在水平方向平铺repeat-y 只在垂直方向平铺<!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: 600px;height: 600px;background-color: #f00;/* 背景图片 */background-image: url("../images/kobe01.jpg"),url("../images/kobe02.png");/* background-repeat: no-repeat; *//* background-repeat: repeat-x; *//* background-repeat: repeat-y; */background-repeat: repeat;}</style></head><body><div class="box"></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>.box {width: 600px;height: 600px;background-color: #f00;/* 背景图片 */background-image: url("../images/wall.png")}</style></head><body><div class="box"></div></body></html>
background-size
设置背景图片的大小 auto 默认值 一背景图片大小显示cover 完全铺满元素 有裁剪的可能，部分看不见contain 高度或者宽度铺满元素 保持宽高纵横比百分比具体尺度<!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: 600px;height: 600px;background-color: #f00;/* 背景图片 */background-image: url("../images/kobe01.jpg");background-repeat: no-repeat;/* background-size: contain; *//* background-size: cover; *//* background-size: 100% 100%; */background-size: 600px 600px;}</style></head><body><div class="box"></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>.box {width: 600px;height: 600px;background-color: #f00;/* 背景图片 */background-image: url("../images/kobe01.jpg");background-repeat: no-repeat;/* background-size: contain; *//* background-size: cover; *//* background-size: 100% 100%; *//* background-size: 600px 600px; */background-size: 100px auto;}</style></head><body><div class="box"></div></body></html>
background-position
设置图片在水平和垂直方向的位置<!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: 600px;height: 600px;background-color: #f00;/* 背景图片 */background-image: url("../images/kobe01.jpg");background-repeat: no-repeat;/* 背景位置 *//* background-position: right bottom; */background-position: 100px 100px;}</style></head><body><div class="box"></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>.box {width: 600px;height: 600px;background-color: #f00;/* 背景图片 */background-image: url("../images/kobe01.jpg");background-repeat: no-repeat;/* 背景位置 *//* background-position: right bottom; *//* background-position: 100px 100px; *//* background-position: right bottom; *//* background-position: center center; */background-position: top;}</style></head><body><div class="box"></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>body {padding: 0;margin: 0;}.box {height: 489px;background-color: #f00;background-image: url("../images/mhxy.jpg");background-position: center;background-repeat: no-repeat;/* background-size: contain; */}</style></head><body><div class="box"></div></body></html>
background-attachment
<!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;color: #fff;overflow: scroll;background-color: #f00;background-image: url("../images/kobe01.jpg");/* 附加效果 *//* background-attachment: local; */}</style></head><body><div class="box">赏花游人群中，朋友相约出游、全家出游、亲子出游占比较高。同程旅行大数据显示，赏花游对男性和女性游客同样具有吸引力。在关注赏花游的人群中，男性占比为48%，女性占比为52%，几乎持平。在年龄分布上，80后和90后更爱赏花游，00后赏花游客群体增长迅速，占比从去年的5%增至今年的16%。和朋友一起相约赏花，在赏花人群中占比最高，达到36%，带着家人孩子一起外出赏花的游客占比也达到33%。3月上旬，多地出现散发疫情，赏花长线游市场受到较大影响。“近两年以来，春季赏花游市场中，周边短途游占比进一步提高，从今年途牛旅游网预订情况看，超七成游客选择周末周边游。疫情发生前，每年春季，江西婺源、西藏林芝等地跟团游中，外省游客占比较大，今年，在跨省游受限的情况下，赏花长线游产品受影响较大。”途牛旅游相关负责人告诉记者。驴妈妈旅游网首席执行官邹庆龄说：“今年赏花游目的地更偏向省内、当地，其次是周边省市。从玩法上来看，赏花游产品呈现高频化、深度打卡、网红内容体验等特点；行程设计由单纯的赏花到品农家菜、入住当地酒店及特色民宿，赏花游呈现慢节奏体验的趋势。”</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>.box {width: 300px;height: 300px;color: #fff;overflow: scroll;background-color: #f00;background-image: url("../images/kobe01.jpg");/* 附加效果 *//* background-attachment: scroll; *//* background-attachment: local; */background-attachment: fixed;}</style></head><body><div class="box">赏花游人群中，朋友相约出游、全家出游、亲子出游占比较高。同程旅行大数据显示，赏花游对男性和女性游客同样具有吸引力。在关注赏花游的人群中，男性占比为48%，女性占比为52%，几乎持平。在年龄分布上，80后和90后更爱赏花游，00后赏花游客群体增长迅速，占比从去年的5%增至今年的16%。和朋友一起相约赏花，在赏花人群中占比最高，达到36%，带着家人孩子一起外出赏花的游客占比也达到33%。3月上旬，多地出现散发疫情，赏花长线游市场受到较大影响。“近两年以来，春季赏花游市场中，周边短途游占比进一步提高，从今年途牛旅游网预订情况看，超七成游客选择周末周边游。疫情发生前，每年春季，江西婺源、西藏林芝等地跟团游中，外省游客占比较大，今年，在跨省游受限的情况下，赏花长线游产品受影响较大。”途牛旅游相关负责人告诉记者。驴妈妈旅游网首席执行官邹庆龄说：“今年赏花游目的地更偏向省内、当地，其次是周边省市。从玩法上来看，赏花游产品呈现高频化、深度打卡、网红内容体验等特点；行程设计由单纯的赏花到品农家菜、入住当地酒店及特色民宿，赏花游呈现慢节奏体验的趋势。”</div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></body></html>
background
内部回顾
一、盒子模型
1.1.margin
margin的设置问题 toprightbottomleft margin和padding的选择margin的传递和折叠 父子的传递兄弟的折叠 margin进行水平居中 o auto1.1.outline
外轮廓 不占据空间1.3.box-shadow
box-shadow1.4.text-shadow
text-shadow1.5.box-sizing
content-boxborder-box1.6.注意事项
对于行内非替换元素无效的属性 widthheightmargin-topmargin-bottompadding-toppadding-bottom 对于行内非替换元素有效的属性 padding-leftpadding-rightmargin-leftmargin-right1.7.水平居中
行内级元素 text-align: center 块级元素 margin： 0 auto二、案例练习
2.1.京东小按钮
2.2.小米的商品
2.3.哔哩哔哩视频展示
三、背景设置
3.1.background-image
3.2.background-repeat
3.3.backgorund-size
3.4.background-position
3.5.background-attchment
3.6.backround
3.7.background-image/img的对比和选择
课后作业
一. 完成课堂所有的代码
二. 写出盒子模型包含的内容以及如何设置
盒子模型 content widthheight paddingbordermargin三. 说说你对margin的传递和折叠的理解
四. 行内非替换元素在设置padding/border的上下时，有什么特殊的地方？
水平方向有效垂直方面无效五. 整理box-sizing的作用，以及content-box和border-box的区别
设置盒子模型中宽高的行为 content-box 标准盒模型 padding border都布置在width，height的外边 border-box padding border都布置在width， height的里边 border-box<!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>* {padding: 0;margin: 0;}.box {width: 200px;height: 200px;padding: 10px 10px;border: 10px solid orange;background-color: red;box-sizing: border-box;}</style></head><body><div class="box"></div></body></html>
content-box
<!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>* {padding: 0;margin: 0;}.box {width: 200px;height: 200px;padding: 10px 10px;border: 10px solid orange;background-color: red;box-sizing: content-box;}</style></head><body><div class="box"></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>* {padding: 0;margin: 0;}.box {width: 200px;height: 200px;margin: 0 auto;background-color: #f00;}</style></head><body><div class="box"></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>* {padding: 0;margin: 0;}body {display: flex;justify-content: center;}.box {width: 200px;height: 200px;background-color: #f00;}</style></head><body><div class="box"></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>* {padding: 0;margin: 0;}body {text-align: center;}.box {width: 200px;height: 200px;display: inline-block;background-color: #f00;}</style></head><body><div class="box"></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>* {padding: 0;margin: 0;}body {text-align: center;}.span {width: 200px;height: 200px;background-color: #f00;}</style></head><body><span class="span">span</span></body></html>
