前端CSS3详细教程系列-01

leeming
181 阅读7分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

一、概述

1、什么是 CSS3
  • CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案。
2、CSS3 发展现状
  • 移动端支持优于 PC 端
  • W3C 仍然在对 CSS3 规范进行开发,不过，现代浏览器已经实现了相当多的 CSS3 属性支持
3、CSS3 主要模块
  • 选择器
  • 盒模型
  • 背景和边框
  • 文字特效
  • 多列布局
  • 2D/3D转换
  • 动画

二、新增选择器

1、属性选择器
选择器说明
element[属性名]匹配具有该属性的元素
element[属性名="value"]匹配属性值等于value的元素
element[属性名^="value"]匹配属性值以value开始的元素
element[属性名$="value"]匹配属性值以value结尾的元素
element[属性名*="value"]匹配属性值中含有value的元素

代码演示

html:

<div id="one">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="darkblue">div4</div>
<div class="lightblue">div5</div>
<div class="bluesky">div6</div>

css:

div[id] {
    color: pink;
}
​
div[class="bluesky"] {
    color: red;
}
​
div[class^="div"] {
    color: green;
}
​
div[class$="blue"] {
    color: darkblue;
}
​
div[class*="blue"] {
    font-weight: bold;
}
2、伪类选择器
选择器说明
element:first-child父元素中的第一个子元素
element:last-child父元素中的第一个子元素
element:nth-child(n)父元素中的第n个子元素
element:first-of-type指定类型元素的第一个
element:last-of-type指定类型元素的最后一个
element:nth-of-type(n)指定类型元素的第n个
  • nth-child选择父元素里面的第几个子元素，不管是元素类型
  • nth-of-type选择指定类型的元素

代码演示

html

<dl>
    <dt>title</dt>
    <dd>one</dd>
    <dd>two</dd>
    <dd>three</dd>
</dl>

css

dl dd:first-child {
     color: red;
}
​
dl dd:first-of-type {
    color: red;
}
3、伪元素选择器
选择器说明
element::before在元素内部的最前面插入内容
element::after在元素内部的最后面插入内容
  • before和after必须有content属性
  • before在内容前面，after 在内容后面
  • before和after创建的是一个元素，但是属于行内元素
  • 创建出来的元素在DOM中查找不到，所以称为伪元素
  • 伪元素和标签选择器一样，权重为 1

代码演示

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
​
.clearfix {
    *zoom: 1;
}

三、盒子模型

  • 语法：

    box-sizing: content-box | border-box;

    • border-box：设置元素宽高时包含content、padding、border

      • IE（怪异）盒模型（border-box）
      • IE6/5 是怪异模型，IE7开始是标准盒模型

    • content-box：设置元素宽高时只含content

      • W3C标准盒模型（content-box）

代码演示

div {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    margin:10px;
    padding: 20px;
    border: 5px solid red;
}

image-20201117042420452.png

四、圆角边框

  • 语法：

    border-radius:length;  

    • lenght可能以数值或百分比

    • 四个值: 左上角 右上角 右下角 左下角;

    • 三个值: 左上角 右上角和左下角 右下角;

    • 两个值: 左上角与右下角 右上角与左下角;

    • 一个值: 四个圆角值相同;

image-20201117030243263.png

代码演示

div {
    float: left;
    margin-left: 20px;
    width: 200px;
    height: 200px;
    background-color: skyblue;
}
​
div:nth-of-type(1) {
    border-radius: 20px 80px 140px 200px;
}
​
div:nth-of-type(2) {
    border-radius: 20px 80px 140px;
}
​
div:nth-of-type(3) {
    border-radius: 20px 140px;
}
​
div:nth-of-type(4) {
    border-radius: 20px;
}
  • 小技巧：
  • 正方形变圆形：border-radius:50%;
  • 长方形变椭圆形：border-radius:高度/2;

五、盒子阴影

  • 语法：

    box-shadow: 水平阴影(必需)  垂直阴影(必需)  模糊距离  阴影尺寸  阴影颜色    内/外阴影;

    • 默认为外阴影，可设置为内阴影（inset）

image-20201117025903035.png

代码演示

div {
    width: 200px;
    height: 100px;
    background-color: skyblue;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, .4);
}

六、文本阴影

  • 语法：

    text-shadow: 水平阴影(必需)  垂直阴影(必需)  模糊距离   阴影颜色;

image-20201117045839972.png

代码演示

h1 {
    color: pink;
    text-shadow: rgba(255, 0, 0, 0.8) 3px 3px 5px;
}

七、文本换行

1、word-wrap

  • 语法：

    word-wrap: normal | break-word;
    • 规定中英文文本的换行规则
    • normal 只在允许的断字点换行（浏览器默认）
    • break-word 在长单词或 URL 地址内部进行换行
2、word-break

  • 语法：

    word-break: normal | break-all | keep-all;
    • 规定非中日韩文本的换行规则
    • normal 使用浏览器默认的换行规则
    • break-all 允许在单词内换行。
    • keep-all 只能在半角空格或连字符处换行

八、背景

1、background-size

  • 语法：

    /* 宽度100px, 高度自适应 */
