CSS盒模型-怪异盒模型笔记-思维导图-案例等

一、盒模型（重点）

所有HTML元素可以看作盒子。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

我们把 padding 和 margin 统一地称为内边距和外边距，边框内的空白是内边距，边框外的空白是外边距。

盒模型由5个属性组合而成。

用处：决定盒子的尺寸问题（盒子的所占空间或高矮胖瘦）。

1. width 宽度

   元素{width:400px;
   }
   //假设不写宽度会怎么用
   1. 块级元素默认是100%的宽，即父盒子有多宽，它就有多宽
   2. 行内元素默认就是内容的宽，即内容有多宽，它就有多宽默认是不支持width属性，即无法设置
   

2. height 高度

   元素{height:400px;
   }
   //假设不写高度会怎么用
   1. 块级元素默认是没有高度
   2. 行内元素默认就是内容的高，即内容有多高，它就有多高默认是不支持height属性，即无法设置
   

3. padding 内间距（重点）

   内间距会影响盒子的宽高，即让它变大。

   大部分元素默认都没有填充（内间距）。

   内间距：指的是盒子的内容与边框的间距（4个边都有内间距）

   1.块级有效2.行内有效内间距有4种写法：
   1.取一个值
   padding:20px;
   /上右下左都是20px/2.2个值
   padding:20px 10px;上下  右左3.3个值
   padding:10px 15px 20px;上   左右   下4.4个值
   padding:10px 5px 15px 20px;	上   右    下  左----padding是复合写法----可以拆分为单独的写法
   注意：如果拆分了，则只能写一个值。
   padding-top:10px;
   padding-right:10px;
   padding-bottom:5px;
   padding-left:15px;
   

4. 边框

   边框默认是没有的,一个盒子可以有4条边框

   边框也会影响盒子的总宽和总高

   border:边框粗细  边框风格  边框颜色;
   border:1px solid  red;
   边框风格：实线（solid）、虚线（dashed）、点（dotted）、双实线（double）border:1px solid  red; 	表示4中边框都是一样的；
   如果要让每个边框都不一样：学了边框后，水平线标签就可以不用了
   border-方向词:边框粗细  边框风格  边框颜色外间距有4种写法：
   同内间距
   

5. 外间距

   盒子与盒子之间的间距即为外间距

   不会影响到盒子的尺寸。

   取值同内间距

   大部分元素默认都没有margin

   1.块级有效2.行内左右有效，上下无效

6. 盒模型的计算公式(重要)

   总宽= width+左右padding+左右border;
   总高= height+上下padding+上下border;
   

7. 哪些元素默认有外间距、内间距

   1. 有外间距的元素
   h1~h6,p,body
   2. 有内间距的元素
   ul,ol等为了不影响自己写代码，一般会将默认的这些外间距和内间距统一设置为0
   也就是默认的外间距、内间距会干扰自己算盒模型
   

二、怪异盒模型

改变了盒模型的计算尺寸的方式。

   公式：总宽=width总高=height如果添加了padding和border，则会自动扣除，收缩-----默认是正常的盒模型，如果要启用怪异盒模型，则需要写一行代码----选择器{box-sizing:content-box(默认值)|border-box(启用了怪异和模型);}

怪异盒模型的好处：

1. 不需要理会复杂的盒模型的方式了
2. 现代浏览器和移动端可以大胆放心的使用，而且是主流的方式

三、块级元素和行内元素区别汇总

1. 行内元素同一行水平排列。
2. 块级元素各占据一行，垂直方向排列。
3. 块级元素可以包含行内元素和块级元素。行内元素不建议包含块级元素，除非转为块级
4. 行内元素与块级元素属性的不同，主要是盒模型属性上。
5. 行内元素设置width无效，height无效(可以设置line-height)，margin上下无效

四、块级元素和行内元素的转换(显示方式)||元素的显示和隐藏

功能：可以通过 display 属性修改元素框的显示方式

取值：

• none:不显示元素(隐藏)，相当于消失不见
• block : 让元素像块级一样显示使用场合：将行内元素改变成块级元素
• inline(默认):此元素会被显示为内联元素，可以对块状元素进行设置，让它变成行内元素
• inline-block : 让元素显示的为行内块，本身是行内元素：一行内能够显示多个。具备块级元素特点：允许改宽和高

可以通过修改样式display属性改变元素是以块级还是行内元素呈现，当display的值设为block时，元素将以块级方式呈现；当display值设为inline时，元素将以行内形式呈现。

举例：

<!--HTML结构-->
<div><a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a><a href="#">链接4</a><a href="#">链接5</a>
</div>
<!--CSS-->
<style type="text/css">a{border: 1px solid red;width: 100px;height: 35px;/*转为行内块级*/display: inline-block;margin: 10px;text-align: center;padding-top: 13px;}
</style>

技巧：

如果想让一个元素可以设置宽度高度，又让它以行内形式显示，我们可以设置display的值为inline-block

五、思维导图

六、笔记资料

如需本次课作业、笔记、案例等，请在下方+微获取。

---

如果你在web前端开发、面试、前端学习路线有困难可以在下方加我名片。

免费答疑，行业深潜多年的技术牛人帮你解决bug。

我可提供web前端开发，网站开发、技术咨询、答疑、直播讲座等服务

祝你能成为一名优秀的WEB前端开发工程师！