HTML基础–CSS样式表（一）

1.CSS内部 样式

一般会写在<he a ad&g t;标签中

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    <title&gt;Document</title&gt;
    <style>
        h1{
            color: red;
        }
        h2{
            color: yellow;
        }
        h3{
            color: blue;
        }
    </style>
</head>
<body>
    <h1>11111111111</h1>
    <h2>22222222222</h2>
    <h3>33333333333</h3>

</body>
</html>

2.外部 样式表

<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>
    <!-- CSS外部引入方式1 -->
    <link rel="stylesheet" type="text/css" href="../css/index.css"/>
    <!-- CSS外部引入方式2,type属性可以省略 -->
    <style type="text/css">
        @import url("../css/index.css");
    </style>
</head>
<body>
    <h1>111111</h1>
    <h2>2222222</h2>
    <h3>333333</h3>
</body>

扩展知识点：link与import之间的区别
- 差别1：本质的区别：link 属于XHTML标签，而,@import完全是CSS提供的一种方式
- 差别2：加载顺序的差别：当一个页面被加载的时候（就是浏览者浏览的时候），link 引用的css会同时被加载，而@import 引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import 加载CSS的页面时开始会没有样式，就是闪烁，网速慢的时候还挺明显
- 差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link 标签没有这个问题

3.行内 样式表

<!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>
</head>
<body>
    <div style="width: 200px; height:200px; color: red;">我是div</div>
    
</body>
</html>

4.样式表的优先级

5.标签选择器

直接使用标签名（也被称之为元素选择器）

6.类选择器

在类名之前加个点
在一个便签中有两个 class并且有共同属性时，跟class的定义位置有关，定义时后面定义的会覆盖前面的，class的书写位置无关

7.id 选择器

一个 id 名称只能对应文档中一个具体的元素对象（唯一性）
使用方式：在id名前加一个#号

8.通配符 选择器

*{ margin:0;padding:0; }

margin是外边距
padding是内边距

9.群组和后代选择器

<!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{
            background-color: yellow;
        }
        p{
            background-color: yellow;
        }
        h1{
            background-color: yellow;
        } */
        *{
            margin: 0;
            padding: 0;
        }

        /* 群组选择器：提出公共代码，节约代码量 */
        div,.boxp,h1{
            background-color: yellow;
        }
    </style>

</head>
<body>
    <div>111111111111111</div>
    <p class="boxp">1111111111111111</p>
    <h1>111111111111</h1>
    
</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>

/* 后代选择器（空格选择器），使用空格 */
        div p{
            background-color: yellow;
        }
    </style>

</head>
<body>
    <div>
        <p>
            111111111111
        </p>
    </div>

    <p>2222222222222</p>
    
</body>
</html>

后代选择器实际上是从右到左去匹配！

10.伪类 选择器

语法：
- a:link{属性：属性值}超链接的初始状态
- a:vi site d{属性：属性值;}超链接被访问后的状态
- a:hover{属性：属性值}：鼠标悬停，即鼠标划过超链接时的状态
- a:active{属性：属性值}超链接被激活时的状态，即鼠标按下时超链接的状态
- Lin k–vi site d–hover–active
说明：
- A)当这四个超链接伪类选择器符联合使用时，应注意他们的顺序，正常顺序为：a:link,a:vi site d,a:hover,a:active,错误的顺序有时会使超链接的样式失效
- B)为了简化代码，可以把伪类选择器符中相同的声明提出来放在a选择符中；例如：a{color:red} a:hover{color:green}表示超链接的初始和访问过后的状态一样，鼠标划过的状态和点击时的状态一样

<!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>
        /* 初始状态 */
        a:link{
            color: yellow;
        }
