百度前端技术学院--零基础--第五天和第六天：三种简历

本文链接：https://blog.csdn.net/m0_45317318/article/details/107432885

第五天和第六天：三种简历

课程目标
通过阅读及一个小型练习，掌握 CSS 盒模型及通过Float进行简单的布局

阅读
今天我们要学习非常重要的一些知识，这些知识会伴随着你的前端生涯.
首先我们先学习一下盒模型的概念

接下来我们了解一下浮动

阅读笔记
1.屏蔽盒和嵌入式盒
在CSS中，我们大致有两种类型的框- 块框和嵌入式框。这些特征指的是框在页面流方面的行为方式，以及与页面上其他框的关系：
如果将框定义为块，则它将以以下方式运行：

该框将换行。
该框将沿内联方向延伸以填充其容器中的可用空间。在大多数情况下，这意味着盒子将变得和容器一样宽，将占据100％的可用空间。
该 width和 height性能得到尊重。
填充，边距和边框将导致其他元素被推离盒子

除非我们决定将显示类型更改为内联，否则默认情况下，标题（例如<h1>）之类的元素<p>都将block用作外部显示类型。

如果框的外部显示类型为inline，则：

该框将不会换行。
在width和 height性质将不适用。
将应用垂直填充，边距和边框，但不会导致其他嵌入式框从框移开。
将应用水平填充，边距和边框，并将导致其他嵌入式框从框移开。

的<a>元件，用于链接，<span>，<em>和<strong>是时默认显示内联元件的所有实施例。

应用于元素的框的类型由display属性值（例如block和）定义inline，并且与的外部值有关display。

2.不同显示类型的示例
display句法
CSS display属性是使用关键字值指定的。关键字值分为六个值类别：

.container {
  display:  [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> ;
}

<display-outside>

这些关键字指定元素的外部显示类型，本质上是元素在流布局中的作用。
有效值 <display-outside> ：

block
该元素生成一个块元素框，在正常流中时在元素之前和之后都产生换行符。
inline
元素会生成一个或多个内联元素框，这些框不会在自身之前或之后产生换行符。在正常流动中，如果有空间，则下一个元素将在同一行上
run-in
元素生成一个插入框。如果定义为display: run-in box 的元素的相邻同级是一个block box，则该run-inbox成为其后的block box的第一个内联框。

磨合元素的作用类似于内联或块，具体取决于周围的元素。也就是说：如果磨合盒包含一个阻止框，则与阻止相同。如果插装盒紧随插入盒，则插装盒将成为插盒的第一个内联盒。如果紧接内联框，则插入框将成为阻止框。

3.什么是CSS盒子模型？

(1)盒子的一部分
在CSS中组成一个方块，我们有：

内容框：显示内容的区域，可以使用width和属性来调整大小height。
填充框：填充物围绕内容位于空白处；可以使用padding和相关属性控制其大小。
边框：边框用于包装内容和任何填充。可以使用border及其相关属性来控制其大小和样式。
边距框：边距是最外层，将内容，填充和边框包装为此框与其他元素之间的空白。可以使用margin及其相关属性来控制其大小。

下图显示了这些层：
在这里插入图片描述
(2)标准CSS盒子模型
标准框模型中，如果给框a width和一个height属性，则这将定义内容框的宽度和高度。然后，将任何填充和边框添加到该宽度和高度，以获取框占用的总大小。如下图所示。

如果我们假设盒具有以下CSS定义width，height，margin，border，和padding：

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

我们的盒子使用标准盒子模型占用的空间实际上将为410px（350 + 25 + 25 + 5 + 5），高度为210px（150 + 25 + 25 + 5 + 5），因为填充和边框为添加到用于内容框的宽度。
在这里插入图片描述

(2)替代CSS盒子模型
CSS在标准盒模型之后的一段时间推出了另一种盒模型。使用此模型，任何宽度都是页面上可见框的宽度，与上面使用的相同CSS将产生以下结果（宽度= 350px，高度= 150px）。
在这里插入图片描述
默认情况下，浏览器使用标准盒模型。如果要为元素打开替代模型，可以通过对其进行设置box-sizing: border-box来实现。通过这样做，您告诉浏览器将边框作为由您设置的任何大小定义的区域。

.box { 
  box-sizing: border-box; 
}

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

3.玩盒子模型
(1)使用浏览器DevTools查看盒子模型
浏览器开发人员工具可以使了解盒子模型变得更加容易。如果在Chrome的DevTools中检查某个元素，则可以看到该元素的大小以及其边距，边距和边框。以这种方式检查元素是一种很好的方法，可以确定您的盒子是否真的像您认为的大小！

菜单栏：

Firefox：菜单 ➤Web开发人员➤切换工具，或工具➤Web开发人员➤切换工具
Chrome：更多工具 ➤开发人员工具
Safari：开发➤显示Web检查器。如果您无法看到开发菜单，进入Safari浏览器➤首➤高级，并检查显示开发菜单栏菜单复选框。
Opera：开发人员➤开发人员工具

4.边距，填充和边框
(1)margin
边距是盒子周围的不可见空间。它将其他元素推离盒子。边距可以具有正值或负值。在框的一侧设置负页边距会导致其与页面上的其他内容重叠。无论您使用的是标准框模型还是替代框模型，总是在计算可见框的大小之后添加边距。

我们可以使用margin属性来一次控制元素的所有边距，或者使用等效的longhand属性来分别控制每一边：

margin-top
margin-right
margin-bottom
margin-left

(2)border
要分别设置每侧的属性，可以使用：

border-top
border-right
border-bottom
border-left

若要设置所有边的宽度，样式或颜色，请使用以下命令：

border-width
border-style
border-color

(3)padding
填充位于边框和内容区域之间。与边距不同，不能有负的填充量，因此该值必须为0或正值。应用于元素的任何背景都将显示在填充的后面，通常用于将内容推离边框。

我们可以使用padding属性分别控制元素每一侧的填充：

padding-top
padding-right
padding-bottom
padding-left

下图显示了这些层：
在这里插入图片描述
5.多列浮动布局
（1）两列布局

div:nth-of-type(1) {
  width: 48%;
  float: left;
}

div:nth-of-type(2) {
  width: 48%;
  float: right;
}

（2）三列布局

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

div:nth-of-type(1) {
  width: 36%;
  float: left;
}

div:nth-of-type(2) {
  width: 30%;
  float: left;
  margin-left: 4%;
}

div:nth-of-type(3) {
  width: 26%;
  float: right;
}

6.清除浮动

footer {
  clear: both;
}

clear 可以取三个值：

left：停止任何活动的左浮动
right：停止任何活动的右浮动
both：停止任何活动的左右浮动

验证
这两天的内容稍多，请反复确认你是否掌握了以下概念

盒模型的概念
规定了元素框处理元素内容、内边距、边框距和外边距的方式。
inline、block和inline-block的概念

block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。
2.大体来说HTML元素各有其自身的布局级别（block元素还是inline元素）：
常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
3.block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 P 元素，只能包含inline元素，而不能包含block元素。
4.一般来说，可以通过display:inline和display:block的设置，改变元素的布局级别。