HTML，CSS 基础知识整理

Day01 html基础

1.网站三要素

html===结构===w3c指定语法规则

css===表现===w3c指定语法规则

js===行为===ECMA指定语法规则

2.各种的标签

1）文章标题标签 h1-h6

特点：双标签 从h1到h6字号依次变小，文字自带加粗效果。纵向排列。

扩展：h1标签有唯一性，一个网页只允许出现一次h1，一般h1中用来放logo图

2）段落标签p

特点：双标签，段落与段落之间自带间距，文字碰到浏览器的右侧边缘会自动换行，纵向排列。

3）加粗标签 b strong

特点：双标签，都可以实现文字的加粗效果。横向排列。

区别：strong标签有语气加重效果，表示强调，有利于搜索引擎的引擎。

4）倾斜标签 i em

特点：双标签，会让文字倾斜，横向排列。

区别：em有语气加重效果，表示强调，有利于搜索引擎的引擎。

5）下划线：u

特点：双标签 横向排列

6）删除线：s del

特点：双标签 横向排列，文字中间画一条线

区别：del有语气加重效果，表示强调，有利于搜索引擎的引擎。

7）上标和下标

上标：sup

下标：sub

特点：双标签 横向排列

8）强制换行：br

特点：单标签

9）水平线标签：hr

特点：单标签，有画线和换行的作用

10）图片标签：img

特点：单标签，横向排列

src属性：写图片的路径

alt属性：当图片加载不出来的时候显示的提示信息

title属性：当鼠标悬停到图片上显示的提示信息。

11）超链接标签：a

主要作用：实现网页的跳转。

特点：双标签 文字自带下划线和文字的颜色，横向排列的

href属性：你要跳转的地址

1.可以写真实的网址

2.可以写自己创建的html文件

3.可以直接写图片的地址

target属性：规定地址的打开方式

_self:在当前窗口打开,默认值。

_blank：在新窗口打开

12）列表标签

有序列表：ol+li 几乎不用

无序列表：ul+li

使用场景：新闻条、导航条

自定义列表：dl+dt和dd

一般用来做解释说明。dd是对dt的解释说明

使用场景：一般用来做图文混排

3.特殊的符号

1.空格

 小

 大

2.版权

©

3.商标：

®

4.大于号：>

5.小于号：<

4.title属性

所有的标签都可以使用title属性

5.div和span

以下2个标签都是没有意义的标签

div标签：一般是用来划分页面的区域的。双标签，纵向排列的

span标签：用来修饰某一小段文字的。双标签，横向排列的

6.表单标签form

属性

1.action属性，写服务器地址的（由后端人员提供）

2.method属性，写提交方式（get、post）

3.name属性：给表单起名字的

表单元素（表单控件）

1.文本输入框：<input type="text">

2.密码输入框：<input type="password">

3.提交按钮：<input type="submit">

4.重置按钮：<input type="reset">

注意：表单元素一定要写在form标签里边，如果不写在form标签里面，重置提交是没有效果的。

Day 02 css基础

css:层叠样式表 目前使用的版本是3.0，主要作用就是为了美化网页。

 

一．css的书写位置

1.内部样式表：课堂小案例，代码量比较少的

在head标签中书写一个style标签，style标签里面就是书写css代码的地方

2.外部样式表:完整大项目，代码量比较大的

1）需要单独创造一个后缀名为.css的文件，这个文件中就是书写css代码的地方

2)让html文件和css文件关联在一起，怎么关联

在head标签中写一个link标签，href属性中写你要关联的css文件的路径即可。

3.行内（内联、行间）样式表(不怎么用)

在标签名字的后面写一个style属性，引号包裹的就是书写css样式语句的地方

二．样式表的优先级问题

行内>内部和外部的优先级看代码的书写顺序，后者覆盖前者

注意：只会覆盖相同的样式语句，不同的样式语句依然会保留下来的。

行内优先级是最高的

三．选择器

1．标签（元素、类型）选择器：直接根据标签名字来找的就是标签选择器

2．id选择器

1)需要给标签起一个id的名字（只需要在标签名后面写一个id属性即可，属性值就是id的名字，名字随便起）

2)使用的时候一定要在id名字之前加#

注意：id名字具有唯一性，在这个页面中id名字使用过了，下次就不要再起这个名字（行业规则）

3．类选择器

1）需要给标签起一个类名（需要在标签名字的后面写一个class属性，属性值就是类的名字）

2）在使用的时候一定要在类名之前加点

注意：

1.一个类名可以多次使用，如果好几个标签样式都是一样的，就可以共用同一个类名

2.一个标签可以起多个类名，class永远只写一个，多个类名引号中间空格隔开即可

4．包含选择器

后代：标志是空格，可以越级查找，只要是后代都能找见

子代：标志是大于号，不可以越级查找，只能找见儿子。

5．群组

标志是逗号

主要目的：是为了减少代码量，当多个选择器样式都一样的时候可以放一块书写

6．通配符

标志是*

可以找到所有的标签

使用场景：清除标签自带间距*{padding:0;margin:0;}

7．伪类选择器标志：一个冒号

1. :link========链接未访问(浏览器的历史记录中没有)===搭配超链接a标签

2. :visited======链接已访问===搭配超链接a标签

3. :hover========鼠标悬停===搭配任何的标签

4. :active=======鼠标按下===搭配任何的标签

在使用伪类选择器的时候需要和标签搭配使用

注意：如果以上4个伪类你要同时书写，那么顺序不可打乱

8. 伪元素选择器：（元素也就是标签，所以伪元素可以看作是伪标签

标志是2个冒号

1）::after=====在。。。。之后。需要结合content一起使用

2）::before====在。。。。之前。需要结合content一起使用

after和before支持写css代码,默认的元素类型是行内元素.

3）::first-line====找第一行的

4）::first-letter====找第一个字

四．选择器的权重（选择器的优先级）

什么场景下才会产生优先级：当多个选择器在操作同一个标签

权重值越大，优先级越高，权重值一致的情况下，后者覆盖前者

通配符选择器：0

标签选择器：1

类选择器：10

伪类选择器：10

id选择器：100

行内样式表：1000

包含选择器：你用到的所有的选择器权重相加之和。

