CSS

一、CSS 单位

css 单位

%：百分比单位，相对于父元素（宽度，高度）的百分

px：像素单位，表示屏幕上的一个点

in：英寸单位，像素与英寸的转化与分辨率有关，分辨率是96,一英寸单位下，包含96个像素点

cm：厘米单位

1米等于100cm，

1英寸等于2.54cm

1厘米约包含37.78个像素点 96 / 2.54

mm：毫米单位， 1cm = 10mm

pt：磅单位

1磅等于1/72英寸

1磅包含 1.33个像素点 96 / 72

pc: 包含12个点活字

em：相对于字体的大小

容器宽度多大，要看容器的字体多大，比如text-indent:2em就是缩进2个字的距离

rem：相对于根元素字体的大小

容器多宽，与父元素和自身元素字体大小无关，与根元素字体大小有关

ex：表示相当于x-height的高度，

x-height指的是x字母的高度

vw : 1vw 等于视口宽度的1%

vh : 1vh 等于视口高度的1%

vmin : 选取 vw 和 vh 中最小的那个

vmax : 选取 vw 和 vh 中最大的那个

html {
    font-size: 30px;
}
body {
    font-size: 20px;
}
.box {
    height: 30px;
    margin-top: 10px;
    background-color: pink;
    font-size: 20px;
}
.box1 {
    width: 10%;
}
.box2 {
    width: 10px;
}
.box3 {
    width: 10in;
}
.box4 {
    width: 10cm;
}
.box5 {
    width: 10mm;
}
.box6 {
    width: 10pt;
}
.box7 {
    width: 10pc;
}
.box8 {
    width: 10em;
    font-size: 30px;
}
.box9 {
    width: 10rem;
    font-size: 30px;
}
.box10 {
    font-size: 40px;
    width: 10ex;
}
/* 正方形 */
.box11 {
    /* width: 50vw; */
    width: 10vw;
    height: 10vw;
}
.box12 {
    /* width: 50vh; */
    width: 10vh;
    height: 10vh;
}
.box13 {
    width: 10vmin;
    height: 10vmin;
}
.box14 {
    width: 10vmax;
    height: 10vmax;
}

二、格式化上下文

FC

FC的全称是：Formatting Contexts（格式化上下文），是W3C CSS2.1规范中的一个概念。它是页面

中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和

相互作用。

常见的FC有：

BFC（Block Formatting Contexts）：块级格式化上下文
IFC（Inline Formatting Contexts）：内联格式化上下文
GFC（GridLayout Formatting Contexts）：网格布局格式化上下文
GFC（Flex Formatting Contexts）：自适应格式化上下文

BFC

Block Formatting Context 叫做“块级格式化上下文”。BFC的布局规则如下：

内部的盒子会在垂直方向，一个个地放置；

盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；

每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；

BFC的区域不会与float重叠；

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；

计算BFC的高度时，浮动元素也参与计算。

会产生BFC的情况

根元素；
float的属性不为none；
position为absolute或fixed；
display为inline-block，table-cell，table-caption，flex；
overflow不为visible

IFC

IFC(Inline Formatting Contexts)直译为"内联格式化上下文"，IFC的line box（线框）高度由其包含行

内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)

IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。当float元素会位于IFC与与

line box之间的时候，会使得line box宽度缩短。同一个IFC下的多个line box高度会不同。 IFC中时不

可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个

IFC，每个IFC对外表现为块级元素，与div垂直排列。

水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-

align则可以使其水平居中。

垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，

其他行内元素则可以在此父元素下垂直居中。

二、CSS3

2.1 CSS3 概述

css3 一些改变：

选择器的增加、圆角、盒子阴影和文字阴影、盒模型、背景、变换、过渡、动画、弹性盒、媒体查

询。

使用 css3 不需要声明，和使用什么 html 骨架没有关系。css3 的属性直接使用。

css3 对于不认识的属性静默不报错（注意：不要出现语法错误）。

浏览器样式前缀：为了让CSS3样式兼容，需要将某些样式加上浏览器前缀：

-ms- 兼容IE浏览器

-moz- 兼容firefox

-o- 兼容opera

-webkit- 兼容chrome 和 safari

2.2 颜色表示法

CSS2.1中，我们表示红色：

color:red;
color:rgb(255,0,0);
color:#ff0000;
color:#f00;

CSS3新增了几个颜色表示法

rgba()表示法：a 表示 alpha 透明度，1 表示不透明，0 表示全透明。
与opacity相比：rgba设置透明不会影响子元素，opacity会影响子元素
hsl()表示法：h 色相、s 饱和度、l 明度
hsla()表示法：h 色相、s 饱和度、l 明度、a 透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: url(./images/bannerdz01.png) no-repeat;
            padding-left: 400px;
        }
        .box {
            width: 200px;
            height: 200px;
            /* css中不存在的样式 */
            ickt: hello;
            background-color: pink;
            /* 圆角 */
            /* chrome，safari */
            -webkit-border-radius: 50%;
            /* ff: firefox */
            -moz-border-radius: 50%;
            /* IE */
            -ms-border-radius: 50%;
            /* opera */
            -o-border-radius: 50%;
            border-radius: 50%;
            
        }
        .demo {
            width: 100px;
            height: 100px;
            background-color: green;
        }
        /* 透明度 */
        .box1 {
            background-color: rgba(200, 100, 50, 0.5);
        }
        /* opacity设置透明 */
        .box2 {
            opacity: 0.5;
        }
        /* hsl */
        .box3 {
            background-color: hsl(200, 50%, 50%);
            float: left;
        }
        .box4 {
            background-color: hsla(200, 50%, 50%, 50%);
            float: left;
        }
    </style>
</head>
<body>
    <div class="box box1">
        <div class="demo"></div>
    </div>
    <div class="box box2">
        <div class="demo"></div>
    </div>
    <div class="box box3"></div>
    <div class="box box4"></div>
</body>
</html>

2.3 CSS 选择器

CSS2 中的选择器：

通配符选择器，
标签选择器，
id选择器，
类选择器，
交集选择器，
并集选择器，
层级选择器

2.4 CSS3 中的属性选择器：

属性存在匹配：[key] （CSS2中出现）
属性值匹配： [key=”value”] （CSS2中出现）
开头完整单词匹配：[key|= "value"]

（注：以value-开头或只有value属性值的元素，CSS2中出现）
包含完整单词匹配：[key~= "value"]

（注：包含单个value单词的元素，CSS2中出现）
开头匹配：[key^= "value"]
结尾匹配：[key$= "value"]
包含匹配：[key*= "value"]

注意：属性选择器前可以是任何其它选择器，属性选择器可以连续使用，

如：img[alt][src $= "0.jpg"]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* img {
            border: 5px solid green;
        } */
        /* 属性存在 */
        /* img[alt] {
            border: 5px solid green;
        } */
        /* 属性值精确匹配 */
        /* img[alt="hello"] {
            border: 5px solid orange;
        } */
    </style>
