css 一行显示_关于CSS的那些事

CSS简介

---

想要制作出好看又高大上的网页，除了编写好HTML文件外，CSS的编写也必不可少。CSS的英文全称是Cascading Style Sheets，即层叠样式表。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。下面我来介绍一些关于CSS的小技巧。

什么是文档流？

---

文档流的英文是 Normal Flow，其含义为文档内元素的流动方向，简单来说就是内联元素从左往右，块级元素从上往下流动。文档流中内联元素默认从左到右排列，宽度不够则自动换行；而文档流中块级元素从上到下排列，每个元素占一行。其中，float:left、position:absolute、position: fixed 可以使元素脱离文档流。

内联元素

---

给 inline 元素设置宽高是没有任何效果的，但是为其设置 margin、padding都是有效果的。

div高度由什么决定？

---

div高度由其内部文档流元素高度总和决定，一旦元素脱离了文档流就不再计入div高度中。

content-box 与 border-box 的区别是什么？

---

border-box 的 width 包括 padding 和 border，而content-box 正好与之相反，其width 不包括 padding 和 border。

关于背景图片的那些小技巧

---

1、背景图片太大没办法居中显示怎么办？

background-position:center center;

2、想完整显示图片如何按比例缩放？

background-size:cover;

3、想要在页面上显示两个空格，应该怎么写代码？

在代码里写 才行。

如何做横向布局？

---

当我们想要让某些元素做横向布局时，我们都可以用以下套路来实现

1、给所有想要在一行内的子元素加上float: left;属性

2、给所有父元素加上 clearfix 类

3、其中 clearfix 类为：

 .clearfix::after{ content: ''; display: block; clear: both; }

CSS画三角形

---

下面我们将利用纯css来画一个三角形:

div{ border: 10px solid transparent; width: 0px; border-left-color: #e6686a; border-top-width: 0px;}

喜欢前端的小伙伴们可以在评论区留言，寻找和小冯童鞋一样热爱前端的友人，让我们一起玩转前端的世界！