css笔记

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、pandas是什么？

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、使用步骤

1.引入库

代码如下（示例）：

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

2.读入数据

代码如下（示例）：

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

该处使用的url网络请求的数据。

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。# css简介

主要使用场景就是美化网页，布局网页的

css是一种标记语言，称为css样式表或级联样式表

css可以设置HTML页面的文本内容（大小、字体、对齐方式等）、图片的外形（宽度、边框样式、边距等）以及版面的布局和外观显示样式

1. html：做结构
2. css：美化html，布局网页

css语法规范：两部分组成：选择器以及一条或多条声明。

<style>
    /*选择器{样式}*/
    p {
      color: red;
    }
style>

css代码风格

1. 紧凑格式
2. 展开格式

color: red;
font-size: 50px;

每一个属性放在一行上。推荐使用

3. 样式应小写（不区分大小写）

4. 空格规范

   属性值前，冒号后，保留一个空格

color: red;

​ 选择器（标签）和大括号中间保留空格

css基础选择器

1. css选择器的作用

选择标签用的

2. 选择器分类

选择器分为基础选择器和复合选择器

基础选择器是由单个选择器组成的

包括：标签选择器、类选择器、id选择器和通配符选择器

01-标签选择器

标签名作为选择器

基本语法

标签名 {
    属性1：属性值1;
    ...
}

优点：将所有同样标签改为一个样式

缺点：同样标签不能改别的样式

02-类选择器

基本语法

.类 {
    属性1：属性值1;
    ...
}

注意：“.”（英文标识），后面紧跟类名（自定义类名，不能用关键词作类名）

不能使用纯数字、中文等命名，尽量使用英文字母表示

多类名使用：多个类名用空格隔开，标签可以具有这些类名的样式

<div class="red green">div>

03-id选择器

基本语法

/*id选择器*/
  #pink {
  	color: pink;
  }

id只能是唯一的，只能被一个标签调用

04-通配符选择器

*定义：它表示选取页面中所有元素（标签）

基本语法

* {
  属性1: 属性值1;
  ...
}

通配符选择器不需要调用，自动就给所有元素使用样式

05-总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wVgb5U2L-1642940919649)(D:\A_study\html-css\study_image\css_基本选择器总结.jpg)]

css字体属性

1. 字体体系

font-family属性定义文本的字体系列

基本语句

h2 {
            font-family: 'Microsoft YaHei UI';
        }

各种字体之间必须使用英文状态下的逗号隔开，一般使用默认字体，用空格隔开多个单词组成的的字体，加引号

2. 字体大小

font-size属性定义字体大小；px（像素）是网页的常用单位

谷歌浏览器默认的文字大小为16px

基本语句

p {
	font-size: 16px;
}

一般给body指定一个文字大小，不要浏览器默认

3. 字体粗细

font-weight属性设置文字粗细，实际开发中提倡使用文字来设置文字粗细

normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100；200；300；400；500；600；700；800；900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

基本语句

font-weight: normal;

4. 文字样式

font-style属性设置文本风格

normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

基本语句

p {
	font-style:normal;
}

5. 文字复合属性写法

/*复合属性写法*/
/*font: font-style font-weight font-size/line-height font-family;*/
font: intalic  700  16px  'Microsoft yahei';

IDEA不能实现

6. 字体属性总结

font	简写属性。在一条声明中设置所有字体属性。
font-family	规定文本的字体系列（字体族）。
font-size	规定文本的字体大小。
font-style	规定文本的字体样式。
font-variant	规定是否以小型大写字母的字体显示文本。
font-weight	规定字体的粗细。

css文本属性

CSS Text（文本）属性定义文本的外观，比如文本颜色、对其文本、装饰文本、文本缩进、行间距等

1. 文本颜色

color属性定义文本颜色（开发中一般使用十六进制）

color_name（颜色）	规定颜色值为颜色名称的颜色（比如 red）。
hex_number（十六进制）	规定颜色值为十六进制值的颜色（比如 #ff0000）。
rgb_number（RGB代码）	规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。
inherit	规定应该从父元素继承颜色。

基本语句

p {
    color: rgb(111, 92, 92);
}

2. 对齐文本

text-align属性规定元素中的文本的水平对齐方式。

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

3. 装饰文本

text-decoration属性规定添加到文本的修饰。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

4. 文本缩进

text-indent属性规定文本块中首行文本的缩进。

注释：允许使用负值。如果使用负值，那么首行会被缩进到左边

值	描述
length	定义固定的缩进。默认值：0。
%	定义基于父元素宽度的百分比的缩进。
inherit	规定应该从父元素继承 text-indent 属性的值。

5. 行间距

line-height属性设置行间的距离（行高）

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

6. 文本总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7rnfnZ0b-1642940919651)(D:\A_study\html-css\study_image\css_文本属性总结.jpg)]

css的引入方式

1. 三种样式表

行内样式表（行内式）、内部样式表（嵌入式）和外部样式表（链接式）

2. 内部样式表

把style标签写在body标签内，此种方式可以控制当前整个页面元素样式设置

代码结构清晰，但没有实现结构样式完全分离

3. 行内样式表

表示

<p style="color: red">行内样式表p>

4. 外部样式表（重要）

样式单独写在CSS文件中，之后把CSS文件引入html中

基本语法

<link rel="stylesheet" href="css文件路径">

emmet语法

1. 快速生成HTML结构语法

注意：中间都不能有空格！

1. 生成标签，直接tab
2. 生成多个相同标签加上* 然后tab就可以

div*3