群组选择器：按照各自原先的权重值走

五.样式语句

1.文字相关样式

1）文字颜色：color

2）字号：font-size

3）加粗：font-weight：700;

写单词:

lighter===变细

normal===正常，不加粗

bold====加粗

bolder===更粗（其实效果和bold是一样，只是语气加重

写数字：有9个数字 100 200 300 400 500 600 700 800 900

注意：写数字的时候不要单位

100===变细，和lighter的效果是一样

400===正常，和normal的效果是一样的

600===加粗，和bold是一样的（但是一般行业内喜欢写700）

4）倾斜：font-style

normal:正常，文字不倾斜

italic:倾斜

5）字体 font-family:

谷歌浏览器的默认字体是微软雅黑，其他浏览器的字体可能是宋体

我们可以写多个字体，字体之间通过逗号隔开，浏览器会从左到右挨个阅读，如果第 一个字体可用就用，不可用就阅读第二个，依次类推，如果这些字体都不可用就采 用默 认的iti

注意：写字体的时候：如果字体是汉字或者1个以上的英文单词那么必须加引号

*/

font-family: "娃娃体", "华文彩云1", "楷体1", abc, "hello world";

6）首行缩进 text-indent

7）文本修饰线：text-decoration:

underline=====下划线

overline======上划线

line-through===中划线，删除线，贯穿线

none====没有线，一般是用来清除标签自带的下划线的(比如a标签)

7）宽度:width

8) 高度：height

2.文本的对齐方式

1）水平对齐方式：text-align

left=====左对齐

right====右对齐

center===居中对齐

justify===2端对齐（目前只需要知道里面有这个词即可）

 

2）垂直对齐方式（行高）：line-height

这个单词的本意是行高的意思（行高指的就是行与行的间距）

文本是单行的时候：

当line-height的值比height小的时候：文本垂直偏上

当line-height的值比height大的时候：文本垂直偏下

当line-height的值和height一致的时候：文本刚好垂直居中。

文本是多行的时候：他指的就是行与行的间距。

： 3.垂直对齐（只能应用于行内块元素）

vertical-align:垂直对齐

但是前提是元素类型必须是行内块元素。

值有以下：

1.top======顶线对齐

2.middle====中线对齐

3.baseline===基线对齐,默认值

4.bottom=====底线对齐

行内块元素为什么会自带3-5px的间距呢？就是因为行内块元素默认和文字的基线对齐

如何解决自带的3-5px的间距呢？

1.只要让vertical-align的值不为baseline就可以

2.让盒子的font-size设置为0(缺点:盒子当中如果有文字，这个文字会看不见，所以要想使用这种方式要确保盒子中是没有文字)

3.浮动（缺点：浮动之后元素会不占据位置，虽然能解决自带的间距问题，但是会导致布局出现混乱）

 

3.和背景相关的样式：

单一写法（非简写方式）：

1.背景颜色：background-color

2.背景图片： background-image: url(图片的路径);

当盒子比图片大的时候默认会出现平铺现象（也就是图片会复制多次显示）

当盒子比图片小的时候会出现裁切的现象（有一部分图片显示不出来）

当盒子与图片一样大的时候：刚好显示

3.设置背景图片的平铺规则：background-repeat

repeat====平铺，默认值

no-repeat====不平铺

repeat-x=====横向平铺

repeat-y=====纵向平铺

4.设置背景图片的位置：background-position

1.直接借助于方位名词来书写（top、bottom、left、right、center）

2.直接写坐标点：盒子的左上角是0，0点，

横向为x轴，向右是正数，向左是负数

纵向为y轴，向下是正数，向上是负数

background-position:x y;

5，复合写法（简写方式）：

background:需要什么值就写什么。

目前这几个值书写的时候是没有书写顺序的。

值与值之间通过空格隔开。

4，在网页中显示图片的方式

1.img标签

2.背景图

区别1：img属于html，背景图属于css

区别2：img会占据位置，背景图是不占据位置的。

六.浮动：float

浮动的常见写法：

float:left;===向左漂浮

float:right;===向右漂浮

float:none;===不漂浮（默认本来就不漂浮，所以写了和没写一样）

浮动的主要作用：是为了实现横向排列。

浮动的特点：

1.元素一旦加了浮动，就会漂浮起来，不占据位置，会导致后面的元素向前补齐。

2.浮动的元素是没有办法覆盖文字和图片的。（原理会在第二周周五学习）

3.给‘相邻’的多个元素都添加浮动，会实现横向排列的效果

如果加的都是左浮动：依次从左到右横向排列

如果加的都是有浮动，依次从右到左横向排列

4.如果一行放不下会自动换行。

如果上一行元素有某一个元素的高偏大，会出现卡着过不去的现象。

5.默认纵向排列的标签不设置宽度，宽度和父亲保持一致，但是加了浮动之后宽度由内容决定。

6.默认横向排列的标签不设置宽度，宽度由内容决定，就算手动设置宽高也是加不上的，但是如果给这个标签写了浮动，那么他支持添加宽高了

浮动带来的不好的影响：

元素做了浮动后，会导致后面的元素向前补齐

清除浮动：

清除浮动不是取消浮动，而是清除前面浮动的元素带来的’影响‘

清除浮动的写法：

clear:left;=====清除前面左边浮动带来的影响

clear:right;====清除前面右边浮动带来的影响

clear:both;=====清除前面浮动元素带来的影响，不管前面是左浮动还是右浮动都可清除

清除浮动的语句写在哪里？谁受到了影响就写给谁

 

7.盒子模型：

组成部分：

1.内容 center

2.内间距padding（内容与盒子之间的填充物）===内容与盒子边的距离

/* ==========复合写法============ */

/* 1个值 同时给4个方向都添加 */

/* padding: 10px; */

/* 2个值 上下 左右间距 */

/* padding: 10px 20px; */

/* 3个值 上 左右 下 */

/* padding: 10px 20px 30px; */

/* 4个值 上 右 下 左 顺时针顺序赋值 */

/* padding: 10px 20px 30px 40px; */

/* =======单一写法========== */

padding-top: -10px;

padding-bottom: 20px;

padding-left: 30px;

padding-right: 40px; */

