H5-快速入门

块元素

常见的块元素
- h1~h6
- <p>
- <div>
- <ul>
- <ol>
- <li>
块元素特点
1. 比较霸道,独占一行
2. 高度、宽度，外边距以及内边距都可以控制
3. 宽度默认是(父级宽度)的100%
4. 是一个容器及盒子,里面可以放行内或者块级元素
注意
- 文字类的元素内不能使用块级元素
- <p> 标签主要用于存放文字,因此<p> 里面不能放块级元素,特别是<div>
- 同理,<h1>~<h6> 都是文字类块级标签,里面也不能放其他块级元素

行内元素

常见的行内元素
- <a>
- <strong>
- <b>
- <em>
- <i>
- <del>
- <s>
- <ins>
- <u>
- <span>
行内元素的特点
1. 相邻行内元素在一行上,一行可以显示多个
2. 高、宽直接设置是无效的
3. 默认宽度就是它本身内容的宽度
4. 行内元素只能容纳文本或其他行内元素

分析

`行内元素`直接设置的宽高无效	改变行内元素宽高

背景(背景颜色、背景图片)

背景颜色

1	background-color: transparent(默认透明) \| color(颜色值,可以是十六进制);

背景图片

1
2
3

background-image: url('使用绝对或相对路径');

background-repeat: repeat(默认平铺) | no-repeat(不平铺) | repeat-x(x平铺) | repeat-y(y平铺);

背景图片位置

/* 属性可以改变图片在背景中的位置  */ 
background-position: x y; 

x: 坐标
       可以使用方位名词或者精确单位
y: 坐标

参数是方位名词:
	1. 如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left,top 和 top left 效果一致

	2. 如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐

参数是精确数值:

	1. 如果参数值是精确坐标,那么第一个肯定是 x 坐标,第二个一定是 y 坐标 

	2. 如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中



background-attachment: scroll(背景图像是随对象内容滚动) | fixed(背景图像固定);

background-attachment: 属性设置背景图像是否固定或者随着页面的其余部分滚动，可以制作视差滚动效果


复合写法:

	background: 背景颜色 背景图片 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

效果

`background-attachment`

背景半透明

background: rgba(0,0,0,.2);

0 R
0 G
0 B
.2 alpha(0 ~ 1)

半透明

基本使用

1	background: 颜色背景图位置(x y)/大小(width height) 是否重复 background-attachment;

background-size 用于设置背景图大小
- auto 默认值,以背景图本身大小显示
- cover 缩放背景图,以完全覆盖铺满元素,可能背景图片部分看不见
- contain 缩放背景图,宽度或者高度铺满元素,但是图片保持宽高比
- length 具体的大小，比如100px
background-attachment
- scroll: 此关键属性值表示背景图相对于元素本身固定，而不是随着它的内容滚动
- local:此关键属性表示背景相对于元素的内容固定,如果一个元素拥有滚动机制,背景将会随元素的内容滚动
- fixed: 此属性值表示相对于视口固定,即使元素拥有滚动机制,背景也不会随着元素的内容滚动

复合写法

1	background: 背景颜色背景图片地址背景平铺背景滚动背景位置;

行内块元素

特殊元素
- <img>
- <input>
- <td>
它们同时具有块元素和行内元素的特点
行内块元素的特点
1. 和相邻行内元素(行内块)在一行上,但是他们之间会有空白间隙,一行可以显示多个(行内元素特点)
2. 默认宽度就是它本身内容的宽度(行内元素特点)
3. 高度、宽度、外边距以及内边距都可以控制(块级元素特点)

分析

行内块元素特点

盒子阴影

阴影

1	box-shadow: h-shadow v-shadow blur spread color insert;

值	描述
`h-shadow`	必需，水平阴影的位置,允许负值
`v-shadow`	必需,垂直阴影的位置,允许负值
`blur`	可选,模糊距离
`spread`	可选,阴影的尺寸
`color`	可选,阴影的颜色
`insert`	可选,将外部阴影改为内部阴影

行内非替换元素

Eg: span,a

padding:
	特殊: 上下会被撑起来,但是不占据空间
border: 
	特殊: 上下会被撑起来,但是不占据空间
margin:
	特殊: 上下的 margin 是不生效的

Eg:

<style>
    span {
        background-color: red;
        width: 100px;
        height: 100px;
        padding: 10px;
    }
    div {
        border: 1px solid green;
    }
</style>

<body>
    <span>test-shadow</span>
    <div>div元素内容</div>
</body>

不占据空间

表单

取消表单轮廓

1
2
3

input {
    outline: none;
}

取消文本域防止拖拽

1
2
3

textarea {
    resize: none;
}

效果

表单轮廓与拖拽

表格

table 表格
th(Tableheadercell) 表头单元格”的意思
tr (table row) 表格中的行
td (tabledatacell) 行中的单元格