3. 如果有父子级关系的标签，可以用>比如ul > li就可以了

ul>li

4. 兄弟关系div+p

div+p

5. 如果生成带有类名或者id名字的，直接写.demo或者#tow tab键就可以（默认是div）

.nav
p#one /*创建p标签id为one*/

6. 如果生成的div类名有顺序，可以用自增符号$

.demo$*5

7. 如果想要在生成的标签内部写内容可以用{}表示

.demo{你好}*5

2. 快速生成css样式

1. 文字居中

/*ta:c*/
text-align: center;

2. 首行缩进

/*ti*/
text-indent: 2em;

3. 快速格式化

IDEA：ctrl+alt+L

复合选择器

1. 什么是复合选择器

是由两个或多个基础选择器，通过不同的方式组合而成的

包括：后代选择器，子选择器，并集选择器，伪类选择器等

2. 后代选择器（重要）

语法：

元素1 元素2 {
    样式声明
}

元素1，元素2必须用空格隔开，元素1必须是元素2的父类

元素2可以是儿子或者孙子等

3. 子代选择器（重要）

子选择器只能选择作为某元素的最近一级子元素，亲儿子。

语法

元素1 > 元素2 { 样式说明 }

元素1和元素2中间用大于号隔开，元素1是父类，元素2是子类

选择一定选择亲儿子

4. 并集选择器

并集选择器可以选择多组标签名，同时为他们定义相同样式

语法：

元素1, 元素2 { 样式声明 }

元素1元素2通过逗号隔开，通常用于集体声明

5. 伪类选择器

01-链接伪类选择器

用于向某些选择器添加特殊效果，比如给链接添加效果，或选择第1个，第n个元素

用冒号（：）表示，比如：hover，：first-child

选择器	例子	例子描述
a:visited	a:visited	选择所有已访问的链接。
a:hover	a:hover	选择鼠标悬停其上的链接。
a:active	a:active	选择活动的链接。(鼠标按下未弹起的链接)
a:link	a:link	选择所有未被访问的链接。

/*选择所有未被访问的链接。*/
a:link {
    color: #300;
    text-decoration: none;
}
/*选择所有已访问的链接。*/
a:visited {
    color: orange;
}
/*选择鼠标悬停其上的链接。*/
a:hover {
    color: skyblue;
}
/*选择活动的链接。(鼠标按下未弹起的链接)*/
a:active {
    color: green;
}

为确保生效：按顺序LVHA，先link-visited-hover-active

02-: focus伪类选择器

:focus 伪类选择器用于获取焦点表单元素（焦点就是光标）

语法

input:focus {
    background-color: #369;
}

6总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 .nav a
子代选择器	选择 最近一级元素	只选亲儿子	较少	符号是**>** .nav>p
交集选择器	选择两个标签交集的部分	既是 又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover 实际开发的写法
:focus 选择器	选择获得光标的表单	跟表 单相关	较少	input:focus记住这个写法

css的元素显示模式

1. 什么是元素显示模式

元素（标签）以什么方式进行显示，了解他们特点可以更好的布局我们的网页

在css中可分为以下三种模式，分别为：块元素、行内元素、行内块元素。

2. 块元素

01-常见的块级元素有

<h1> ~ <h6>、<div>、<p>、<ul>、<ol>、<li> 等等，其中<div>是最典型的块元素

02-块级元素的特点

① 比较霸道，自己独占一行
② 高度、宽度、外边距以及内边距都可以控制
③ 宽度默认是容器（父级宽度）的100%
④ 是一个容器或者是一个盒子，里面可以放行内或块级元素

03-注意事项

① 文字类的元素内不能存放块级元素

②

标签主要用于存放文字，因此

里面不能放块级元素，特别是不能放

③ 同理，

~

等都是文字类块级标签，里面也不能放其他块级元素。

3. 行内元素

01-常见的行内元素有

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等等，
其中<span>是最典型的行内元素。

02-行内元素的特点

① 相邻行内元素在一行上，一行可以显示多个
② 宽度、高度直接设置是无效
③ 默认宽度就是它本身内容的宽度
④ 行内元素只能容纳文本或其他行内元素

03-注意事项

① 链接里面不能再放链接
② 特殊情况链接可以存放块级元素，但是给转换一下块级模式最安全

4. 行内块元素

01-在行内元素中有几个特殊的标签

它们同时具有块元素和行内元素的特点，因此有些资料称它们为：行内块元素

<img />、<input />、<td>

02-行内块元素的特点：

① 和相邻行内元素（行内块元素）在一行上，但是他们之间会有空白间隙。一行可以显示多个（行内元素的特点）

② 默认宽度就是它本身内容的宽度（行内元素的特点）

③ 高度、行高、外边距、内边距都可以控制（块级元素的特点）

5. 元素显示模式总结表格

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度与高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个块级元素	不可以直接设置宽度与高度	它本身内容的宽度	容纳文本或其他行内元素
行内块元素	一行可以放多个行内块元素	可以设置宽度与高度	它本身内容的宽度

6. 元素显示模式转换

01-元素模式的转换

简单来说：一种模式的元素需要另一种模式元素的特性，这个时候就需要进行模式的转换

02-转换方式：

① 转换为块元素：display:block
② 转换为行内元素：display:inline
③ 转换为行内块元素：display:inline-block

7. 小工具snipaste

01-简单但强大的截图工具