</head>
<body>
    <img src="./images/gamepic2.jpg" alt="hello">
    <img src="./images/gamepic6.jpg" alt="ickt">
    <img src="./images/gamepic9.jpg" alt="hello">
    <img src="./images/gamepic10.jpg">
    <hr>
    <style>
        div {
            width: 100px;
            height: 100px;
            float: left;
            margin-left: 20px;
            border: 5px solid green;
            font-size: 20px;
        }
        /* hello开头 */
        /* 条件：完整的单词或者是-分割 */
        /* div[class|="hello"] {
            background-color: pink;
        } */
        /* 包含hello */
        /* 完整单词或者空格分割 */
        /* div[class~="hello"] {
            background-color: orange;
        } */
        /* hello开头 */
        /* div[class^="hello"] {
            background-color: pink;
        } */
        /* hello结尾 */
        /* div[class$="hello"] {
            background-color: orange;
        } */
        /* 包含hello */
        /* div[class*="hello"] {
            background-color: gold;
        } */
        /* 多个属性 */
        div[class*="hello"][data-ickt="msg"] {
            background-color: pink;
        }
    </style>
    <div class="hello">1 hello</div>
    <div class="hello ickt">2 hello ickt</div>
    <div class="ickt hello">3 ickt hello</div>
    <div class="helloickt">4 helloickt</div>
    <div class="ickthello">5 ickthello</div>
    <div class="hello-ickt">6 hello-ickt</div>
    <div class="ickt-hello">7 ickt-hello</div>
    <div class="hello_ickt">8 hello_ickt</div>
    <div class="ickt_hello">9 ickt_hello</div>
    <!-- 必须完整结尾 -->
    <div class="ickt_hello ">10 ickt_hello</div>
    <div class=" hello_ickt">11 hello_ickt</div>
    <div class=" hello_ickt" data-ickt="msg">12 hello_ickt</div>
</body>
</html>

2.5 儿子序列选择器

p:first-child 匹配同级元素中属于父元素下的第一个子元素（CSS2中出现）
p:last-child 匹配同级元素中属于父元素下的最后一个元素
p:nth-child(n) 匹配同级元素中属于父元素下的第n个元素

n 可以是关键字 odd奇数 even偶数

n 也可以是阿拉伯数字（1，2，3.....），

n 还可以是公式 an + m，如：(2n + 1)表示奇数，(2n) 表示偶数

(a和m可以是任意大于0的数字，n默认从0开始依次递增....)
p:nth-last-child(n) 匹配同级元素中属于父元素下的倒数第n个元素，n也是从倒数第一个开始。

注：儿子序列选择器受同级中其它元素的影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 儿子序列选择器 */
        /* p是第一个，可以选中 */
        /* p:first-child {
            background-color: pink;
        } */
        /* h3不是第一个，不能被选中 */
        /* h3:first-child {
            background-color: pink;
        } */
        /* .item:first-child {
            background-color: gold;
        } */
        /* 最后一个元素 */
        /* .item:last-child {
            background-color: gold;
        } */
        /* 偶数 */
        /* p:nth-child(even) {
            background-color: red;
        } */
        /* 奇数 */
        /* p:nth-child(odd) {
            background-color: green;
        } */
        /* 直接写序号 */
        /* p:nth-child(1) {
            background-color: green;
        } */
        /* 4个为一组，每组的第一个被选中 */
        p:nth-child(4n+1) {
            background-color: green;
        }
        /* n从0计数，5， 9， 13 */
        /* p:nth-child(4n+5) {
            background-color: green;
        } */
        /* p:nth-child(4n+9) {
            background-color: green;
        } */
        /* 从后面选择 */
        /* p:nth-last-child(4n+1) {
            background-color: pink;
        } */
        /* .item:nth-child(4n+1) {
            background-color: green;
        } */
    </style>
</head>
<body>
    <div>
        <div>div</div>
        <p class="item">1-1-1</p>
        <p class="item">2-2-2</p>
        <p class="item">3-3-3</p>
        <p class="item">4-4-4</p>
        <p class="item">5-5-5</p>
        <p class="item">6-6-6</p>
        <p class="item">7-7-7</p>
        <p class="item">8-8-8</p>
        <p class="item">9-9-9</p>
        <p class="item">10-10-10</p>
        <h3 class="item">1-1</h3>
        <h3 class="item">2-2</h3>
        <h3 class="item">3-3</h3>
        <h3 class="item">4-4</h3>
        <h3 class="item">5-5</h3>
    </div>
</body>
</html>

2.6 儿子类型选择器

h3:first-of-type 匹配同级元素中同种类型的第一个元素
h3:last-of-type 匹配同级元素中同种类型的最后一个元素
h3:nth-of-type(n) 匹配同级元素中同种类型的第n个元素，

n 可以是关键字 odd奇数 even偶数

n 也可以是阿拉伯数字（1，2，3.....），

n 还可以是公式 an + m，如：(2n + 1)表示奇数，(2n) 表示偶数

(a和m可以是任意大于0的数字，n默认从0开始依次递增....)
h3:nth-last-of-type(n) 在父元素中，选中倒数第n个该类型儿子

注意：这里的类型指的是选择器类型，如：标签名称，类名等等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 儿子类型选择器 */
        /* 不考虑其它类型元素 */
        /* 首先找出父容器中同类型的元素，然后从同类型元素中找出第一个元素 */
        /* p:first-of-type {
            background-color: orange;
        } */
        /* 考虑其它类型元素 */
        /* 直接在父容器中按照顺序找出第一个元素，发现不是p元素，没有选中 */
        /* p:first-child {
            background-color: green;
        } */
        /* 同类型最后一个 */
        /* p:last-of-type {
            background-color: green;
        } */
        /* 偶数个 */
        /* p:nth-of-type(even) {
            background-color: pink;
        } */
        /* 奇数个 */
        /* p:nth-of-type(odd) {
            background-color: pink;
        } */
        /* 第二个 */
        /* p:nth-of-type(2) {
            background-color: pink;
        } */
        /* 公式 */
        /* p:nth-of-type(4n+1) {
            background-color: pink;
        } */
        /* 从后面数 */
        /* p:nth-last-of-type(4n+1) {
            background-color: pink;
        } */
        .item:nth-of-type(4n+1) {
            background-color: orange;
        }
    </style>
</head>
<body>
    <div>
        <div>div</div>
        <div>div</div>
        <div>div</div>
        <p class="item">1-1-1</p>
        <p class="item">2-2-2</p>
        <p class="item">3-3-3</p>
        <p class="item">4-4-4</p>
        <p class="item">5-5-5</p>
        <p class="item">6-6-6</p>
        <p class="item">7-7-7</p>
        <p class="item">8-8-8</p>
        <p class="item">9-9-9</p>
        <p class="item">10-10-10</p>
        <h3 class="item">1-1</h3>
        <h3 class="item">2-2</h3>
        <h3 class="item">3-3</h3>
        <h3 class="item">4-4</h3>
        <h3 class="item">5-5</h3>
    </div>
    <!-- 每一个父容器寻找一次，彼此之间互不影响 -->
    <div>
        <div>div</div>
        <p class="item">1-1-1</p>
        <p class="item">2-2-2</p>
        <p class="item">3-3-3</p>
        <p class="item">4-4-4</p>
        <p class="item">5-5-5</p>
        <p class="item">6-6-6</p>
        <p class="item">7-7-7</p>
        <p class="item">8-8-8</p>
        <p class="item">9-9-9</p>
        <p class="item">10-10-10</p>
        <h3 class="item">1-1</h3>
        <h3 class="item">2-2</h3>
        <h3 class="item">3-3</h3>
        <h3 class="item">4-4</h3>
        <h3 class="item">5-5</h3>
    </div>
</body>
</html>

2.7 关系选择器

> 子级选择器（只能选中儿子节点）
+ 后面第一个亲兄弟
~ 后面所有的亲兄弟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 渲染容器中的儿子p元素 */
        /* 儿子关系 */
        .container > p {
            background-color: pink;
        }
        /* 紧挨着的，后面第一个兄弟 */
        /* .demo + div {
            background-color: green;
        } */
        /* .demo + h3 {
            background-color: green;
        } */
        /* .demo + .item {
            background-color: green;
        } */
        /* 后面所有亲兄弟 */
        .demo ~ .item {
            background-color: gold;
        }