思考：内间距的值可不可以写负数？ 不可以写*/

3.边框线border

边框线的样式

solid：实线

dashed：虚线

dotted:点线

double:双线

none:没有线

4.外间距margin====盒子与盒子之间的距离

思考：外间距可以写负数吗？可以写负数

margin-top的值如果为正数：元素会向下走

如果为负数：元素会向上走

加了内间距和边框线之后盒子会被撑大

自己写和width和height指的是内容区域的宽度和高度

总宽的计算规则：内容区域的width+左右的padding+左右的border

总高的计算规则：内容区域的height+上下的padding+上下的border

-->

 

画三角形的步骤：

1.宽高写0

2.让4个方向边框的颜色都是透明色transparent。需要箭头朝哪个方向的，就让他对应方向的颜色调出来即可

比如需要箭头朝右的，把左侧颜色调出来

比如需要箭头朝下的，把上放的颜色调出来

七.元素类型的分类

从标签（元素）的特点上来分类：

1.块元素：block

特点：

1）独占一行，纵向排列，可以设置宽高

3）宽度不设置默认和父元素宽度是一致的，一般在布局中当作容器来使用。

常见标签：div、p、h1、h2、h3、h4、h5、h6、ul、ol、li、dl、dt、dd、hr、form

2.行内元素：inline

特点：

1）横向排列

2）不可以设置宽高

3）’有时候’上下的内外间距’有可能‘是加不上的

常见标签：span、a、i、em、b、strong、sup、sub、u、s、del

3.行内块元素：inline-block

特点：

1）横向排列

2）可以设置宽高

3）自带3-5px的间距，但是这个间距不是由内外间距导致，而是标签本身的一个特征。

常见标签：input、img

解决方法：垂直对齐（只能应用于行内块元素）

vertical-align:垂直对齐

但是前提是元素类型必须是行内块元素。

值有以下：

1.top======顶线对齐

2.middle====中线对齐

3.baseline===基线对齐,默认值

4.bottom=====底线对齐

八.元素的相互转换

1.display:block;====将元素类型设置成块级元素

2.display:inline;===将元素类型设置成行内元素

3.display:inline-block====将元素类型设置成行内块元素

九.元素的显示和隐藏

隐藏：display:none;隐藏之后该元素是不占据位置的。

显示：只要让display的值不为none都是显示

也就是display的值为block、inline、inline-block都可以达到让元素显示的目的。

使用block的频率比较。

十.定位

1.定位position

定位模式：

1.静态定位static，其实这种模式不用做研究，因为这是默认值

2.相对定位relative

3.绝对定位absolute

4.固定定位fixed

5.粘性定位sticky

2.绝对定位absolute

特点：

1.会脱离文档流

2.有层叠顺序（默认顺序html的书写顺序，后者覆盖前者，但是可以借助z-index来调整层级）

z-index的值越大层级越高，支持写负数的，不能带单位

3.参照物：是有定位的父级元素，如果往上查找所有的父级元素都没有定位就按照浏览器窗口的第一屏为参照物。

使用场景：覆盖效果

3.相对定位relative

特点：

1.不会脱离文档流

2.层叠顺序同上

3.参照物：是自己原来的位置

使用场景：可以做一些简单位置调整，给绝对定位打辅助

4.固定定位fixed

特点：

1.会脱离文档流

2.层叠顺序同上

3.参照物：永远都是浏览器的窗口

使用场景：侧边导航、广告

5.粘性定位sticky

不滚动的时候类似于相对定位，当页面滚动的时候就类似于固定定位。

使用场景：吸顶效果（顶部导航）

6.利用定位实现居中的公式：

居中公式1：(推荐)

1.先子绝父相

2.水平居中：left:50%;margin-left:负的自身宽度的一半。

3.垂直居中：top:50%;margin-top:负的自身高度的一半。

居中公式2：

1.先子绝父相

2.margin:auto;

3.水平居中:left:0;right:0; 垂直：top:0;bottom:0;

11.表格与表单

表格table

表格table

行：tr

列，单元格：td

caption标签一般用来做表格的标题，文字自带居中效果

td和th标签都是单元格，但是th标签自带居中和加粗效果，th一般用在表格的第一行。

可以写在table标签上的属性：

1.border：给表格加边框线

2.width、height：给表格设置宽高

3.cellspacing：单元格与单元格的间距（类似于外间距）

4.cellpadding:内容与格子的间距（类似于内间距）

5.bordercolor:边框线的颜色

6.bgcolor:表格的背景颜色。

7.align:表格的水平对齐方式

left：左对齐

right：右对齐

center：居中对齐

8.rules:规定表格到底要画哪种类型的线

rows===只绘制横向线

cols===只绘制纵向线

all===所有线都绘制

groups===按照组进行画线（前提是必须分组）

分组规则：

1）可以按照行进行分组

thead===表格的头部,只能使用一次

tbody===表格的身体，可以使用多次

tfoot===表格的尾部,只能使用一次

2）可以按照列进行分组（了解）

<colgroup span="要取出几列划分成一组"></colgroup>

可以写在tr上的属性：

1）height：单独调整某一行的高度

2）bgcolor:单独改变某一行的背景颜色

3）align:控制某一行内容的水平对齐方式

left：左对齐，默认值

right：右对齐

center：居中对齐

4）valign：控制某一行内容的垂直对齐方式

top：上对齐

bottom：下对齐

center：居中对齐，默认值

可以写在td上的属性：

1) width:调整某一个格子的宽度，但是可以影响一整列（调整某一列的宽度）

2）height:调整某一个格子的高度，但是可以影响一整行的高度（调整某一行的高度，和tr上写height的效果是一样的）

3）bgcolor：调整某一个格子的背景颜色

4）align:调整某一个格子的水平对齐方式的

left、right、center

5）valign：调整某一个格子的垂直对齐方式

top、bottom、center

二．表格单元格合并：

行合并：rowspan,横着的线消失

列合并:colspan，竖着的线消失

注意：不管是行合并还是列合并都需要写给td

 

三.表格的css写法

1，.border-spacing:格子与格子的间距

2，.border-collapse: collapse;合并相邻边框线

3.，单元格的宽度默认由浏览器自动给分配，内容多分的就多

