关于CSS的那些事

时间 2019-12-13 标签关于 css 那些

CSS简介

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

什么是文档流？

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

内联元素

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

div高度由什么决定？

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

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

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

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

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

background-position:center center;

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

background-size:cover;

3 想要在页面上显示两个空格，应该怎么写代码？
在代码里写    才行。it

如何作横向布局？

当咱们想要让某些元素作横向布局时，咱们均可以用如下套路来实现：io

给全部想要在一行内的子元素加上float: left;属性

给全部父元素加上 clearfix 类
其中 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;
}