2024.4.2-day07-CSS 盒子模型（显示模式、盒子模型）

个人主页：学习前端的小z
个人专栏：HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！

文章目录

- 作业
2024.4.2 学习笔记
- CSS标签元素显示模式
- - 1 块元素
  - 2 行内元素
  - 3 行内块元素
  - 4 行内模式
  - 5 标签元素的显示与隐藏
  - 6 置换元素
- css盒子模型
- - 1 盒子模式组成
  - 2 怪异盒子模型

作业

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="首页" content="首页"><meta description="首页" content="首页"><title>手机列表</title><style>* {margin: 0;padding: 0;}ul, ol {list-style: none;}.mobile-list {width: 1030px;margin: 50px auto 0;text-align: center;}.mobile-list>li {box-sizing: border-box;width: 250px;display: inline-block;border: 1px solid;}.mobile-list .title{font-size: 14px;font-weight: 400;line-height: 42px;}.mobile-list .desc {font-size: 12px;color: #B0B2B9;}.mobile-list .price {font-size: 12px;color: #444;line-height: 28px;}.mobile-list .num {color: red;}</style></head><body><ul class="mobile-list"><li><div><img src="./images/1.webp" width="200"></div><h3 class="title">小米10 青春版 5G</h3><div class="desc">50倍潜望式变焦/轻薄5G手机</div><div class="price"><span class="num">2099</span>元起</div></li><li><div><img src="./images/1.webp" width="200"></div><h3 class="title">小米10 青春版 5G</h3><div class="desc">50倍潜望式变焦/轻薄5G手机</div><div class="price"><span class="num">2099</span>元起</div></li><li><div><img src="./images/1.webp" width="200"></div><h3 class="title">小米10 青春版 5G</h3><div class="desc">50倍潜望式变焦/轻薄5G手机</div><div class="price"><span class="num">2099</span>元起</div></li><li><div><img src="./images/1.webp" width="200"></div><h3 class="title">小米10 青春版 5G</h3><div class="desc">50倍潜望式变焦/轻薄5G手机</div><div class="price"><span class="num">2099</span>元起</div></li></ul></body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta chaset="UTF-8"><meta name="测试1" content="测试1"><meta desciption="测试1" content="测试1"><title>测试1</title><style>div {text-align:center;font-size:50px;}.none {display:none;}.hidden {visibility:hidden;}</style></head><body><div><p><span>姓名</span><span class="none">学号</span><span>班级</span><span class="hidden">性别</span><span>入学年份</span></p></div></body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="测试2" content="测试2"><meta description="测试2" content="测试2"><title>测试2</title><style>* {padding:0;margin:0;}h1 {margin-bottom:80px;}div {padding-top:50px;}</style></head><body><h1>我是一个标题</h1><div>我是一个div</div></body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="测试3" content="测试3"><meta description="测试3" content="测试3"><title>测试2</title><style>* {margin: 0;padding: 0;}.father {width: 200px;height:200px;background-color: blue;/* border-top: 1px solid; *//* padding-top: 1px; */overflow: hidden;}.son {margin-top: 20px;width: 100px;height: 100px;background-color: green;}</style></head><body><div class="father"><div class="son"></div></div></body>
</html>

显示模式有哪几种？它们有什么区别？

答：

1.块元素：横跨一行，可设置宽高度，里面各种显示模式的元素都可以装。

2.行内元素：一行可容纳多个行内元素，宽高度不可以设置，默认是本身内容的宽高度，里面只能装文本或其他行内元素。

3.行内块元素：一行可容纳多个（行内元素性特点），可设置宽高度（块元素特点）,里面各种显示模式的元素都可以装。
怪异盒子模型和标准盒子模型有什么区别？

答：

怪异盒子模型（box-sizing: border-box），也叫做内减盒模型，或者IE 盒子模型

内减盒子模型的宽度高度计算和标准盒子模型计算方式不同。

怪异盒子模型的 content 内容宽度会把 padding 和 border 算入其中，是由外而内的计算宽度。

怪异盒子模型当内减到负数的时候，那么表现形式和标准盒子模型差不多。
用代码实践下，重现兄弟标签元素垂直外边距合并问题和父子标签元素穿透合并的问题，并实践中解决它们？

答：重现兄弟标签元素垂直外边距合并问题是上元素的margin-bomtoon和下元素的margin-top产生了重叠部分

解决方法：分别设置margin和padding，就可以避免重叠

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

1.可以为父元素定义上边框。

2.可以为父元素定义上内边距。

3.可以为父元素添加 overflow:hidden。
块级元素怎么居中？和text-align居中有什么区别？

答：块级元素可以用：marigin-right: auto;margin-left: auto;进行居中。

区别：

1、margin: 0 auto只针对块级居中，对行内标签元素和行内块标签元素（含有inline）的无效。

2、父级加text-align: center ，对子级的文本或者行内标签元素和行内块标签元素（含有inline）进行居中，

对子级块级无效，由于继承性，子级块级如果没有重置text-align，子级块级孙子含有inline是有效的。
display:none和visibility：hidden有什么区别？用代码实践下。

答：disply:none是相当于元素直接删除，不仅不显示，原来的位置也没了；

visibility:hidden是不显示元素，是原来的位置还在，只是不显示内容了。