不想让浏览器根据内容自动分配宽度只需要给table写： table-layout: fixed;

4，.empty-cells空格子的显示方式

hide===把空格子隐藏，但是隐藏之后依然占据位置

show====空格子依然显示。默认值

 

表单form

表单form

一，属性：

1.action：服务器的地址

2.method：提交方式

3.name：给表单起名字

二，表单元素（表单控件）

表单元素上都带有value属性，意思是‘值’

1.文本输入框<input type="text">

2.密码输入框 <input type="password">

3.提交按钮： <input type="submit">

4.重置按钮： <input type="reset">

5.普通按钮：

<input type="button" value="按钮里的文字">

<button>按钮里的文字</button>

6.单选按钮、单选框

<input type="radio">

要想真正形成单选的效果，必须给标签写一个name属性，属性值一样的即为同一组，一组中才能有单选效果

7.多选按钮、多选框、复选框

<input type="checkbox">

多选同一组的选项最好也起一样的name值。

8.下拉菜单select+option

option是选项的意思。

默认选项是第一个option，要想更改默认选项不建议调整标签的书写顺序，想把哪个选项设置为默认选项，只需要在该option的后面写一个selected属性即可

9.文件选择框： <input type="file">

10.多行文本输入框（文本域） <textarea></textarea>

默认是允许用户自行拖拽调整大小的。

禁止拖拽：resize: none;这是一个css代码。

11 .label:主要作用是为了扩大用户的点击范围，当用户点击文字的时候也可以选中对应的框

实现步骤：

1）先把文字放到label标签中

2) 给对应的框起一个id名字

3) 把id名字给到label上的for属性即可

12.隐藏域：<input type="hidden" value="数据数据">

主要作用：就是用来存储一些不想给用户看但是程序员需要使用的数据

注意：千万不敢存储重要的信息。

13.图像域:<input type="image" src="图片的路径">，了解

14.表单字段集(表单分组)：fieldset+legend

fieldset：自带边框线

legend身上有一个align属性可以调整标题的水平对齐方式，但是我们一般都可以用css的text-align做调整

 

12文本溢出

1，文本溢出overflow

overflow:溢出显示方式

visible:溢出依然可见，默认值

hidden:溢出的内容隐藏（常用）

scroll:不管内容有没有溢出都会出现滚动条

auto:当内容比较少的时候不会出现滚动条，只有当内容溢出的时候才会出现滚动条，（推荐，常用）

 

2，制作省略号的步骤:

1.设置宽度

2.文字不换行： white-space: nowrap;

3.溢出隐藏：overflow: hidden;

4.显示省略号：text-overflow: ellipsis;

13 BFC

BFC:block format context块级格式化上下文

1, 要研究BFC的前提是元素类型必须是块级元素。

2, 研究BFC的特点（布局规则）

1. BFC⾥的盒⼦会在垂直⽅向上⼀个接⼀个的放置（竖着排列）

2. 盒⼦垂直⽅向的距离是由margin决定的

3. 每个元素margin的左侧，与包含块border左侧相接触

目前你们可以把包含块理解成父级元素

=================================================

4. BFC就是⼀个⻚⾯上独⽴的容器，容器⾥⾯的⼦元素不会影响到外⾯的元素.

5. BFC的区域不会和浮动的元素重叠(浮动的元素不会覆盖bfc区域的元素)

左右布局：左侧元素宽度固定死，右侧元素宽度自适应（宽度随着浏览器走）

双飞翼布局：左侧右侧元素宽度固定死，中间元素宽度自适应

6. 计算BFC区域⾼度的时候浮动的元素也参与计算。（高度塌陷问题）

7 .属于同⼀个BFC的2个相邻的盒⼦会发⽣外边距重叠

父子关系的外间距重叠:给子元素加上外间距的时候会把父元素给带下来

解决方式：

1.让其中一个元素触发BFC即可（一般都是让父元素触发）

2.给父元素加顶部的透明边框线。

兄弟关系的外间距重叠:给相邻的元素都添加相邻的外间距，会选择2个外间距中的最大值使用

兄弟关系的重叠问题我们无需解决

3 ,研究如何触发BFC

1. 根元素html就是⼀个BFC。

2. 加了浮动也会触发BFC

3. 定位为绝对和固定的时候

4. overflow:hidden\auto\scroll

5. display为：inline-block、flex、table-cell、table-caption、inline-flex

4 ,浮动的元素为什么无法覆盖图片？

因为图片是行内块元素，行内块元素可以触发BFC，浮动的元素是无法覆盖BFC的，所以就无法覆盖图片。

14.伪元素选择器：

元素也就是标签，所以伪元素可以看作是伪标签

标志是2个冒号

1）::after=====在。。。。之后。需要结合content一起使用

2）::before====在。。。。之前。需要结合content一起使用

after和before支持写css代码,默认的元素类型是行内元素.

3）::first-line====找第一行的

4）::first-letter====找第一个字

15.元素的隐藏方式:

1.display:none;隐藏之后就不占据位置

2.visibility: hidden;隐藏之后依然占据位置

3.借助于透明度达到隐藏的目的

opacity调整透明度,取值区间0-1之间.

rgba这种方式只能让背景色透明,盒子里面的内容不会跟着透明.

 

选择题:以下哪种方式可以让元素隐藏

A.display:none

B.visibility: hidden

C:opacity:0

D:overflow:hidden(不选,因为这种方式只能让超出的部分隐藏)

 

16.宽高自适应

1. 宽度自适应

1)宽度不写或者写width:auto;

总宽和父元素保持一致,加了内间距和边框线不会导致盒子撑大.

2)width:100%;

内容区域的宽度和父元素保持一致,加了内间距和边框线会导致盒子撑大.

 

2.高度自适应:

1.高度不写或者写height:auto;或者写min-height

(当内容不确定有多少的时候)(高度由内容决定)

写min-height的好处:哪怕该区域没有内容也有一个最低高度存在,不会导致该区域不可见.

2.height:100%(高度随着父亲走)

高度和父亲保持一致

3高度自适应:，高度不写可能会出现的问题

