【CSS】CSS基础

一、选择器

1. 通配选择器：*
2. id选择器：#
3. 标签选择器：p
4. 伪元素选择器：
   如：
   p::first-line 选择每个<p> 元素的第一行
p::first-letter 选择每个<p> 元素的第一个字母
p::after 在每个<p>元素之后插入内容，插入的是一个内联元素
5. 类选择器：.
6. 属性选择器：
   p[attr]包含该属性
   p[attr="def"]
p[attr!="def"]
p[attr~="def"]属性中包含独立的单词为def
   p[attr|="def"] 属性中必须是完整且唯一的单词，或者以 - 分隔开
   p[attr*="def"]属性中做字符串拆分，只要能拆出来def 这个词就行
   p[attr^="def"]属性的前几个字母是def就可以
   p[attr$="def"]属性的后几个字母是def就可以
7. 伪类选择器：
   如：
   p:nth-child(2) 选择所有 p 元素的父元素的第二个子元素
a:link 选择所有未访问链接
8. 包含选择器：div p
9. 子选择器：>
   只能选择的直接子元素
10. （后续）兄弟选择器：~
    选择指定元素之后的所有该元素
11. 相邻兄弟选择器：+
    选择紧接在一元素后的第一个该元素，两者有相同父元素

伪类和伪元素：

伪类和伪元素的概念是为了格式化文档树以外的信息，修饰不在文档树中的部分。他们都是大小写不敏感的。

伪元素会创建一些不在文档树中的元素并且添加样式。对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。如：
p::first-line 选择每个<p> 元素的第一行
p::first-letter 选择每个<p> 元素的第一个字母
p::after 在每个<p>元素之后插入内容，插入的是一个内联元素

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。如：
p:nth-child(2) 选择所有 p 元素的父元素的第二个子元素
a:link 选择所有未访问链接

伪类的操作对象是文档树中已有的元素，伪元素是创建了文档书树的元素，两者的区别就是有没有创建一个文档树以外的元素。

伪元素举例：

1. E::after/E:after 在E元素内部创建一个行内元素，作为E的最后一个孩子,需要使用content属性来指定要插入的内容。被插入的内容实际上不在文档树中;
2. E::first-letter/E:first-letter匹配E元素内容的第一个字母,被修饰的首字母不在文档树中;
3. E::first-lineE/:first-line 匹配E元素内容的第一行,这个伪元素只能用在块元素中，不能用在内联元素中
4. E::selection应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）改变字体大小，添加背景色等等,在火狐浏览器使用时需要添加-moz前缀。该伪元素只支持双冒号的形式；
5. E::placeholder匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效;用于修改input默认的灰色文字的样式，字体大小和字体颜色等等；为了浏览器兼容性，一般写为：input::-webkit-input-placeholder,
   该伪元素不是CSS的标准，它的实现可能在将来会有所改变，所以要决定使用时必须谨慎。在一些浏览器中（IE10和Firefox18及其以下版本）会使用单冒号的形式；

使用::before和::after为了节省标签，其中content不可或缺但是可以是空字符；可以用于清除浮动，替换标签。

伪类举例：

1. :not是一个否定伪类，用于匹配不符合参数选择器的元素。

li:not(.first-item) {
    color: orange;
}

2. :first-child用于匹配元素的第一个子元素。
3. :first-of-type用于匹配属于其父元素的首个特定类型的子元素的每个元素。
4. :nth-child根据元素的位置匹配一个或者多个元素，它接受一个an+b形式的参数，an+b匹配到的元素示例如下：
   (1)1n+0，或n，匹配每一个子元素。
   (2)2n+0，或2n，匹配位置为2、4、6、8…的子元素，该表达式与关键字even等价。
   (3)2n+1匹配位置为1、3、5、7…的子元素、该表达式与关键字odd等价。
   (4)3n+4匹配位置为4、7、10、13…的子元素。

选择第二个元素：

ol :nth-child(2) {
    color: orange;
}

选择位置序号是2的倍数的元素：

ol :nth-child(2n) {
    color: orange;
}

选择位置序号为偶数的元素：

ol :nth-child(even) {
    color: orange;
}

选择从第6个开始，位置序号是2的倍数的元素：

ol :nth-child(2n+6) {
    color: orange;
}