</style>
</head>
<body>
    <div class="container">
        <p class="item">p-1-1</p>
        <p class="item">p-2-2</p>
        <p class="item">p-3-3</p>
        <p class="item">p-4-4</p>
        <p class="item">p-5-5</p>
        <div>
            <p>p-other</p>
            <div>
                <div>
                    <p class="item">p-inner</p>
                </div>
            </div>
        </div>
        <div class="item">div-1-1</div>
        <div class="item demo">div-2-2</div>
        <div class="item">div-3-3</div>
        <h3 class="item">h3-1-1</h3>
        <h3 class="item">h3-2-2</h3>
    </div>
    <div class="item">11111</div>
</body>
</html>

2.8 伪类

:checked 被选中伪类
:focus 获取焦点的伪类
:disabled 不可以用的表单元素伪类
:enabled 可以用的表单元素的伪类
:not(selector) 排除伪类，选择非selector元素的伪类
:target 选择当前活动的元素（url上#后面内容指向的元素）。
:only-child 该元素是某个元素的唯一一个儿子的伪类。
:empty 空节点的伪类（标签之间没有任何内容（空格，缩进，换行也属于节点））

注：节点（Node）是JS部分内容，页面中的一切都可以看成是节点，包括元素节点，文本节点，属性

节点等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中时候的伪类 */
        input[type="checkbox"]:checked {
            width: 100px;
            height: 100px;
        }
        /* 获取焦点时候的伪类 */
        input:focus {
            color: red;
        }
        /* 被禁用 */
        input:disabled {
            padding: 20px;
        }
        /* 没有禁用 */
        input:enabled {
            padding: 20px;
        }
        /* 不要给input设置样式 */
        /* :not(input) {
            font-size: 20px;
        } */
        /* 活动的状态 */
        :target {
            color: red;
            font-size: 50px;
        }
        /* 唯一儿子元素 */
        .item:only-child {
            color: green;
            font-size: 50px;
        }
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid green;
        }
        /* 获取空盒子 */
        .box:empty {
            background: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"> </div>
    <div class="box">

    </div>
    <div class="box">   </div>
    <div class="box">
        <p>hello</p>
    </div>
    <div>
        <div class="item">item-1</div>
        123123
    </div>
    <div>
        <div class="item">item-1</div>
        <span>123123</span>
    </div>
    <div>
        <div class="item">item-2</div>
        <div class="item">item-3</div>
        <div class="item">item-4</div>
    </div>
    <input type="checkbox" name="" id=""><input type="checkbox" name="" id="">
    <hr>
    <input type="text"><input type="text">
    <hr>
    <input type="text" disabled><input type="text">
    <p>hello</p>
    <div>hello</div>
    <h1>h1-1-1-1</h1>
    <h1>h1-2-2-2</h1>
    <h1>h1-3-3-3</h1>
    <h1>h1-4-4-4</h1>
    <h1>h1-5-5-5</h1>
    <h1>h1-6-6-6</h1>
    <h1 id="demo">demo h1-7-7-7</h1>
    <h1>h1-8-8-8</h1>
    <h1>h1-9-9-9</h1>
</body>
</html>

2.9 伪元素

CSS2 中伪元素以 : 开头，CSS3 中伪元素以 :: 开头

before与after伪元素表示在标签原有内容之前与之后插入伪元素。

伪元素有一个content属性（必须书写），属性值用于书写插入的内容。

::before 原有内容前面插入内容，是行内元素
::after 原有内容之后插入内容，是行内元素
::first-letter 第一个字母（汉字）的伪元素
::first-line 第一行的伪元素
::selection 鼠标圈选的伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css3中建议使用::，开发pc端，要兼容ie6，7，8建议使用:，其它情况建议使用:: */
        h1::before {
            content: "hello";
            color: red;
        }
        /* 后面插入 */
        h1::after {
            content: "学习CSS";
            color: gold;
        }
        /* 段落 */
        p {
            width: 400px;
            border: 1px solid green;
        }
        /* 第一个字母 */
        p::first-letter {
            font-size: 50px;
            color: red;
        }
        /* 第一行 */
        p::first-line {
            color: gold;
        }
        /* 选择文本 */
        p::selection {
            background-color: pink;
        }
    </style>
</head>
<body>
    <h1>学习CSS</h1>
    <p>学习CSS学习CSS学习CSS学习CSS学习CSS学习CSS学习CSS学习CSS学习CSS学习CSS学习CSS学习CSS学习CSS学习CSS学习CSS学习CSS学习CSS学习CSS学习CSS学习CSS学习CSS学习CSS学习CSS学习CSS学习CSS学习CSS学习CSS学习CSS！</p>
</body>
</html>

2.10 盒模型拓展

box-sizing：设置盒模型

默认情况下，盒模型的padding、border是外扩的。

设置 box-sizing: border-box; 后，

盒模型是内减的。

默认情况下，width、height的意思是盒子的内容宽度、高度。

设置 box-sizing: border-box; 后，

width、height是 width | height + padding + border 在内的宽度和高度。

<style>
    div {
        margin: 50px;
        border: 50px dashed green;
        padding: 50px;
        width: 400px;
        height: 400px;
        background-color: pink;
        float: left;
        font-size: 30px;
    }
    /* 默认是标准盒模型，是外扩的 */
    /* 内减盒模型 */
    .box2 {
        box-sizing: border-box;
    }
</style>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>

2.11 圆角

border-radius是css3新增加的属性，用来设置盒子的圆角。

表示法

四值表示法：左上，右上，右下，左下（顺时针）如：border-radius: 10px 20px 30px 40px;
单值表示法：四个角统一设置，如：border-radius: 10px;
拆分表示法：
- 左上：border-top-left-radius: 20px;
- 右上：border-top-right-radius: 20px;
- 左下：border-bottom-left-radius: 20px;
- 右下：border-bottom-right-radius: 20px;

属性值：可以是长度单位（如：px），可以是百分比。

/* 四值法 */
.box1 {
    border-radius: 10px 40px 70px 100px;
}
/* 单值法 */
.box2 {
    border-radius: 50px;
}
/* 单独设置 */
.box3 {
    /* 与box1效果一致 */
    border-top-left-radius: 10px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 70px;
    border-bottom-left-radius: 100px;
}
/* 百分比 */
.box4 {
    border-radius: 25%;
}

2.12 盒子阴影

盒子阴影：box-shadow: 投影1，投影2 ......

每组投影有多个参数：

第一个参数：水平偏移量，正值向右，负值向左
第二个参数：垂直偏移量，正值向下，负值向上
第三个参数：模糊半径（可选）数值越大越模糊，数值为0表示实心阴影
第四个参数：投影尺寸（可选）
第五个参数：阴影颜色
第六个参数：投影方式（可选）。outset：外部阴影 (默认值) ，inset：内部阴影。

多个阴影：用逗号隔开。

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        border-radius: 100px;
        margin: 50px;
        /* 阴影 */
        /* box-shadow: 400px 100px green; */
        /* box-shadow: 30px 30px 10px 20px green; */
        /* box-shadow: 0 0 10px 20px green inset; */
        /* 多个投影 */
        box-shadow: 30px 30px 10px green, 50px 50px 10px gold, 80px 80px 10px skyblue;
    }
</style>
<body>
    <div class="box"></div>
</body>

一、盒模型拓展

1.1 圆角

border-radius 还可以为每个角单独设置两个临界边的半径

border-top-left-radius: top边半径 left边半径;

border-top-right-radius: top边半径 right边半径;

border-bottom-left-radius: bottom边半径 left边半径;

border-bottom-right-radius: bottom边半径 right边半径;

border-radius是复合属性，可以将以上四个属性统一设置。

border-radius: 左上角top边半径右上角top边半径右下角bottom边半径左下角bottom边半径 /