02-下载链接](https://www.snipaste.com/)

03-快捷键使用

1. F1可以截图，同时测量大小，设置箭头，书写文字等
2. F3在桌面显示
3. 点击图片，alt可以取色（shift可以切换取色模式）
4. esc取消图片显示

8.小技巧

01-文字垂直居中

让文字行高等于盒子的高度就可以让文字在当前盒子居中

行高等于上空隙 + 文字本身高度 + 下空隙

css背景

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

1. 背景颜色

background-color属性设置元素背景颜色

基本语法：

background-color: 颜色值;

一般境况下默认颜色值为：transparent(透明的)

2. 背景图片

background-image属性：描述元素的背景图像。优点是非常便于控制位置

默认情况下，图像会重复，以覆盖整个元素。

基本语法：

background-image: none | url(图片地址);

参数：

值	描述
url(‘URL’)	指向图像的路径。
none	默认值。不显示背景图像。

3. 背景平铺

background-repeat 属性：设置是否及如何重复背景图像。

默认地，背景图像在水平和垂直方向上重复。

基本语法

background-repeat: repeat;

属性：

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。

4. 背景图片固定

background-attachment 属性：设置背景图像是否固定或者随着页面的其余部分滚动。

基本语法：

background-attachment: scroll;

属性：

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。

5. 背景图像位置

background-position 属性设置背景图像的起始位置。

基本语法

background-position: x y;

属性：

top left top center top right center left center center center right bottom left bottom center bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。

如果省略第一（二）个值，那么第一（二）个值居中显示

01-参数是方位名词

1. 如果指定两个是方位名词，两个值前后顺序无关
2. 如果指定一个方位名词，另一个值忽略，第二个值默认居中对齐

02-参数是精确单位

1. 如果是精确值，那么第一个肯定是x坐标，第二个是y坐标
2. 如果只指定一个值，那该数值是一个x坐标，一个默认垂直居中

03-参数是混合单位

​ 如果指定的两个值是精确单位和方位名词混合使用的，第一个是x坐标，第二个是y坐标

6. 背景复合写法

基本语法：

background: black url("王者.jpg") repeat-y fixed top;

7. 背景颜色半透明

基本语法

background: rgba(0, 0, 0, 0.3);

最后一个参数alpha透明度，取值范围在0-1之间

8. 背景总结

属性	作用	值
background-color	背景颜色	与定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片背景)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x和y坐标
background-attachment	背景附着	scroll(背景滚动)/fixed(背景固定)
背景简写	书写更简单	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景色半透明	背景颜色半透明	background:rgba(0,0,0,0.3);后面必须是4个值

css三大特性

css有三个重要的特性：层叠性，继承性，优先级

1. 层叠性

1. 样式冲突：遵循的原则是就近原则，那个样式离结构近，就执行那个样式
2. 样式不冲突，不会层叠

2. 继承性

css中的继承：子标签会继承父标签的某些样式，如：文字颜色和字号。

• 恰当使用继承会简化代码，降低css样式的复杂性
• 子元素可以继承父元素的样式（text-，font-，line- 这些元素开头都可以继承，以及color属性）

01-行高的继承

body {
  /*12px：字号，1.5：行高，1.5是当前元素文字大小的1.5倍*/
  font: 12px/1.5 "Microsoft YaHei UI";
}

• 行高可以跟单位也可以不跟单位
• 如果子元素没有设置行高，则会继承父元素行高

3. 优先级

当同一个元素指定多个选择器，就会有优先级的产生

• 选择器相同，则执行层叠性
• 选择器不同，则根据选择器权重执行

内联样式，如: style="…"	权值为1000
ID选择器，如：#content	权值为0100
类，伪类、属性选择器、子选择器、相邻选择器，如.content > +	权值为0010
元素选择器 如p {}	权值为0001
继承，通配符*的样式没有权值	权值为0000
!important 重要性	∞无穷大

注意点：

1. 权重是由四组数字组成，但是不会进位
2. 类选择器永远大于元素选择器，id选择器大于类选择器
3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值
4. 继承的权重是0，如果该元素没有被选中，不管选择父元素权重多高，子元素得到的权重都是0

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重

盒子模型

页面布局学习三大核心，盒子模型、浮动和定位。

1. 看透网页布局的本质

网页布局过程：

1. 先准备好相关元素，网页元素基本都是盒子box
2. 利用css设置好盒子样式，然后摆放好位置
3. 往盒子里面装内容

网页布局的核心本质：利用CSS摆盒子

2. 盒子模型组成部分

1. 盒子模型：就是把HTML页面中的布局元素看成是一个矩形盒子，也就是盛装内容的容器
2. CSS盒子模型本质就是一个盒子，封装周围HTML元素，它包括：边框、内边距、外边距和实际内容
3. 组成：
   1. border：边框
   2. content：内容
   3. padding：内边距
   4. margin：外边距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n4BJMThg-1642940919652)(D:\A_study\html-css\study_image\css_盒子模型.png)]

3. 边框

1. 基本语法

p {
  	border:5px solid red;
  }

2. border 属性在一个声明设置所有的边框属性。
3. 属性

值	描述
border-width	规定边框的宽度。
border-style	规定边框的样式。
border-color	规定边框的颜色。

4. border-style属性

值	描述
none	定义无边框。
*solid	定义实线。
*dotted	定义点状边框。在大多数浏览器中呈现为实线。
*dashed	定义虚线。在大多数浏览器中呈现为实线。

5. 单边设置边框

border-top: 1px solid red;

01-表格细线边框

1. border-collapse 属性设置表格的边框是否被合并为一个单一的边框。
2. 属性

值	描述
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

02-边框会影响盒子的实际大小

边框会把盒子实际大小变大

解决方案：