5. :nth-of-type与nth-child相似，不同之处在于它是只匹配特定类型的元素。
   如下例，第二个

   元素会变为橙色。

HTML:

<article>
    <h1>我是标题</h1>
    <p>一些文本</p>
    <a href=""><img src="images/rwd.png" alt="Mastering RWD"></a>
    <p>这里的文本是橙色的</p>
</article>

p:nth-of-type(2) {
    color: orange;
}

6. 当元素是其父元素中唯一一个子元素时，:only-child匹配该元素。

本段来自：https://www.jianshu.com/p/8b610fdf0d48

.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。

二、样式表类型：

外部样式表：使用link或@import
内部样式表：style
内联样式：style=“color:red;”

三、多重样式优先级

浏览器样式表<外部样式表<内部样式表<内联样式

类型	权重
通配选择器	0
标签选择器	1
伪元素选择器	1
类选择器	10
属性选择器	10
伪类选择器	10
ID选择器	100
内联样式	1000
!important	∞

优先级法则：

1. 权值越大越优先
2. 权值相等时，后出现的优于先出现的
3. 指定的优于继承的

四、尺寸单位

1、pt

绝对长度单位，常用于印刷

2、px

相对长度单位，是相对显示器分辨率而言的，常用于屏幕媒体。

如果想要算出物理长度，需要指定DPI（Dots Per Inch 每英寸像素数）。Windows系统默认为96dpi，Apple系统默认为72dpi。

特点：

不受其他元素尺寸的影响，比较稳定和精准

当浏览器进行缩放时会出现页面混乱

3、em

相对长度单位，是相对于当前对象内文本的font-size的计算倍数，如果未设置，则相对于浏览器默认的字体尺寸，为16px。

特点：

继承父级元素字体尺寸，大小可伸缩，适应移动设备

重新计算被放大字体的em值，避免字体大小的重复声明。（避免1.2*1.2=1.44的现象：在父元素中声明了字体为1.2em，也就是12px，如果在子元素想要达到12px，只能声明1em，因为继承了父元素的字体大小，1em=12px）

body{font-size:62.5%;}
#content{
font-size:1.2em;
}
#content p{
font-size:1em;/*这个字体是12px；*/
/*font-size:1.2em;  它因继承#content的字体高而变为了1.2em=14.4px。*/
}

或者首行缩进时：

p { text-indent: 2em; }

任意浏览器的默认字体尺寸都是16px，所以未经调整的情况下：

16px=1em

12px=0.75em

10px=0.625em

为了方便font-size的换算，需要在body选择器中进行如下说明：

font-size: 62.5%

此时：

10px=1em

12px=1.2em

只需要将原来数值的px除以10即可。

4、rem

相对长度单位，是相对于根元素（html元素）的font-size的计算倍数。是CSS3新增的（root em）。

特点：

能够左到只修改根元素就成比例的调整所有字体大小，可以避免字体大小逐层复合带来的连锁反应。

5、%

相对长度，与em类似。

