蓝旭工作室2023春季培训预习博客（三）

目录

前言

一. CSS进阶

1. 盒模型

1. border部分

 2. padding部分

3. margin部分

4. overflow属性

二. 浮动float

三. 定位

1. 静态定位

2. 固定定位

3. 相对定位

 4. 绝对定位

5. Z-index

四. 伪类选择器

一. 什么是伪类选择器

二. 伪类选择器的分类

三. 状态伪类

 四. 结构伪类

 五. 伪元素

 六. 所有CSS伪类/元素总览

---

前言

第三周有一个需了解的内容，如下

1. CSS进阶（盒子模型、浮动、定位、伪类、伪元素）

---

一. CSS进阶

1. 盒模型

         css的盒子模型，英文名为box model，属于直译翻译。而实际上，这个叫法十分贴切，因为html页面中的各种元素标签就像一个个盒子一样堆在一起，类似于生活中快递店铺里面堆成一座小山的快递。

        所以，盒子模型是指：html中的各个元素都类似一个一个的盒子里面的物品，但是却叫做css盒模型，是因为css盒模型像一个盒子，把各种html元素包起来，将html元素进行封装，以便于网页布局与排版。

        页面中的所有元素都可以看成一个盒子，占据着一定的页面空间。

 盒模型组成：

• content
• height 高度
• width 宽度
• border 边框，指的是这个边框的宽度，我们常见的就是宽度为1，也就是一条线。
• padding 内边框，是元素内容与其最近一层束缚框的距离，类似于在一个方格里写字我们写在方格的中间，而与边框保持一定距离一样。
• margin 外边框，也叫边缘部分，类似于人与人之间保持一定的距离一样，他的作用是保证html元素之间的距离，比如网页上的两种图片需要保持一定的间距才显得好看。

        padding，border，margin实际上是每个html元素都存在的css属性。他们可以对元素的上下左右四个方向进行限制。

        当存在盒子里嵌套盒子时，也就是html的标签嵌套时，里面的元素默认以左上角作为停靠点。

        一个盒子的实际宽度、高度:content+padding+border+margin。

1. border部分

表示盒子的边框

分为四个方向：

• 上top、右right、下bottom、左left
• border-top、border-right、border-bottom、border-left

每个边框包含三种样式：

• border-top-color、border-top-width、border-top-style
• border-right-color、border-right-width、border-right-style
• border-bottom-color、border-bottom-width、border-bottom-style
• border-left-color、border-left-width、border-left-style

样式style的取值：

solid实线、dashed虚线、dotted点线、double双线、inset内嵌的3D线、outset外嵌的3D线

简写，三种方式：

• 按方向简写：

  border-top、border-right、border-bottom、border-left

  书写顺序：

  border-顺序：width style color

• 按样式简写：

  border-color、border-width、border-style

  书写顺序：

  border-样式：top right bottom left

  必须按顺时针方向书写，同时可以缩写：

  • border-width:2px;--------->四个边框的宽度均为2px
  • border-width:1px 2px;
  • border-width:1px 2px 4px;

  规则：如果省略，则认为上下一样，左右一样

• 终级简写：

  如果四个边框样式完全相同，border:width style color;

属性	描述	取值
border-width	边框宽度	px、thin、medium、 thick
border-style	边框样式	dashed、dotted、solid、double
border-color	边框颜色	颜色值
border	宽度、样式、颜色	width style color

 2. padding部分

表示盒子的内边距，即内容与边框之间的距离

同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）

注意：如果上下冲突，则以上为准，如果左右冲突，则以左为准

3. margin部分

表示盒子的外边距，即盒子与盒子之间的距离

同样也分为四个方向，也可以简写（按顺时针方向，默认上下一样，左右一样）

4. overflow属性

当内容溢出盒子框时，通过overflow属性进行如下设置：

• Hidden超出部分不可见
• Scroll显示滚动条
• Auto如果有超出部分，显示滚动条