左上角left边半径右上角right边半径右下角right边半径左下角left边半径

如：border-radius: 20px 40px 60px 80px / 30px 60px 90px 120px;

1.2 盒子阴影

盒子阴影：box-shadow: 投影1，投影2 ......

每组投影有多个参数：

第一个参数：水平偏移量，正值向右，负值向左

第二个参数：垂直偏移量，正值向下，负值向上

第三个参数：模糊半径（可选）数值越大越模糊，数值为0表示实心阴影

第四个参数：投影尺寸（可选）

第五个参数：阴影颜色

第六个参数：投影方式（可选）。outset：外部阴影 (默认值) ，inset：内部阴影。

多个阴影：用逗号隔开。

1.3 字体阴影

文字阴影：text-shadow: h-shadow v-shadow blur color;

h-shadow：水平偏移量

v-shadow：垂直偏移量

blur ：模糊半径（可选）

color：阴影颜色

与盒子阴影一样，我们可以多次设置。

text-shadow: 阴影1，阴影2 ...

<style>
    h1 {
        font-weight: normal;
        font-size: 100px;
        /* 设置投影 */
        color: red;
        text-shadow: 4px 6px 1px green,  14px 16px 1px orange;
    }
</style>
<body>
    <h1>学习CSS</h1>
</body>

1.4 背景设置

background-origin ：背景起源，第一张图片绘制位置（背景图片）

padding-box：相对于内边距框来定位（默认值）

border-box：相对于边框盒来定位

content-box：相对于内容框来定位

background-clip ：背景裁切（背景色与背景图片）

border-box：裁剪到边框盒（默认值）

padding-box：裁剪到内边距框

content-box：裁剪到内容区

background-size ：背景尺寸（对背景图片放大缩小）

像素表示法：背景图的宽度背景图的高度

百分数表示：背景图的宽度是整个大背景宽度的比背景图的高度是整个大背景高度的比

单词表示法：cover 表示覆盖，尽可能大，contain 表示容纳，显示全部

<style>
    .box {
        margin: 100px;
        border: 100px dotted green;
        padding: 100px;
        width: 200px;
        height: 200px;
        font-size: 50px;
        color: orange;
        background-color: pink;
        background-image: url(./images/byamaj.jpg);
        /* background-repeat: no-repeat; */
        /* 更改图片的绘制位置 */
        /* 从边框绘制 */
        /* background-origin: border-box; */
        /* 从内容区域绘制 */
        /* background-origin: content-box; */
        /* 默认值是padding-box */
        /* background-origin: padding-box; */

        /* 背景平铺 */
        /* background-repeat: repeat; */
        /* 背景裁剪 */
        /* padding */
        /* background-clip: padding-box; */
        /* 内容区域 */
        /* background-clip: content-box; */
        /* 默认值 */
        /* background-clip: border-box; */

        /* 背景尺寸 */
        background-repeat: no-repeat;
        /* 像素值 */
        /* background-size: 500px 200px; */
        /* 计算百分比：（width|height + padding）*百分比 */
        /* background-size: 100% 50%; */
        /* 特殊变量 */
        /* background-size: cover; */
        background-size: contain;
    }
</style>
<body>
    <div class="box">hello</div>
    <!-- <img src="./images/byamaj.jpg" width="500" height="200" alt=""> -->
</body>

1.5 多背景

设置背景的时候，用逗号隔开既可添加多个背景图。

前面背景图剩余的区域显示后面的背景图。

注：其它的单一属性也是用逗号隔开，按顺序一一对应。

<style>
    /* 设置多背景 */
    .box {
        width: 1000px;
        height: 500px;
        border: 5px solid green;
        /* background: url(./images/baby.png) no-repeat, url(./images/byamaj.jpg) no-repeat, url(./images/bannerdz01.png) no-repeat; */
        background: url(./images/baby.png), url(./images/byamaj.jpg), url(./images/bannerdz01.png);
        /* 统一设置 */
        background-repeat: no-repeat;
        /* 裁剪 */
        background-size: 100px 100px, 500px 300px, cover;
        /* 定位 */
        background-position: 50px 50px, left bottom, center;
    }
</style>
<body>
    <div class="box"></div>
</body>

1.6 线性渐变

通过 linear-gradient() 属性定义线性渐变，由于该属性值CSS3提供的，因此要添加浏览器前缀

linear-gradient：线性的渐变

linear-gradient(top left,red,yellow,orange)，参数解释：

第一个参数表示渐变的起始方向
第二个参数表示渐变结束方向（可选）

从第三个参数开始，表示渐变颜色（颜色可以有很多个，用逗号隔开）

如：linear-gradient(top left,red,yellow,orange);

还可以在颜色后面书写百分数，表示该颜色在整体渐变中出现的位置。

如：linear-gradient(left,red 20%,green 60%,blue 80%);

注：渐变使用的是 background-image 而不是 background-color 。

1.7 径向渐变

径向渐变（Radial Gradients）- 由它们的中心定义

如：radial-gradient(red,yellow,blue)

形状有两种

circle 圆形如：radial-gradient(circle,red,yellow,blue)

ellipse 椭圆如：radial-gradient(ellipse,red,yellow,blue)

设置渐变位置

特殊变量设置：radial-gradient(circle at left top,red,yellow,blue)

定点位置：radial-gradient(circle at 800px 400px,red,yellow,blue)

<style>
    .box {
        width: 400px;
        height: 400px;
        margin: 50px;
        border: 5px solid green;
        /* 设置渐变 */
        /* 线性渐变 */
        /* 兼容浏览器添加前缀 */
        /* background-image: -webkit-linear-gradient(); */
        /* background-image: -webkit-linear-gradient(top, green, orange, red); */
        /* 左上角 */
        /* background-image: -webkit-linear-gradient(top left, green 0%, orange 80%, red 100%); */

        /* 径向渐变 */
        /* 默认是圆形 */
        /* background-image: -webkit-radial-gradient(red, green, blue); */
        /* 还存在兼容性问题 */
        /* 椭圆形状 */
        /* background-image: -webkit-radial-gradient(ellipse, red, green, blue);
        background-image: -moz-radial-gradient(ellipse, red, green, blue); */
        /* 渲染位置 */
        /* background-image: -webkit-radial-gradient(circle at 50px 50px, red, green, blue); */
    }
</style>
<body>
    <div class="box"></div>
</body>

二、过渡，变换与动画

2.1 过渡

过渡的基本形式

元素 → 元素:hover(只要元素属性发生改变就可以使用过渡)。

元素原来变为hover状态都是干嘣。过渡效果就是让元素以动画形式，平滑的完成。

语法：transition: all 2s linear 0s，参数解释：

第一个参数：参与过渡的属性，一般我们书写all。

第二个参数：过渡完成的时间。单位是ms或者是s,千万不能省略

第三个参数：缓冲描述（函数）

linear(匀速)，

ease非匀速(两头慢中间快)，

贝塞尔曲线（cubic-bezier(0, 0.33, 1,-0.35)）；

第四个参数：延迟时间，单位也是ms或者是s,不能省略。

还可以单独定义这四个单一属性：

transition-property（参与过渡属性），

transition-duration（过渡时间）

transition-timing-function（缓存描述），

transition-delay（延迟时间）

参与过渡的属性：只要是数值型的属性以及颜色都可以参与过渡。

比如：width,height,border-width。

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        border: 1px solid green;
        /* transition: all 2s ease 3s; */
        /* transition: background-color 2s ease 3s; */
        /* 单独设置 */
        transition-property: background-color;
        transition-duration: 3s;
        transition-timing-function: linear;
        transition-delay: 3s;
    }
    /* 鼠标滑过盒子，改变宽高以及背景 */
    .box:hover {
        width: 600px;
        height: 400px;
        background-color: green;
        /* transition: all 2s ease 3s; */
    }