1. 测量盒子时不量边框
2. 如果测量时包含了，则宽高手动减去

4. 内边距(padding)

1. padding属性：在一个声明中设置所有内边距属性。
2. 属性

值	描述
auto	浏览器计算内边距。
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的内边距。

3. 复合写法

padding:10px 5px 15px 20px;

4个值顺时针：上、右、下、左

3个值：上、左右、下

2个值：上下、左右

1个值：上下左右

01-问题1：内边距会影响盒子的实际大小

盒子给定padding值后，会发生两件事

1. 内容和边框有了距离，添加了内边距
2. padding影响了盒子实际大小，会撑大盒子

解决方案：

​ 如果保证盒子跟效果图大小保持一致，则宽高手动减去即可

02-问题2

如果盒子本身没有指定width/height属性，那么padding不会撑开盒子大小

5. 外边距(margin)

1. margin属性：在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
2. 属性

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	以包含元素宽度的百分比指定外边距。

3. 复合写法

margin:10px 5px 15px 20px;

​ 4个值顺时针：上、右、下、左

​ 3个值：上、左右、下

​ 2个值：上下、左右

​ 1个值：上下左右

01-外边距应用

外边距可以让块级盒子水平居中，必须满足两个条件：

1. 盒子必须指定了宽度(width)
2. 盒子左右外边距都设置auto

width: 300px;
margin: 0 auto;

常用形式

margin: auto;
margin: 0 auto;

02-行内元素或行内块元素居中

​ 给其父元素添加text-align: center;即可

03-外边距合并

1. 相邻块元素垂直外边距合并

   ​ 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ms6ZuvGb-1642940919652)(D:\A_study\html-css\study_image\css_外边距合并.png)]

​ 解决方案：尽量给一个盒子添加margin值

2. 嵌套块元素垂直外边距塌陷

   当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hu7uFvuk-1642940919653)(D:\A_study\html-css\study_image\css_外边距塌陷.png)]

   解决方案：

   1. 可以为父元素定义上边框。
   2. 可以为父元素定义上内边框。
   3. 可以为父元素添加overflow：hidden。

3. 浮动的盒子没有外边距合并的问题

6. 清除内外边距

1. 网页元素都带有默认内外边距，而且不同浏览器默认的也不一致。
2. 所以要清除内外边距：

* {
    margin: 0;
    padding: 0;
}

3. 注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换成块级和行内块元素就可以了

PS基本操作

网页美工大部分效果图都是利用ps来做的

• 文件->打开：可以打开我们要测量的图片
• Ctrl+R：可以打开标尺，或者视图->标尺
• 右击标尺，把里面的单位改为像素
• Ctrl+加号(+)可以放大视图，Ctrl+减号(-)可以缩小视图
• 按住空格键，鼠标会变成小手，拖动PS视图
• 用选区 拖动 可以测量大小
• Ctrl+D可以取消选区，或者在旁边空白处点击一下也可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H5Wj7f4C-1642940919653)(D:\A_study\html-css\study_image\css_PS.jpg)]

去掉li前面的项目符号(小圆点)

语法：

li {
    list-style: none;
}

常用样式

1. 圆角边框(重点)

1. css3中，新增圆角边框样式
2. 语法：

border-radius:length;

3. border-radius 属性用于设置元素外边框圆角
4. 属性

值	描述
length	定义圆角的形状。
%	以百分比定义圆角的形状。

5. 圆形：一个正方形，border-radius的length值为边的一半
6. 圆形矩形：一个矩形：宽是长的一半，border-radius的length值为长的一半
7. 简写属性：可以跟四个值，分别代表左上、右上、右下、左下

2. 盒子阴影(重点)

1. box-shadow 属性向框添加一个或多个阴影。
2. 语法

box-shadow: h-shadow v-shadow blur spread color inset;

3. 属性

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。

4. 注意
   1. 默认外阴影(outside)，但是不可以写这个单词，否则导致阴影无效
   2. 盒子阴影不占用空间，不会影响其它盒子排列

3. 文字阴影

1. text-shadow 属性向文本设置阴影。
2. 语法

text-shadow: h-shadow v-shadow blur color;

3. 属性

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅 CSS 颜色值。

css浮动

1. 传统网页布局的三种方式

1. 普通流(标准流)
2. 浮动
3. 定位

2. 标准流(普通流/文档流)

1. 定义：就是标签按照规定好默认方式排列
2. 在标准流中有两种排版方式，一种是垂直排版，一种是水平排版
   1. 垂直排版，如果元素是块级元素，那么就会垂直排版
   2. 水平排版，如果元素是行内元素或行内块级元素，那么就会水平排版

3. 浮动

浮动应用：可以让多个块级元素一行内排列显示。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素纵向排列找浮动

01-什么是浮动

1. float：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
2. 语法

选择器 { float:属性值; }

3. 属性

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

02-浮动特性

需要掌握

1. 浮动元素会脱离标准流(脱标)
2. 浮动元素会一行内显示并且元素顶部对齐
3. 浮动元素会具有行内块元素特性

浮动特性

1. 脱离标准普通流的控制（浮） 移动到指定位置（动）, （俗称脱标）
2. 浮动的盒子不再保留原先的位置

浮动元素一行显示

​ 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。

​ 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子， 多出的盒子会另起一行对齐。

03-常见网页布局

1. 单列布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oAZCbYvo-1642940919654)(D:\A_study\html-css\study_image\css_单列布局.png)]

2. 两列布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-00VXgXlQ-1642940919654)(D:\A_study\html-css\study_image\css_两列布局.png)]