表格边框

1
2
3

border-collapse: collapse; 表示相邻边框合并在一起

collapse: 合并的意思

`border-collapse: collapse`

案例

<style>
    table {
        text-align: center;
        /* 边框合并 */ 
        border-collapse: collapse;
    }
    /* 添加边框 */ 
    th,
    td {
        border: 1px solid #ccc;
        padding: 8px 16px;
    }

</style>

<table>
    <!-- 标题 -->
    <caption>热门股票</caption>
    <thead>
        <tr>
            <th>排名</th>
            <th>股票名称</th>
            <th>股票代码</th>
            <th>股票价格</th>
            <th>股票涨跌</th>
        </tr>
    </thead>
    <tbody>
        <!-- 一行五列  -->
        <tr>
            <td>1</td>
            <td>贵州茅台</td>
            <td>600519</td>
            <td>18000</td>
            <td>5%</td>
        </tr>
        <tr>
            <td>2</td>
            <td>贵州茅台</td>
            <td>600519</td>
            <td>18000</td>
            <td>5%</td>
        </tr>
        <tr>
            <td>3</td>
            <td>贵州茅台</td>
            <td>600519</td>
            <td>18000</td>
            <td>5%</td>
        </tr>
    </tbody>
</table>

表格

单元格合并

单元格合并

<style>
    table {
        text-align: center;
        border-collapse: collapse;
    }
    th,
    td {
        border: 1px solid #ccc;
        padding: 8px 16px;
    }
</style>
<body>
    <table>
        <caption>宣传栏</caption>
        <tbody>
            <tr>
                <td colspan="4">第一周常规检查</td>
                <td rowspan="2">通知通告</td>
                <td rowspan="2">光荣榜</td>
                <td rowspan="2">美术作品展览</td>
            </tr>
            <tr>
                <td>班级</td>
                <td>出勤</td>
                <td>纪律</td>
                <td>卫生</td>
            </tr>
            <tr>
                <td>高一1班级</td>

                <td></td>
                <td></td>
                <td></td>

                <td rowspan="5"></td>
                <td rowspan="5"></td>
                <td rowspan="5"></td>
            </tr>
            <tr>
                <td>高一1班级</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>高一1班级</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>高一1班级</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>高一1班级</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

案例练习

简介版小米侧边栏

高亮属性

清除内外边距

清除内外边距

jd

a {
    display: block;
    width: 70px;
    height: 15px;
    line-height: 15px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    padding: 8px;
    /* 去除下划线 */
    text-decoration: none;
    background-color: #e1251b;
    border-radius: 15px;
}

`jd` 新人福利

盒子阴影

div {
    width: 600px;
    margin: 20px auto;
}
div img {
    width: 200px;
    height: 260px;
}
div img:hover {
     /* 
    	offset-x: 0
    	offset-y: 5px
    	半径: 10px
    	扩散: 5px
    	颜色: #ccc
    */
    box-shadow: 0 5px 10px 5px #ccc;
}

盒子阴影

结构伪类

nth:child(2n)

n 代表任意正整数和 0
是父元素中的第偶数个元素
nth-child(even) 同义，odd(奇数)

基本使用

ul li:nth-child(odd) {
    color: red;
}

ul li:nth-child(even) {
    color: #000;
    font-weight: bold;
}

`nth-child()`

:nth-last-child 从最后一个子元素开始往前计数

nth-last-child(1),代表倒数第一个子元素

nth-last-child(-n+2) 代表最后两个子元素

`nth-last-child(-n+2)`

:nth-of-type 计数是只计算同种类的元素

<style>
    /* 元素:nth-of-type(n) 只计算符合 元素 类型的数量的元素   */
    .box > div:nth-of-type(3) {
        color: red;
    }
</style>


<div class="box">
    <div>我是列表1</div>
    <p>列表P</p>
    <div>我是列表2</div>
    <div>我是列表3</div>
    <p>列表P</p>
    <div>我是列表4</div>
    <div>我是列表5</div>
    <div>我是列表6</div>
    <div>我是列表7</div>
    <div>我是列表8</div>
    <div>我是列表9</div>
    <div>我是列表10</div>
</div>

排除干扰项选择同类型元素

border 图形

正方形

<style>
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    border: 50px solid orange;

    border-right-color: blue;
    border-bottom-color: aqua;
    border-left-color: blueviolet;

    box-sizing: border-box;
}

</style>

正方形

三角形

.box {
    width: 100px;
    height: 100px;
    border: 50px solid transparent;

    border-top-color: orange;
    box-sizing: border-box;
    
    /* 旋转 */
    transform-origin: center 25%;
    transform: rotate(180deg);
}

三角形

CSS代码风格

样式格式书写

紧凑格式