/* 点击过后 */
        a:visited{
            color: red;
        }
        /* 鼠标悬停 */
        a:hover{
color: blue;
        }

        /* 点击激活,激活的那一刻 */
        a:active{
            color: green;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
</body>
</html>

11.新闻 导航 案例

<!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>

        /* a:link{
            background-color: black;
            color: white;
        }

        a:visited{
            background-color: black;
            color: white;
        }

        a:hover{
            background-color: red;
        }

        a:active{
            background-color: red;
        } */

        a{
            background-color: black;
            color: white;
        }

        a:hover{
            background-color: red;
        }

        /* a:active{
            background-color: red;
        } */

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

</head>
<body>
    <a href="" class="home">首页</a>
    <a href="">国内</a>
    <a href="">国际</a>
    <a href="">军事</a>
    <a href="">财经</a>
</body>
</html>

12.选择器权重

个数	选择器	权重，CSS中用四位数字表示权重，权重的表达方式如：0,0,0,0
1	类型（元素选择器）	0001
2	Clas s选择器（类选择器）	0010
3	id选择器	0100
4	包含选择器	为包含选择符的权重之和
5	内联选择器	1000
6	!import	10000
	CSS选择器解析规则1：	当不同选择符的样式设置有冲突的时候，高权重选择器符的样式会覆盖低权重选择符的样式
	CSS选择器解析规则2：	相同权重的选择符，样式遵循就近原则，哪个选择符最后定义，就采用哪个选择符样式

13.文本属性

个数	属性	描述	说明
1	font–size	字体大小	单位是px，浏览器默认是16px，设计图常用字号是12px
2	font–family	字体	当字体中是中文字体、英文字体中有空格时，需加双引号；多个字体中间用逗号链接，先解析第一个字体，如果没有解析第二个字体，以此类推
3	color	颜色	`color:red` `color:#ff0;` `color:rgb(255,0,0)` 0-255，rgba()–最后一个数字表示透明度
4	font–weight	加粗	`font-weight：bolder(更粗的)/bold(加粗)/normal(常规)` `font-weight:100-900;`100-500不加粗，600-900加粗
5	f ont-style	倾斜	`font-style:italic(斜体字)/oblique(倾斜的文字)/normal（常规显示）`
6	text–align	文本水平对齐	`text-align:left`水平靠左`text-align:right`水平靠右`text-align:center;`水平居中`text-align:justify;`水平两端对齐，但是只对多行起作用
7	line-height	行高	lline-height的数据=height的数据，可以实现单行文本垂直居中，行高
8	text–in dent	首行缩进	text–in dent可以取负值；text-indent属性只对第一行起作用，一般使用2em，即相对字体大小的两倍
9	letter–spacing	字间距	控制文字与文字之间的距离，字符间距
10	word–spacing	词间距	可以取负值
11	text–decoration	文本修饰	text–decoration:none 没有（一般用在超链接中）/unde rline下划线/overline上划线/line-through删除线，如果要使用多个，使用空格隔开
12	f ont	文字简写	font是font-style font-weight font-size/line-height fomt–family的简写。例：`font:italic 800 30px/80px "宋体"`顺序不能改变，必须同时指定font-size和font-family属性时才起作用
13	text–transform	大小写	capitalize–首字母大写，lowercase小写，up per case全部大写，none不做设置

font-family常用字体：
- 微软雅黑
- 楷体
- 宋体
字体加粗：100细体，400正常，700加粗，900更粗体

14.千锋简介 案例

<!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>
        .title {
            height: 50px;
            width: 200px;
            font-size: 25px;
            background-color: #808080;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }

        .p1 {
            width: 500px;
            font-size: 20px;
            text-indent: 2em;
        }

        span {
            color: red;
        }
    </style>
</head>

<body>
    <p class="title">千锋简介</p>
    <p class="p1"><strong>Lorem ipsum, dolor sit amet consectetur </strong>adipisicing elit.
        Fuga, amet modi pariatur dolorem
        officia, quas quasi
        aliquid molestiae qui,
        <span>deleniti mollitia magnam praesentium quaerat at animi tempore </span>
        assumenda quibusdam ex.
    </p>

    <p class="p1">Lorem,<strong> ipsum dolor sit amet consectetur adipisicing</strong> elit. Natus assumenda, dolore
        libero
        explicabo, commodi
        minima voluptate molestiae et excepturi provident animi in iure exercitationem aperiam vel nostrum repellat
        mollitia voluptas!</p>
    <p class="p1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus reiciendis adipisci dolore ex
        maxime libero
        provident debitis inventore soluta voluptatem quisquam, illum hic in accusantium! Perspiciatis fuga quis
        voluptatem corporis.</p>

</body>

</html>

格式化代码

在这里插入图片描述

15.列表属性

个数	属性	描述	说明
1	list-style-type	定义列表符合样式	`list-style-type:disc（实心圆）/circle(空心圆)/square(实心方块)/none(去掉符号)`
2	list-style-image	将图片设置为列表符合样式	`list-style-image:url();`
3	list-style-position	设置列表项标记的放置位置	`list-style-position:outside;`列表的外面默认值 `list-style-position:inside`列表的里面
4	list-style	简写	`list-style:none`去除列表符号 `list-style:disc url() inside`(这里顺序可以随便改换)

16.背景属性

个数	属性	描述	说明
1	background-color	背景颜色	`background-color:red`
2	background-image	背景图片	`background-image:url()`
3	background-repeat	背景图片的平铺	`background-repeat:no-repeat/repeat/repeat-x/repeat-y`
4	background-position	背景图片的定位	`background-position:水平位置垂直位置`；可以给负值（可以给数值也可以使用right、left、center）
5	background-attachment	背景图片的固定	`background-attachment:scorll(滚动，默认值)/fixed(固定，固定在浏览器窗口，固定之后就相对于浏览器窗口了)`
			可以简写成bac kground
6	bac kground-size	背景图片的大小	`bac kground-size:500px 500px

<!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>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

        .box2 {
            width: 900px;
            height: 1000px;
            background-color: rgba(255, 0, 0, 0.549);
            background-image: url("../img/2056332.jpg");
            background-size: contain;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        .box3 {
            width: 500px;
            height: 270px;
            background-color: green;
            background-image: url("../img/2056309.jpg");
            /*
            默认是平铺效果
            */
            background-repeat: no-repeat;
            background-position: 70% 10%;
            /* background-position: right top; */
            background-size: contain;
            background-attachment: scroll;

        }
    </style>
</head>

<body>
    <div class="box1">大家好
        <div class="box2"></div>
    </div>
    <div class="box3">

    </div>

</body>

</html>

17.视觉差案例

<!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 {
            width: 100%;
            height: 100%;
            background-color: white;
            background-position: center;
            background-size: cover;
            background-attachment: fixed;

        }

        .box1 {
            background-image: url("../img/2056309.jpg");

        }

        .box2 {
            background-image: url("../img/2056332.jpg");
        }

        .box3 {
            background-image: url("../img/2056359.jpg");
        }

        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

</body>

</html>

18.知乎 案例

<!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 {
            width: 50%;
            height: 100%;
            background-color: yellow;
            margin: 0 auto;

        }

        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        body {
            background-image: url("../img/2056309.jpg");
            background-position: center;
            background-size: cover;
            background-attachment: fixed;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>

</body>

</html>

19.背景的复合属性

<!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>
        /* 
复合写法：
1.使用空格隔开
2.顺序可以换
3.可以只取一个值，放在后面的能覆盖前面的值
4.background-size必须独立写
*/
        div {
            width: 300px;
            height: 300px;
            /* background-color: yellow;
            background-image: url("../img/2056309.jpg");
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            background-attachment: fixed; */
            background: yellow url("../img/2056309.jpg") center no-repeat fixed;
            background-size: contain;
            margin: 0 auto;

        }

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

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

</html>

20.浮动属性

个数	属性	描述	说明
1	float	float:left	元素靠左边浮动
2	float	float:right	元素靠右边浮动
3	float	float:none	元素不浮动
浮动的作用1：		定义网页中其他文本如何环绕该元素显示
浮动的作用2：		就是让竖着的东西横着来
4	clear	Clear:none;	允许有浮动对象
5	clear	Clear:right	不允许右边有浮动对象
6	clear	Clear:right	不允许左边有浮对象
7	clear	Clear:both	不允许有浮动对象
		清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置

<!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 {
            width: 50%;
            height: 200px;
        }

        .red {
            background-color: red;
        }

        .yellow {
            background-color: yellow;
            width: 40%;
            float: left;
        }

        .blue {
            background-color: blue;

        }
    </style>
</head>

<body>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="blue"></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>
        .box1,
        .box2 {
            width: 100px;
            height: 100px;
            float: left;

        }

        .box {
            width: 100px;
            height: 200px;
            background-color: blue;
        }

        .box1 {
            background-color: red;

        }

        .box2 {
            background-color: yellow;
        }

        /* 1.写死高度 */

        /* .container {
            height: 100px;
        } */

        /* 2.清浮动 */

        /* .box {
            clear: left;
        } */

        /* 3.当前浮动元素后面补一个盒子，不设置宽高，clear：both */

        /* 4.overflow:hidden */
        .container {
            overflow: hidden;
            /* bfc,让浮动元素计算高度 */
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <!-- <div style="clear: left;"></div> -->
    </div>

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

</html>

21.浮动案例

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            float: left
        }

        div img {
            width: 187px;
            height: 125px;
        }

        div p {
            font-size: 12px;
            text-align: center;
            background-color: #f6f7f8;
            width: 187px;
        }
    </style>
</head>

<body>
    <div>
        <img
            src="http://contentcms-bj.cdn.bcebos.com/cmspic/a0f393d56f8964e95dcd077d3ed5e332.jpeg?x-bce-process=image/crop,x_0,y_57,w_640,h_430" />
        <p>吴磊时尚大片曝光 少年感十足</p>
    </div>
    <div>
        <img
            src="http://contentcms-bj.cdn.bcebos.com/cmspic/ad344613749749a3cd6305c34f29e98f.jpeg?x-bce-process=image/crop,x_0,y_91,w_640,h_430" />
        <p>吴磊时尚大片曝光 少年感十足</p>
    </div>
    <div>
        <img
            src="http://contentcms-bj.cdn.bcebos.com/cmspic/9fed4f6b5d6d22dde9af8195ff0598db.jpeg?x-bce-process=image/crop,x_0,y_305,w_640,h_430" />
        <p>吴磊时尚大片曝光 少年感十足</p>
    </div>
    <div>
        <img
            src="http://contentcms-bj.cdn.bcebos.com/cmspic/9379a58fe77d92527306ff58888f3ecd.jpeg?x-bce-process=image/crop,x_0,y_39,w_640,h_430" />
        <p>吴磊时尚大片曝光 少年感十足</p>
    </div>
    <div>
        <img
            src="http://contentcms-bj.cdn.bcebos.com/cmspic/c122866cea6c6df373f02b0e215a2cd6.jpeg?x-bce-process=image/crop,x_43,y_26,w_470,h_315" />
        <p>吴磊时尚大片曝光 少年感十足</p>
    </div>
</body>

</html>

22.盒子 模型

在这里插入图片描述

<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 {
            width: 500px;
            height: 300px;
            background-color: yellow;
            text-align: justify;
            /* 内边距 */
            /* 1个值表示四个方向都一样，2个值表示上下和左右 */
            /* 3个值：上，左右，下
            4个值：上，右，下，左 */
            padding: 30px;
        }
    </style>
</head>

<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas tempora eligendi culpa. Accusantium aspernatur
        minus asperiores impedit quibusdam cumque magni culpa vitae amet. Excepturi, id doloremque. Alias repudiandae
        voluptas aperiam?
    </div>
</body>

在这里插入图片描述

内边距特性

背景色延伸到内边距
可以使用padding-方向的写法设置单个方向
不能设置负数

边框

border:1px solid gray

三个属性分别是：大小，样式，颜色
其中样式有solid–实线，double是双实线，dashed线段线，dotted点状线
同样支持 border–方向设置单个方向
同时，还可以单独设置大小，样式与颜色：border-widthborder-styleborder-color
1个值表示四个方向都一样
2个值表示上下和左右
3个值：上，左右，下
4个值：上，右，下，左

外边距特性

margin:1px 2px 3px 4px

支持四个方向
- margin-top
- margin-bottom
- margin-left
- margin-right
外边距支持负数
屏幕居中方案：margin:0 auto

1.兄弟关系

垂直方向，外边距取两个当中的最大值，但是如果另一个为负数则会取和
水平方向，会直接求和

<!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>
        /* 群组选择器 */
        .box1,
        .box2,
        .box3,
        .box4 {
            width: 100px;
            height: 100px;
        }

        .box1 {
            background-color: red;
            margin-bottom: 20px;


        }

        .box2 {
            background-color: yellow;
            margin-top: 10px;
        }

        .box3 {
            background-color: blue;
            float: left;
            margin-right: 20px;
        }

        .box4 {
            background-color: green;
            float: left;
            margin-left: 10px;
        }
    </style>
</head>

<body>

    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>

</html>

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>
        .box1,
        .box2 {
            padding: 0;
        }

        .box1 {
            width: 500px;
            height: 500px;
            background-color: red;
            margin-top: 10px;
            /* padding-top: 10px; */
            /* border: 1px solid transparent; */
            /* float: left; */
            overflow: hidden;
        }

        .box2 {
            width: 200px;
            height: 100px;
            background-color: yellow;
            margin-top: 30px;
            margin-left: 0;
            /* float: left; */
        }


        /* 1.子margin-top转化为父的padding-top */
        /* 2.给父盒子设置边框 */
        /* 3.给父或者子盒子添加浮动 */
        /* 4.overflow:hidden BFC块，不会影响外部*/
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

</html>

23.PS基本操作

ps===图片处理软件（美工用来作图，前端用来测量，吸取颜色，切图）

拿到设计稿之后使用ps 打开

图片放大和缩小
- ctrl++
- ctrl±
- alt+滚动
图片的移动
- 按住空格，鼠标变为小手，拖动图片
如何调整出标尺
- ctrl+r
- 作用：拖动参考线方便测量
- 视图里面找到标尺，把对勾勾选上
测量图片大小
- 标尺–右键–像素
- 使用矩形选框工具（左侧竖着第二个）
- 如何查看数据大小（窗口——信息面板=====wh）
截图
- 1.使用快捷键截图===每次只能截取一个
  - 使用选框工具框选你要截取的区域
  - ctrl+cctrl+n回车=ctrl+v=ctrl+s回车=======回车
- 2.切片工具（裁剪工具进行切换）
  - 使用切片工具框选你要留住的区域，点击文件，存储为wen所用格式，弹窗里面点击存储
  - 弹窗======格式：仅限图像，切片：所有用户切片
吸取颜色
- 使用吸管工具
- 吸取完颜色后，点击左下角的背景色，会有弹窗，在弹窗里面选择十六进制的颜色值并进行复制

24.盒子 案例

在这里插入图片描述

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            display: block;
        }

        #box {
            width: 241px;
            height: 335px;
            background-color: white;
            margin: 0 auto;
            padding: 11px 11px 18px;
        }

        .title {
            width: 235px;
            height: 19px;
            background-color: rgb(252, 250, 250);
            padding-left: 4px;
            border-left: 2px solid blue;
            color: blue;
            font-size: 14px;
            line-height: 19px;
            font-weight: bold;
            margin-bottom: 12px;
        }

        /* .bigpic {
            width: 241px;
            height: 170px;
        } */

        .bigpic p {
            width: 241px;
            height: 26px;
            background-color: #f6f7f8;
            font-size: 12px;
            text-align: center;
            /* 垂直方向居中 */
            line-height: 26px;
            margin-bottom: 16px;
        }

        .smallpic p {
            font-size: 12px;
            width: 112px;
            background-color: #f6f7f8;
            line-height: 18px;
            text-align: center;
        }

        .smallpic img {
            width: 112px;
            height: 70px;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="title">女人图片</div>
        <div class="bigpic">
            <img src="../img/2056309.jpg" style="width: 241px;height:170px" alt="" />
            <!-- <img src="../img/2056309.jpg" /> -->
            <p>这是一张无关紧要的图片</p>
        </div>
        <div class="smallpic">
            <div class="left">
                <img src="../img/2056332.jpg" alt="" />
                <p>啊哈哈哈，我滴任务完成啦</p>
            </div>

            <div class="right">
                <img src="../img/2056359.jpg" alt="" />
                <p>给你机会你不中用啊</p>
            </div>
        </div>
    </div>
</body>

</html>

25.溢出属性

1.溢出属性（容器的）

说明：

overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;

visible:默认值，溢出内容会显示在元素之外
hidden：溢出内容隐藏
scroll：滚动，溢出内容以滚动方式显示
auto：如果有溢出会添加滚动条，没有溢出正常显示
inhreit：规定应该遵从父元素继承 overflow属性
overflow-x：X轴溢出
overflow-Y：Y轴溢出

<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>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: yellow;
            /* overflow: visible;显示溢出 */
            /* overflow: hidden;溢出隐藏，文本裁切 */
            /* overflow: scroll;有没有溢出，都会有滚动条 */
            /* overflow: auto;只有溢出时才会有滚动条 */
            /* overflow: inherit;继承父元素的效果 */
            overflow: auto;
        }

        .box {
            width: 500px;
            height: 100px;
            overflow-y: auto;
            /* 要配合使用 */
            overflow-x: hidden;
        }
    </style>
</head>

<body>
    <div class="box1">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi officia impedit commodi, quibusdam repellendus
        repudiandae ex ullam neque iusto id debitis dolorum? Consequatur iure reprehenderit fugiat quos reiciendis
        tempora pariatur.

    </div>
    <div class="box"><img src="../img/2056309.jpg"></div>
</body>

2.空余空间

说明：

white-space:normal/nowrap/pre/pre-wrap/pre-line/inherit该属性用来设置如何处理元素内的空白；
normal:默认值，空白会被浏览器忽略
nowrap：文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止
pre–wrap：显示空格，回车，换行
pre-line：显示回车，不显示空格，换行

说明：

text-overflow:clip/ellipsis
clip:默认，不显示省略号（…）
ellipsis:显示省略标记

当单行文本溢出显示省略号需要同时设置以下声明：

1.容器宽度：width:200px

2.强制文本在一行内显示：white-space:nowrap

3.溢出内容为隐藏：overflow:hidden

4.溢出文本显示省略号：text-overflow:ellipsis

26.溢出属性案例

在这里插入图片描述

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 890px;
            height: 290px;
            background-color: white;
            margin: 0 auto;
            overflow: auto;
        }

        .info {
            width: 162px;
            height: 112px;
            border: 1px solid #808080;
            float: left;
            margin-right: 48px;
            margin-bottom: 20px;
        }

        .info div {
            width: 162px;
            height: 84px;
            background-color: #cccccc;
            background-image: url("../img/2056359.jpg");
            background-size: cover;
            font-size: 13px;
        }

        .price {
            height: 63px;
            line-height: 63px;
            padding-left: 21px;
            color: #b5b5b5;
        }

        .info .date {
            color: #b5b5b5;
            padding-left: 21px;
        }

        .category {
            background-color: white;
            height: 28px;
            line-height: 28px;
            color: #000;
            text-align: center;
            font-size: 12px;
        }

        .info:hover div {
            background-color: #219cea;
            background-image: url("../img/2056309.jpg");


        }

        .info:hover .price {
            color: white;
        }

        .info:hover .date {
            color: white
        }

        .info:hover .category {
            color: #219cea;
            background-image: url("../img/2056332.jpg");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: right bottom;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="info">
            <div>
                <p class="price">¥100.00圆</p>
                <p class="date">有效期至：2022-8-4</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>

        <div class="info">
            <div>
                <p class="price">¥100.00圆</p>
                <p class="date">有效期至：2022-8-4</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">¥100.00圆</p>
                <p class="date">有效期至：2022-8-4</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">¥100.00圆</p>
                <p class="date">有效期至：2022-8-4</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">¥100.00圆</p>
                <p class="date">有效期至：2022-8-4</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">¥100.00圆</p>
                <p class="date">有效期至：2022-8-4</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">¥100.00圆</p>
                <p class="date">有效期至：2022-8-4</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">¥100.00圆</p>
                <p class="date">有效期至：2022-8-4</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">¥100.00圆</p>
                <p class="date">有效期至：2022-8-4</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">¥100.00圆</p>
                <p class="date">有效期至：2022-8-4</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>


    </div>
</body>

</html>