初学HTML/CSS：前端知识tips1

初学HTML/CSS：前端知识tips1

由于各种机缘巧合，最近开始慢慢地接触具体的前端知识。基础知识会慢慢积累慢慢更新，谢谢你的访问，希望我们可以一起进步！

1、div标签有什么作用？

标签可以将文档内容分割成独立的、不同的部分，它直接的视觉效果就是会自动地开启一个新行。对它所分割出来的区域添加class或者id的属性，赋予相应的样式，它的功能会明显地通过网页效果展现出来，即将网页分成不同的块状，并且有相应表现形式。它还常常作为网页结构严格的组织工具，有助于我们理清网页的模块布局，在盒子模型的构建中起着重要的作用。我们可以通过浏览器开发者工具查看它在盒模型中的应用，观察它是如何组成网页结构的。

2、span标签有什么作用？

标签用于定义行内的一个样式，本身并不会产生任何视觉效果。对它应用样式时，才会产生视觉上的变化。它可以将一行文本内容分割成一个个区域，常常对它们设置样式或用JavaScript处理，实现某种特定的效果。

3、什么是盒子模型？

学习参考文章：
https://blog.csdn.net/lIvecdsc/article/details/104466366
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model

盒子模型用来存放网页中的各种元素。网页当中的每一个元素都可以是一个盒子，拥有像盒子一样的外形和平面空间。如下图，最外层的大方框可以作为一个盒子，同时它里面的小方框(img和text框）也都可以作为一个盒子，设置它的宽、高、边距等属性。

标准的盒模型组成为：content(内容区)+content(元素的宽和高)+padding(填充区/内边距)+border(边界)+margin(外边距)。

接下来，是一些基本属性的理解。
如果没有定义这些属性的值，绝大多数情况下盒子会和父容器一样宽。而且，我们可以借助内边距（padding）、外边距（margin） 和 边框（border） 将其他元素从当前盒子周围“推开”。
height、width、border属性可以顾名知意，读者可以自己调试理解。下面将比较详细的理解一下padding和margin这两个属性。

（1）padding–对内容区元素的填充
作用：用来控制元素和内容区之间的位置关系，控制父元素和子元素之间的位置关系。
特点1：padding值会把元素原有的大小撑大，如果想让元素原本的大小不受到影响的话，需要在元素的宽高上减掉所加上的padding。
特点2：背景图片的位置是不受padding影响的。
特点3：背景色会延展到padding区域，所以常常用与父元素底色相同的背景色进行padding填充，改良元素的视觉效果。
使用方法：
方法一 ：
padding-top 上填充
padding-right 右填充
padding-bottom 下填充
padding-left 左填充

方法二：进行属性缩写
padding：值1 /填充的属性四个方向都为值1/
padding：值1 值2 /值1为上下 值2为左和右/
padding： 值1 值2 值3 /值1为上 值2为左右 值3为下/
padding： 值1 值2 值3 值4 /上、右、下、左填充/

（2）margin–盒子和其他元素之间的空白区域
作用：控制同辈元素之间的位置关系
使用方法：
方法一：
margin-top: 上外边距
margin-right: 右外边距
margin-bottom: 下外边距
margin-left: 左外边距

方法二：进行属性缩写
margin：1 /上右下左/
margin：1 2/值1上下 值2左右/
margin：1 2 3/值1上 值2左右 值 3下/
margin：1 2 3 4/值 1 上 值 2右 值3下 值4左/

实现水平居中：属性值auto，由浏览器计算外边距实现居中
例如，
margin：0 auto /上下外边距为0，左右居中/
margin-left:auto;
margin-right:auto;

*注意：margin值是可以写负数的，而padding不可以为负数。

缺陷：
1、上下的两个元素之间的margin值会重叠显示；谁的值大 就以谁的margin值来显示。

解决方法：
方法一：给父元素添加overflow：hidden； 推荐使用
方法二：给父元素和子元素添加浮动属性；
方法三：可以给父元素添加边框
方法四：把margin改成padding

接下来，是盒子模型的计算

对于一个标准盒模型，
所占位置的组成=宽高（content）+padding+border+margin
元素宽度占有的位置大小=宽+左右padding+左右border+左右margin
元素高度占有的位置大小=高+上下padding+上下border+上下margin

例如，
.box {
width: 350px;
height: 150px;
margin: 25px;
padding: 25px;
border: 5px solid black;
}

如果使用标准模型宽度 = 410px (即350 + 25 + 25 + 5 + 5)，高度 = 210px (即150 + 25 + 25 + 5 + 5)
一些特殊情况的盒模型（比如提交按钮）只设置width、margin，即所占空间的大小为：width（content+border+padding）+margin

我们可以通过浏览器开发者工具进行调试，便捷地判断盒子地大小是否符合预期。