当元素不写高度或者写了min-height之后会导致的问题:有可能出现高度塌陷的现象，高度塌陷:子元素浮动了导致父亲的高度受到影响.

解决高度塌陷的办法:

1. overflow: hidden;

缺点:该语句的本意是超出的部分隐藏,虽然能解决高度塌陷的问题,但是万一该元素之下有超出该盒子的内容,那么该内容会被隐藏的

2.隔墙法:在浮动元素的后面创造一个空的div标签,写一个行内样式:clear:both;

缺点:会造成html代码冗余

3.万能清除法

.clear_fix::after{

content: "";

display: block;

width: 0;

height: 0;

visibility: hidden;

overflow: hidden;

clear: both;

4.全屏页面的制作

html和body的高度默认是0，高度要想和浏览器保持一致，必须让html和body的高度都是100%

css3

一．css3新增选择器

1.属性选择器

1.[属性名字]======找到⻚⾯中所有带有这个属性名字的标签。

举例：[class]====找到⻚⾯中所有带有class属性的标签

2.[属性名字="属性值"]====精准查找。要求属性名和属性值完全⼀致才可以。

举例：[class="box"]===找到⻚⾯中class属性值为box的标签

3.[属性名字~="属性值"]====模糊查找，要求属性值中带有这个单词即可。

举例：[class="box"]=====找到⻚⾯中class值当中只要有box这个名字即可。

4.[属性名字*="属性值"]=====更模糊查找，找到属性值当中带有这个字的即可。

举例：[class="b"]====找到class的属性值中只要带有字⺟b即可。

5.[属性名字^="属性值"]====以这个值开头的

6.[属性名字$="属性值"]====以这个值结尾的

7.[属性名字|="值"]=====属性值仅是value或者以“value-”开头的值（⽐如说left-con）(感兴趣可⾃⾏研究)

2.伪类选择器

1）结构伪类（重点重点重点）

第一类：找第几个孩子

1. :first-child====找第一个孩子

2. :last-child====找最后一个孩子

3. :nth-child()，正着数

数字：写数字几就是找第几个孩子，

2n或者even:找偶数

2n+1或者odd:找奇数

4. :nth-last-child(),倒着数

数字：写数字几就是找倒数第几个孩子。

第二类：从限定的类型中找第几个

1. :fist-of-type,从同类型中找出第一个孩子

2. :last-of-type,从同类型中找出最后一个孩子

3. :nth-of-type(数字),从同类型中找出第几个个孩子

2）目标伪类

:target

目标伪类一般都要结合锚点一起使用，可以实现目标被激活之后更改一些样式的效果

3）否定伪类：（其实就是一个取反操作。找到除了谁之外的）

:not(你要否定的元素)

4）动态伪类

:link========未访问

:visited=====访问过

:hover=====⿏标滑过

:active=====⿏标按下

:focus======⿏标获得焦点的状态（一般是用在表单元素）

5）UI状态伪类

:enabled=======可⽤状态,一般配合表单元素去使用

:disabled======找禁⽤状态的，一般配合表单元素去使用

:checked======找默认选中状态，一般配合表单元素去使用

::selection====鼠标滑过文字之后的高亮效果。

3.层级选择器

后代：

空格

大于号

兄弟（相邻）：

+：只能找紧紧挨在一起的下一个兄弟。（找亲弟弟）

~: 找下面所有的兄弟（找所有的弟弟）

二、阴影

1.盒子阴影：box-shadow：

1.水平位置

2.垂直位置

3.阴影的模糊度，值越大越模糊

4.阴影的大小，值越大阴影的范围会越大

5.阴影的颜色

6.inset,不写默认是外侧阴影，写了就变成内部阴影

注意：值与值之间空格隔开，赋值顺序不要打乱,支持写多组阴影，一组之间逗号隔开。

2.文本阴影：text-shadow：水平位置 垂直位置 模糊度 颜色

三、自定义字体：@font-face

1.先把字体素材放到项目之下

2. @font-face {

/* 给你的字体起个名字 */

font-family: '字体的名字';

/* 字体的路径 */

src: url(路径);

}

四、iconfont字体图标（重点重点重点）

看着是图标，其实本质是文字，所以就拥有和文字相关的样式

五、背景

1.背景的颜色：background-color

2.背景的图片：background-image

3.背景图片的平铺规则：background-repeat

4.背景图片的位置：background-position

新增：

1.背景图片的起点background-origin

border-box:将起点设置在边框线上

padding-box：将起点设置在内间距上,默认值

content-box：将起点设置在内容区上

2.背景图片的裁切background-clip

border-box:将裁切区域设置在边框上（只要超出边框线就会被裁掉）,默认值

padding-box：将裁切区域设置在内间距上（只要超出内间距区域就会被裁掉）

content-box：将裁切区域设置在内容区（只要超出内容区就会被裁掉）

3.背景图片的大小background-size:宽度 高度，一般调整宽度即可，高度会跟着等比例变化的（重点重点重点）

1， cover:等比例放大,直到图片铺满整个盒子为止，所以有可能会出现一个边被裁掉的现象

2，contain:等比例放大,只要有一个边铺满就会立即停止，所以有可能会出现一个边留白的现象

4.多背景：

1，使用简写方式写，一组之间逗号隔开，前者覆盖后者

2，使用多背景的时候如果还想要背景颜色，最好单独再起一行写背

景颜色，并且颜色这句话要写在简写方式的后面。

浏览器内核与前缀

1.⾕歌chrome======内核(webkit)========前缀（-webkit-）

2.苹果safari======内核（webkit）======前缀(-webkit-)

3.⽕狐firefox=====内核（gecko）=======前缀(-moz-)

4.欧朋opera=======内核（presto）======前缀（-o-) 5.IE=============内核（trident）=====前缀（-ms-

六、渐变（背景）

线性渐变 :linear-gradient：

⼀个⽅向到另⼀个⽅向的变化。

1，不加前缀的写法：

1. 语法：background:linear-gradient(⽅向,颜⾊1,颜⾊2,颜⾊3,。。。) ;
2. 从左到右从红到绿的渐变：background:linear-gradient(to right,red,green); ⽅向：to是到的意思
3. ⽅向不写默认是从上到下的⼀个渐变
4. to right====从左到右
5. to left====从右到左到上
6. to right bottom====从左上到右下 ⾃⼰依次类推