3. 三列布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rwKYAz73-1642940919655)(D:\A_study\html-css\study_image\css_三列布局.png)]

4. 混合布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-591Xxt6d-1642940919655)(D:\A_study\html-css\study_image\css_混合布局.png)]

5. 常见布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ui9wO0hK-1642940919656)(D:\A_study\html-css\study_image\css_网页布局.jpg)]

​ 代码如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见网页布局title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .top {
            height: 50px;
            background-color: gray;
            margin-bottom: 20px;
        }
        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            margin: 0 auto 20px;

        }
        .box {
            width: 980px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
        .box li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: gray;
            margin-right: 10px;
        }
        .box .last {
            margin-right: 0;
        }
        .footer {
            height: 200px;
            background-color: gray;
            margin-top: 20px;
        }
    style>
head>
<body>
    <div class="top">topdiv>
    <div class="banner">bannerdiv>
    <div class="box">
        <ul>
            <li>1li>
            <li>2li>
            <li>3li>
            <li class="last">4li>
        ul>
    div>
    <div class="footer">footerdiv>
body>
html>

04-浮动布局注意点

1. 浮动与标准流父元素搭配

   先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

2. 一个元素浮动了，理论上其余兄弟元素也要浮动

   一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题

   浮动只会影响浮动盒子后面的标准流，不会影响前面的标准流

05-清除浮动

1. 为什么清除浮动

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

   由于浮动元素不再占有原文档流位置，所以它会对后面的元素排版产生影响

2. 清除浮动本质

   清除浮动的本质是清楚浮动元素造成的影响，如果父盒子本身有高度，则不需要清除浮动

   清除浮动之后，父级就会根据浮动的子盒子检测高度，有了高度就不会影响标准流了

3. 语法

   选择器 { clear:属性值; }
   

   值	描述
   left	在左侧不允许浮动元素。
   right	在右侧不允许浮动元素。
   both	在左右两侧均不允许浮动元素。
   none	默认值。允许浮动元素出现在两侧。

   实际开发中，几乎只用clear: both;

   clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来

4. 清楚浮动方法

   1. 额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）

      ​ 优点：通俗易懂，方便

      ​ 缺点：添加无意义标签，语义化差

      ​ 注意：添加的标签不能是行内标签

   2. 父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

      ​ 优点：代码简洁

      ​ 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

   3. 使用after伪元素清除浮动（推荐使用）

      /*1*/
      .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
      	content: "";
          display: block;
          height: 0;
          clear:both;
          visibility: hidden;
      }
      .clearfix{
          *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
      }
      /*2*/
      .clearfloat::after{
      			content: "";
      			display: block;
      			clear: both;
      }
      

      ​ 优点：符合闭合浮动思想，结构语义化正确

      ​ 缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout

   4. 使用before和after双伪元素清除浮动

      /*给父元素添加*/
      .clearfix:after,.clearfix:before{
          content: "";
          display: table;
      }
      /*照顾IE6/7*/
      .clearfix:after{
          clear: both;
      }
      .clearfix{
          *zoom: 1;
      }
      

      ​ 优点：代码更简洁

      ​ 缺点：用*zoom:1触发hasLayout

06-清除浮动总结

1. 为什么清除浮动

   ①父级元素没有高度（内容需要从后台获取时，不确定内容多少，此时父级元素不设置高度）
   ②子盒子浮动了。
   ③影响下面布局了，我们就应该清除浮动了

2. 清除浮动四种方法

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写方便	添加许多无意义的标签，结构化较差。
父级添加overflow:hidden;属性	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	由于IE6-7不支持：after，兼容性问题
父级双伪元素	结构语义化正确	由于IE6-7不支持：after，兼容性问题

css定位

1. 为什么需要定位

1. 某元素可以自由在一个盒子内移动位置，并且压住其他盒子
2. 当我们在滚动窗口的时候，盒子时固定屏幕某个位置的

所以：

1. 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子

2. 定位组成

定位：将盒子定在某一个位置，也是在摆盒子，按照定位的位置移动盒子

定位 = 定位模式 + 边偏移

定位模式：用于指定一个元素在文档中的定位方式。边偏移则是决定了该元素的位置

01-定位模式

通过CSS的position属性来设置的

属性

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。(绝对定位)
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。(固定定位)
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。(相对定位)
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。(静态定位)

02-边偏移

边偏移是定位的盒子移动到最终位置，有top、bottom、left、和right4个属性

3. 静态定位(了解)

静态定位是元素的默认定位方式，无定位的意思

语法：

选择器 { position:static; }

• 静态定位按照标准流特性摆放位置，它没有边偏移
• 静态定位在布局时很少用到

4. 相对定位relative(重要)

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

语法：

选择器 { position:relative; }

特点(务必牢记)：

1. 它是相对于自己原来的位置来移动的
2. 原来在标准流的位置继续占有，后面盒子仍然以标准流的方式对待它(不脱标，继续保留原来的位置)

5. 绝对定位absolute(重要)

绝对定位：是元素在移动位置的时候，是相对于它祖先元素来说的

语法：

选择器 { position:absolute; }

特点(务必牢记)：

