夜猫子的知识栈
夜猫子
2022-06-26
目录

css

# CSS选择器

选择器 例子 例子描述
.class (opens new window) .intro 选择 class="intro" 的所有元素。
.class1.class2 .name1.name2 选择 class 属性中同时有 name1 和 name2 的所有元素。
.class1 .class2 .name1 .name2 选择作为类名 name1 元素后代的所有类名 name2 元素。
#id (opens new window) #firstname 选择 id="firstname" 的元素。
* (opens new window) * 选择所有元素。
element (opens new window) p 选择所有 <p> 元素。
element.class (opens new window) p.intro 选择 class="intro" 的所有 <p> 元素。
element,element (opens new window) div, p 选择所有 <div> 元素和所有 <p> 元素。
element element (opens new window) div p 选择 <div> 元素内的所有 <p> 元素。
element>element (opens new window) div > p 选择父元素是 <div> 的所有 <p> 元素。
element+element (opens new window) div + p 选择紧跟 <div> 元素的首个 <p> 元素。
element1~element2 (opens new window) p ~ ul 选择前面有 <p> 元素的每个 <ul> 元素。
[attribute] (opens new window) [target] 选择带有 target 属性的所有元素。
[attribute=value] (opens new window) [target=_blank] 选择带有 target="_blank" 属性的所有元素。
[attribute~=value] (opens new window) [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。
[attribute|=value] (opens new window) [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。
[attribute^=value] (opens new window) a[href^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value] (opens new window) a[href$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
[attribute*=value] (opens new window) a[href*="w3schools"] 选择其 href 属性值中包含 "abc" 子串的每个 <a> 元素。
:active (opens new window) a:active 选择活动链接。
::after (opens new window) p::after 在每个 <p> 的内容之后插入内容。
::before (opens new window) p::before 在每个 <p> 的内容之前插入内容。
:checked (opens new window) input:checked 选择每个被选中的 <input> 元素。
:default (opens new window) input:default 选择默认的 <input> 元素。
:disabled (opens new window) input:disabled 选择每个被禁用的 <input> 元素。
:empty (opens new window) p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。
:enabled (opens new window) input:enabled 选择每个启用的 <input> 元素。
:first-child (opens new window) p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。
::first-letter (opens new window) p::first-letter 选择每个 <p> 元素的首字母。
::first-line (opens new window) p::first-line 选择每个 <p> 元素的首行。
:first-of-type (opens new window) p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:focus (opens new window) input:focus 选择获得焦点的 input 元素。
:focus-within (opens new window) :focus-within 该元素获得焦点，或，该元素的后代元素获得焦点。
:fullscreen (opens new window) :fullscreen 选择处于全屏模式的元素。
:hover (opens new window) a:hover 选择鼠标指针位于其上的链接。
:in-range (opens new window) input:in-range 选择其值在指定范围内的 input 元素。
:indeterminate (opens new window) input:indeterminate 选择处于不确定状态的 input 元素。
:invalid (opens new window) input:invalid 选择具有无效值的所有 input 元素。
:lang(language) (opens new window) p:lang(it) 选择 lang 属性等于 "it"（意大利）的每个 <p> 元素。
:last-child (opens new window) p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。
:last-of-type (opens new window) p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:link (opens new window) a:link 选择所有未访问过的链接。
:not(selector) (opens new window) :not(p) 选择非 <p> 元素的每个元素。
:nth-child(n) (opens new window) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n) (opens new window) p:nth-last-child(2) 同上，从最后一个子元素开始计数。
:nth-of-type(n) (opens new window) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n) (opens new window) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。
:only-of-type (opens new window) p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-child (opens new window) p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
:optional (opens new window) input:optional 选择不带 "required" 属性的 input 元素。
:out-of-range (opens new window) input:out-of-range 选择值超出指定范围的 input 元素。
::placeholder (opens new window) input::placeholder 选择已规定 "placeholder" 属性的 input 元素。
:read-only (opens new window) input:read-only 选择已规定 "readonly" 属性的 input 元素。
:read-write (opens new window) input:read-write 选择未规定 "readonly" 属性的 input 元素。
:required (opens new window) input:required 选择已规定 "required" 属性的 input 元素。
:root (opens new window) :root 选择文档的根元素。
::selection (opens new window) ::selection 选择用户已选取的元素部分。
:target (opens new window) #news:target 选择当前活动的 #news 元素。
:valid (opens new window) input:valid 选择带有有效值的所有 input 元素。
:visited (opens new window) a:visited 选择所有已访问的链接。
:is() (opens new window) :is(div,span) 以选择器列表作为参数, 满足列表中的一种选择器即可生效。
:has() (opens new window) :has(<forgiving-relative-selector-list>) 引用元素选择父元素或者先前的兄弟元素的方法。

其中鼠标相关的5种样式：

 a:link{color:#fff}  未访问时的状态（鼠标点击前显示的状态）
 a:hover{color:#fff}  鼠标悬停时的状态
 a:visited{color:#fff}  已访问过的状态（鼠标点击后的状态）
 a:active{color:#fff}  鼠标点击时的状态
 a:focus{color:#fff}  点击后鼠标移开保持鼠标点击时的状态[获得焦点]（只有在<a href="#"></a>时标签中有效
1
2
3
4
5

:has()选择器用法：

:has(p) 选择所有包含 <p>元素的父元素
:has(> p) 选择直接后代元素包含 <p>元素的父元素
div:has(> p) 选择直接后代元素包含 <p>元素的父级标签名是 div 父元素
div:has(+ p) 择 <p>元素的相邻的前一个标签名是 div 的兄弟元素

和 :is() 伪类一起使用：择 <h1> 或 <h2> 或 <h3> 元素的相邻的前一个标签名是 h2 或 h3 或 h4 的兄弟元素
:is(h1, h2, h3):has(+ :is(h2, h3, h4)) {
  margin: 0 0 0.25rem 0;
}
1
2
3
4
5
6
7
8
9

# 相对单位

# px（基础也是最常用的单位）

# %

​ width,height,font-size的百分比都是相对于父元素的相同属性的值来计算的

​ line-height的百分比是相对当前元素的font-size来计算的

​ vertical-align的百分比是相对当前元素的line-size来计算的

# em

相对当前元素的字体大小

技巧一：首行缩进两个字符 text-indent:2em

技巧二：使用em作为同一单位 所有的浏览器的默认单位都是16px

(只要在 css 中提前声明 body 或 html 属性 {font-size:62.5%} 那么就使得默认单位成为 10px,即 1em=10px。在实际开发中需要计算两次em值，第一次，当前元素 fony-size 属性的 px 值；第二次，当前元素其他属性（如 width，height 等）的px值并以当前元素的 fony-size 的 px 值作为 1em)

技巧三：使 em 作为字体大小单位 只需改变根元素就可以实现页面整体文字的大小

# rem

相对根元素（即 html ）的字体大小

# css的特性

# 继承性：

子元素继承父元素的某些特性

1.文本相关属性

font-family font-size font-weight font-style font line-height text-align text-indent word-spacing
字体类型 字体大小 字体粗细 字体风格 字体 行高 水平对齐 首行缩进 词间隔

2.列表相关属性

list-style-image 用图片代替列；list-style-position 何处放置列表项符号;list-style-type 列表项符号；list-style 设置列表 li 的名目。

3.颜色相关属性（但超链接不继承）

# 层叠性：

重复定义的相同类型的属性会将之前的覆盖掉

条件:1.同一元素。2.属性相同。3.权重相同。

# css优先级（权重）

  • 引用方式

行内样式>（内部样式=外部样式）

  • 继承方式

最近的祖先元素优先

  • 指定样式（优于继承样式）

行内样式>ID选择器>class选择器>元素选择器

  • !important（提高优先级，可以使继承被覆盖）

如（strong{color：black !important;}）优先级被提升到最高

# 盒子模型

# 外边距叠加的情况（三种）：

一.同级元素，上下合并以最大的边距为单位；

二.父级元素，内外合并以最大的边距为单位；

三.空元素，上下合并成为只有一个最大边距。

注意：

1.水平外边距不会重叠

2.只有以上三种情况会重叠

3.叠加后的值等于其中最大的值

4.叠加只针对 block 和 line-block 不包括 inline 元素（只针对块元素），因为 inline 元素的上下边距设置无效

# 负margin技术

margin-line 和 margin-left 会将当前元素拉出然后覆盖其他元素

margin-bottom 和 margin-right 会将后续元素拉进覆盖当前元素

运用技巧：

# 1.图片与文本对齐

公式：img{margin:0 3px 0 -3px;}

# 2.自适应两列布局

（即并排两列，其中一列是固定宽度，另一列是自适应宽度）

其实现方法如下

方法一：绝对定位 absolute，使其脱离文档流然后设置其（侧边距=另一元素的宽度）

​

body{
	position:relative
} 
.right { 
    position: absolute; width: 100px; right: 0; 
} 
.left { 
    margin-right: 100px; 
}  
//三列布局 
.left{ 
    position:absolute;    
    width:100px;    
    left:0; 
} 
.center{/*width: auto;*/   /*如果没有这一句，那么，center这个div的文字就不会自动换行*/    
    margin:0 100px; 
} 
.right{
    top:0;//这里会掉下来一截     
    position:absolute;    
    width:100px;    
    right:0; 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

方法二：浮动定位加 负margin 技术（只适用于同高的情况，因为本质为覆盖）

#main,#sidebar  {
	float:left; color:white; 
} 
#main {
	//自适应部分 
	width:100%;  
	margin-right:-200px; 
} 
#sidebar  {
	//固定在右侧用负margin width:200px;  
} /* 防止浏览器可视区域宽度不足时发生文本重叠*/
#main p {
	margin-right:210px;
}   
/* 它是 200px + 10px, 10px是他们的间距*/ 
、、、 
//三列布局负margin换成margin，但是同下面bfc法，适应栏必须放在最后，因为浮动不影响前面的但影响后面的  	
.left,.right{           
	width:200px;           
	height:200px;           
	background-color:#999;           
}         
.left{           
	float:left;            
}          
.right{            
	float:right;           
}           
.center{          	 
	margin：0 200px;            		            
	height:200px;            
	background-color:#f00;           
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

方法三：浮动加BFC（推荐）

.left{ 
	float: left; width: 100px;
}
.right{
	overflow: hidden; //通过设置overflow: hidden来触发BFC特性}
、、
//如果是要实现三栏布局的话，中间的自适应模块一定要放在第三个模块
.search {
  height: 44px;
}
.searchl {
  float: left;
  width: 40px;
}
.searchr {
  float: right;
  width: 40px;
}
.searchc {//该模块为自适应，在body标签中是放在最后面的
    overflow: hidden;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

​

方法四：flex

​

.parent{
	display: flex;
}
.left{
	margin-right: 20px;
}
.right{
	 flex: 1;
}
.left p{
    width: 200px;
}
、、、
//
#box{
	width:100%;
	height:100px;
	display:flex;
	margin:10px;
}
#left,#right{
	width:200px;
	height:100px;
	margin:10px;
	background-color:#999;
	}
#center{
	flex:1;
	height:100px;
	margin:10px;/*左右margin不会叠加*/
	background-color:#f00;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 3.元素垂直居中

父元素

{position:relative}	/*为了不被子元素的绝对定位给定位偏移*/
1

子元素

{position:absolute;top:50%;left:50%;margin-top:"height值一半的负值";margin-left:"width值的一半"}
1

此方法不仅可以用于块元素亦可用于行元素

# 4.tab选项卡

margin-top：-1px； 处理选项卡下边框显示问题

# display（元素类型）

# block（块元素）

1、总是在新行上开始； 2、高度，行高以及顶和底边距都可控制； 3、宽度缺省是它的容器的100%，除非设定一个宽度。

# inline（行元素）

1、和其他元素都在一行上； 2、高，行高及顶和底边距不可改变； 3、宽度就是它的文字或图片的宽度，不可改变。

# inline-block(行内块元素）

同时具备行内元素和块元素的特点。不仅可以定义width和height也可以与其他行内元素位于同一行。典型的有img和input

消除间距的办法在行内块元素的父元素上加上font-size:0， img和input同样如此（但注意的若父元素内有文字就需要重新给文字定义font-size）

# table-cell（表格单元格）

具备td元素的特点，可实现效果：

1.图片垂直居中于元素

图片水平居中text-align:center

垂直居中用display:table-cell和vertical-align:middle来实现，其中text-align和display:table-cell都是要在其父元素上的定义，vertical-align:middle是可以直接在图片元素上定义的

2.等高分布（因为表格元素同一行是等高的）

将两个子元素定义display:table-cell再将他们两个的父元素定义成display:table-row（表格行形式）

3.自动平均划分元素

将父元素定义成display:table，子元素定义成display:table-cell并给父元素定义宽度就能实现子元素根据这个宽度自动调整平分该宽度

# 文本效果

# text-indent（首行缩进）

text-indent:2em 为首行缩进两个字符
text-indent:-9999px 用于隐藏文本，常用于 h1 标签中引用 logo 图片，但又不想删除 h1 中的文字，因为 h1 权重在搜索引擎中能起到优化搜索的作用

# text-align （水平对齐）

​ 在父元素中定义属性有 left, right,center 能对文本，inline,inline-block 元素生效，但对 block 元素不起作用

​ margin:0 auto 同样是水平对齐的方式，但不同的是其实现的是block元素的水平对齐，且在当前元素中定义

# text-decorcation（文本修饰）

​ none去除所有的划线效果；underline下划线；overline顶划线，line-through中划线

# line-height（行高）

行距和行高不同行距为两行的底线和顶线的距离，行框（inline box）指的是两行文字的行半距分割线之间的距离

若父元素为 line-height:1.5（只有系数无单位）则子元素继承该系数，即 line-height 等于 font-size 的1.5倍。

小技巧：实现单行文字的垂直居中可以定义 inline-height 和 height 两个属性值相等

# vertical-align（垂直对齐）

取标准值时即 top 顶部对齐，middle 中部对齐，baseline 基线对齐，bottom 底部对齐；取负值时使得元素相对基线向上偏移，常用于解决选框与周围文本对齐垂直对齐问题；百分比时其值为 line-height 的百分比，同样对 block 元素不起作用

# 表单效果

# radio单选框和checkbox复选框

使用 vertical-align 的负值并调整来实现文本与选框的垂直对齐

# textarea多行文本框

​ 多行文本框在浏览器中可以进行拖拽功能，为了限制可以进行固定大小和禁止拖动

​ 固定大小：min-width,min-height,max-width,max-height：5px 等限制最小最大宽度和高度

​ 禁止拖动：resize:none

提示

其具有行数(cols)和列数(rows)两个属性，为了在各个浏览器中具有相同的外观先用 width 和 height 定义 textarea 的大小然后用 overflow：auto 定义其滚动自适应

# 表单对齐

  1. 首先定义一个盒子的宽度

  2. 每一行都分为左侧：lable标签和 右侧：input文本框（input可以设置多个）将其都设置左浮动，且所有左侧栏长度相等，所有右侧栏长度之和相等（即左右划分明确）

  3. lable 的 text-align 属性定义为 right 使其内文字右对齐

  4. 每一行左侧和右侧栏设置他们的长度合（这里包括 width，padding，border 以及 margin ）等于盒子宽。

注意input的宽高为内文本的属性加上内边距后文本宽高不会变，但总宽高加上了内边距的属性值

# 浮动布局

  • 浮动特点一：添加浮动后所有元素都变成了 block 元素，并可以设置 width,height,margin,padding 并通过 margin-left,margin-right 来定义浮动元素与其他元素之间的间距

  • 浮动特点二：元素定义浮动后会脱离文档流，周围元素会补上空缺位置包围浮动元素

  • 对父元素的影响：若父元素的 height 小于浮动子元素的 height 会导致父元素塌陷

  • 对兄弟元素的影响：若兄弟元素也设置了浮动则按照浮动方向排列，若兄弟元素未设置浮动则会覆盖兄弟元素重叠区域

  • 清除浮动：

若想清除浮动的负效果推荐使用 ::after 伪元素结合 clear:both

.clearfix::after{clear:both;content: "";}	/*clearfix是class类名给用于清除浮动的元素加上该类名*/
1

​

# 定位布局

  • 子元素相对父元素定位

​ 父元素定义 position:relative 子元素定义 position:absolute 然后配合 top，left，bottom，right来定位

  • 子元素相对祖先元素定位

​ 方法同上，但是父一级元素不能有 position:relative 否则会以父一级元素作为参照物二不是祖先元素

  • z-index属性（z轴，用于控制元素的堆叠顺序，只有被定位后才激活）

​ z-index 的取值：1.auto，默认状态 2.数字时，数字越大越显示在上面，可以取负值

# css图形

# 三角形

（原理为利用边框实现,元素宽高为0时边框变成一个被四个三角形等分的正方形 transpant 为透明的意思）

div{
	width:0;
	height:0;
	border-width:30px;
	border-stytle:solid;
	border-color: transparent transpant transpant red
}	/*该实现的是一个上部分三角形角朝下*/
1
2
3
4
5
6
7

​

# 带边框三角形

原理为两个三角形定位布局重叠，外层（或者说父层）作为边框色，内层作为背景色，且内层三角形高度（border-width）比外层三角形小 1px，然后一般用内层三角形相对外层三角形偏移 1px（用父元素相对定位，子元素绝对定位来实现），这 1px 就是边框色

注意：父元素为三角形时内层元素的初始位置为其正方形的左上角在外层正方形的正中心。父元素为行内块元素时不做任何动作时内层元素在内容左上角，实际上top：0px时内层元素在内容左上角一直上移到贴住上边框，所以偏移时应以这个为标准

# 圆角和圆

缩写：border-radius：10px 20px 30px 40px;分别表示左上角，右上角，右下角，左下角的圆角半径。

 div {
 	width:100px;
 	height:50px;
 	border:1px solid red;
 	border-radius:50px 50px 0 0;
	 background-color:#FCE9B8;
 }		/*实现半圆*/
 
div{
	width:100px;
	height:100px;
	border:1px solid red;
	border-radius:50%;50%;0;0; /*或者：border-radius: 50%*/
	background-color:#FCE9B8;
}
  	/*实现圆*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

​

全写：border-radius：x/y x/y x/y x/y;其中 x 表示圆角水平半径，y 表示圆角的垂直半径 10px/10px 的缩写其实就是 10px 。

# 实现水平居中

  • 文本和 inline 以及 inline-block 水平居中：text-align:center
  • 块元素的水平居中：margin：0 auto；

# 实现垂直居中

  • 文本垂直居中：设置 height 和 line-height 属性值相等
  • 多行文本垂直居中：块元素垂直居中：（该方法万能，公用的）
父元素{position:relative;} 
子元素{position:absolute; top:50%; left:50%; margin-top:-"height的一半"；margin-left:-"width的一半";height: px;width：px；}
1
2
  • inline-block元素垂直居中：
父元素{display：table-cell；vertical-align:middle;} 
子元素{vertical-align:middle;}
1
2

# 包含块

（一般的包含块就是这个元素最近的祖先块元素的内容区）

  • 固定定位 position:fixed

其包含块为当前浏览器窗口

  • 静态定位和相对定位 position:relative和static

其包含块为离他最近的块级（block,inline-block,table-cell）祖先元素

  • 绝对定位 position:absolute

其包含块为最近的position属性不为static（该为默认状态）的祖先元素，该祖先元素可以为块元素也可以为行内元素

# 层叠上下文

使用z-index创造新的层叠上下文

层叠级别（由低到高）:

1.边框和背景

2.负z-index

3.块盒子

4.浮动盒子

5.行内盒子

6.z-index:0

7.正z-index

# BFC和IFC

# 创建BFC

1.根元素

2.float：right或left

3.position：absolute或fixed

4.overflow：auto或hidden或auto（常用）

5.display:inline-block或table-cell或table-caption

# BFC特点

1.每一个BFC中盒子都是从顶端一个一个垂直排列的

2.每一个BFC中盒子之间的垂直间距由margin决定，且间距会叠加只要是相邻的margin无论是否是兄弟元素

3.每一个BFC内部每一个元素的左外边界会紧贴着包含盒子的容器的左边

4.每一个BFC内部如果有一个元素是新BFC并且存在内部元素是浮动元素，则该BFC区域不会与float元素重叠

5.计算一个BFC的高度时其内部浮动元素的高度也会参与计算

# BFC的用途

1.创建BFC来避免垂直外边距叠加

2.创建BFC来清除浮动(父元素未定义高度会导致父元素高度塌陷，让父元素变成BFC就能使父元素高度将浮动元素也算上若定义来高度则是正常的隐藏效果）

3.创建BFC来实现自适应布局（每一元素的外边界都会紧贴容器左边）

# 处理文字溢出

（溢出部分用省略号表示）

  • 单行文字溢出
首先 white-space:nowrap 文字显示不开也强制不换行
然后 overflow:hidden 溢出部分隐藏
最后 text-overflow:ellipsis 超出部分以省略号表示

# 媒体查询

我们可以使用@media语法来确定屏幕尺寸，并且指定在不同尺寸下的元素样式。例如，我们指定一个元素在不同屏幕尺寸下的大小：

@media screen and (min-width: 1200px) {
    .container {
        width: 1127px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media screen and (min-width: 922px) and (max-width:1199px) {
    .container {
        width: 933px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media screen and (min-width: 768px) and (max-width:922px) {
    .container {
        width: 723px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media screen and (max-width: 768px) {
    .container {
        width: 100%;
        padding: 0px 10px 0 10px !important;
        box-sizing: border-box;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
编辑 (opens new window)
上次更新: 2024/8/9 17:53:21
常用meta整理
css3

← css3→

最近更新
01
watch监听Props属性值失败原因
11-13
02
手动渲染虚拟dom
11-01
03
flex布局和overflow一起使用超出滚动失效
10-31
更多文章>
Copyright © 2019-2024 Study | MIT License