2，加前缀的写法：

1. 如果写渐变的时候加了浏览器前缀了，那么在写⽅向的时候就不能写to了。
2. 语法：1:-webkit-linear-gradient(left,red,green); 这是⼀个从左到右从红到绿的意⻅线性渐变。
3. ⽅向：不写to就是从的意思
4. left===从左到右 right===从右到左 top====从上到下 bottom===从下到上

3，⽅向写成⻆度的写法

1）⻆度单位是deg。

2）语法：background: -webkit-linear-gradient(0deg,red,green);

3）不加前缀：如果你写的是0deg，那么这个⽅向默认是从下到上的。你在去转动的时候他是瞬时间⽅向的。

4）加前缀：0deg====默认从左到右，逆时针的。

径向渐变：radial-gradient

从⼀个点向四周的渐变。径向渐变写起始点必须要加浏览器前缀，否则不⽣效

1. 语法：background: -webkit-radial-gradient(起点,形状,⼤⼩，颜⾊1,颜⾊2,颜⾊3。。。);

（background: -webkit-radialgradient(center,red,green,blue) 从中⼼点向四周扩散，从红⾊到绿⾊再到蓝⾊：）

1. 起点：

center===中⼼点

left top===左上

left center===左中 。。。。。⾃⼰依次类推

也可以写具体的坐标点，单位可以是px也可以是%

1. 注意：

径向渐变如果你不写起点，默认就是中⼼点

如果不写起点，就可以不加前缀

写了起点就要加前缀。

1. 径向渐变形状：

circle=====圆

ellipse====椭圆

正⽅形盒⼦椭圆和圆是⼀样的效果，最终都会呈现圆形

⻓⽅形盒⼦，那么默认是椭圆。

1. 径向渐变的⼤⼩（不同尺⼨的渐变）

closest-side:最近边

farthest-side:最远边

closest-corner:最近⻆

farthest-corner：最远⻆

重复性渐变：单词之前加repeating

1）⽆论是线性还是径向都⽀持重复。

2）语法：在线性单词之前加repeating即可。⾊值的百分⽐⾃⼰去定义。

3）线性渐变的重复：background: repeating-linear-gradient(to bottom,red 0%,green 10%,blue 20%);

4）径向渐变：background: -webkit-repeating-radial-gradient(center center,red 0%,green 10%,blue 20%);

七，精灵图：sprite

1）图⽚整合技术：意思就是将好多⼩图整理到⼀张⼤图上⾯去。

2）这种技术也叫作精灵图、雪碧图、sprite。

3）为什么要使⽤精灵图（好处）

a) 减少服务器的请求次数

b) 减⼩图⽚体积

c) 提⾼⽹⻚的加载速度

八，过渡transition

1．允许css的值在⼀定时间内平滑的过渡，看起来不是那么的⽣硬

2 这种效果可以⽤在⿏标滑过、单击、获得焦点等触发

3. 过渡的属性：

单⼀写法：

transition-property：需要参与过渡的属性

transition-duration：过渡的时间

transition-delay：延迟时间

transition-timing-function：运动曲线

1）ease：逐渐慢下来====默认值

2）linear：匀速运动

3）ease-in：加速运动

4）ease-out：减速运动

5）ease-in-out：先加速后减速

6）⻉塞尔曲线（了解） http://cubic-bezier.com/

7）步⻓运动：steps

4,复合写法（简写⽅式） transition：过渡的属性 过渡时间 延迟时间 运动曲线;

九，2d变形

变形属性transform，可以实现元素的（位移、旋转、缩放）等。有2

D和3D之分

x轴为⽔平⽅向，右侧是正数，y轴是垂直⽅向，向下为正数。

(⼀) 位移：translate

位移：实现元素的位置移动

transform: translateX(100px);======⽔平向右移动

transform: translateY(100px);======垂直向下移动

transform: translateX(100px) translateY(100px);====以上两句可以写成这⼀句

transform: translate(100px,100px);====这是更加简洁的写法，第⼀个值是x坐标，第⼆个值y坐标,值与值之间用逗号隔开

(⼆) 缩放:scale

1. 让元素根据中⼼原点进⾏缩放，默认值是1。

2. ⼩于1的值就是缩⼩

3. ⼤于1的值就是放⼤

4. scale(2)就是将宽和⾼都放⼤2倍

5. scale(2,1)就是宽放⼤2倍，⾼不

scaleX()====在x轴上缩放 scaleY()====在y轴上缩放 scale()====x和y⼀起缩放 这⾥不跟单位 是倍数关系

(三) 旋转:rotate

度数单位是deg。）

transform: rotateX(30deg);=====围绕x轴旋转

transform: rotateY(30deg);=====围绕y轴旋转

transform: rotateX(30deg) rotateY(30deg);===围绕x和y都旋转。

transform: rotate(30deg);=====围绕中⼼点旋转

(四) 倾斜:skew

(五) 变形原点：transform-origin

1. 变形原点就是让元素围绕着哪个点进⾏变形。

2. 这个属性只有在设置了transform属性的时候才会起作⽤。

3. 元素默认原点就是中⼼点（中⼼位置

为了保证缩放和旋转不对位移产⽣影响，⼀般如果⽤组合写法的话建议位移放在最前⾯

Day14

十、动画

1. 创建动画的⽅式

⽅式⼀：@keyframes 动画的名字{from{} to{}}