与em不同的地方在于，当修改text-size时，两者的反应不同。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3WG8nmQY-1618306888992)(https://upload-images.jianshu.io/upload_images/5631876-4f98b1d3d944a016.png?imageMogr2/auto-orient/strip|imageView2/2/format/webp)]

当客户端的浏览器text-size设置为medium时，两者大小相同。当设置为Smallest时，em会变得非常小，当设置为Largest时，em会变得非常大。em文本尺度变化太大，导致一些客户端机器上文本变得不太清晰。

6、四者对比：

一般来说，1em=16px=12pt=100%

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B7qxUNTV-1618306888995)(https://upload-images.jianshu.io/upload_images/5631876-8296d3e168cca286.png?imageMogr2/auto-orient/strip|imageView2/2/format/webp)]

对于单位的转换问题，可以通过打包时直接进行转换即可，或者安装相关的插件进行转换。

https://blog.csdn.net/weixin_42881744/article/details/81544810

五、display：块级元素及内联元素特性

块级元素特性：

1. 独占一行
2. 宽度、高度、内外边距可调

内联元素特性：

1. 与其他内联元素同处一行
2. 宽度、高度、上下方向内外边距不可调

内联块元素特性：

1. 可同行显示
2. 宽度、高度、内外边距可调

块级元素：
div ,address ,h1~h6 ,hr ,form ,table ,ul ,ol ,li ,p ,pre

内联元素：
span ,b ,i ,u ,em ,strong ,a ,img ,font ,label ,select ,input ,textarea

可变元素：
applet ,button ,del ,iframe , ins ,map ,object , script

六、position：定位

static：

1. top、bottom、right、left无效
2. 遵循正常文档流
3. 是默认值

relative：
相对定位元素的定位是相对其正常位置。

1. top、bottom、right、left有效
2. 遵循正常文档流，移动式时原本占用的空间不改变，不影响其他元素位置，默认宽度时整个浏览器窗口宽度
3. 常用作绝对定位元素的容器块

absolute：
是相对于最近已定位的父元素，如果没有则是相对< body >。

1. top、bottom、right、left有效
2. 脱离文档流，不占用空间，宽度由元素里内容决定
3. 可与其他元素重叠

fixed：
相对于浏览器窗口位置固定，即便窗口滚动也不发生移动。

1. top、bottom、right、left有效
2. 脱离文档流，不占用空间
3. 可与其他元素重叠

sticky：
基于用户的滚动位置。

1. 在relative与fixed之间转换，跨越特定阈值之前为相对定位，之后为固定定位。
2. 设置了top、bottom、right、left四个阈值之一才有效
3. safari需要使用-webkit-sticky

七、重叠元素层叠顺序

样式表z-index无效，行内style写有效
z-index
如果两个定位元素重叠，没有指定z-index，最后定位在HTML代码中的元素会被显示在前面。
后渲染的显示在前面

定位高于浮动，浮动高于标准流。（高低和占不占位置无关）

用法：

1、必须有定位。（除去static之外）。

2、给定 z-index 的值为层级的值。（不给默认为0）

a. 层级为0的盒子，也比标准流和浮动高。
b. 层级为负数的盒子，比标准流和浮动低。
c. 层级不取小数
d. 层级一样，后面的盒子比前面的层级高。
e. 浮动或者标准流的盒子，后面的盒子比前面的层级高。

八、float:浮动

一个元素如果水平方向浮动，那么它会尽可能向左或向右移动，直到碰到包含框或另一个浮动框的边框。浮动之后的元素会围绕着它，浮动之前的元素不受影响。
如果想要消除浮动，使用clear:both;也可消除单边，如clear:right;

九、对齐

1). 元素水平居中：

1. 利用margin：auto；
   width:50%;（需要设置宽度属性，否则不起作用）
margin:auto;
   对于行内元素，应先放到块元素中，然后进行设置
   dispaly:block;
width:50%;
margin:auto;

2. 利用绝对定位，left与margin-left结合
   父元素：
   width: 120px;
   子元素：
   position: absolute;
left: 50%;
margin-left: -60px;

3. 利用绝对定位，left与translate结合
   position:absolute;
left:50%;
transform:translate(-50%,0);

4. flex布局：justify-content:center;

2). 元素垂直居中:

1. 利用绝对定位，left与translate结合
   position:absolute;
top:50%;
transform:translate(0,-50%);

2. 利用绝对定位，left与margin-top结合
   父元素：
   height: 120px;
   子元素：
   position: absolute;
top: 50%;
margin-top: -60px;

3. flex布局：align-itmes:center;

3). 文本水平居中：利用text-align
text-align:center;

4). 文本垂直居中：

1. 利用vertical-align为middle，可用于多行文本，但需要设置溢出。
   vertical-align:middle;
2. 利用padding，适用于单行文本，当行数增加时，容器高度会增加。
   padding:auto;
3. 利用line-height=height，适用于单行文本，当行数增加时，文本会溢出。
   line-height:200px; height:200px;
4. 也可利用transform

5). 左右对齐：

1. 利用绝对定位，元素会从文档流中移除，并且能够与其他元素重叠。
   position:absolute; right:0px;
   此时body元素最好设置内外边距，并设置!DOCTYPE声明。防止由于浏览器版本原因在右侧出现17px外边距，避免不同浏览器出现可见的差异。
   margin:0px; padding:0px;
2. 利用float属性，此时也需要对body中内外边距进行定义，并设置!DOCTYPE声明。
   float:right;
   注意如果子元素大小超过父元素，会发生溢出，要进行清除浮动（clearfix），此时应对父元素设置overflow:auto;

