关于CSS的那些事

CSS简介

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


什么是文档流?

文档流的英文是 Normal Flow,其含义为文档内元素的流动方向,简单来说就是内联元素从左往右,块级元素从上往下流动。文档流中内联元素默认从左到右排列,宽度不够则自动换行;而文档流中块级元素从上到下排列,每个元素占一行。其中,float:leftposition:absoluteposition: 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
    其中 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;
}

相关推荐