</style>
<body>
    <div class="box"></div>
</body>

2.2 变换

通过 transform 属性实现变换

旋转：transform:rotate(30deg)，旋转的单位是deg(度数)

旋转的方向的是顺时针。

缩放：transform:scale(2)，放缩没有单位是数值。

放大：1 - 正无穷表示放大的倍数

缩小：0-1 表示缩小的倍数。

斜切：transform:skew(10deg,10deg)，单位是deg

两个参数：水平斜切，垂直斜切。

移动：transform:translate(100px, 100px)，参数分别表示水平方向和垂直方向的移动距离，还

可以单独定义

translateX 表示水平方向的移动。单位px

translateY 	表示垂直方向的移动。单位px。

注：transform可以书写多个变形。用空格隔开，transform:rotate(360deg) scale(1.5)

skew(10deg,10deg) ...

<style>
    .box {
        /* width: 800px;
        height: 258px; */
        border: 5px solid green;
        margin: 50px auto;
        width: 331px;
        height: 195px;
    }
    .demo {
        /* width: 258px;
        height: 258px; */
        /* 旋转 */
        /* transform: rotate(30deg); */
        /* transform: rotate(60deg); */
        /* 负值是逆时针 */
        /* transform: rotate(-30deg); */

        /* 缩放 */
        /* 放大2倍 */
        /* transform: scale(2); */
        /* transform: scale(10); */
        /* 缩小 */
        /* transform: scale(0.5) */

        /* 平移 */
        /* 向右为正，向下为正 */
        /* transform: translate(100px, 50px); */
        /* 向左为负，向上为负 */
        /* transform: translate(-100px, -50px); */
        /* margin: 200px; */

        /* 与相对定位相比：都能移动到某个位置 */
        /* transform: translate(-100px, -50px) rotate(30deg); */
        /* transform: rotate(30deg);
        position: relative;
        top: -50px;
        left: -100px; */

        /* 斜切 */
        transform: skew(30deg, 10deg);
    }
</style>
<body>
    <div class="box">
        <img class="demo" src="./images/byamaj.jpg" alt="">
        <!-- <img class="demo" src="./images/baby.png" alt=""> -->
        <!-- <img src="./images/baby.png" alt=""> -->
    </div>
</body>

2.3 动画

定义动画

@keyframes 动画名称 {

from {}

to {}

}

keyframe: 关键帧

from：开始状态

to: 结束状态

还可以用百分数来表示该时间内动画所处的状态

如： from可以写成0%， to可以写成100%

2.4 调用动画

animation: donghua 1.5s linear 0s 3 alternate forwards;

参数解释：

第一个参数：要调用的动画名称

第二个参数：完成一次动画的时间，单位是s。

第三个参数：缓冲描述

第四个参数：延迟时间，单位是s。

第五个参数：动画的次数。infinite(无限)

第六个参数：自动补全反方向的动画。

第七个参数：保持最后一帧的状态。

这些参数还可以单独设置：

animation-name 要调用的动画名称，

animation-duration 完成一次动画的时间，

animation-timing-function 缓冲描述，

animation-delay 延迟时间，

animation-iteration-count 动画的次数，

animation-direction 自动补全反方向的动画，

animation-fill-mode 保持最后一帧的状态，

animation-play-state 指定动画是否正在运行或已暂停

<style>
    /* 关键帧 */
    @keyframes ickt {
        /* 关键帧 */
        /* 第一帧 */
        0% {
            transform: translate(0, 0) scale(1) rotate(0);
        }
        /* 第二帧 */
        25% {
            transform: translate(600px, 300px);
        }
        /* 第三帧 */
        50% {
            /* transform: scale(3) rotate(360deg); */
        }
        /* 第四帧 */
        75% {
            transform: scale(0.5) translate(100px, 300px);
        }
        /* 最后一帧：如果要循环播放，最后一帧通常与第一帧一样 */
        100% {
            transform: translate(800px, 0) scale(1) rotate(0);
        }
    }
    /* 关键帧 */
    @keyframes music {
        /* 开始相当于0% */
        from {
            transform: rotate(0);
        }
        /* 结束相当于100% */
        to {
            transform: rotate(360deg);
        }
    }
    /* 为img使用动画 */
    .demo {
        /* animation: ickt 4s linear 3s 1 reverse forwards; */
        /* 无限循环播放 */
        animation: music 3s linear infinite;
        border-radius: 50%;
    }
</style>
<body>
    <img src="./images/baby.png" alt="" class="demo">
</body>

一、3D

1.1 纬度

2d中的坐标系只有两个维度：

x 表示正方向向右

y表示正方向向下

3d中的坐标系有三个维度：

x 表示正方向向右

y表示正方向向下

z表示垂直于屏幕，正方向向前

translate表示空间位移，此时维度对盒子具有意义。

当元素具有translate属性的时候，如果之前发生了旋转，那么这个旋转并不是单纯的旋转元素本

身，而是它所在的整个坐标系都在旋转。

此时只设置translateZ，盒子没有任何变化，明明

应该盒子向着我们移动300px，盒子应该变大才对，

但是为什么盒子没有变化呢？

这是因为，我们舞台没有景深。

1.2 景深

景深表示场景深度。规定父元素距离屏幕有多远。

比如，人在看戏的时候，距离舞台有远有近。景深就表示舞台与人的距离。

第一排的人的景深小。最后一排的人景深大。演员在表演的时候移动，对应的第一排的人感觉演员

运动的幅度大。最后一排的人感觉演员运动幅度小。

通过perspective属性设置景深，在舞台有景深的前提下，一个盒子能够实现沿x、y、z轴的空间移

动。

可以通过translate3D属性来设置三个方向的移动距离：translate3D(30px,40px,100px)

也可以分开单独设置

transform:translateX(30px)

transform:translateY(40px)

transform:translateZ(100px)

舞台自己发生了旋转，那么在默认情况下，自己内部的元素是不能保留自己的3D轴的。

想让一个旋转了的舞台内部的演员保留自己的3D轴，那么就要使用：transform-style:preserve-3d属

性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 331px;
            height: 195px;
            border: 2px solid green;
            margin: 50px auto;
            /* 沿着y轴旋转 */
            transform: rotateY(30deg);
            /* 让3d生效 */
            transform-style: preserve-3d;
            /* 设置景深 */
            perspective: 1000px;
            position: relative;
        }
        img {
            position: absolute;
        }
        /* 垂直屏幕方向，向用户移动300px */
        .img1 {
            transform: translateZ(300px);
        }
        .img2 {
            transform: translateZ(-300px);
        }
    </style>
</head>
<body>
    <div class="container">
        <img class="img1" src="./images/byamaj.jpg" alt="">
        <img class="img2" src="./images/gamepic2.jpg" alt="">
    </div>
</body>
</html>

1.3 变换

transform-origin: 改变旋转轴中心，可以接收两个参数

可以单词法

可以是像素法

可以是百分比

注意：2D中，相当于点旋转，3D中，相对于坐标轴旋转

backface-visibility: hidden 背面不可见3D 变换总结

translate3d(x,y,z) 定义 3D 移动

代表：translateX(x)，translateY(y)，translateZ(z)

scale3d(x,y,z) 定义 3D 缩放

代表：scaleX(x)，scaleY(y)，scaleZ(z)

rotate3d(x,y,z,angle) 定义 3D 旋转