1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位(Document文本)
2. 如果祖先元素有定位(绝对、相对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置
3. 绝对定位不再占有原来位置(脱标)
4. 子级绝对定位的话，父级要用相对定位
5. 父盒子布局时需要占据位置，只能是相对定位

6. 固定定位fixed(重要)

固定定位是元素固定于浏览器可视区的位置。

主要使用场景：可以在浏览器页面滚动时元素的位置不会改变

语法：

选择器 { position:fixed; }

特点(务必牢记)：

1. 以浏览器的可视窗口为参照点移动元素
   • 跟父元素没有任何关系
   • 不随滚条滚动
2. 固定定位不在占有原先的位置

固定在版心右侧位置小技巧：

1. 让固定定位的盒子left:50%
2. 让固定定位盒子margin-left:版心宽度一半距离

7. 粘性定位sticky(了解)

粘性定位可以认为是相对定位和固定定位混合。

语法：

选择器 { position:sticky;top:10px; }

特点(务必牢记)：

1. 以浏览器的可视窗口为参照点移动元素
2. 粘性定位占有原先的位置
3. 必须添加top、left、right、bottom其中一个才有效

跟页面滚动搭配使用，兼容性较差，IE不支持

8. 四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，占有位置	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置

9. 定位叠放次序

Z-index可被用于将在一个元素放置于另一元素之后。

语法：

选择器 { z-index: 1; }

• 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
• 如果属性相同，书写顺序，后来者居上
• 数字后面不能加单位
• 只有定位的盒子才有z-index属性

10. 定位拓展

01-定位盒子居中

语法：

div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

02-定位特殊特性

绝对定位和固定定位也和浮动类似

1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
2. 块级元素添加绝对定位或者固定定位，如果不给宽度或者高度，默认大小是内容大小
3. 脱标的盒子不会触发外边距塌陷
4. 绝对定位(固定定位)会完全压住盒子
   1. 浮动元素不同，浮动元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字
   2. 绝对定位(固定定位)会压住下面标准流所有内容
   3. 浮动之所以不会压住文字，是因为浮动产生的目的是为了做文字环绕效果，文字会围绕浮动元素

网页布局总结

通过盒子模型，清楚知道大部分html标签是一个盒子

通过css浮动、定位可以让每个排列成为网页

一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法

1. 标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局

2. 浮动

可以让多个块级元素一行显示或者左右对其盒子，多个块级盒子水平显示就用浮动布局

3. 定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用来定位布局

4.元素显示与隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现

本质：让一个元素在页面中隐藏或者显示出来

1. display显示隐藏
2. visibility显示隐藏
3. overflow溢出显示隐藏

01-display属性

display隐藏元素后，不再占有原来的位置

后面应用其广泛，搭配JS可以做很多的网页特效

属性(*为重点)

值	描述
*none	此元素不会被显示。
*block	此元素将显示为块级元素，此元素前后会带有换行符。
*inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
*inline-block	行内块元素。（CSS2.1 新增的值）

02-visibility可显性

visibility 属性规定元素是否可见。提示：即使不可见的元素也会占据页面上的空间

属性

值	描述
visible	默认值。元素是可见的。
hidden	元素是不可见的。
collapse	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。

03-overflow溢出

overflow 属性规定当内容溢出元素框时发生的事情。

属性

值	描述
*visible	默认值。内容不会被修剪，会呈现在元素框之外。
*hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

04-案例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>土豆案例title>
    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 100px auto;
        }
        .tudou img{
            width: 100%;
            height: 100%;
        }
        .tudou .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.3) url("播放.webp") no-repeat center;
            background-size: 50px 50px;
        }
        .tudou:hover  .mask {
            display: block;
        }
    style>
head>
<body>
    <div class="tudou">
        <div class="mask">div>
        <img src="../王者.jpg" alt="">
    div>
body>
html>

伪类选择器后一个空格隔开再加一个空格是表示选择其后代：.tudou:hover .mask

ps切图

1. 常见的图片格式

图片格式	说明	优点	缺点	应用
jpg(jpeg)	不支持透明	色彩丰富，文件小	有损压缩，反复保存，会降低图片质量	网页中的大图、高清图
gif	支持透明、不透明、动画	文件较小，支持透明，没有兼容问题	色彩简单，只支持256种颜色	色彩较为单一的小图标，动画图片
png	支持透明、不透明、半透明	无损压缩，简单图片尺寸较小。png8——基本透明，色彩简单；png24——色彩丰富，对透明层的支持更丰富，细节显示较好	色彩丰富的图片尺寸较大。png24 IE6不支持	层次较多的透明图片，色彩丰富的图标，细节要求较高的高清大图等
webp	支持透明、不透明、半透明、动画	文件小，但是可以达到与jpg格式相同的图片质量；支持有损压缩和无损压缩；支持动画，支持透明	有兼容问题	支持webp格式的APP和webview
PSD	Photoshop进行平面设计的一张"草稿图"	在Photoshop所支持的各种图像格式中，PSD的存取速度比其它格式快很多，功能也很强大	PSD是ps自己的格式

2. PS切图

ps有很多切图方式：图层切图、切片切图、ps插件切图等。

01-图层切图

1. 最简单的切图方式：右击图层->快速导出为PNG
2. 需要合并图层在导出：
   1. 选中需要的图层：图层菜单->合并图层(ctrl+e)
   2. 右击->快速导出PNG

02-切片切图

1. 利用切片选中图片

   ​ 利用切片工具手动划出

2. 导出选中的图片

   ​ 文件菜单->导出->存储为web设备所用格式->选择我们要的图片格式->存储

03-PS插件切图

​ 1. Cutterman是一款运行在PS中的插件，能够自动将你需要的图曾经进行输出

​ 2. 官网：www.cutterman.cn/zh/cutterman

​ 3. 注意：Cutterman插件要求ps必须是完整版

学成在线案例

1. 准备素材和工具