二. 浮动float

Float属性：定义元素在哪个方向浮动，常用于div实现横向多列布局

通过float属性来实现元素的浮动，可以让块级元素脱离常规的文档流，向左或向右移动，在同一行显示，

如果一行显示不下，则会换行显示

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

取值：left, right, none

div{
   width:200px;
   height:200px;
   border:1px solid red;
   float:left;
}

设置float属性后，元素会浮在页面上层，此时父容器无法计算自己尺寸，如果我们还想显示父容器通常会在末尾添加一个清除了float属性的空的div来解决

 Clear属性：规定元素的哪一侧不允许其他浮动元素

 取值：

• left左侧不允许出现浮动元素
• right右侧不允许出现浮动元素
• both两侧不允许出现浮动元素
• none允许两侧出现浮动元素，默认值

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素

结论：

• 对于非浮动元素，两边都可以设置清除（常用）
• 对于浮动元素，向哪边浮动，就只能设置哪边的清除

三. 定位

层定位：像图像软件中的图层一样可以对每个layer能够精确定位操作

CSS中的四种定位：

1. static 静态定位 （默认值）
2. fixed 固定定位
3. relative 相对定位
4. absolute 绝对定位

1. 静态定位

静态定位是css中的默认定位方式，也就是没有定位。在此定位方式中设置：top，bottom，left，right，z-index 这些属性都是无效的。

2. 固定定位

固定定位比较简单，固定定位是参照浏览器窗口的左上角进行偏移。相对于标签原来的位置进行的定位。不会随浏览器窗口的滚动条滚动而变化，总在视线里的元素

#fix-box {
    width:200px;
    height:200px;
    border:1px solid red;
    position:fixed;
    left:100px;
    top:50px;
}

3. 相对定位

相对定位position:relative，定位为relative的元素脱离正常的文档流中，但其在文档流中的原位置依然存在。

relative定位的层总是相对于其直接父元素，无论其父元素是什么定位方式。（相对于第一个非static定位的父标签的定位）

#box1 {
    width:170px;
    height:190px;
    position:relative;
    top:20px;
    left:20px；
}

 4. 绝对定位

绝对定位 position:absolute，定位为absolute的层脱离正常文本流，但与relative的区别:其在正常流中的原位置不再存在。

对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。

对于absolute定位的层,如果其父层中都未定义absolute或relative，则其将相对body进行定位。

#box1 {
    position:absolute;
    top:20px;
}

 

5. Z-index

设置元素定位方式后，元素会浮在页面上方，此时可以通过z-index属性设置优先级，控制元素的堆叠顺序

取值为数字，值越大优先级越高，默认为auto(大多数浏览器默认为0)

注意：只能给非static定位的元素设置z-index属性

四. 伪类选择器

一. 什么是伪类选择器

CSS伪类是用来描述一个元素的特殊状态，比如第一个元素、某个元素的子元素、鼠标点击的元素

实际使用举例：

• 设置鼠标悬停在元素上时的样式 。
• 为已访问和未访问链接设置不同的样式 。
• 设置元素获得焦点时的样式 。

二. 伪类选择器的分类

1. 动态伪类选择器
2. UI元素状态伪类选择器
3. 结构伪类选择器
4. 否定伪类选择器

三. 状态伪类

元素的样式会根据其状态呈现不同的样式，当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。

常见的状态伪类：

•  :link 应用于未被访问过的链接
•  :hover 应用于鼠标悬停到的元素
•  :active 应用于被激活的元素
•  :visited 应用于被访问过的链接，与:link互斥
•  :focus 应用于拥有键盘输入焦点的元素

a:link{
    font-size: 12px;
    color:black;
    text-decoration: none;
}/*未访问*/
a:visited{
    font-size: 15px;
    color:;
}/*已访问*/
a:hover{
    font-size: 20px;
    color:blue;
}/*鼠标悬停*/
a:active{
    font-size: 40px;
    color:green;
}/*按下鼠标*/