1	h3 {color: red;}

展开格式

1
2
3

h3 {
    color: red;
}

样式大小写

1
2
3

h1 {
    color: skyblue;
}

空格规范

1
2
3

div {
    font-size: 12px;
}

属性值前面,冒号后面,保留一个空格
选择器(标签)和大括号中间保留空格

CSS 书写顺序
1. 布局定位属性: display/position/float/clear/visibility/overflow(建议display 第一个写)
2. 自身属性: width/height/margin/padding/border/background
3. 文本属性: color/font/text-decoration/text-aligin/vertical-aligin/white-space/break-world
4. 其他属性(css3): content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradlient

Emmet语法

快速生成文字

1 2	<!-- 快速生成 5个随机单词的 10个 li --> ul>li*10>lorem5

随机文字生成

盒子模型

组成

盒子模型

边框

1	border: border-width \|\| border-style \|\| border-color;

外边距

margin 的其他值

`margin` 值的个数	例子	含义
`4`	`margin: 10px 20px 30px 40px`	`top:10,right:20,bottom:30,right:40`
`3`	`margin: 10px 20px 30px`	缺少`left`，`left` 使用`right` 的值
`2`	`margin: 10px 20px`	缺少`left`，使用`right` 的值,缺少`bottom` 使用`top` 的值
`1`	`margin: 10px`	`top/right/bottom/right` 都使用`10`

上下margin 的传递

margin-top 传递：如果块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top 值会传递给父元素

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: aquamarine;
    }
    .container {
        width: 50px;
        height: 50px;
        background-color: red;

        margin-top: 50px;
    }
</style>

<div class="box">
    <div class="container"></div>
</div>

解决前

解决方案

解决后(`padding-top`)

防止传递
- 给父元素设置 padding-top\padding-bottom
- 给父元素设置border
- 触发BFC：设置为overflow: auto
margin 和padding 的选择
- margin 一般用来设置兄弟元素之间的间距
- padding 一般用来设置父子元素之间的间距

上下margin 的折叠

<style>
    .box1 {
        background-color: #f00;
        height: 30px;

        margin-bottom: 20px;
    }
    .box2 {
        background-color: aqua;
        height: 30px;

        margin-top: 50px;
    }
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

比较两个 `margin`,选择较大的值

auto 居中原理

1	父元素的宽度 = 块级元素宽度 + margin-left + margin-right

`auto`

内边距padding

`padding`

嵌套块元素塌陷

问题还原

嵌套块元素塌陷

解决方案
- 可以为父元素定义上边框
- 可以为父元素定义上内边距
- 可以为父元素添加overflow:hidden

border-box

`border-box`

CSS3

模糊处理

/* filter 属性将模糊或颜色偏移等图形效果应用与元素 */
filter: 函数()

/* blur 模糊处理,数值越大越模糊 */
filter: blur(5px)

calc 函数

1	width: calc(1200px - 800px)

过渡(谁做过渡给谁加)

语法

1	transition: 要过渡的属性花费时间运动曲线何时开始;

属性分析
1. 属性: 想要变化的css 属性,宽度、高度、内外边距都可以,如果想要所有的属性都变化过渡，写一个all
2. 花费时间: 单位是秒(必须写)
3. 运动曲线: 默认是ease
4. 何时开始: 单位是秒(必须写单位) 可以设置延迟触发事件,默认是0s

进度条

渲染效果

进度条

分析

进度条实现分析

旋转属性

1	transform: rotate(45deg);

转换中心点

语法

1	transform-origin: x y;

案例

渲染效果

`rotate`

分析

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        overflow: hidden;
        width: 100px;
        height: 100px;
        margin: 50px auto;
        border: 1px solid red;
      }
      .box::before {
        content: 'coder-itl';
        display: block;
        width: 100%;
        height: 100%;
        background-color: skyblue;
        /* 旋转 180度 */
        transform: rotate(180deg);
        /* 旋转中心点 左下角 */
        transform-origin: left bottom;
        transition: all  .5s;

      }
      .box:hover::before {
        transform: rotate(0deg);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

2D 缩放

语法

/* x y 不带单位 是缩放倍数 */
transform: scale(x,y)

/* 等比缩放 */
transform: scale(number)

/* 缩小 */
transform: scale(0.5,0.5)

渲染

`scale`

源文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            float: left;
            overflow: hidden;
            margin: 10px;
        }

        div img:hover{
            transform: scale(1.2);
            transition: all .4s;
        }
    </style>
</head>
<body>
<div>
    <a href="#">
        <img src="imgInfo.png" alt="" width="200"></img>
    </a>
</div>

<div>
    <a href="#">
        <img src="imgInfo.png" alt="" width="200"></img>
    </a>
</div>
</body>
</html>

box-shadow