十、下拉菜单

利用display属性：鼠标hover到某一元素时菜单元素显示（利用包含选择器），移开时不显示。display:none;不占用空间，display:block;在块级元素下可以调节边距。下拉菜单position设置为absolute，脱离文档流。

盒子阴影：
box-shadow:h-shadow,v-shadow,blur,spread,color;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

盒子圆角：
border-radius:5px

加箭头（画三角）：
content:"";
width:0px;
border-width:5px;
border-style:solid;
border-color:black transparent transparent transparent;

淡入效果：
设置常态下：
opacity:0;
filter:alpha(opacity=0); /* 适用 IE8 及其更早版本 *
-webkit-transition: opacity 1s;
transition:opacity 1s;
设置触发动作后：
opacity:1;
即transition属性指向的是opacity值改变这一动作，且在1秒内完成动作。还可以增加淡入淡出效果，如：
transition: width 0.4s ease-in-out;

十一、图像拼合技术

单个图像的拼合，一张图像多次使用，降低服务器的请求数量，节省带宽。

width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
宽度：46px;高度：44px; - 定义我们使用的那部分图像
background:url(img_navsprites.gif) 0 0; - 定义背景图像和它的位置（左0px，顶部0px）

十二、表单

1. textarea使用resize属性禁用文本框重置大小功能：
   设置resize:none
2. 输入框（input）聚焦取消边框。使用:focus选择器设置输入框获取焦点时的样式：
   设置outline: none;

十三、CSS计数器

根据规则递增变量
主要代码：
1、使用counter()

body {
	counter-reset:section;
}
h2::before {
	counter-increment:section;
	content: "Section" counter(section) ":";
}

counter()嵌套：

body {
	counter-reset:section;
}
h1 {
	counter-reset:subsection;
}
h1::before {
	counter-increment:section;
	content: "Section" counter(section) ":";
}
h2::before {
	counter-increment:subsection;
	content:counter(section) "." counter(subsection);
}

2、使用counters()嵌套

ol {
	counter-reset:section;
	list-style-type:none;
}
li {
	counter-increment:section;
	content:counters(section,".") "  ";
}

小问题：

1. 如何设置固定的背景图像：

设置：background-attachment:fixed;

2. text-align中的justify

text-align：定义行内内容如何相对它的父元素对齐，并不能决定它自己的对齐方式，仅决定其内部内容的对齐方式。
justify：两端对齐。
当文本只有一行时不生效，因为justify自动忽略文本最后一行，主要是用于大段文本的处理。

解决办法：
利用伪元素把行数变成多行：


本段来自：https://blog.csdn.net/weixin_43801564/article/details/84766558

1、需要使用::after，将伪元素放在需要两端对齐的元素后面，作为第二行；
2、设定after的width为100%，生成第二行；
3、设置为行内块元素，设置的width才有效。

3. 文本转换：text-transform

转换为大写：uppercase
转换为小写：lowercase
开头字母大写：capitalize

4. 禁用文字环绕：white-space

设置：white-space:nowrap;

5. vertical-align

定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。super 垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	使元素及其后代元素的底部与整行的底部对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length	将元素升高或降低指定的高度，可以是负数。
%	使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

6. 列表项图片标记

使用list-style-image属性时IE、Opera中位置略高

ul
{
    list-style-image: url('sqpurple.gif');
}

使用以下方案代替，将列表类型设置为无标记，然后对每个列表项增加背景图案。

ul
{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
ul li
{
    background-image: url(sqpurple.gif);
    background-repeat: no-repeat;
    background-position: 0px 5px; 
    padding-left: 14px; 
}

7. 表格折叠边框

表格默认会出现双边框，因为表的th，td之间有独立的边界，可以设置border-collapse属性来将边框折叠成一个单一的边框。

table
{
    border-collapse:collapse;
}
table,th, td
{
    border: 1px solid black;
}

8. 表格标题设置caption

通过添加HTML标签<caption>来增加表格标题，设置caption-side来设置标题位置。
如： caption-side:bottom
将标题放置在表格下方。

9.裁剪一张图像

clip:rec(top,right,bottom,left);
position:absolute;
当图像大于包含他的元素时进行裁剪，设置绝对定位，并规定显示的范围，如果设置了overflow:visible; 则clip不起作用。