CSS 引入方式

  1. 内联 style 属性
  2. 通过 <style> 元素
  3. <link> 元素引入外部 .css 文件
  4. @import

常用的清除浮动方式

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

需要给父级元素添加 clearfix 的 class。

文档流

文档流又称普通流。正常文档流指的是HTML文档元素在进行内容布局时所遵循的从左到右、从上到下的表现方式。

通俗讲，文档流是文档内元素的流动方向。内联元素从左往右流动，如果流动遇到阻碍，它就换行继续流。块级元素，每一块占一行，从上往下依次往下流。

脱离文档流

HTML中的大多数元素都处在正常的文档流中，而一个元素要脱离正常流的唯一途径就是浮动或定位。

  1. position:fixed;

  2. position:absolute;

  3. float

高度是由什么决定的

  1. 块级元素的高度由其内部文档流元素的高度总和决定。

  2. 内联元素的高度由字体决定，因字体而异。

box-sizing

默认情况下 box-sizing: content-box; ，可以根据情况改为box-sizing: border-box;

z-index

定义元素在Z轴上的位置，只在除了position: static 以外的已定位元素上生效。 默认值为 auto ，数值越大优先级越高从而遮盖其他元素，可设置为负值被其他元素遮盖。

居中

  1. vertical-align: middle; 使元素与父元素垂直居中。

  2. text-align: center; 使元素文本居中。

  3. line-height 和 font-size 一致时有时也能实现看起来接近的居中。

  4. margin 或 padding 的上下或左右为 auto。

一种用 CSS 画阴阳图案的方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        #yin-yang {
            width: 96px;
            height: 48px;
            background: white;
            border-color: black;
            border-style: solid;
            border-width: 2px 2px 50px 2px;
            border-radius: 50%;
            position: relative;
        }

        #yin-yang:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            background: white;
            border: 18px solid black;
            border-radius: 50%;
            width: 12px;
            height: 12px;
        }

        #yin-yang:after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            background: black;
            border: 18px solid white;
            border-radius:50%;
            width: 12px;
            height: 12px;
        }
    </style>
</head>
<body>
 <div id="yin-yang"></div>
</body>
</html>

一种用 CSS 画直角三角形的方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        #triangle{
            width: 0px;
            height:0px;
            border: 50px solid transparent;
            border-left-color: black;
            border-top-width: 0px;
        }
    </style>
</head>
<body>
 <div id="triangle"></div>
</body>
</html>

几种让元素看不见的方法

  1. display: none;

  2. visibility: hidden;

  3. opacity: 0;

  4. 设置盒模型所有属性为0

  5. overflow: hidden;

  6. 设置 top、right、bottom、left 为某些数值