注意：

这几个伪类同时出现在一个元素的操作上，顺序不能改变，否则很大程度上会产生紊乱，造成效果失效！

a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效。(意思是必须先写a:link 和 a:visited再写 :hover）

a:active 必须在 CSS 定义中的 a:hover 之后才能生效。(意思是必须先写a:hover再写 :active）

另外伪类名称对大小写并不敏感

 四. 结构伪类

利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。

常见的结构性伪类：

•   :first-child 选择某个元素的第一个子元素
•   :last-child 选择某个元素的最后一个子元素
•   :nth-child(n) 匹配属于其父元素的第 n个子元素，不论元素的类型
•   :nth-last-child() 从这个元素的最后一个子元素开始算,选匹配属于其父元素的第 n个子元素，不论元素的类型
•   :nth-of-type() 规定属于其父元素的第n个 指定 元素
•   :nth-last-of-type() 从元素的最后一个开始计算,规定属于其父元素的指定 元素
•   :first-of-type 选择一个上级元素下的第一个同类子元素
•   :last-of-type 选择一个上级元素的最后一个同类子元素
•   :only-child 选择它的父元素的唯一一个子元素
•   :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素
•  :checked匹配被选中的input元素，这个input元素包括radio和checkbox
•  :empty 选择的元素里面没有任何内容
•   :disabled匹配禁用的表单元素
•   :enabled匹配没有设置disabled属性的表单元素
•   :valid匹配条件验证正确的表单元素
•   :in-range选择具有指定范围内的值的 <input> 元素
•   :optional选择不带 "required" 属性的 <input> 元素
•   :focus选择获得焦点的 <input> 元素

 举例：

选择器匹配p元素的第一个子元素

p:first-child {
  color: red;
}
<p>你好</p>
<p>好啊</p>

 

 

匹配<p>元素中的首个<i>元素

p i:first-child {
  color: blue;
}
 
<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>
 
<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>

 段落2变为蓝色

p:nth-child(3),P标签的父元素是body，body的第3个子元素是“段落2。”所以段落2”，颜色变成了蓝色

p:nth-child(3)
{
background:blue;
}
 
<body>
 
<h1>今天学习伪类和伪元素</h1>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
 
 
</body>

 在上一个代码中，如果p:nth-child(3)改为属p:nth-of-type(3) ，则意思为规定其父元素的第3个 p 元素，那么变蓝色的是段落3

 lang="en" 的 q 元素定义~

q:lang(en) {
  quotes: "~" "~";
}
 
<p>Some text <q lang="en">A quote in a paragraph</q> Some text.</p>

 选择获得焦点的 <input> 元素(点击输入框，背景颜色变为黄色）

input:focus {
  background-color: yellow;
}
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>

 

 五. 伪元素

所有的伪元素

选择器	例子	例子描述
::after	p::after	在每个 <p> 元素之后插入内容。
::before	p::before	在每个 <p> 元素之前插入内容。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

 注意：

 CSS3规范中有一部分要求，为了区分伪类和伪元素，伪元素使用两个冒号 (::)， 伪类使用一个冒号 (:)

对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ，::before 作用是一样的，所以，如果网站只需要兼容 webkit、firefox、opera 等浏览器，伪元素建议采用双冒号的写法，如果是要兼容 IE 浏览器，建议用 CSS2 的单冒号写法。

以下属性适用于 ::first-line 伪元素：（::first-line 伪元素只能应用于块级元素。）

• 字体属性
• 颜色属性
• 背景属性
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

下面的属性适用于 ::first-letter 伪元素：（::first-letter  伪元素只能应用于块级元素。）

• 字体属性
• 颜色属性
• 背景属性
• 外边距属性
• 内边距属性
• 边框属性
• text-decoration
• vertical-align（仅当 "float" 为 "none"）
• text-transform
• line-height
• float
• clear

::before和::after伪元素

在元素的 ::before和 ::after中插入内容-content属性（如果没有写content样式，伪元素会失效）

默认值：	normal
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.content="url(beep.wav)"

contnt属性的类别：

none	设置 content 为空值。
normal	在 :before 和 :after 伪类元素中会被视为 none，即也是空值。
counter	设定计数器，格式可以是 counter(name) 或 counter(name,style) 。产生的内容是该伪类元素指定名称的最小范围的计数；格式由style指定（默认是'decimal'——十进制数字）
attr(attribute)	将元素的 attribute 属性以字符串形式返回。。
string	设置文本内容
open-quote	设置前引号
close-quote	设置后引号
no-open-quote	移除内容的开始引号
no-close-quote	移除内容的闭合引号
url(url)	设置某种媒体（图像，声音，视频等内容）的链接地址
inherit	指定的 content 属性的值，应该从父元素继承

在每个 <h1> 元素的内容之前插入一幅图： 

h1::before {
  content: url();
}

在每个 <h1> 元素的内容之后插入一幅图像：

h1::after {
  content: url();
}

可以应用于 ::selection的属性

• color
• background
• cursor
• outline

使所选文本在蓝色背景上显示为红色：

::selection {
  color: red; 
  background:blue;
}

伪元素与 CSS 类结合使用：(将以粉色和较大的字体显示 class="name" 的段落的首字母。)

p.name::first-letter {
  color: hotpink;
  font-size: 200%;
}  
 
<p class="name">你好漂亮！</p>

 六. 所有CSS伪类/元素总览

序号	选择器	示例	示例说明
1	:checked	input:checked	选择所有选中的表单元素
2	:disabled	input:disabled	选择所有禁用的表单元素
3	:empty	p:empty	选择所有没有子元素的p元素
4	:enabled	input:enabled	选择所有启用的表单元素
5	:first-of-type	p:first-of-type	选择的每个 p 元素是其父元素的第一个 p 元素
6	:in-range	input:in-range	选择元素指定范围内的值
7	:invalid	input:invalid	选择所有无效的元素
8	:last-child	p:last-child	选择所有p元素的最后一个子元素
9	:last-of-type	p:last-of-type	选择每个p元素是其母元素的最后一个p元素
10	:not(selector)	:not§	选择所有p以外的元素
11	:nth-child(n)	p:nth-child(2)	选择所有 p 元素的父元素的第二个子元素
12	:nth-last-child(n)	p:nth-last-child(2)	选择所有p元素倒数的第二个子元素
13	:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素
14	:nth-of-type(n)	p:nth-of-type(2)	选择所有p元素第二个为p的子元素
15	:only-of-type	p:only-of-type	选择所有仅有一个子元素为p的元素
16	:only-child	p:only-child	选择所有仅有一个子元素的p元素
17	:optional	input:optional	选择没有"required"的元素属性
18	:out-of-range	input:out-of-range	选择指定范围以外的值的元素属性
19	:read-only	input:read-only	选择只读属性的元素属性
20	:read-write	input:read-write	选择没有只读属性的元素属性
21	:required	input:required	选择有"required"属性指定的元素属性
22	:root	root	选择文档的根元素
23	:target	#news:target	选择当前活动#news元素(点击URL包含锚的名字)
24	:valid	input:valid	选择所有有效值的属性
25	:link	a:link	选择所有未访问链接
26	:visited	a:visited	选择所有访问过的链接
27	:active	a:active	选择正在活动链接
28	:hover	a:hover	把鼠标放在链接上的状态
29	:focus	input:focus	选择元素输入后具有焦点
30	:first-letter	p:first-letter	选择每个元素的第一个字母
31	:first-line	p:first-line	选择每个元素的第一行
32	:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的元素
33	:before	p:before	在每个元素之前插入内容
34	:after	p:after	在每个元素之后插入内容
35	:lang(language)	p:lang(it)	为元素的lang属性选择一个开始值