前端基础知识

CSS(补充)

一、emmet语法

1.快速生成HTML结构

• 生成标签 直接输入标签名 按tab键即可 、

  比如 div 然后tab 键， 就可以生成

• 如果想要生成多个相同标签 加上 *

  比如 div*3 就可以快速生成3个div

• 如果有父子级关系的标签，可以用 >

  比如 ul > li就可以了

• 如果有兄弟关系的标签，用 + 就可以了

  比如 div+p

• 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了

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

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

2.快速生成CSS样式语法

CSS 基本采取简写形式

​ 比如 w200 按tab 可以 生成 width: 200px;

​ 比如 lh26px 按tab 可以生成 line-height: 26px;

3.快速格式化代码

Vscode 快速格式化代码: shift+alt+f

也可以设置保存页面的时候自动格式化代码:

文件-首选项-设置-搜索emmet.include;

在settings.json下的工作区设置中添加以下语句：

​ “editor.formatOnType”: true,

​ “editor.formatOnSave”: true

二、css的复合选择器

1、什么是复合选择器？

​ 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
​ 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

2.后代选择器

​ 又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔

元素1 元素2{样式}
如：
ul li{样式}

• 中间用空格隔开
• 表示选择元素 1 里面的所有元素 2 (后代元素)
• 元素1 是父级，元素2 是子级，最终选择的是元素2
• 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
• 元素1 和 元素2 可以是任意基础选择器

3.子选择器

​ 只能选择作为某元素的最近一级子元素

元素1>元素2{样式}

• 元素1 和 元素2 中间用 大于号 隔开
• 元素1 是父级，元素2 是子级，最终选择的是元素2
• 元素2 必须是亲儿子，其孙子、重孙之类都不可以

4、并集选择器 (重要）

​ 可以选择多组标签, 同时为他们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分

元素1,元素2{}

• 元素1 和 元素2 中间用逗号隔开
• 逗号可以理解为和的意思
• 并集选择器通常用于集体声明

5、伪类选择器

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

​ **伪类选择器书写最大的特点是用冒号表示，比如 :hover 、 :first-child **

6、链接伪类选择器

​ 伪类选择器用于向某些选择器添加特殊的效果

​ 比如给链接添加特殊效果，或选择第1个，第n个元素

例：

a:link	没有点击过的(访问过的)链接
a:visited	点击过的(访问过的)链接
a:hover	鼠标经过的那个链接
a:active	鼠标正在按下还没有弹起鼠标的那个链接

a{
	color:red;
}
a:hover{
	color:blue;/*会导致鼠标经过时，由红色变成了蓝色*/
}

(我的鼠标去截图了)

7、:focus 伪类选择器

​ :focus 伪类选择器用于选取获得焦点的表单元素

​ 焦点就是光标，一般情况 类表单元素才能获取

input:focus{
	background-color:yellow;
}

总结：

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	选择后代元素	子孙即可	多	空格。n a
子代选择器	选择最近一级元素	必须子	少	大于。.n>p
并集选择器	选择相同样式的元素	可集体	多	逗号。.n,.header
链接伪类选择器	选择不同状态的链接	。	多	a{}和a:hover
:focus选择器	选择获得光标的表单	表单相关	少	input:focus

三、css的显示模式

1.元素显示模式的分类

1.1块元素

<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>...

特点：

• 独占一行。
• 高度，宽度、外边距以及内边距都可以控制。
• 宽度默认是容器（父级宽度）的100%。
• 是一个容器及盒子，里面可以放行内或者块级元素。

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

<p> 标签存放文字，不能放块级元素，特别是不能放<div> 
同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

1.2行内元素

常见：

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

​ 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

特点：

• 相邻行内元素在一行上，一行可以显示多个。

• 高、宽直接设置无效。

• 默认宽度就是它本身内容的宽度。

• 行内元素只能容纳文本或其他行内元素。

链接里面不能再放链接

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

1.3、行内块元素

常见：

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

​ 它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素

特点：

• 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。
• 一行可以显示多个（行内元素特点）。
• 默认宽度就是它本身内容的宽度（行内元素特点）。
• 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

总结：

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

2.元素显示模式的转换

用display:

• 转换为块元素：display:block;
• 转换为行内元素：display:inline;
• 转换为行内块：display: inline-block;

3.单行文字垂直居中的代码

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-81xr28OR-1680268816225)(C:/Users/lenovo/AppData/Roaming/Typora/typora-user-images/image-20230331143128815.png)]

!:行高的上空隙和下空隙把文字挤到中间了，

​ 如果行高小于盒子高度,文字会偏上，

​ 如果行高大于盒子高度,则文字偏下。

四、css的背景

可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

1.背景颜色

background-color

background-color:颜色值;（背景默认透明transparent）

2.背景图片

background-image 定义元素的背景图片

background-image:none|url(...)

参数值	作用
none	无背景图（默认）
url	用绝对或相对地址指定背景图像

注意：背景图片后面的地址，不要忘记加 URL， 同时里面的路径不要加引号。

3.背景平铺

​ background-repeat

	background-repeat:repeat|no-repeat|repeat-x|repeat-y

参数	作用
repeat	图像在纵向和横向平铺
no-repeat	不平铺
repeat-x	横向平铺
repeat-y	纵向平铺

4.背景图片位置

background-position