⽅式⼆：@keyframes 动画名字{0%{}....100%{}}

 .box2 {

            animation-name: run2;

            animation-duration: 2s;

        }

        @keyframes run1 {

            fron {}

            to {

                transform: translateX(500px);

            }

        }

        @keyframes run2 {

            0% {}

            100% {

                transform: translateY(500px);

            }

2，如果只有2个点位，也就是只有起点和终点那么2个方式都可以使用

3，如果运动点位是2个以上的就要使用百分比的方式，0%和100%之间可以添加很多的百分点的

4， 使用动画的方式：

单一写法：

1.动画的名字:animation-name(必要条件,必须写的)

2.动画的运动时间:animation-duration(必要条件,必须写的)

3.动画的延迟时间:animation-delay

4.动画的运动曲线:animation-timing-function

5.动画的运动次数:animation-iteration-count写数字几就是运动几次

infinite无限次运动

6.动画的运动方向:animation-direction

normal:正常,从起点走到终点

reverse:反转,从终点走到起点

alternate:正反交替运动,从起点到终点再从终点到起点

alternate-reverse:反正交替运动.

7.动画的播放状态

一般要结合鼠标滑过使用

paused是暂停的意思 running是运动的意思,这是默认值

简写方式:

animation:需要什么就写什么.

注意:其他值没有书写顺序

如果写了一个时间必然是运动时间

如果写了2个时间第一个是运动时间第二个是延迟时间

十一，3d变形transform

3d所涉及坐标轴

x轴：横向，向右为正，向左为负

y轴：纵向，向下为正，向上为负

z轴：前后，向前为正，向后为负

 

1，3d.位移：translate

1. 书写方式

transform:translateX()====x轴上移动

transform:translateY()====y轴上移动

transform:translateZ()====z轴上移动

简写：transform:translateX() translateY() translateZ()

再简写：transform:translate3D(x,y,z)

2）要想看到3d效果，必须把元素放到3d空间（3d舞台）中

如何创造3d空间？

1.先创建大盒子

2.在大盒子上写：transform-style: preserve-3d;

3.需要把舞台进行适当旋转，我们要从侧面观察效果。

2,，3d旋转rotateX(deg)

transform: rotateX(30deg);====围绕x轴旋转

transform: rotateY(30deg);====围绕y轴旋转

transform: rotateZ(30deg);====围绕z轴旋转

transform: rotate(30deg);=====围绕中⼼点旋转。

transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);=====会围绕x、y、z轴都转。

transform: rotate3d(1,1,1,0deg);=====x,y,z,旋转⻆度 0代表这个轴不参与转动 1代表参与转动 以后做旋转想围绕哪个轴转建议在后⾯带上x、y、z

3，3d缩放

如果想看到在z轴上的缩放效果⽬前看不到。

盒⼦⾥⾯得有⼦元素才能看到z缩放的效果。

做了⽴⽅体案例之后就可以很直观的看到了

4，景深（透视）perspective

实现景深的步骤：

1）给3d舞台创建⼀个⽗盒⼦

2）在⽗盒⼦上写css属性：perspective: 景深值

5，让背⾯不可⻅：加在⼦元素上的。

backface-visibility:hidden; 意思就是元素被翻转过去了，元素就不可⻅了

十二，.H5 新增标签

新增的块级元素：

1.header,可以用来写头部区域

2.footer，可以用来写尾部区域

3.nav，可以用来写导航区域

4.section，类似于div的

5.main,可以划分页面的主要内容区域

6.article,文章区域

7.aside，侧边栏

8.figure+figcaption

9.hgroup标题组

新增的多媒体标签

1. 视频：video：

a) src：视频路径

b) controls：显示视频控件、比如播放、暂停等按钮

c) autoplay：自动播放。Autoplay+muted可实现自动播放

d) loop：重复播放

e) muted：静音播放

autoplay和muted冲突，需要静音之后才能自动播放

f)poster：视频正在下载时的图像，直到点击播放按钮为止。

2. 音频audio：属性同上

3. source标签：（source媒介元素，video和audio就是媒介资源）

 

a) 允许可替换的视频、音频。提供给浏览器进行媒体类型的选择

b) type属性值：

i. 视频的格式：video/ogg video/mp4 video/webm

ii. 音频的格式：audio/ogg audio/mpeg4(mp4) audio/wav/mp3

 

 

十三，怪异盒子

1，盒子模型组成：内容区 内间距 边框线 外间距

2，盒子的分类：

1）标准盒子（w3c盒子）：box-sizing: content-box;

自己定义的width指的是内容区域的宽度

总宽 = width+左右的padding+左右的border

加了内间距和边框线会导致盒子撑大

 

2）怪异盒子（IE盒子）： box-sizing: border-box;

自己定义的widyh指的是盒子的总宽

总宽 = width

加了内间距和边框线不会把盒子撑大，而是把内容区减小了。

十四， 弹性盒子

display:flex;

弹性盒子：

1，主要作用：用来控制‘子元素’的布局

容器：其实就是父元素

项目：其实就是子元素

.2，特点：

1.父元素变成弹性盒子，子元素默认会横向排列

2.当父元素变成弹性盒子之后。子元素无论曾经是什么类型都能直接设置宽高

3.margin:auto会生效

4.子元素如果过多，不会自动换行也不会超出父元素，而是会让子元素受到挤压

3，弹性盒子轴的概念

主轴

侧轴（交叉轴）

如果把主轴设置在横向，那么侧轴就是纵向

如果把主轴设置在纵向，那么侧轴就是横向的

弹性盒子中的子元素默认都是沿着主轴做排列。

 

写给父元素

1.设置主轴的方向:flex-direction

row===把主轴设置在横向，元素会从左到右横向排列（常用）

row-reverse==把主轴设置在横向，但是是反方向的，元素会从右到左横向排列

column===把主轴设置在纵向，元素会从上到下纵向排列（常用）

column-reverse==把主轴设置在纵向，但是是反向想的，元素会从下到上纵向排列。

2.设置子元素在主轴的对齐方式（排列规则）justify-content

flex-start:起点对齐

flex-end：终点对齐

center：居中对齐

space-between:2端对齐，第一个和最后一个元素贴边，中间元素间距自动分配

space-around:中间元素的间距是贴边元素间距的2倍

space-evenly:元素和元素的间距是均分的。

3.设置子元素在侧轴的对齐方式 align-items

flex-start:起点对齐

flex-end：终点对齐

center：居中对齐

baseline:不研究

stretch:拉伸（默认值），想看到拉伸的效果，子元素不能设置宽度或者高度

侧轴如果在纵向：不能设置高度

侧轴如果在横向：不能设置宽度。

4.设置子元素是否换行：flex-wrap

nowrap：不换行，默认值

wrap：换行

wrap-reverse:反向换行

5.设置多行的对齐方式：align-content

flex-start:让多行元素全部起点对齐，行与行之间没有间距