/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页 (阴影向内) | x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* 全局关键字 */
box-shadow: inherit; 
box-shadow: initial;
box-shadow: unset;

offset-x 水平方向的偏移,正数往右侧偏移
offset-y 垂直方向的偏移,正数往下偏移
blur-radius 模糊半径
spread-radius 延申半径
color: 阴影的颜色

文本阴影

`text-shadow: 2px 2px 2px red;`

translate 平移

/*
百分比参照:
	x: 参照自身宽度
	y: 参照自身高度
*/
transform: translate(50%, 50%);

scale 缩放
rotate 旋转
skew(ndeg) 倾斜

改变圆点

1 2	/* 可以使用方位词 */ transform-origin: 10px 20px;

transition 动画：控制动画速度

边框盒

1	box-sizing: border-box;

边框盒

旋转太极图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .taichi {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            border-radius: 50%;
            /* 上下两个不同颜色的标准圆 */
            background-image: linear-gradient(#fff 50%, #000 50%);
            margin: 100px auto;
            /* 旋转 */
            animation: rotate 3s linear infinite;
        }

        /* 定义关键帧 */
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        /* 鼠标移入暂停(paused)动画 */
        .taichi:hover {
            animation-play-state: paused;
        }

        .left,
        .right {
            float: left;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-image: radial-gradient(circle, #fff 25%, #000 25%);
            margin-top: 100px;
        }

        .right {
            background-image: radial-gradient(circle, #000 25%, #fff 25%);
        }
    </style>
</head>

<body>
    <!-- ::before、::after -->
    <div class="taichi">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

旋转太极图

浮动

浮动布局注意点
1. 浮动和标准的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
2. 一个盒子里面有多个盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止其他问题

清除浮动

为什么清除浮动

由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占位置，最后父级盒子高度为0 时,就会影响下面的标准盒子

清除浮动clear:left | right |both 子集元素添加

属性值	描述
`left`	不允许在左侧有浮动元素
`right`	不允许在右侧有浮动元素
`both`	同时清除左右两侧浮动的影响

父级添加清除浮动

overflow:hidden | auto | scoll(也叫触发 BFC)

::after 伪元素法(父元素添加)

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

/* IE6、7 */
.clearfix{
    *zoom: 1;
}

双伪元素清除浮动(父级元素添加)

.clearfix:before,
.clear:after{
    context: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom: 1;
}

将多个行内级元素中间的间隙去除

<style>
    .box span {
        /* 统一向一个方向浮动 */
        float: left;
        background-color: aqua;
    }
</style>

<body>
    <div class="box">
        <span>aa</span>
        <span>aa</span>
        <span>aa</span>
    </div>
</body>

分页列表

分页列表

body {
    background-color: #f2f2f2;
}

.box ul li {
    float: left;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    margin-left: 3px;
    list-style: none;
    text-align: center;
    background-color: #fff;
    border-radius: 3px;
}
.box ul li:hover {
    color: #fff;
    background-color: blue;
}

考拉

边框

<style>
    .box {
        width: 1000px;
        height: 600px;
        background-color: pink;
    }
    .box > div {
        float: left;
        border: 1px solid red;
        margin-left: -1px;
        text-align: center;
        width: 201px;
        height: 200px;
        line-height: 200px;
        background-color: orange;
        box-sizing: border-box;
    }

</style>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>

浮动引起的高度塌陷

问题

高度塌陷

clear: 可以指定一个元素是否必须移动(清楚浮动后)到它之前的浮动元素下面

取值

left: 要求元素的顶部低于之前生成的所有左浮动元素的底部

`clear:left`

right:要求元素的顶部低于之前生成的所有右浮动元素的底部
both: 要求元素的顶部低于之前生成的所有浮动元素的底部
none：默认值,无特殊要求

解决高度塌陷(推荐方案)

/* 伪元素:将类名 clear_fix 添加给浮动元素的父元素  */
.clear_fix::after {
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
.clear_fix {
    *zoom: 1;
}

解决高度塌陷

不规则环绕

属性shape-outside
使用前提: 图片必须是png
介绍

**shape-outside**的CSS 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。默认情况下，内联内容包围其边距框; shape-outside 提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。

案例实现

图片与文字间是以`圆`围绕

定位

相对定位relative

相对定位: 是元素在移动位置的时候,是相对于它原来的位置来说的

语法

1
2
3

选择器 {
    position: relative;
}

相对定位的特点

它是相对于自己原来的位置移动的(移动位置的时候参照点是自己原来的位置)

原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来的位置)

相对定位

绝对定位

绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的
- 绝对定位的特点
  1. 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位
  2. 如果祖先元素有定位(相对、固定、固定定位),则以最近一级的有定位祖先元素为参考点移动位置
  3. 绝对定位不再占有原先的位置(脱标)
子绝父相
1. 子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子
2. 父盒子需要加定位限制子盒子在父盒子内显示

固定定位

让固定定位的盒子left: 50% 走到浏览器可视区(也可以看作版心)的一半位置
让固定定位的盒子margin-left 版心宽度的一半距离,多走版心宽度的一半位置

效果

固定定位

定位的叠放次序

1
2
3

选择器 {
    z-index: 1;
}

特点
1. 数值可以是正整数,负整数或0，默认是auto，数值越大,盒子越靠上
2. 如果属性值相同,则按照书写顺序,后来居上
3. 数字后面不能添加单位
4. 只有定位的盒子才有z-index 属性

绝对定位

`position: absolute;`

<style>
.box {
    position: relative;
    width: 100%;
    height: 600px;
    background-color: skyblue;
}

.container {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 400px;
    height: 400px;
    background-color: aqua;
}
.container img {
    position: absolute;
    left: 0;
    bottom: 0;
}
</style>

<body>
    <div class="box">
        <div class="container">
            <img src="img/bg.jpg" alt="" />
        </div>
    </div>
</body>

设置为absolute | fixed 元素的特点

可以设置宽高
宽高默认由内容决定
不在受标准流约束
- 不再严格按照从上到下,从左到右排布
- 不再严格区分块级、行内级很多特性消失

不再给父元素汇报宽度

<style>
.box {
    background-color: red;
}

strong {
    position: absolute;
}

</style>

<div class="box">
    <strong>我是strong元素内容</strong>
</div>

父容器未能显示红色背景

脱标元素内部默认还是按照标准流布局

定位元素的垂直居中

定位元素的垂直居中

/* 不存在兼容性 */ 
.box {
    position: relative;
    width: 600px;
    height: 400px;
    background-color: red;
}

.container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;

    width: 200px;
    height: 200px;
    background-color: black;
}

/*
对于决对定位元素来说:
	1. 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际宽度
	2. 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际高度
*/

粘性定位(sticky)

兼容性: https://caniuse.com/

<style>
.box p {
    position: sticky; /* ['stɪkɪ]  */
    top: 0;
    background-color: red;
}
</style>
<body>
        <h1>标题</h1>
        <div class="box">
            <p>固定导航</p>
            <ul>
                <li>列表1</li>
                <li>列表2</li>
                <li>列表3</li>
                <li>列表4</li>
                <li>列表5</li>
                <li>列表6</li>
                
                ....

sticky 是相对于最近的滚动祖先包含滚动视口的

	脱离标准流	定位元素	绝对定位元素	定位参照对象
`static` 静态定位	❌	❌	❌	❌
`relative` 相对定位	❌	✅	❌	元素自己原来的位置
`absolute` 绝对定位	✅	✅	✅	最邻近的定位祖先元素(如果找不到这样的祖先元素,参照对象是视口)
`fixed` 固定定位	✅	✅	✅	视口

遮罩层实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .mask {
            position: fixed;
            /* 视口 */
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .5);
        }

        .content {
            /* ************ 定位实现垂直居中 ************* */
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            /* ********************************************* */
            width: 400px;
            height: 500px;
            background-color: #fff;
            border-radius: 5px;
        }

        .content::before {
            display: inline-block;
            position: absolute;
            right: -25px;
            top: -25px;
            content: "X";
            width: 50px;
            height: 50px;
            line-height: 50px;
            border-radius: 50%;
            background-color: #fff;
            box-sizing: border-box;
            color: red;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="mask">
        <div class="content">

        </div>
    </div>
</body>

</html>

字体

web 字体

兼容性写法

/* 1. 下载字体 */
@font-face {
    font-family: 'IBM-Courier-Bold';
    /* 2. 测试非商用  引入 */ 
    src: url('https://cdn.jsdelivr.net/gh/lovobin/globalfont@v0.0.2/JackInput.ttf') format("truetype");
    font-style: normal;
    font-weight: normal;
}

/* 3. 使用字体 */
body {
    font-family: 'IBM-Courier-Bold';
}

/* format: 用于帮助浏览器快速识别字体的格式 */
/* 复合写法 */
body {
    /* 顺序不允许颠倒 */
    font: font-style font-weight font-size/line-height font-family;
}

字体图标

https://www.iconfont.cn/

<style>
	@import url('//at.alicdn.com/t/c/font_3481099_qhu56t5gl7s.css');
</style>

<body>
    <div class="iconfont icon-baojing">itl 中文数据</div>
    <i class="iconfont icon-baojing"></i>
</body>

字体图标

单行字体换行处理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        div {
            width: 400px;
            overflow: hidden;
            /* 用于设置空白处理和换行规则  nowrap: 不换行 */
            white-space: nowrap;
            /* ... 显示 */
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div>
        急用稿件，优先安排，当天出稿，个别客户因用稿时间比较急，可与客服在交稿时间上进行商定，可优先安排或者加班安排以保证用稿的及时性。 正常出稿时间一般几千字文章3天均可出稿，
    </div>
</body>

</html>

文字换行处理

特殊样式

div::before {
    content: "2021-09-12";
    width: 100px;
    height: 50px;
    border-radius: 50px 0;
    padding: 10px;
    background-color: orangered;
}

特殊图形

圆形

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div::after,
        div::before {
            /* 必须添加 display: block */
            display: block;
            content: "2022-12-09";
            /* 下半圆 */
            width: 200px;
            /* 高度为 width / 2 比较合适 */
            height: 100px;
            line-height: 100px;
            text-align: center;
            color: rgba(224, 223, 223, .9);
            /* border-radius 接近高度视为视觉正圆 */
            border-radius: 0 0 100px 100px;
            background-color: orangered;
        }

        div::after {
            content: "无";
            /* 数值改变半圆方向 */
            border-radius: 100px 100px 0 0;
            background-color: rgb(54, 23, 23);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

绘制半圆

精灵图

快速获取精灵图位置

http://www.spritecow.com/

基础使用

div {
    background-color: #333;
}
.sprite {
    background: url('../img/topbar.png') no-repeat 0 -19px;
    width: 157px;
    height: 33px;
    display: inline-block;
}

精灵图使用

弹性盒模型

浏览器认识

浏览器认识

flex 介绍

flex 是flexible Box 的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex 布局
注意
- 当我们为父盒子设为flex 布局以后,子元素的float,clear和 vertical-align 属性将失效
- 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局
布局原理

采用flex 布局的元素,称为flex 容器,简称容器,他们所有子元素自动成为容器成员,称为flex 项目,简称项目,原理就是通过给父盒子添加flex 属性,来控制子盒子的位置和排列方式

使用

坐标系

方向

未开启flex 之前

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            /* flex container */
            .box {
                /*  开启 flex 布局
                        flex: 块级元素
                        inline-flex: 行内元素
                */
                display: flex;
                width: 800px;
                height: 300px;
                margin: 50px auto;
                background-color: orange;

                justify-content: space-around;
            }
            /* flex-item 默认都是沿着 main axis(主轴) 从 main start 开始往 main end 方向排布 */
            .box div {
                line-height: 100px;
                text-align: center;
                font-size: 16px;
                color: #fff;
                width: 100px;
                height: 100px;
            }
            .box div:nth-child(1) {
                background-color: #f00;
            }
            .box div:nth-child(2) {
                background-color: skyblue;
            }
            .box div:nth-child(3) {
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div>item1</div>
            <div>item2</div>
            <div>item3</div>
        </div>
    </body>
</html>

未开启`flex`	开启后

flex-direction 决定了main axis(主轴方向) 的方向,有4 个取值

`row`（行）	`row-reverse`（行）	`column`（列）	`column-reverse`（列）

从`左`到`右`	从`右`到`左`	从`上`到`下`	从`下`到`上`

justify-content 决定了flex items 在main axis 上的对齐方式

flex-start(默认值): 与main start 对齐

`flex-start（flex container）`

flex-end: 与main end 对齐

`flex-end =>(main end)`

center: 居中对齐

`center`

space-between:

flex items 之间的距离相等

与 main start、main end 两端对齐

`space-between`（两端对齐,平分空白区域）

space-evenly:

flex items 之间的距离相等

flex items 与main start、main end 之间的距离等于flex items 之间的距离

`space-evenly`（元素之间的距离相等包含空白）

space-around:

flex items 之间的距离相等

flex items 与main start、main end 之间的距离是flex items 之间距离的一半

`space-around`(两侧距离变小,items 之间距离相等)

align-items 决定了flex items 在cross axis 上的对齐方式

去除items高度时沿着交叉轴拉伸

normal: 在弹性布局中,效果和stretch 一样

`normal`

stretch: 当flex items 在cross axis 方向的size 为auto 时,会自动拉伸至填充flex container

`stretch`

flex-start: 与cross start 对齐

`flex-start`

flex-end: 与cross end 对齐

`flex-end`(无高度)	有高度

center：居中对齐

`center`(垂直居中)	`center`

baseline: 与基准线对齐

`baseline`	`baseline`(基线为第一行文本)

flex-wrap

nowrap: 默认情况下,所有的flex-items 都会在同一行显示

`nowrap`(不换行)

wrap

`wrap`

align-content 决定了多行flex items 在cross axis 上的对齐方式,用法语justify-content 类似
- stretch(默认值): 与align-items的stretch 类似
- flex-start：与cross start 对齐
- flex-end: 与cross end 对齐
- space-between:
  - flex items 之间的距离相等
  - flex items 与cross start、cross end 之间的距离是flex items 之间距离的一半
- space-evenly:
  - flex items 之间的距离相等
  - flex items 与cross start、cross end 之间的距离等于flex items 之间的距离

伪元素

::first-line 首行

1
2
3

.box::first-line {
    color: red;
}

::first-letter 首字母

1
2
3

.box::first-letter {
    color: red;
}

::before 和::after 用来在一个元素之前或之后插入内容(可以是文字图片)

常通过content 属性来为元素添加修饰性的内容

.box::before {
    content: 'abc';
    color: red;
}

.box::after {
    content: 'efg';
    color: red;
}

图片

.box::after {
    content: url("");
    color: red;
}

插入图片`content: url("")`

图片版心居中显示

方法一

分析

实现

<style>
    * {
        margin: 0;
        padding: 0;
    }

    div {
        /* 指定高度  */
        height: 489px;
        overflow: hidden;
        background-color: red;
    }

    div img {
        position: relative;
        transform: translate(-50%);
        margin-left: 50%;
    }
</style>


<body>
    <div>
        <img src="./img/bbg.png" alt="" />
    </div>
</body>

CSS中的函数

var 使用css 定义的变量
calc 计算css 值,通常用于计算元素的大小或位置
blur 毛玻璃(高斯模糊)效果

gradient 颜色渐变函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            /* 
                定义一个颜色变量:
                    颜色名称: --main-color
                    语法: --name: color-value
            */
            --main-color: orange;
        }

        div {
            /* 计算函数 */
            width: calc(200px - 98px);
            height: 200px;
            /* 高斯模糊 */
            filter: blur(2px);
            /* 使用变量 */
            background-color: var(--main-color);
        }

        p {
            width: 200px;
            height: 100px;
            background: linear-gradient(#e66465, #9198e5);
        }
    </style>
</head>

<body>
    <div>

    </div>

    <p></p>
</body>

</html>

BFC

FC: Formatting Context，元素在标准流里面都是属于一个FC 的
块级元素的布局属于Block Formatting Context(BFC)
行内级块元素属于Inline Formatting Context(IFC)
MDN 上以下情况会创建BFC
- 根元素html
- 浮动元素(元素的float 不是none)
- 绝对定位元素(元素的position 为absolute 或fixed)
- 行内块元素(元素的display 为inline-block)
- 表格单元格(元素的display 为table-cell)
- 弹性元素(display 为flex 或inline-flex)

作用

解决margin 的折叠问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            overflow: hidden;
        }
        
        .box1 {
            width: 200px;
            height: 200px;
            background-color: orange;
            margin-bottom: 30px;
        }

        .box2 {
            width: 200px;
            height: 200px;
            margin-top: 50px;
            background-color: red;
        }

        
    </style>
</head>

<body>
    <div class="box1"></div>
    <!-- 第二个 BFC -->
    <div class="container">
        <div class="box2"></div>
    </div>
</body>

</html>

解决浮动高度塌陷问题

BFC 的高度是auto 的情况下,是如下计算高度的(不声明高度,默认为auto)

如果只有inline-level，是行高的顶部和底部的距离
如果有block-level 是由最底层的块上边缘和最底层块盒子的下边缘之间的距离

如果有绝对定位元素,将被忽略

绝对定位元素

如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘

媒体查询

使用方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1. link  media -->
    <link rel="stylesheet" href="bgc1200.css" media="(max-width:1200px)">
    <style>
        /*  2. @import 结合媒体查询使用 */
        @import url("bgc.css")(max-width:800px);

        /* 3. @media(推荐)  */
        @media (max-width:1500px) {
            body {
                background-color: aqua;
            }
        }
    </style>

</head>

<body>
    <div class="box"></div>
</body>

</html>

具体使用

<!-- 公共样式 -->
<link rel="stylesheet" href="css/common.css">
<!-- 移动端 -->
<link rel="stylesheet" href="css/phone.css" media="screen and (max-width:768px)" />
<!-- ipad 端 -->
<link rel="stylesheet" href="css/ipad.css" media="screen and (max-width:992px) and (min-width:768px)" />

<link rel="stylesheet" href="css/pc.css" media="screen and (min-width:994px)" />

行高的取值

像素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            line-height: 35px;
        }

        .container .p1 {
            font-size: 12px;
        }

        .container .p2 {
            font-size: 40px;
        }
    </style>
</head>

<body>
    <div class="container">
        <p class="p1">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, ex!
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, ex!
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, ex!
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, ex!
        </p>
        <p class="p2">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, ex!
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, ex!
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, ex!
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, ex!
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, ex!
        </p>
    </div>

</body>

</html>

`line-height: 35px;`

em

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            /* 先计算像素值,再继承，container 未设置字体大小,默认使用浏览器设置的字体大小 */
            line-height: 2em;
        }

        .container .p1 {
            /* 
            	默认使用浏览器设置的字体大小 16 * 2 = 32px
            	此时使用的行高等价于 再此处添加了一个 line-height: 32px; 的行高
            */
            
            font-size: 12px;
        }

        .container .p2 {
            font-size: 40px;
        }
    </style>
</head>

<body>
    <div class="container">
        <p class="p1">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, ex!
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, ex!
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, ex!
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, ex!
        </p>
        <p class="p2">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, ex!
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, ex!
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, ex!
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, ex!
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum, ex!
        </p>
    </div>

</body>

</html>

`em`

数值

1 2	/* 先继承、后计算行高为字体大小的 2 倍 */ line-height: 2;

会自动计算出合适的字体大小所需要的行高

布局

两栏布局

实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clearfix::after {
            display: block;
            content: "";
            clear: both;
        }

        .container {
            width: 1200px;
            margin: 0 auto;
            background-color: skyblue;
        }

        .aside {
            float: left;
            width: 300px;
            /*  */
            margin-right: 10px;
            background-color: pink;
        }

        .main {
            overflow: hidden;
            background-color: gray;
        }
    </style>
</head>

<body>
    <div class="container clearfix">
        <div class="aside">
           
        </div>
        <div class="main">
           
        </div>
    </div>
</body>

</html>

三栏布局

实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }

        .container {
            padding: 10px;
            border: 3px solid;
            min-width: 800px;
        }

        .container .left {
            float: left;
            width: 300px;
            background-color: lightblue;
        }

        .container .right {
            float: right;
            width: 300px;
            background-color: lightblue;
        }

        .container .center {
            overflow: hidden;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <div class="container clearfix">
        <aside class="left">
           
        </aside>
        <aside class="right">
           
        </aside>
        <main class="center">
           
        </main>

    </div>
</body>

</html>

侧边栏等高

伪实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clearfix::after {
            display: block;
            content: "";
            clear: both;
        }

        .container {
            width: 1200px;
            margin: 0 auto;
            background-color: skyblue;
        }

        .aside {
            float: left;
            width: 300px;
            /*  */
            margin-right: 10px;
            /* TODO: 1. 给高度一个较大的值 */
            height: 10000px;
            /* 实际: 10000 + (-9990) = 10 */
            margin-bottom: -9990px;
            overflow: hidden;
        }

        .main {
            overflow: hidden;
            background-color: gray;
        }
    </style>
</head>

<body>
    <div class="container clearfix">
        <div class="aside">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius consequuntur a necessitatibus sit quae, iure
            animi in, placeat asperiores molestias laudantium repellendus repellat itaque non quis ad doloremque
            pariatur? Ea.
        </div>
        <div class="main">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis expedita doloribus omnis ex sapiente
            aspernatur officiis quibusdam! Velit placeat possimus quasi porro harum expedita voluptate error sapiente
            nam! Facere, libero?
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis expedita doloribus omnis ex sapiente
            aspernatur officiis quibusdam! Velit placeat possimus quasi porro harum expedita voluptate error sapiente
            nam! Facere, libero?
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis expedita doloribus omnis ex sapiente
            aspernatur officiis quibusdam! Velit placeat possimus quasi porro harum expedita voluptate error sapiente
            nam! Facere, libero?
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis expedita doloribus omnis ex sapiente
            aspernatur officiis quibusdam! Velit placeat possimus quasi porro harum expedita voluptate error sapiente
            nam! Facere, libero?
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis expedita doloribus omnis ex sapiente
            aspernatur officiis quibusdam! Velit placeat possimus quasi porro harum expedita voluptate error sapiente
            nam! Facere, libero?
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis expedita doloribus omnis ex sapiente
            aspernatur officiis quibusdam! Velit placeat possimus quasi porro harum expedita voluptate error sapiente
            nam! Facere, libero?
        </div>
    </div>
</body>

</html>

伪实现

后台管理页面布局

实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        .app {
            position: fixed;
            width: 100%;
            height: 100%;
        }

        .header {
            position: absolute;
            width: 100%;
            height: 60px;
            line-height: 60px;
            background-color: rgba(0, 0, 0, .5);
        }

        .header h1 {
            margin: 0;
            color: #fff;
        }

        .container {
            width: 100%;
            height: 100%;
            padding-top: 60px;
            box-sizing: border-box;
        }

        .container .left {
            float: left;
            width: 300px;
            height: 100%;
            background-color: #999;
        }

        .container .main {
            overflow: hidden;
            height: 100%;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="app">
        <header class="header">
            <h1>
                XXXX管理后台系统
            </h1>
        </header>
        <div class="container">
            <div class="left"></div>
            <div class="main"></div>
        </div>
    </div>
</body>

</html>