background-position:x y;(x 坐标和 y 坐标。可以使用方位名词或者精确单位)

参数值	说明
length	百分数|由浮点数字和单位标识符组成的长度值
position	top|center|bottom|left|center|right…

1、参数是方位名词时，left top 和 top left 效果一致，如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

2、参数是精确单位时，第一个肯定是 x 坐标，第二个一定是 y 坐标，如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

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

5.背景图片固定

background-attachment

background-attachment:scroll|fixed

参数	作用
scroll	背景图像随对象内容滚动
fixed	背景图像固定

6.背景样式合写

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background:transparent url(image.jpg) repeat-y fixed top;

7、背景色半透明

background: rgba(0, 0, 0, 0.3);
最后一个参数是 alpha 透明度，取值范围在 0~1之间
可以把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);

！背景半透明是指盒子背景半透明，盒子里面的内容不受影响

8.总结

属性	作用	值
background-color	背景颜色	颜色/十六进制/rgb代码
background-image	图片	url（路径）
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position （x和y坐标）
backgroundattachment	背景附着	scroll（背景滚动）/fixed（固定）
背景简写	书写更简单	颜色 地址 平铺 滚动 位置
背景色半透明	背景颜色半透明	background: rgba(0, 0, 0, 0.3);后面四个值不可以少

五.css三大特性

1.层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式这个时候就需要层叠性。

原则:样式冲突，就近原则。哪个样式离结构近，就执行哪个样式

2、继承性

​ 子标签会继承父标签的某些样式，如文本颜色和字号

​ （text-，font-，line-这些元素开头的以及color属性可以）

行高的：

 body {
   font:12px/1.5 Microsoft YaHei；
 }

（！行高可以跟单位也可以不跟单位

如果子元素没有设置行高，则会继承父元素的行高

此时子元素的行高是：当前子元素的文字大小 * 1.5

body 行高 1.5 ，这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高）

3、优先级

一个元素有多个选择器，就会有优先级的产生。

1.选择器相同，看层叠性

2.选择器不同，则根据选择器权重执行

选择器优先级：

选择器	选择器权重
继承的/*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
id选择器	0,1,0,0
行内 style=“ ”	1,0,0,0
!important	无穷大

注意：

1. 权重是有4组数字组成,但是不会有进位。

2. 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推…

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

• div ul li -> 0,0,0,3

• .nav ul li -> 0,0,1,2

• a:hover -> 0,0,1,1

• .nav a -> 0,0,1,1

  

  

1.盒子模型

​ CSS 盒子模型包括：边框、外边距、内边距、和 实际内容

2.边框（border）

1.边框的使用

（1）border可以设置元素的边框：边框宽度(粗细) 边框样式 边框颜色；

（2）语法：

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

属性	作用
border-width	边框粗细，px
border-style	样式
border-color	颜色

边框样式 border-style ：

• none：没有边框即忽略所有边框的宽度（默认值）
• solid：边框为单实线(最为常用的)
• dashed：边框为虚线
• dotted：边框为点线

合写

 border: 1px solid red;  

设置具体位置边框：

 border-top: 1px solid red;  

2.表格的细线边框

（1）border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

（2）语法：

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

3.边框会影响盒子实际大小

边框会额外增加盒子的实际大小，可以

• 测量盒子大小的时候,不量边框。
• 如果测量的时候包含了边框,则需要 width/height 减去边框宽度

3.内边距（padding）

padding 属性用于设置内边距，即边框与内容之间的距离。

值的个数	表达的个数
padding:5px;	1个，上下左右一样5px
padding:5px 10px;	2个，上下5px，左右10px
padding:5px 10px 20px;	3个，上5px，左右10px，下20px
padding:5px 10px 20px 40px;	4个，上，右，下，左

也可以分开：

padding-left

padding-right

padding-top

padding-bottom

如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。

4.外边距

margin 属性用于设置外边距，即控制盒子和盒子之间的距离

margin-left/right/top/bottom

外边距可以让块级盒子水平居中的两个条件：

• 盒子必须指定了宽度（width）。
• 盒子左右的外边距都设置为 auto 。

三种方法：

margin-left: auto;   margin-right: auto;
margin: auto;
margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center

​ 外边距的合并有两种情况:

（1）相邻块元素垂直外边距的合并

​ 当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（可以只给一个盒子添加 margin 值）

（2）嵌套块元素垂直外边距的塌陷

​ 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

• 可以为父元素定义上边框。
• 可以为父元素定义上内边距。
• 可以为父元素添加 overflow:hidden

5.清除内外边距

​ 网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

* {
    padding:0;   /* 清除内边距 */
    margin:0;    /* 清除外边距 */
  }
行内元素尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

六.其他样式

1.圆角边框

border-radius

如：

 border-radius:length;    

• 参数值可以为数值或百分比的形式

• 50%可以变成圆

• 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

• 可以border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius

2.盒子阴影

box-shadow

如：

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

值	描述
h-shadow	必须，水平阴影，可以负值
v-shadow	必须，垂直阴影，可以负值
blur	选，模糊距离
spread	选，阴影尺寸
color	选，阴影颜色
inset	选，外部阴影（outset）改为内部阴影

3.文字阴影

text-shadow
如：

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

值	描述
h-shadow	必须，水平阴影，可以负值
v-shadow	必须，垂直阴影，可以负值
blur	选，模糊距离
color	选，阴影颜色