CSS 总结

2019-10-09

一. 行元素 块元素

块级元素：独占一行，有宽高 div p h1 h2 h3 h4 ul li form table header footer pre

行内元素: 一行排列不换行，无宽高 a b br i span input select

行内块状元素： 不自动换行，能够识别宽高

二. 居中

  1. 绝对定位: position + transform: translate(-50%, -50%)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <div class="parent">
        <div class="child">绝对定位 + 转换</div>
    </div>
    <style>
        .parent {
            position: relative;
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
        }
        .child {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
        }
    </style>
  2. 弹性模型: display: flex; justify-content: center; align-items: center;
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <div class="parent">
        <div class="child">弹性模型</div>
    </div>
    <style>
        .parent {
            width: 400px;
            height: 400px;
            display: flex;
            /* 水平 */
            justify-content: center; 
            /* 垂直 */
            align-items: center;
            background: skyblue;
        }
        .child {
            width: 200px;
            height: 200px;
            background: pink;
        }  
    </style>
  3. 单元格方式: display: table-cell; vertical-align: middle;
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <div class="parent">
        <div class="child">单元格方式</div>
    </div>  
    <style>
        .parent {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            width: 400px;
            height: 400px;
            background: skyblue;
        }
        .child {
            display: inline-block;
            width: 200px;
            height: 200px;
            background: pink;
        }
    </style>

参考链接

三. 清除浮动

  1. 新加一个 <div>, clear:both; （不推荐）
  2. overflow: hidden; （不推荐）
  3. 使用 after 伪元素 清除浮动 （推荐使用）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }

四. relative: 相对， absolute: 绝对

五. 伪元素和伪类的区别

伪类只能使用 :
操作元素本身，如：:hover :first-child :focus

伪元素既可以使用 : 也可以使用 ::(CSS3 引入 ::)
操作元素的子元素，如：::before ::after ::content

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="test">test</div>
<style>
    .test{
        width: 100px;
        height: 100px;
        font-size: 40px;
    }
    .test::before{
        content: "/:strong";
        color: red;
    }
    .test::after{
        content: "/:strong";
        color:blue;;
    }
</style>
1
2
3
4
5
6
7
8
9
<span>222</span>    
<style>
    span:hover::before{
        content:"前";
    }
    span:hover::after{
        content:"后";
    }
</style>

————————————————- 20200527 更新 ————————————————-

六. 段落后面出现…

  1. 单行 text-overflow: ellipsis;
    1
    2
    3
    4
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;/*出现...*/
    white-space: nowrap; /*规定文本不进行换行*/
  2. 多行
    1
    2
    3
    4
    5
    width: 80px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

七. 加内外加距宽度不变

box-sizing: border-box

八. H5 标签有哪些，语义化布局好处

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

1
2
3
4
5
article：用于定义一篇文章
header：用于定义页面的头部
footer：用于定义页面的底部
nav：导航条链接
section：定义一个区域

好处：

  1. 有意义的标签使得页面结构化，即使去掉css样式页面也能以一种清晰的结构展现。
  2. 结构清晰，利于维护。
  3. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页。
  4. 通常语义化HTML会使代码变的更少，使页面加载更快。
  5. 有利于SEO（搜索引擎优化），语义化标签可以和搜索引擎建立良好沟通，有助于爬虫抓。
    ＜meta name="参数" content="具体的参数值"＞
    content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
    注: 5 可以不说
    html5语义化标签不会对SEO造成重大的影响，它并不会影响你的网站排名以及抓取。
    语义化标签主要是为了让搜索引擎更加的懂你，更加的明白你的网站。

九. 网页布局四种方式

  1. 静态布局：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分。

  2. 自适应布局：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。

  3. 流式布局：使用百分比定义宽度，高度大都是用px来固定，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。

  4. 响应式布局：媒体查询+流式布局。使用@media媒体查询和网格系统配合相对布局单位进行布局，就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。

    方式 描述
    静态布局 毫无灵活性可言，目前已逐渐被淘汰。
    自适应布局 静态布局的升级版，因其强大的灵活性，已逐渐成为高端网页的代名词。(media)
    流式布局 灵活性更高，可适用于其他三种网站布局。(100%)
    响应式布局 自适应布局的升级版，响应式网站要普遍适应市面上各类屏幕，开发难度和工作量都是非常大的，开发价格自然比普通网站高。(media+100%)

————————————————- 20200728 更新 ————————————————-

十. 标准盒模型、IE盒模型

标准盒模型:
width = width(内容（content）的宽度)

IE盒模型（也称为怪异盒模型）:
width = width内容（content）的宽度 + border + padding

十一. em 相对于父元素字体大小, rem 相对于根元素.

十二. BEM 命名规范

Block Element Modifier

十三. Pre

被包围在 pre 标签 元素中的文本通常会保留空格和换行符。

1
2
3
4
5
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>

十四. Sticky 属性: 固定头部

1
2
position: sticky;
top: 0;
CATALOG