代表：rotateX(angle)，rotateY(angle)，rotateZ(angle)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 331px;
            height: 195px;
            border: 2px solid green;
            margin: 50px auto;
            /* 3d渲染 */
            transform-style: preserve-3d;
            /* transform: rotateX(30deg) rotateY(30deg) ; */
            perspective: 1000px;
        }
        /* 内部的图片旋转 */
        .img1 {
            /* transform: rotateY(60deg); */
            /* 有了景深，就可以看出旋转的效果 */
            /* transform: rotateX(60deg); */
            /* 一条线，看不到了 */
            /* transform: rotateX(90deg); */
            /* 180度就是翻转了, 看到的是后面，倒置的 */
            /* transform: rotateX(180deg); */
            /* transform: rotateX(300deg); */
            /* 背面不可见 */
            /* backface-visibility: hidden; */
            
            /* 更改旋转轴 */
            transform-origin: left top;
            transition: all 3s;
        }
        body {
            text-align: center;
        }
        .img1:hover {
            /* transform: rotateX(180deg); */
            transform: rotateY(180deg);
        }
        /* 2d相对于点旋转 */
        .img2 {
            transform-origin: left top;
            transition: all 2s;
        }
        .img2:hover {
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <img class="img1" src="./images/byamaj.jpg" alt="">
    </div>
    <img class="img2" src="./images/byamaj.jpg" alt="">
</body>
</html>

1.4 立方体

制作立方体步骤：

父元素设置保留子元素的3D属性 transform-style: preserve-3d
父相子绝
前后面直接translate: 正负宽度的一半
上下面先沿x轴旋转90度，translate: 正负宽度的一半
左右面先沿y轴旋转90度，translate: 正负宽度的一半

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 动画 */
        @keyframes ickt {
            from {
                /* transform: rotateX(30deg) rotateY(30deg); */
                transform: rotateX(0deg) rotateY(60deg);
            }
            to {
                /* 旋转360deg */
                /* transform: rotateX(390deg) rotateY(390deg); */
                transform: rotateX(360deg) rotateY(240deg);
            }
        }
        /* 容器 */
        .container {
            width: 300px;
            height: 300px;
            margin: 200px auto;
            border: 3px solid #000;
            position: relative;
            /* 3d渲染 */
            transform-style: preserve-3d;
            /* 给容器一个角度，就可以看到其它的面了 */
            /* transform: rotateX(30deg) rotateY(30deg); */
            /* 对整个舞台使用动画 */
            animation: ickt 5s linear infinite;
            /* 为了看到2，沿着y轴旋转 */
            /* transform: rotateY(160deg); */
            /* transform: rotateX(-90deg); */
        }
        .box {
            position: absolute;
            font-size: 100px;
            line-height: 300px;
            width: 300px;
            height: 300px;
            text-align: center;
            color: #fff;
        }
        /* 正面的 */
        .box1 {
            background-color: pink;
            transform: translateZ(150px);
        }
        /* 后面 */
        .box2 {
            background-color: orange;
            transform: translateZ(-150px) rotateY(180deg);
            backface-visibility: hidden;
        }
        /* 左侧 */
        .box3 {
            background-color: skyblue;
            transform: translateX(-150px) rotateY(-90deg);
        }
        /* 右侧 */
        .box4 {
            background-color: yellowgreen;
            transform: translateX(150px) rotateY(90deg);
        }
        /* 上面的 */
        .box5 {
            background-color: gold;
            transform: translateY(-150px) rotateX(90deg);
        }
        /* 下面的 */
        .box6 {
            background-color: green;
            transform: translateY(150px) rotateX(-90deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <div class="box box5">5</div>
        <div class="box box6">6</div>
    </div>
</body>
</html>

二、布局

2.1 浮动布局

布局效果：

头部区域自适应
尾部区域自适应
中间区域固定宽度

包含两个固定宽度的模块，并且并列渲染

两个盒子，一个浮动，一个在文档流上

中间的内容区域自适应（例如：80%居中）此时当页面小于内容区域最小盒子宽度的时候，头部和尾

部显示不全了，我们可以让页面的最小宽度不小于该宽度即可

min-width 设置最小宽度

min-height 设置最小高度

max-width 设置最大宽度

max-height 设置最大高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header {
            height: 50px;
            background-color: red;
            min-width: 1000px;
        }
        section {
            background-color: yellow;
            overflow: hidden;
            width: 80%;
            margin: 0 auto;
            /* 最小宽度 */
            min-width: 800px;
        }
        article {
            float: left;
            height: 500px;
            background-color: gold;
            width: 300px;
        }
        .slider {
            margin-left: 310px;
            height: 300px;
            background-color: green;
            
        }
        footer {
            height: 40px;
            background-color: pink;
            min-width: 1000px;
        }
    </style>
</head>
<body>
    <header></header>
    <section>
        <article></article>
        <div class="slider"></div>
    </section>
    <footer></footer>
</body>
</html>

2.2 列表布局

模型：在一个固定宽度的盒子内，均匀放置盒子，使他们之间的边距一致

特点：盒子的宽度是一样的，盒子之间的边距时一样的

布局公式：容器的宽度 w，盒子的宽度是 iw，边距 m，放置盒子的数量 n

w = n * iw + (n - 1) * m

根据这个公式，如果三个变量是已知的，我们可以求第四个变量

注意，布局的时候，每个盒子都要设置右边距，此时容器应该比原有的

宽度多出一个边距来，我们可以通过修改margin来解决（在没有显性设

置宽度的时候，我们可以通过margin修改容器的宽度）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        /* 作用：设置宽度并居中 */
        .container {
            width: 1000px;
            margin: 0 auto;
        }
        ul {
            /* 没有设置width，因此可以通过负margin改变宽度 */
            background-color: pink;
            overflow: hidden;
            margin-right: -20px;
        }
        /* 1000 = iw * 5 + (5 - 1) * 20 */
        /* iw = (1000 - (5 - 1) * 20) / 5 */
        li {
            float: left;
            width: 184px;
            height: 150px;
            background-color: green;
            margin-right: 20px;
            margin-bottom: 20px;
            font-size: 50px;
            color: #fff
        }

    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
        </ul>
    </div>
</body>
</html>

2.3 两翼齐飞（双飞翼）布局

两翼齐飞又叫双飞翼布局，是一个三列布局，中间自适应宽度，两翼固定宽度的一种布局模型

经典布局方案

三个容器在一排，所以我们可以使用浮动布局
中间的自适应，我们可以让其占一整行，然后让子元素通过margin居中来自适应
后面橘黄色的元素，要放在最前面，移动了是绿色元素父容器的宽度，向左平移，所以设置负值
后面蓝色的元素，要放在最后面，根据浮动贴边特性，只需要向前移动蓝色盒子的宽度即可

简化版（固比固布局）：就是中间自适应，左右固定，所以可以并列三个元素，前面两个脱离文档流

（浮动），一左一右，设置固定宽度即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            float: left;
            background-color: gray;
            width: 100%;
            height: 300px;
        }
        /* 居中自适应宽度 */
        .content {
            margin: 0 320px;
            height: 450px;
            background-color: green;
        }
        .left {
            float: left;
            background-color: orange;
            height: 400px;
            width: 300px;
            margin-left: -100%;
        }
        .right {
            float: left;
            background-color: blue;
            height: 500px;
            width: 300px;
            margin-left: -300px;
        }
    </style>
</head>
<body>
    <!-- 中间自适应宽度 -->
    <div class="main">
        <div class="content"></div>
    </div>
    <!-- 显示在左侧 -->
    <div class="left"></div>
    <!-- 显示在右侧 -->
    <div class="right"></div>
</body>
</html>

2.4 圣杯布局

模型，三列（多列）等高，宽度自适应

特点

它们在一行，因此要浮动布局
它们宽度自适应，因此我们用百分比设置宽度
它们可能有不同的高度（可以手动设置）
浮动布局，让父元素具有高度，我们要设置overflow（清除浮动），一旦为父元素设置

overflow，从最大高度开始截取
为了弥补高度差，我们要填充高度，我们设置padding-bottom可以让盒子增高，我们设置

margin-bottom负值，可以降低高度，综合使用他们即可弥补高度差，所以设置的margin-

bottom和padding-bottom要足够大：最大高度-最小高度

增加多少，降低多少，高度维持不变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
            border: 3px solid #000;
            overflow: hidden;
        }
        .box1 {
            float: left;
            width: 20%;
            height: 300px;
            background-color: red;
            /* 填充空间 */
            padding-bottom: 500px;
            /* 通过父margin，让盒子占用的空间减少 */
            margin-bottom: -500px;
        }
        .box2 {
            float: left;
            width: 50%;
            height: 500px;
            background-color: green;
            padding-bottom: 500px;
            margin-bottom: -500px;
        }
        .box3 {
            float: left;
            width: 30%;
            height: 400px;
            background-color: blue;
            padding-bottom: 500px;
            margin-bottom: -500px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

2.5 百分比布局

百分比布局，也叫作流式布局。

用百分比为单位，最最重要的事情，就是参考谁，是谁的百分比？

width：参考的是父盒子的width。(注意，是内容的宽度不算padding)。如果没有父盒子，此

时父盒子就是body，参考的就是浏览器的页面宽度。

height：参考的是父盒子的height。

padding：参考的是父盒子的width。注意，无论是哪个方向的padding都是参考的是父盒子的

width。

margin：参考的是父盒子的width。注意，无论是哪个方向的margin都参考的是父盒子的

width。

border不能用%写，可以通过box-sizing来更改盒模型，

如果是绝对定位

子盒子width：百分比参考的是距离最近，且有定位的父盒子的width（算上padding.）

子盒子height：百分比参考的是距离最近，且有定位的父盒子的height（算上padding.）

子盒子padding,margin：百分比参考的是距离最近，且有定位的父盒子的width（算上

padding.）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ickt {
            padding: 100px;
            width: 1000px;
            height: 500px;
            position: relative;
        }
        .container {
            width: 800px;
            padding: 100px;
            height: 400px;
            border: 10px solid green;
            margin: 0 auto;
        }
        .box {
            width: 10%;
            height: 10%;
            background-color: pink;
            padding: 10%;
            margin: 10%;
            /* position: absolute; */
        }
    </style>
</head>
<body>
    <div class="ickt">
        <div class="container">
            <div class="box"></div>
        </div>
    </div>
    
</body>
</html>

三、视口

3.1 视口

分辨率：就是屏幕像素的数量，比如1600*900，指的是横向有1600的像素点，

纵向有900个像素点。所谓的像素点是物理元件最小的发光单位。

手机的分辨率是多少呢？非常的大，如今大屏手机能达到1920×1080

如果手机真的用自己的真实分辨率，来呈递网页，就是这种情况了：

就像在3000米的高空，俯瞰整个页面。字非常小，h1巨小。

有的同学说，这样挺好，正好可以把整个网页一目了然的看全。乔布斯也这么想。

乔布斯说，手机可以呈递电脑网页，但是网页制作者还来不及制作，所以此时我

们如果设置手机的一个宽度为980px，而实际上的网页的版心（网页内容区域），

绝大多是都是980px，岂不是手机刚好卡住了整个版心么？

乔布斯在iPhone1就命令工程师，把自己的手机的浏览器，认为自己是980px

宽，而不是像素宽度，这个宽度就是视口。

3.2 视口宽度

我们可以通过JS语句来获取浏览器的宽度：document.documentElement.clientWidth;

显示980！而iphone的横向的像素数量不是980！

我们发现班级里面所有同学的所有设备，这个测试的结果都是980。

这个数字就是视口宽度，viewport。980是所有设备的初始视口宽度。浏览器会以980这个宽度来渲

染页面。

也就是说，我们做前端开发的，完全没有必要关心手机的分辨率！

但是980对于手机页面来说太大了。所以乔帮主又做了一个精妙的设计，就是能够让页面的开发者，

自定义设置移动设备的视口宽度。可以用这样的meta标签，来设置视口的宽度：

<meta name="viewport" content="width=300" />

一旦设置了，浏览器此时就会认为自己的宽度是300px。此时就会按照300px的宽度来渲染页面。

viewport太好用了，通过该属性，我们可以修改视口的宽度了。

我们发现：不同的视口大小，呈递相同的页面，给人的感觉，是不一样的，尤其是看文字，h1的默认

字号32px。如果你的视口是980px，此时看文字非常小。此时如果视口是320左右，此时刚刚好：

此时就有一个换算关系，什么关系呢？

如果让一个300px的盒子，在电脑上看，和在手机上看的物理长度一样！就是我们用尺子量，结果是

一样宽的。

3.3 缩放因子DPR（设备像素比）

DPR（DevicePixelRatio）：手机的物理像素与实际使用像素的缩放比，早期的iPhone3GS的屏幕屏

幕分辨率是320 * 480，这个时候的DPR是1。iOS绘制图形（CGPoint/CGSize/CGRect）均以point为

单位： 1 point = 1 pixel

后来在iPhone4中，同样大小（3.5inch）的屏幕采用Retina(视网膜)屏幕显示技术（同样的尺寸，像

素多了一倍），横、纵向方向像素密度都被放大到2倍，像素分辨率提高到（320 * 2） * （480 * 2）

= 640 * 960，显像分辨率提高到iPhone3GS的4倍。

DPR的计算公式：DPR = 单位长度内（pixel/point）;*如ipone6中的scale的值 = 750px / 375pt = 2.0

所以任何手机如果想要有显示和计算机一样的宽度，就要根据自己的分辨率、DPR的不同，而设置不

同的视口。

如果我们加上：

此时每个手机的视口宽度，都是“视口约束宽度”。

每个手机的视口约束宽度不一样，这是为了给人看上去的物理感觉是一样的：

各个设备约束视口之后的视口宽度（300-420）

你会发现这个宽度都不一样，但是此时人看上去的感觉是一样的。字号是一样大的。

3.4 viewport

开发手机页面的时候，一定要加上：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" />

width=device-width 约束视口

initial-scale=1.0 初始视口倍数是1倍

minimum-scale=1.0 最小允许视口宽度是1倍

maximum-scale=1.0 最大允许视口宽度是1倍

user-scalable=no 不允许用户缩放视口

此时如果你写一个p的字号为font-size:14px;不用担心用户能不能看清！用户一定能看的清清楚楚

的！此时厂商已经计算好了一个所谓视口约束宽度。14px和14px的感觉完全一样！

一般来说，手机视口约束之后都是320_{420之间。而分辨率基本上都是1000}1200，也就是说，约

束视口之后，所谓的1px，实际上手机用了2点多个像素来渲染。手机中的图片，必须使用放大两倍的

图片缩小使用，这样能精细（不会导致图片放大后失真）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 更改视口宽度 -->
    <!-- <meta name="viewport" content="width=100"> -->
    <meta name="viewport" content="width=device-width">
    <title>Document</title>
</head>
<body>
    <h1>学习CSS</h1>
    <div style="width: 80px; height: 50px; background-color: orange;"></div>
</body>
</html>

一、弹性盒模型

1.1 弹性盒

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

弹性布局可以使子元素按照规定的规则进行空白空间的分配、对齐和排列；

弹性布局包括两个部分：弹性盒与弹性项（弹性子元素）

采用 Flex 布局的元素，称为弹性容器（flex container），简称"弹性盒"。

它的所有子元素自动成为容器成员，称为弹性项目（flex item），简称"弹性项"

将一个盒子设置成为弹性盒：

display: flex;

或 display: inline-flex;

1.2 容器的轴

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；

交叉轴的开始位置叫做cross start，结束位置叫做cross end。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 800px;
            height: 600px;
            background-color: pink;
            border: 5px solid #000;
            margin: 50px auto;
            display: flex;
            /* 更改主轴以及起点与终点 */
            /* flex-direction: column; */
            /* flex-direction: column-reverse; */
            /* flex-direction: row-reverse; */
            
            /* 换行 */
            /* flex-wrap: wrap; */
            /* flex-wrap: wrap-reverse; */

            /* 复合属性 */
            flex-flow: column wrap;
        }
        .box {
            width: 80px;
            height: 80px;
            background: green;
            font-size: 40px;
            color: #fff;
            border: 2px solid orange;
        }
        .demo {
            width: 1000px;
            height: 50px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <div class="box box5">5</div>
        <div class="box box6">6</div>
        <div class="box box7">7</div>
        <div class="box box8">8</div>
        <div class="box box9">9</div>
        <div class="box box10">10</div>
        <div class="box box11">11</div>
        <div class="box box12">12</div>
        <div class="box box13">13</div>
        <div class="box box14">14</div>
        <div class="box box15">15</div>
        <div class="box box16">16</div>
        <div class="box box17">17</div>
        <div class="box box18">18</div>
        <div class="box box19">19</div>
        <div class="box box20">20</div>
    </div>
    <div class="demo"></div>
</body>
</html>

1.3 容器属性

flex-direction 决定主轴的方向 row（默认值）：主轴为水平方向，起点在左端

row-reverse：主轴为水平方向，起点在右端

column：主轴为垂直方向，起点在上沿

column-reverse：主轴为垂直方向，起点在下沿

flex-wrap 是否换行

nowrap（默认）：不换行

wrap：换行，第一行在上方

wrap-reverse：换行，第一行在下方

flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row

nowrap

justify-content 项目在主轴上的对齐方式

flex-start（默认值）：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一

倍

space-evenly：均匀排列每个元素，每个元素之间的间隔相等

align-items 项目在交叉轴上如何对齐

flex-start：交叉轴的起点对

flex-end：交叉轴的终点对齐

center：交叉轴的中点对齐

baseline: 项目的第一行文字的基线对齐

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 800px;
            height: 700px;
            /* height: 600px; */
            background-color: pink;
            border: 5px solid #000;
            margin: 50px auto;
            display: flex;
            /* 复合属性 */
            flex-flow: row wrap;
            /* flex-flow: column wrap; */

            /* 主轴对齐方式 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* justify-content: center; */
            /* 空白被均分，盒子与边框的空白是盒子之间的空白的一半 */
            /* justify-content: space-around; */
            /* 盒子与边框之间没有空白，盒子之间均分空白 */
            /* justify-content: space-between; */
            /* 盒子与边框之间的空白与盒子之间的空白一致 */
            /* justify-content: space-evenly; */

            /* 交叉轴对齐方式 */
            /* align-items: flex-start; */
            /* align-items: flex-end; */
            /* align-items: center; */
            /* align-items: baseline; */
            align-items: stretch;
        }
        .box {
            width: 130px;
            /* height: 130px; */
            background: green;
            font-size: 40px;
            color: #fff;
            border: 2px solid orange;
            /* margin: 10px; */
        }
        .box2 {
            font-size: 20px;
        }
        .box3 {
            font-size: 80px;
        }
        .demo {
            width: 1000px;
            height: 50px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box box1">1</div>
        <div class="box box2">21231 23132
        </div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <!-- 
        <div class="box box5">5</div>
        <div class="box box6">6</div>
        <div class="box box7">7</div>
        <div class="box box8">8</div>
        <div class="box box9">9</div>
        <div class="box box10">10</div>
        <div class="box box11">11</div>
        <div class="box box12">12</div>
        <div class="box box13">13</div>
        <div class="box box14">14</div>
        <div class="box box15">15</div>
        <div class="box box16">16</div>
        <div class="box box17">17</div>
        <div class="box box18">18</div>
        <div class="box box19">19</div>
        <div class="box box20">20</div> -->
    </div>
</body>
</html>

align-content 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

flex-start：与交叉轴的起点对齐

flex-end：与交叉轴的终点对齐

center：与交叉轴的中点对齐

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大

一倍

stretch（默认值）：轴线占满整个交叉轴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 1200px;
            height: 800px;
            background-color: pink;
            border: 1px solid #000;
            margin: 0 auto;
            /* 弹性和 */
            /* display: inline-flex; */
            display: flex;
            flex-wrap: wrap;

            /* 交叉轴的对齐方式 */
            /* align-items: flex-end; */
            
            /* 多条轴(多行)，更改交叉轴对齐方式 */
            /* align-content: flex-end; */
            /* align-content: flex-start; */
            /* align-content: center; */
            /* align-content: space-around; */
            /* align-content: space-between; */
            align-content: space-evenly;
        }
        .box {
            width: 150px;
            height: 150px;
            border: 5px solid green;
            background-color: skyblue;
            font-size: 40px;
            color: #fff;
            text-align: center;
        }
        .box1 {
            width: 200px;
            height: 100px;
        }
        .box2 {
            width: 300px;
            height: 250px;
        }
        .box3 {
            width: 100px;
            height: 300px;
        }
        .box4 {
            width: 250px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
    </div>
</body>
</html>

1.4 项目属性

order 项目的排列顺序。数值越小，排列越靠前，默认为0

flex-grow 项目的放大比例，默认为0，即如果存在剩余空间，也不放大

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。

如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

flex-shrink 项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。

如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小

flex-basis 在分配多余空间之前，项目占据的主轴空间（main size）。

浏览器根据这个属性，计算主轴是否有多余空间。

它的默认值为auto，即项目的本来大小

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

flex flex属性是flex-grow, flex-shrink 和 flex-basis的简写，

默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值

align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

默认值为auto，表示继承父元素的align-items属性，

如果没有父元素，则等同于stretch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 1200px;
            height: 400px;
            background-color: pink;
            border: 1px solid #000;
            margin: 0 auto;
            /* flex */
            display: flex;
            /* 终点对齐 */
            align-items: flex-end;
            flex-wrap: wrap;
        }
        .box {
            color: #fff;
            text-align: center;
            height: 100px;
            font-size: 50px;
        }
        .box1 {
            width: 300px;
            background-color: green;
            /* order调节顺序 */
            /* order: 3; */
            /* 不希望缩小 */
            /* flex-shrink: 0; */
            /* 占据空间 */
            /* flex-basis: 400px; */
            /* 简写 */
            /* flex: 0 0 400px; */
        }
        .box2 {
            width: 200px;
            background-color: skyblue;
            /* order: 1; */
            /* order: 2; */
            /* 放大 */
            /* flex-grow: 1; */
            /* flex-grow: 3; */
            /* 缩小比例 */
            /* flex-shrink: 2; */
            /* 简写 */
            /* flex: 1 1 auto; */
            /* 简写 */
            /* flex: 1; */
            /* 交叉轴对齐方式 */
            align-self: center;
        }
        .box3 {
            width: 400px;
            background-color: yellowgreen;
            /* order: 1; */
            /* 放大 */
            /* flex-grow: 1; */
            /* flex-shrink: 3; */
            /* 简写 */
            /* flex: 1 1 auto; */
            /* flex: auto; */
            /* flex: 1; */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <!-- <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div> -->
    </div>
</body>
</html>

posted @ 2023-06-01 23:15 o李一波o 阅读(6) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

CSS