1. 学成在线PSD源文件
2. 开发工具=PS/cutterman插件 + vscode(代码) + chrome(测试)

2. 案例准备工作

1. 创建根目录
2. 打开目录
3. 创建images文件夹存放图片
4. 新建index.html(网站首页统一规定为index.html)
5. 新建style.css样式文件
6. 将样式引入到HTML页面文件中
7. 样式清除内外边距的样式，检测样式表是否引入成功

3. css属性书写顺序(重点)

1. 布局定位属性：display/position/float/visibility/overflow(建议display第一个写，毕竟关系到模式)
2. 自身属性：width/height/margin/padding/border/background
3. 文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
4. 其他属性(css3)：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient…

4. 页面布局整体思路

为了提高页面制作的效率，布局时通常有以下的整体思路：

1. 必须确定页面的版心(可视区)，我们测试可得知
2. 分析页面中的行模块，以及每个行模块中的列模块，页面布局第一准则
3. 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则
4. 制作HTMl结构，先有结构，后有样式的原则，结构永远最重要
5. 先理清楚布局结构，再写代码尤为重要

5. 确定版心

这个页面的版心是1200像素，每个版心都要水平居中对齐，可以定义版心为公共类

.w {
    width: 1200px;
    margin: 0 auto;
}

6. 头部制作

导航栏(nav)：实际开发中不会直接用a而是用li包括li+a的做法

1. li+a语义更清晰
2. 用a，搜索引擎容易辨别为有堆砌关键字嫌疑，从而影响网站排名
3. nav导航栏可以不给宽度，将来可以继续添加其余文字
4. 导航栏文字不一样多，最好给链接a左右padding值撑开盒子，而不是指定宽度

search搜索框：

​ 一个search大盒子里面包括2个表单：input文本框和button按钮

7. banner制作

1. 背景图片添加

   background: url("王者.jpg") no-repeat top center;
   

2. 侧导航栏subnav

3. 浮动的盒子没有外边距合并的问题

css高级技巧

1. 精灵图

01-为什么需要精灵图

1. 目的：为了有效的减小服务器接收和发送请求次数，提高页面的加载速度，出现了css精灵技术
2. 核心原理：将网页的一些小背景整合到一张大图中，这样服务器只需要一次请求就可以了

02-精灵图(sprites)的使用

1. 精灵图的核心：
   1. 精灵技术主要针对背景图的使用，就是把多个小背景图片整合到一张大图片中
   2. 这个大图片也成sprites 精灵图 或者雪碧图
   3. 移动背景图片位置，此时可以使用backgroud-position
   4. 一般往上往左都是负值

2. 字体图标

1. 字体图标使用场景：主要用于显示网页中同用、常用的一些技巧
2. 优点：
   1. 轻量级：一个图片文字比一系列图像要小
   2. 灵活性：本质其实是文字，可以随意改变颜色、产生阴影、透明效果、旋转等
   3. 兼容性：几乎支持所有的浏览器
3. 注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化
4. 总结：
   1. 如果遇到一些结构简单的小图片可以用字体图标
   2. 如果遇到一些结构和样式比较复杂的小图片就用精灵图

01-字体图标的下载

推荐下载网站：

1. www.icomoon.io ：国外服务器，打开网速比较慢
2. www.iconfont.cn ：国内的，免费

02-字体图标的引入

1. 把下载包里面的fonts文件夹放入页面根目录下
2. css样式中全局声明字体：简单理解把这些字体文件通过css引入到页面中
3. 一定要注意字体文件路径问题
4. 粘贴在css的style里面

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?2hayrw');
  src:  url('fonts/icomoon.eot?2hayrw#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?2hayrw') format('truetype'),
    url('fonts/icomoon.woff?2hayrw') format('woff'),
    url('fonts/icomoon.svg?2hayrw#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

5. html标签内添加小图标

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8qjlMyLV-1642940919657)(D:\A_study\html-css\study_image\css_小图标.png)]

6. 修改格式

   span {
       font-family: "icomoon";
   }
   

03-字体图标的追加

把压缩包里面的selection.json从新上传，然后选中自己想要的新图标，从新下载压缩包，并替换原来的文件即可

3. css三角的做法

/*原理*/
.box1 {
    width: 0;
    height: 0;
    border-top: 10px solid pink;
    border-left: 10px solid red;
    border-right: 10px solid blue;
    border-bottom: 10px solid green;
}
/*使用方法*/
.box2 {
    width: 0;
    height: 0;
	/*照顾兼容性*/
	line-height: 0;
	font-size: 0;
    border: 10px solid transparent;
    border-right-color: pink;
}

4. 用户界面样式

01-什么是用户界面

所谓界面样式，就是更改一些用户操作方式，以便提高更好的用户体验

02-鼠标样式cursor

cursor 属性规定要显示的光标的类型（形状）。

语法：

li { cursor:pointer; }

属性：

值	描述
default	默认光标（通常是一个箭头）
text	此光标指示文本。
move	此光标指示某对象可被移动。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
pointer	光标呈现为指示链接的指针（一只手）
not-allowed	禁止

03-轮廓线outline

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

语法：

/*取消表单轮廓线*/
input {
  outline: none;
}

属性：

值	描述
outline-color	规定边框的颜色。
outline-style	规定边框的样式。
outline-width	规定边框的宽度。

文本域的拖拽问题：

textarea {
    /*防止拖拽文本域*/
    resize: none;
}

5. vertical-align应用

vertical-align属性使用场景：设置图片或者表单(行内块元素)和文字垂直对齐

注意：它只针对于行内元素或者行内块元素有效

