CSS 元素显示模式与盒模型综合练习

Chrome 调试工具 -- 查看 CSS 属性

打开浏览器

有两种方式可以打开 Chrome 调试工具

直接按 F12 键
鼠标右键点击 => 检查元素

标签页含义

elements 查看标签结构
console 查看控制台
source 查看源码 + 断点调试
network 查看前后端交互过程
application 查看浏览器提供的一些扩展功能 (本地存储等)
Performance, Memory, Security, Lighthouse 暂时不使用，先不深究

elements 标签页使用

ctrl + 滚轮进行缩放，ctrl + 0 恢复原始大小.
使用左上角箭头选中元素
右侧可以查看当前元素的属性，包括引入的类.
右侧可以修改选中元素的 css 属性。例如颜色，可以点击颜色图标，弹出颜色选择器，修改颜色。例如字体大小，可以使用方向键来微调数值.
此处的修改不会影响代码，刷新就还原了～
如果 CSS 样式写错了，也会在这里有提示 (黄色感叹号)

元素的显示模式

在 CSS 中，HTML 的标签的显示模式有很多.此处只重点介绍两个:

块级元素
行内元素

块级元素

常见的元素:

h1 - h6

p

div

ul

ol

li...

特点:

独占一行
高度，宽度，内外边距，行高都可以控制.
宽度默认是父级元素宽度的 100%(和父元素一样宽)
是一个容器 (盒子), 里面可以放行内和块级元素.

html 复制代码

.demo1 .parent {
    width: 500px;
    height: 500px;
    background-color: green;
}

.demo1 .child {
    /* 不写 width, 默认和父元素一样宽 */
    /* 不写 height, 默认以 0 (看不到了) */
    height: 200px;
    background-color: red;
}

html 复制代码

</style>
<div class="demo1">
  <div class="parent">
    <div class="child">
      child1
    </div>
    <div class="child">
      child2
    </div>
  </div>
</div>

注意事项：

文字类的元素内不能使用块级元素
p 标签主要用于存放文字，内部不能放块级元素，尤其是 div

代码片段 2：

html 复制代码

<body>
  <p>
    <div>始</div>
  </p>
</body>

行内元素/内联元素

常见的元素

特点:

不独占一行，一行可以显示多个
设置宽度、高度无效
左右外边距有效，上下无效；内边距有效
默认宽度就是本身的内容
行内元素只能容纳文本和其他行内元素，不能放块级元素

html 复制代码

.demo2 span {
    width: 200px;
    height: 200px;
    background-color: red;
}

html 复制代码

<style>
</style>
<div class="demo2">
    <span>child1</span>
    <span>child2</span>
    <span>child3</span>
</div>

注意:

a 标签中不能再放 a 标签 (虽然 chrome 不报错，但是最好不要这么做).
a 标签里可以放块级元素，但是建议要先把 a 转换成块级元素.

行内元素和块级元素的区别

块级元素独占一行，行内元素不独占一行
块级元素可以设置宽高，行内元素不能设置宽高
块级元素四个方向都能设置内外边距，行内元素垂直方向不能设置

改变显示模式

使用 display 属性可以修改元素的显示模式.可以把 div 等变成行内元素，也可以把 a、span 等变成块级元素.

display: block 改成块级元素 (常用)
display: inline 改成行内元素 (很少用)
display: inline-block 改成行内块元素

盒模型

每一个 HTML 元素就相当于一个矩形的 "盒子"这个盒子由这几部分构成

边框 border
内容 content
内边距 padding
外边距 margin

边框

基础属性

粗细: border-width
样式: border-style（默认没边框，可选：solid实线边框、dashed虚线边框、dotted点线边框）
颜色: border-color

test

html 复制代码

div {
    width: 500px;
    height: 250px;
    border-width: 10px;
    border-style: solid;
    border-color: green;
}

支持简写，没有顺序要求：

复制代码

border: 1px solid red;

可以改四个方向的任意边框：border-top/bottom/left/right

以下的代码只给上边框设为红色，其余为蓝色。利用到的是border就近原则的生效。

复制代码

border: 1px solid blue;
border-top: red;

边框会撑大盒子

可以看到，width, height是 500*250，而最终整个盒子大小是 520 * 270，边框 10 个像素相当于扩大了大小。

通过 box-sizing 属性可以修改浏览器的行为，使边框不再撑大盒子。* 为通配符选择器。

复制代码

* {
    box-sizing: border-box;
}

内边距

padding 设置内容和边框之间的距离。

基础写法

默认内容是顶着边框来放置的，用 padding 来控制这个距离可以给四个方向都加上边距：

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

html 复制代码

<div>
    test
</div>

html 复制代码

div {
    height: 200px;
    width: 300px;
}

html 复制代码

div {
    height: 200px;
    width: 300px;
    padding-top: 5px;
    padding-left: 10px;
}

复合写法

可以把多个方向的 padding 合并到一起。[四种情况都要记住，都很常见]

padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px，左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px，左右内边距为 10px，下内边距为 20px
padding: 5px 10px 20px 30px; 表示上 5px，右 10px，下 20px，左 30px（顺时针）

控制台中选中元素，查看右下角，是很清楚的

外边距

基础写法

控制盒子和盒子之间的距离。可以给四个方向都加上边距：

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

html 复制代码

<div class="first">始始</div>
<div>呵呵</div>

html 复制代码

div {
    background-color: red;
    width: 200px;
    height: 200px;
}

.first {
    margin-bottom: 20px;
}

复合写法

规则同 padding

复制代码

margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10，左右 20
margin: 10px 20px 30px; // 上 10，左右 20，下 30
margin: 10px 20px 30px 40px; // 上 10，右 20，下 30，左 40

块级元素水平居中

前提:

指定宽度 (如果不指定宽度，默认和父元素一致)
把水平 margin 设为 auto

三种写法均可:

复制代码

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

示例:

html 复制代码

<div>始始</div>

复制代码

div {
    width: 500px;
    height: 200px;
    background-color: red;
    margin: 0 auto;
}

注意:

这个水平居中的方式和 text-align 不一样.

margin: auto 是给块级元素用得到.
text-align: center 是让行内元素或者行内块元素居中的.

另外，对于垂直居中，不能使用 "上下 margin 为 auto" 的方式.

去除浏览器默认样式

浏览器会给元素加上一些默认的样式，尤其是内外边距，不同浏览器的默认样式存在差别。为了保证代码在不同的浏览器上都能按照统一的样式显示，往往我们会去除浏览器默认样式。使用通配符选择器即可完成这件事情。

复制代码

* {
    margin: 0;
    padding: 0;
}

补充说明：

**为什么要这么做？**浏览器（比如 Chrome、Firefox）会给部分元素预设默认边距：
- 比如 <body> 有默认的 8px 外边距、<ul>/<ol> 有默认的左侧内边距、<p> 有默认的上下外边距等。
- 这些默认样式会干扰我们自己写的布局，导致不同浏览器显示效果不一致，所以第一步先 "清零"。
注意点：
- 这只是 "重置默认样式" 的基础操作，不是最终样式：清零后，你需要根据自己的布局需求，重新给元素设置 margin/padding。
- 实际开发中，也可以用更完善的重置样式库（比如 normalize.css），它会保留有用的默认样式，只统一不一致的部分，比直接 margin:0/padding:0 更友好。