flex-end:让多行元素全部终点对齐，行与行之间没有间距

center:让多行元素全部居中对齐，行与行之间没有间距

space-between:2端对齐，第一行和最后一行贴边，中间行的间距自动分配

space-around:中间元素行的间距是贴边行间距的2倍

写给子元素

1.align-self:设置自己在侧轴的对齐方式

flex-start

flex-end

center

baseline

stretch

2.order：可以用来调整元素的排列‘顺序’

默认的排列顺序是按照html的书写顺序

order的属性值越大排列顺序越靠后，不带单位，支持负数

非必要不调整

3.flex-shrink设置子元素是否受到挤压

0：子元素不挤压

1：子元素挤压，默认值

4.flex:数字=====给子元素分配比例

十六 ，多列属性

多列：也是一种布局方案。

使用场景：实现参差不齐的布局效果

可以实现按照列数划分布局的效果

1. column-count:按照列数进行划分，

写几就是按照几列进行划分。每一列的宽度程序自动做计算。

1. column-width:按照列宽进行划分，

程序会根据写好的宽度自动计算出需要分成几列。

3. column-gap:列间距（非必要不调整）

4. 画列线

column-rule-width:列线的宽度

column-rule-style:列线的样式

column-rule-color:列线的颜色

画列线简写方式： column-rule：需要什么写什么。

5.column-fill:列填充

auto:尽量让每一列的高度都和盒子的高度保持一致

balance（默认值）：尽量让列与列的高度是保持一致的

6. column-span设置标题是否横跨列（

注意：该单词是写给标题的）

all：横跨所有的列

none：不横跨，默认值

一般用多列会出现断层的问题，解决办法： break-inside: avoid;

​

十七.媒体查询：

1.可以实现响应式布局（会检测用户的设备大小是否发生改变，在不同的大小之下会呈现出不同的布局效果）

2.要想实现响应式布局就需要借助于媒体查询（响应式布局的核心其实是检测设备的大小是否发生改变）

3.媒体查询就可以检测设备大小是否发生改变。

4. 一般都是利用媒体查询检测设备的宽度变化。

5.媒体查询的语法：

@media 你要检测的设备类型 and (检测的条件){

只要符合条件就可以执行花括号中的语句

}

 @media all and (max-width:900px){

            body{

                background-color: green;

            }

        }

十八. 移动端

移动端：手机、ipad

常见的设备：

iphone5============真实宽度是320=======设计稿宽度640=====2倍关系

iphone678==========真实宽度是375=======设计稿宽度750=====2倍关系

iphone678/plus=====真实宽度是414=======设计稿宽度1242====3倍关系

iphoneX============真实宽度是375=======设计稿宽度1125====3倍关系

1.设备像素比dpr

设备像素比dpr = 设备像素 / 设备独立像素

设备像素：也叫做（物理像素）==== 像素点、设计稿的大小、ps量出来的大小

设备独立像素：（逻辑像素、虚拟像素、css像素）=====设备的大小、开发人员要写的css像素

转换：dpr = 设计稿的大小 / 设备的真实大小

转换： dpr = ps量出来的大小 / 开发人员要写的css像素

再转换： 开发人员要写的css像素 = ps量出来的大小 / dpr

2.到底如何去确定dpr呢？

1.先看设计稿的总宽度

2.假设总宽是750，那么一般这种设计稿对应的是iPhone678这个设备，这个设备的真实大小是375的

3.所以dpr = 750/375 = 2

 

练习1：

假设设计稿的总宽度是640的，那么对应的设备是iPhone5，真实大小是320，所以dpr = 2

假设再设计稿上测量的元素高度是88px，请问应该写多少？

公式：开发人员要写的css像素 = ps量出来的大小 / dpr

所以：要写的css像素 = 88/2=44

练习2：

假设设计稿的总宽度是1125的，那么对应的设备是iphoneX，真实大小是375，所以dpr = 3

假设在设计稿上测量的元素高度是100，请问写多少？

公式：开发人员要写的css像素 = ps量出来的大小 / dpr

所以：开发人员要写的css像素 = 100 / 3 = 33.33

3.视口：

布局视口：

视觉视口：设备上你能看见的区域

理想视口：

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

3.移动端中用的单位：rem单位

 

rem单位是一个相对单位，是相对于html的字号而言的

1rem = html的字号

假设html的字号为16px 那么1rem = 16px

假设html的字号为20px 那么1rem = 20px

所以只要html的字号发生改变，rem单位也会跟着改变。

4.为什么移动端要用rem单位？

1)做移动端要考虑设备的适配问题（其实就是自适应）

2)自适应：只要设备大小发生改变，元素大小也跟着改变

3)因为每个用户的手机型号都不一样，型号不一样设备的大小也不一样，如果我们把元素的单位写成px单位，那么将来不管是在大设备还是小设备呈现的效果都是一样的，这样就会导致在大设备上元素可能看起来比较小，在小设备上元素可能看起来比较大。

4)这样不合理，用户体验感不好，所以我们要想办法实现设备大小发生改变元素大小也发生改变。

5)当设备变大让元素也变大，当设备变小让元素也变小。

5. 既然要实现这种适配效果，为什么要用rem单位呢？

1) 就是因为rem单位会随着html的字号而发生改变，将来我们可以利用媒体查询检测设备大小的变化，在不同的区间下让html的字号都设置成不一样的，比如设备宽度大就让html字号设置大一些，设备宽度小，就让html字号设置小一些，

2)这样是要html改变了，元素用的如果是rem单位，元素自然也跟着改变。

 

6.一般做移动端媒体的区间

小于等于320

321-375之间

大于等于376

7.做移动端的步骤：

1.先确定dpr

公式：开发人员要写的css像素 = ps量出来的大小 / dpr

2.把视口改成理想视口

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

3.考虑适配问题

1.）写媒体查询更改html字号（字号可以自己随便去设置）

@media all and (max-width:320px){

html{

font-size: 12px;

}

}

@media all and (min-width:321px) and (max-width:375px){

html{

font-size: 14px;

}

}

@media all and (min-width:376px){

html{

font-size: 16px;

}

}

2）.元素到底要写？rem呢

我们要写的rem = ps测量的 / dpr / html的字号