background-size:100px; 
​
/* 宽度自适应，高度100px */
background-size:auto 100px;  
​
/* 宽度200px ,高度100px */
background-size:200px 100px;
    • background-size指定背景图像的大小。
    • CSS3以前，背景图像大小由图像的实际大小决定
2、background-origin

  • 语法：

    background-origin:padding-box | border-box | content-box;

    • 指定background-position属性的相对位置

      • background-attachment值为fixed时则该属性失效

    • padding-box 背景图像填充框的相对位置（默认）

    • border-box 背景图像边界框的相对位置

    • content-box 背景图像内容框的相对位置

3、background-clip

  • 语法：

    background-clip:padding-box | border-box | content-box;

    • 指定背景图像绘制区域

    • border-box 背景绘制在边框方框内（默认）

    • padding-box 背景绘制在内填充方框内

    • content-box 背景绘制在内容方框内

      div {
width: 200px;
height: 200px;
padding: 50px;
font: bold 20px Microsoft Yahei;
color: yellow;
border: 20px solid rgba(0, 55, 55, .3);
background: url(a.jpg) no-repeat;
background-size: auto 300px;
background-origin: padding-box;
background-clip: padding-box;
}

      image-20201117052045767

image-20201117052045767.png

九、多列布局

属性名说明
column-count指定元素应该被分割的列数
column-width指定列的宽度
columns设置 column-width 和 column-count 的简写
column-gap指定列与列之间的间隙
column-rule-color指定两列间边框的颜色
column-rule-style指定两列间边框的样式
column-rule-width指定两列间边框的宽度
column-rule所有 column-rule-* 属性的简写
column-span指定元素要跨越多少列（一般针对标题进行设置）
column-fill指定如何填充列，默认为balance,可以改为auto

代码

html

<div class="article">
    <h3>生如夏花</h3>
    <div>
        生命，一次又一次轻薄过 轻狂不知疲倦 1 我听见回声，来自山谷和心间 以寂寞的镰刀收割空旷的灵魂 不断地重复决绝，又重复幸福 终有绿洲摇曳在沙漠 我相信自己 生来如同璀璨的夏日之花 不凋不败，妖冶如火 承受心跳的负荷和呼吸的累赘 乐此不疲 2 我听见音乐，来自月光和胴体 辅极端的诱饵捕获飘渺的唯美 一生充盈着激烈，又充盈着纯然 总有回忆贯穿于世间 我相信自己 死时如同静美的秋日落叶 不盛不乱，姿态如烟 即便枯萎也保留丰肌清骨的傲然 玄之又玄 3 我听见爱情，我相信爱情 爱情是一潭挣扎的蓝藻 如同一阵凄微的风
        穿过我失血的静脉 驻守岁月的信念 4 我相信一切能够听见 甚至预见离散，遇见另一个自己 而有些瞬间无法把握 任凭东走西顾，逝去的必然不返 请看我头置簪花，一路走来一路盛开 频频遗漏一些，又深陷风霜雨雪的感动 5 般若波罗蜜，一声一声 生如夏花之绚烂，死如秋叶之静美 还在乎拥有什么
    </div>
</div>

css

.article {
    width: 900px;
    height: 300px;
    padding: 10px;
    text-indent: 30px;
    line-height: 1.8em;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: lightyellow;
    columns: 260px 3;
    column-gap: 40px;
    column-fill: balance;
    column-rule: 1px gray dotted;   
}
​
h3 {
    text-align: center;
    column-span: all;
}

image-20201117052651048.png

  • 瀑布流布局

    • 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部

image-20201117032741990.png

    > 代码

    html

    ```
    <div class="box">
            <div>
                <img src="a.jpg" alt="">
            </div>
            <div>
                <img src="b.jpg" alt="">
            </div>
            <div>
                <img src="c.jpg" alt="">
            </div>
            <div>
                <img src="d.jpg" alt="">
            </div>
            <div>
                <img src="e.jpg" alt="">
            </div>
            <div>
                <img src="f.jpg" alt="">
            </div>
            <div>
                <img src="g.jpg" alt="">
            </div>
        </div>
    ```




    css

    ```
    .box {
        width: 740px;
        margin: 0 auto;
        columns: 240px 3;
        column-gap: 10px;
        column-fill: balance;
    }
    ​
    .box div img {
        width: 240px;
        border-radius: 10px;
        margin-bottom: 10px;
    }
    ```

十、粘滞定位

  • 语法：

    position:sticky;
    • 粘滞（粘性）定位是css定位新增属性
    • 粘滞定位可以说是static（静态定位） 和 固定定位fixed 的结合
    • 粘滞定位主要用在对 scroll 事件的监听上
    • 简单来说，在滚动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top：100px)，position:sticky这时的效果相当于fixed定位，元素就会固定到适当位置

  • 应用：

image-20201117033908048.png

> 代码

html

```
<div class="header">
    头部区域
</div>
<div class="menu">
    菜单栏
</div>
<div class="content">
    内容区域
</div>
```

css

```
* {
    margin: 0;
    padding: 0;
}
​
.header {
    width: 100%;
    height: 120px;
    background: pink;
}
​
.content {
    width: 1200px;
    height: 3000px;
    margin: 0 auto;
}
​
.menu {
    position: sticky;
    top: 0;
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: purple;
}
```

\
avatar
文章
阅读
粉丝