一、块级标签与行内标签
块级标签(元素)
h1 - h6 p div ul ol li ...
行内标签(元素)
a strong b em i del s ins u span ...
块级标签与行内标签的区别与联系
① 一般来说，块级标签显示效果独占一行，行内元素不独占一行。
② 块级标签高度、宽度、内外边距…都是可以设置的，行内标签高度宽度…设置都是无效的，行内标签设置左右外边距有效，内边距有效，上下边距无效。
这是比较重要的一点，如果不注意这一点，在日常写代码的过程中，出现了设置行内标签样式这一错误，怎么找也找不出来。
③ 块级标签默认的宽度就是和父标签一样，行内标签默认宽度就是和本身内容相关，如果没有内容，宽度就是 0 了。
④ 块级标签的内部可以容纳其他块级标签和行内标签，行内标签的内部只能包含行内标签，不能包含块级标签。
展示1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo11</title> <style> .parent { width: 500px; height: 500px; background-color: green; } .child { /* 不写 width, 默认和父标签一样宽 */ /* 但是不写 height, 默认为 0 (看不到了) */ height: 200px; background-color: aqua; } </style> </head> <body> <div class="parent"> <div class="child"> child1 </div> <div class="child"> child2 </div> </div> </body> </html>
类选择器是 .clild，这对应的标签是 div ，也就是块级标签，所以显示结果是独占一行的。
展示结果：
展示2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo12</title> <style> .parent { width: 500px; height: 500px; background-color: green; } .child { height:200px; background-color: aqua; } </style> </head> <body> <div class="parent"> <span class="child"> child1 </span> <span class="child"> child2 </span> </div> </body> </html>
我们将 div 换成 span，结果显示不独占一行，这是连在一起的。
此外，在我们为 “span” 标签设置高度样式为 200px 的时候，我们发现，这并不起作用，原因就是 “span” 属于行内标签，无法设置高度样式，它的目的只是显示内容，但字体大小可以显自由设置。
展示结果：
display 属性的用法
display: block 改成块级元素 [常用] display: inline 改成行内元素 [很少用] display: inline-block 改成行内块元素
将行内标签转换成块级标签是比较常用的，因为许多块级标签可以设置的样式，在行内标签中是不可以设置的。
展示3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo13</title> <style> a { display: block; width: 300px; height: 100px; background-color: gray; } </style> </head> <body> <a href="#">链接1</a> <a href="#">链接2</a> <a href="#">链接3</a> <a href="#">链接4</a> </body> </html>
展示结果：
二、盒模型
盒模型的效果图：
1. border 边框
展示1
border-width: 边框宽度 border-style: 边框样式 border-color: 边框颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo1</title> <style> div { width: 400px; height: 200px; background-color:aquamarine; border-width: 10px; border-style: solid; border-color: red; } </style> </head> <body> <div>welcome to the world</div> </body> </html>
展示结果：
展示2
在展示1 中，div 标签的实际内容大小应为 400x200，但实际上，由于添加了边框，显示结果为 420x220. 这其实就是因为边框撑大盒子的缘故，如果需要取消这一现象，就可以使用如下代码：
* { box-sizing: border-box; }
展示结果：
展示3
另外，代码也可以使用如下形式，对于上下左右四个边框也能采取不同的格式与尺寸，这些都可以参照 CSS参考手册，进一步设置。
border: 10px solid green;
border-top: 10px double green; border-right: 10px double yellow; border-bottom: 10px solid red; border-left: 10px solid blue;
2. padding 内边距
展示1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo2</title> <style> div { width: 400px; height: 300px; background-color: aquamarine; padding: 10px; </style> </head> <body> <div>welcome to the world</div> </body> </html>
展示结果：
注意
① 在上面的展示结果中，我们发现直接使用内边距也会使得盒子撑大，此处的解决办法依然和解决 border边框的方式相同。
② padding 也可以使用如下写法，四个参数值的顺序是：上右下左 ( 顺时针 )，这个在 Chrome 浏览器中，当然也能够看到。
padding: 10px 15px 20px 25px;
3. margin 外边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo3</title> <style> div { width: 400px; height: 200px; background-color:aquamarine; margin-bottom: 50px; } </style> </head> <body> <div>welcome to the world</div> <div>hello world</div> </body> </html>
将外边距的底部设置为 50px，就可以实现两个标签之间的间隔效果，这个下面展示中体现了出来，当然，左右之间也能设置间隔。
展示结果：
注意
① 直接设置外边距的时候，没有类似于 border、padding 那样的撑大盒子的效果。
② 外边距和内边距的写法是一样的，也可以将上下左右的宽度设置为不同的值。
margin: 10px 20px 30px 40px;
4. 块级标签水平居中
可以对于某个块级标签使用如下代码，使得整个标签水平居中。
margin-left: auto; margin-right: auto;
展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo4</title> <style> .parent { width: 400px; height: 200px; background-color: gray; } .child { width: 100px; height: 50px; background-color:aquamarine; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: 50px; text-align: center; line-height: 50px; } </style> </head> <body> <div class="parent"> <div class="child"> hello world </div> </div> </body> </html>
展示结果：
注意
① 在上面使用代码的时候，将 margin-left 和 margin-right 设为 auto，即自动的意思，那么浏览器就会自动设置为水平居中的方式。但当我们将 margin-top 和 margin-bottom 设为 auto 的时候，结果却不会变成垂直居中。
② 这种 margin 设置的方式，是使得标签居中，我们需要将此方式与 text-align 和 line-height 区别开来，后者是文本的水平居中和文本的垂直居中。
5. 去除浏览器默认样式
在我们日常直接为某个标签设置样式的时候，这些样式是存在于 CSS 代码中的，但最终将代码展示在浏览器上，浏览器为了美观，也会自动设置一些样式，如下图所示：
展示结果：
用法
下面代码是一个较为典型的去除浏览器样式的方法，直接使用通配符，将所有的标签都去除这种默认样式。
* { margin: 0; padding: 0; box-sizing: border-box; }
展示结果：
注意：
这种通配符的方式并不会一刀切。也就是说，这种通配符的去除浏览器默认样式的方式，并不会影响我们自己写的代码中运用到相关的属性。
这其实是和 CSS 设置样式的覆盖和叠加有关：
多个选择器选中了一个元素， 若尝试给这个元素设置不同的样式，此时这些样式可能会叠加，最终呈现多种效果。 若尝试给这个元素设置相同的样式，此时这些样式就可能会覆盖，最终只呈现一种效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo5</title> <style> div { width: 400px; height: 200px; background-color:aquamarine; margin: 10px; } * { margin: 0; padding: 0; box-sizing: border-box; } </style> </head> <body> <div>hello world</div> </body> </html>
展示结果：
三、弹性布局
为什么要进行弹性布局
前端在进行网页布局的时候，本质上就是先一行一行的布局，然后再一列一列的布局。而块级元素就是一行一行排列的。因此，重点就是要解决一行之内的列之间的布局，接着就能解决多行的多列布局，从而就能将网页布局做好了。
弹性布局的使用
弹性布局的大前提是将 display 属性设置为 flex，而 flex 是 flexible box 的缩写，意为 “弹性盒子”。任何一个 html 标签，都可以指定为 【 display: flex 】来完成弹性布局。
在将 display 设置成 flex 后，就会破坏原有的块级标签和行内标签的规则，也就是说，任何一个 html 标签，都有被弹性布局的资格。
而大前提设置好后，又有两个常用属性：justify-content 和 align-items
justify-content: 设置主轴上的子标签的排列方式 (水平) align-items: 设置侧轴上的子标签排列方式 (垂直)
1. justify-content 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo6</title> <style> .aaa { width: 600px; height: 200px; background-color: gray; display: flex; justify-content: space-around; } .child { width: 90px; height: 40px; background-color: aquamarine; } .bbb { width: 600px; height: 200px; background-color: green; } </style> </head> <body> <div class="aaa"> <div class="child"> 卡布达 </div> <div class="child"> 卡布达巨人 </div> <div class="child"> 车轮滚滚 </div> </div> <div class="bbb">金龟次郎</div> </body> </html>
注意
如果我们需要将 .aaa 类的子标签进行弹性布局设置，必须在 .aaa 这个父级元素的选择器进行设置 【 display: flex; 】，而不是对其子类 .child 进行设置，这个和 margin 设置不同。
之后将水平布局设置为 space-around，此效果就是让标签之间产生了平均间隔的水平效果，还是较为美观的。至于其他的效果，小伙伴可以自己试一下。
展示结果：
2. align-items 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>demo7</title> <style> .aaa { width: 600px; height: 200px; background-color: gray; display: flex; justify-content: space-around; align-items: center; } .child { width: 90px; height: 40px; background-color: aquamarine; } .bbb { width: 600px; height: 200px; background-color: green; } </style> </head> <body> <div class="aaa"> <span class="child"> 卡布达 </span> <span class="child"> 卡布达巨人 </span> <span class="child"> 车轮滚滚 </span> </div> <div class="bbb">金龟次郎</div> </body> </html>
展示结果：
注意
① 将 align-items 属性设置为 center，这是常用的，也是较为推荐的垂直居中的办法。此外，align-items 和 jutify-content 这两个属性可以叠在一起用，可以产生很多不同的效果，小伙伴可以自己试一下。
② 在上面的代码中，我将 div 的子标签改为了 span 标签，可以看到，弹性布局，无关于块级标签或行内标签。
总结
CSS基础 到这里就结束了，总体来说，CSS 代码还是很多的。将 CSS代码 拆解开来，或许很简单，但一旦将 CSS代码组合起来，就比较难了，因为很多需要自己动手一遍遍的实践，否则就理解不了，更别提记住了。