语法：

img {
  vertical-align:baseline|top|middle|bottom;
}

属性：

值	描述
baseline	默认。元素放置在父元素的基线上。
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。

线的位置：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5mtSvAIR-1642940919657)(D:\A_study\html-css\study_image\css_基线中线顶线.jpg)]

此时可以给图片、表单这些行内块元素实现与文字垂直居中对齐： vertical-align:middle;

01-解决图片底部默认空表缝隙问题

1. 给图片添加vertical-align:middle|top|bottom
2. 把图片转换成块级元素：display:block;

6. 溢出的文字省略号显示

1. 单行文本溢出显示省略号

   满足三个条件

   /*1.先强制一行内显示文本*/
   white-space: nowrap;
   /*2.超出部分隐藏*/
   overflow: hidden;
   /*3.文本用省略好代替超出部分*/
   text-overflow: ellipsis;
   

2. 多行文本溢出显示省略号

   多行文本溢出显示省略号，有较大的兼容性问题，适用于webkit浏览器或移动端

   满足的条件

   overflow: hidden;
   text-overflow: ellipsis;
   /*弹性伸缩盒子模型显示*/
   display: -webkit-box;
   /*限制在一个块元素显示的文本行数*/
   -webkit-line-clamp: 2;
   /*设置或检索伸缩盒子对象的子元素的排列方式*/
   -webkit-box-orient: vertical;
   

   更推荐后台来做这个工作

7. 常见的布局技巧

巧妙利用一个技巧更快更好的布局

1. margin负值的运用
2. 文字围绕浮动元素
3. 行内块的巧妙运用
4. css三角强化

01-margin负值的运用

1. 给一行四个盒子添加左右边框，边框会出现1+1=2的问题

   解决方法：这时候运用margin负值是盒子向左移动压住前面一个边框

2. 给盒子添加hover效果会出现右侧边框不会改变

   解决方法：提高当前盒子的层级即可(如果没有定位，则加相对定位(保留位置)，如果有定位，则加z-index)

02-行内块巧妙运用

用于解决页码制作，如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LUTK4htH-1642940919658)(D:\A_study\html-css\study_image\css_行内块技巧.png)]

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内块巧妙运用title>
    <style>
        .box {
            text-align: center;
        }
        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }
        .box .prev,.box .next {
            width: 85px;
        }
        .box .current,
        .box .elp {
            background-color: #fff;
            border: none;
        }
    style>
head>
<body>
    <div class="box">
        <a href="#" class="prev"><<上一页a>
        <a href="#" class="current">2a>
        <a href="#">3a>
        <a href="#">4a>
        <a href="#">5a>
        <a href="#">6a>
        <a href="#" class="elp">...a>
        <a href="#" class="next">下一页>>a>
    div>
body>
html>

03-css三角强化

直角做法

.box1 {
    width: 50px;
    /*1.只保留右边的边框有颜色*/
    border-color: transparent red transparent transparent;
    border-style: solid;
    border-width: 100px 50px 0 0;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z9U5doHu-1642940919658)(D:\A_study\html-css\study_image\css_直角做法.png)]

8. css初始化

不同浏览器对有些标签的默认值是不同的，为了消除差异，对css初始化

简单理解：css初始化是指重设浏览器的样式(也称为cssreset)

京东初始化代码：

/*把我们所有标签的内外边距清零*/
* {
    margin: 0;
    padding: 0
}
/*em和i斜体 斜体文字不斜体*/
em, i {
    font-style: normal
}
/*去掉li的小圆点*/
li {
    list-style: none
}

img {
    /*border照顾低版本浏览器*/
    border: 0;
    /*取消图片底侧有空白缝隙问题*/
    vertical-align: middle
}

button {
    /*当我们鼠标经过button时候，鼠标变成小手*/
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button, input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /*抗锯齿形，让文字显示更加清晰*/
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
   	/*"\5B8B\4F53" 是宋体的意思，浏览器兼容性好*/
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide, .none {
    display: none
}
/*清除浮动*/
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

: 1px solid #ccc;
text-align: center;
line-height: 36px;
text-decoration: none;
color: #333;
font-size: 14px;
}
.box .prev,.box .next {
width: 85px;
}
.box .current,
.box .elp {
background-color: #fff;
border: none;
}

<<上一页 2 3 4 5 6 ... 下一页>>

```

03-css三角强化

直角做法

.box1 {
    width: 50px;
    /*1.只保留右边的边框有颜色*/
    border-color: transparent red transparent transparent;
    border-style: solid;
    border-width: 100px 50px 0 0;
}

[外链图片转存中…(img-Z9U5doHu-1642940919658)]

8. css初始化

不同浏览器对有些标签的默认值是不同的，为了消除差异，对css初始化

简单理解：css初始化是指重设浏览器的样式(也称为cssreset)

京东初始化代码：

/*把我们所有标签的内外边距清零*/
* {
    margin: 0;
    padding: 0
}
/*em和i斜体 斜体文字不斜体*/
em, i {
    font-style: normal
}
/*去掉li的小圆点*/
li {
    list-style: none
}

img {
    /*border照顾低版本浏览器*/
    border: 0;
    /*取消图片底侧有空白缝隙问题*/
    vertical-align: middle
}

button {
    /*当我们鼠标经过button时候，鼠标变成小手*/
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button, input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /*抗锯齿形，让文字显示更加清晰*/
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
   	/*"\5B8B\4F53" 是宋体的意思，浏览器兼容性好*/
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide, .none {
    display: none
}
/*清除浮动*/
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}