文章目录
- 一、盒模型（重点）
- 二、怪异盒模型
- 三、块级元素和行内元素区别汇总
- 四、块级元素和行内元素的转换(显示方式)||元素的显示和隐藏
- 五、思维导图
- 六、笔记资料
一、盒模型（重点）
所有HTML元素可以看作盒子。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
我们把 padding 和 margin 统一地称为内边距和外边距，边框内的空白是内边距，边框外的空白是外边距。
盒模型由5个属性组合而成。
用处：决定盒子的尺寸问题（盒子的所占空间或高矮胖瘦）。
-
width 宽度
元素{width:400px; } //假设不写宽度会怎么用 1. 块级元素默认是100%的宽，即父盒子有多宽，它就有多宽 2. 行内元素默认就是内容的宽，即内容有多宽，它就有多宽默认是不支持width属性，即无法设置 -
height 高度
元素{height:400px; } //假设不写高度会怎么用 1. 块级元素默认是没有高度 2. 行内元素默认就是内容的高，即内容有多高，它就有多高默认是不支持height属性，即无法设置 -
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条边框
边框也会影响盒子的总宽和总高
border:边框粗细 边框风格 边框颜色; border:1px solid red; 边框风格：实线（solid）、虚线（dashed）、点（dotted）、双实线（double）border:1px solid red; 表示4中边框都是一样的； 如果要让每个边框都不一样：学了边框后，水平线标签就可以不用了 border-方向词:边框粗细 边框风格 边框颜色外间距有4种写法： 同内间距 -
外间距
盒子与盒子之间的间距即为外间距
不会影响到盒子的尺寸。
取值同内间距
大部分元素默认都没有margin
1.块级有效2.行内左右有效，上下无效 -
盒模型的计算公式(重要)
总宽= width+左右padding+左右border; 总高= height+上下padding+上下border; -
哪些元素默认有外间距、内间距
1. 有外间距的元素 h1~h6,p,body 2. 有内间距的元素 ul,ol等为了不影响自己写代码，一般会将默认的这些外间距和内间距统一设置为0 也就是默认的外间距、内间距会干扰自己算盒模型
二、怪异盒模型
改变了盒模型的计算尺寸的方式。
公式：总宽=width总高=height如果添加了padding和border，则会自动扣除，收缩-----默认是正常的盒模型，如果要启用怪异盒模型，则需要写一行代码----选择器{box-sizing:content-box(默认值)|border-box(启用了怪异和模型);}
怪异盒模型的好处：
- 不需要理会复杂的盒模型的方式了
- 现代浏览器和移动端可以大胆放心的使用，而且是主流的方式
三、块级元素和行内元素区别汇总
- 行内元素同一行水平排列。
- 块级元素各占据一行，垂直方向排列。
- 块级元素可以包含行内元素和块级元素。行内元素不建议包含块级元素，除非转为块级
- 行内元素与块级元素属性的不同，主要是盒模型属性上。
- 行内元素设置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前端开发工程师！