CSS学习

HLXchamp

已于 2023-02-16 17:55:49 修改

阅读量530

点赞数

分类专栏： CSS 文章标签： css css3 html

于 2022-02-06 10:27:04 首次发布

本文链接：https://blog.csdn.net/hlxchamp/article/details/122603626

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

代码格式

小写
选择器后面加空格
属性值前面，冒号后面保留一个空格

css简介

CSS 指的是层叠样式表 (Cascading Style Sheets)

css语法

在这里插入图片描述

选择器指向您需要设置样式的 HTML 元素
声明块包含一条或多条用分号分隔的声明
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔
多条 CSS 声明用分号分隔，声明块用花括号括起来

css选择器

用于“查找”（或选取）要设置样式的 HTML 元素

简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

基础选择器

1、元素/标签选择器：<p>对应p

p {
  text-align: center;
  color: red;
}

2、id选择器：加一个（＃）
id="para1" 的 HTML 元素：

 #para1 {
  text-align: center;
  color: red;
}

注：

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
id 名称不能以数字开头
一个标签只能对应一个id

3、类选择器
class="center" 的 HTML 元素：

.center {
  text-align: center;
  color: red;
}

类名不能以数字或者中划线开头
一个标签可以使用多个类名：<p class="red size">

4、通用选择器

* {
  text-align: center;
  color: blue;
}

进阶选择器

1、后代选择器

写法：父选择器后代选择器 {}

div p {
    color: mediumvioletred;
}

后代可以是儿子，孙子，重孙子。。。。

子代选择器

写法：父选择器>后代选择器 {}

2、并集/分组选择器

写法：选择器1,选择器2,选择器3... {}

h1, 
h2, 
p 
{
  text-align: center;
  color: red;
}

结构伪类选择器

根据元素在HTML中的结构关系来查找元素
在这里插入图片描述

伪元素

一般页面的非主体内容可以使用伪元素
在这里插入图片描述

content要加单引号''

添加 CSS

外部 CSS
在 head 部分的 <link> 元素内包含对外部样式表文件的引用

<!DOCTYPE html>
<html>
<head>
<!--stylesheet：关系为样式表-->
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部 CSS
head 部分的 <style> 元素中进行定义

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

行内 CSS

<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

层叠顺序：

行内样式（在 HTML 元素中）
外部和内部样式表（在 head 部分）
浏览器默认样式

css注释

以 /* 开始，以 */ 结束
能横跨多行：

/* 这是
一条多行的
注释 */ 

p {
  color: red;
}

元素显示模式

块级元素

独占一行
可以设置宽高
宽度默认是父元素的宽度，高度默认由内容撑开

例如：div，p，h，ul，li，dl，dt，form，header…

行内元素

一行可以显示多个
不能设置宽高
宽高默认由内容撑开

例如：a，span，b，u…

行内块元素

一行可以显示多个
可以设置宽高

例如：input，textarea，button，img …

元素显示模式转换

在这里插入图片描述

嵌套规范

在这里插入图片描述

css特性

1、继承性

文字控制属性都可以继承，其余的都不行
a标签的color继承会失效
h系列的标签的font-size会失效

2、层叠性

在这里插入图片描述

3、优先级

优先级高的选择器样式会覆盖优先级低的样式

优先级公式：
在这里插入图片描述
谁能选的更精确，谁的优先级越高

权重叠加计算

在这里插入图片描述

显示的是orange颜色

若都是继承，继承里面谁高，看继承哪个父级，哪个父级高，哪个选择器就生效

Chrome调试工具

在这里插入图片描述

css颜色

RGB(red, green, blue)
RGBA (red, green, blue, alpha) 是具有 alpha 通道的 RGB 颜色值的扩展 - 它指定了颜色的不透明度
HEX
可以使用以下格式的十六进制值指定颜色：#rrggbb
HSL
hsla(hue, saturation, lightness)，分别是色相，饱和度，亮度

css背景

background-color

背景颜色默认是透明的！

opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明。
注：使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。

css背景图像

background-image

用作元素背景的图像。默认情况下，图像会重复，以覆盖整个元素

body {
  background-image: url("paper.gif");
}

还可以为特定元素设置背景图像，例如 <p> 元素

CSS 背景重复

默认情况下，background-image 属性在水平和垂直方向上都重复图像
水平方向重复：background-repeat: repeat-x;
垂直方向重复： background-repeat: repeat-y;
只显示一次背景图像（不重复）：background-repeat: no-repeat
指定背景图像的位置：background-position ，先水平后垂直
在这里插入图片描述

例：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

正数：向右/向下移动；负数：向左/向上移动

CSS 背景附着

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）
background-attachment: fixed;表示固定
background-attachment: scroll;表示滚动

CSS 背景简写

如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

使用简写属性时，属性值的顺序为：（不是必须按此顺序）

background-color
background-image
background-repeat
background-attachment
background-position

CSS 边框

边框会撑大内容！

内减模型

加box-sizing:border-box;属性！
浏览器会自动计算多余大小并且减去。

CSS 边框样式

border-style 属性指定要显示的边框类型

dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset -定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框
mix - 定义混合边框（上边框、右边框、下边框和左边框）

p.mix {border-style: dotted dashed solid double;}

除非设置了 border-style 属性，否则其他 CSS 边框属性都不会有任何作用！

CSS 边框宽度

border-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick：

p.two {
  border-style: solid;
  border-width: medium;
}

border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）：

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */
}

CSS 边框颜色

border-color 属性用于设置四个边框的颜色
若未设置 border-color，则它将继承元素的颜色
border-color 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}

CSS 边框各边

可用于指定每个边框（顶部、右侧、底部和左侧）：

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

简写属性

如果 border-style 属性设置三个值：

border-style: dotted solid double;

上边框是虚线
右和左边框是实线
下边框是双线

如果 border-style 属性设置两个值：

border-style: dotted solid;

上和下边框是虚线
右和左边框是实线

对于border-width 和 border-color 也同样适用

CSS 简写边框属性

为了缩减代码，也可以在一个属性中指定所有单独的边框属性
border 属性是以下各个边框属性的简写属性，没有顺序！：

border-width
border-style（必需）
border-color

CSS 圆角边框

border-radius 属性用于向元素添加圆角边框：

p {
  border: 2px solid red;
  border-radius: 5px;
}

CSS 外边距

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间

Margin - 单独的边

margin-top
margin-right
margin-bottom
margin-left

所有外边距属性都可以设置以下值：

auto - 浏览器来计算外边距
length - 以 px、pt、cm 等单位指定外边距
% - 指定以包含元素宽度的百分比计的外边距
inherit - 指定应从父元素继承外边距

提示：允许负值。

简写属性与边框一样！

auto 值

可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。

然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

auto后面不能加宽度！

inherit 值

指定应从父元素继承外边距

使 <p class="ex1"> 元素的左外边距继承自父元素（<div>）：

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

CSS 外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
在这里插入图片描述
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

在这里插入图片描述
外边距甚至可以与自身发生合并：
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

如果这个外边距遇到另一个元素的外边距，它还会发生合并：
在这里插入图片描述
注：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

外边距的塌陷现象

在这里插入图片描述

行内元素的内外边距问题

不能通过margin或padding改变行内标签的垂直位置，但可以通过line-height属性改变。

CSS 内边距

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间

单独的边

CSS 拥有用于为元素的每一侧指定内边距的属性：

padding-top
padding-right
padding-bottom
padding-left

所有内边距属性都可以设置以下值：

length - 以 px、pt、cm 等单位指定内边距
% - 指定以包含元素宽度的百分比计的内边距
inherit - 指定应从父元素继承内边距
提示：不允许负值。

可以使用 box-sizing 属性。这将导致元素增加内边距后也能保持其宽度，但是可用的内容空间会减少
不适用box-sizing ：
在这里插入图片描述

使用box-sizing ：

div.ex2 {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
  background-color: lightblue;
}

在这里插入图片描述

CSS 高度和宽度

height 和 width 属性用于设置元素的高度和宽度。

height 和 width 属性不包括内边距、边框或外边距。
它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

height 和 width 属性可设置如下值：

auto - 默认。浏览器计算高度和宽度
length - 以 px、cm 等定义高度/宽度
% - 以包含块的百分比定义高度/宽度
initial - 将高度/宽度设置为默认值
inherit - 从其父值继承高度/宽度

设置 max-width

max-width 属性用于设置元素的最大宽度。

可以用长度值（例如 px、cm 等）或包含块的百分比（％）来指定 max-width（最大宽度），也可以将其设置为 none（默认值。意味着没有最大宽度）

当浏览器窗口小于元素的宽度（500px）时，浏览器会将水平滚动条添加到页面。
但使用 max-width 就不会有水平滚动条

max-width 属性的值将覆盖 width

CSS 盒模型/框模型

在这里插入图片描述
所有 HTML 元素都可以视为方框。
CSS 框模型实质上是一个包围每个 HTML 元素的框。

内容 - 框的内容，其中显示文本和图像。
内边距 - 清除内容周围的区域。内边距是透明的。
边框 - 围绕内边距和内容的边框。
外边距 -清除边界外的区域。外边距是透明的。

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

元素的总宽度应该这样计算：

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

元素的总高度应该这样计算：

元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

清除默认内外边距

* {
    margin: 0;
    padding: 0;
}

版心居中

版心：网页的有效内容

补：line-height:1;表示行高是1倍，就是字号的大小

去掉列表的符号：

ul {
    list-style: none;
}

CSS 轮廓

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素

outline-style
outline-color
outline-width
outline-offset
outline
轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

CSS 轮廓样式

outline-style 属性指定轮廓的样式，并可设置如下值：

dotted - 定义点状的轮廓。
dashed - 定义虚线的轮廓。
solid - 定义实线的轮廓。
double - 定义双线的轮廓。
groove - 定义 3D 凹槽轮廓。
ridge - 定义 3D 凸槽轮廓。
inset - 定义 3D 凹边轮廓。
outset - 定义 3D 凸边轮廓。
none - 定义无轮廓。
hidden - 定义隐藏的轮廓。

除非设置了 outline-style 属性，否则其他轮廓属性都不会有任何作用！

CSS 轮廓宽度

outline-width 属性指定轮廓的宽度，并可设置如下值之一：

thin（通常为 1px）
medium（通常为 3px）
thick （通常为 5px）
特定尺寸（以 px、pt、cm、em 计）

CSS 轮廓颜色

outline-color 属性用于设置轮廓的颜色。

可以通过以下方式设置颜色：

name - 指定颜色名，比如 “red”
HEX - 指定十六进制值，比如 “#ff0000”
RGB - 指定 RGB 值，比如"rgb(255,0,0)"
HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
invert - 执行颜色反转（确保轮廓可见，无论是什么颜色背景）

使用 outline-color: invert，执行了颜色反转。这样可以确保无论颜色背景如何，轮廓都是可见的。

CSS Outline - 简写属性

outline-width
outline-style（必需）
outline-color

从上面的列表中，outline 属性可指定一个、两个或三个值。值的顺序无关紧要。

CSS 轮廓偏移

outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

CSS 文本

标签要水平居中：

margin: 0 auto;

文本颜色和背景色

color 属性用于设置文本的颜色
页面的默认文本颜色是在 body 选择器中定义的

对于 W3C 标准：如果您定义了 color 属性，则还必须定义 background-color 属性。

CSS 文本对齐

text-align 属性用于设置文本的水平对齐方式
文本可以左对齐或右对齐，或居中对齐
（如果文本方向是从左到右，则默认为左对齐；如果文本方向是从右到左，则默认是右对齐）

当 text-align 属性设置为 “justify” 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）
在这里插入图片描述
direction 和 unicode-bidi 属性可用于更改元素的文本方向：

p {
  direction: rtl; /*rtl表示从右到左书写*/
  unicode-bidi: bidi-override;
}

这两个属性要一起使用

vertical-align 属性设置元素的垂直对齐方式
包括top（上对齐），middle（居中对齐），bottom（下对齐）

CSS 文字装饰

text-decoration 属性用于设置或删除文本装饰。

text-decoration: none; 通常用于从链接上删除下划线。

h1 {
  text-decoration: overline;     /*表示上划线*/
}

h2 {
  text-decoration: line-through; /*表示中间划线*/
}

h3 {
  text-decoration: underline;    /*表示下划线*/
}

h4 {
  text-decoration: none;         /*取消修饰*/
}

文本转换

text-transform 属性用于指定文本中的大写和小写字母。

它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写：

p.uppercase {
  text-transform: uppercase;  /*全大写*/
}

p.lowercase {
  text-transform: lowercase;  /*全小写*/
}

p.capitalize {
  text-transform: capitalize;  /*首字母大写*/
}

CSS 文字间距

text-indent 属性用于指定文本第一行的缩进：

1em：一个字的大小

p {
  text-indent: 50px;
}

letter-spacing 属性用于指定文本中字符之间的间距：

h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}

line-height 属性用于指定行之间的间距/行高：

0.8表示是字号的0.8倍，也可以用px

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

word-spacing 属性用于指定文本中单词之间的间距：

h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}

white-space 属性指定元素内部空白的处理方式：

p {
  white-space: nowrap; /*禁用元素内的文本换行*/
}

CSS 文本阴影

text-shadow 属性为文本添加阴影
指定水平阴影 2px 和垂直阴影 2px（不能少写），模糊效果5px，颜色：

h1 {
  text-shadow: 2px 2px 5px red;;
}

注意顺序！

CSS 字体

通用字体族

衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
草书字体（Cursive）- 模仿了人类的笔迹。
幻想字体（Fantasy）- 是装饰性/俏皮的字体。
在 CSS 中，我们使用 font-family 属性规定文本的字体
字体名称应以逗号分隔
如果字体名称不止一个单词，则必须用引号引起来

.p1 {
  font-family: "Times New Roman", Times, serif;
}

CSS 字体样式

font-style 属性主要用于指定字体的风格

normal - 文字正常显示
italic - 文本以斜体显示
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

font-weight 属性指定字体的粗细：
在这里插入图片描述
font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。

在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小
在这里插入图片描述

CSS 字体大小

font-size 属性设置文本的大小

为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素
W3C 建议使用 em 尺寸单位。
1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

它在所有浏览器中显示相同的文本大小，并允许所有浏览器缩放或调整文本大小！

可以使用 vw 单位设置文本大小，它的意思是“视口宽度”
这样，文本大小将遵循浏览器窗口的大小

<h1 style="font-size:10vw">Hello World</h1>

视口是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。

CSS 字体属性

为了缩短代码，也可以在一个属性中指定所有单个字体属性。

font 属性是以下属性的简写属性：

font-style
font-variant
font-weight
font-size/line-height
font-family

font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值\

例：

p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}

CSS 图标

参照这里

CSS 链接

设置链接样式

链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式。

a:link - 正常的，未访问的链接
a:visited - 用户访问过的链接
a:hover - 用户将鼠标悬停在链接上时
a:active - 链接被点击时

如果为多个链接状态设置样式，请遵循如下顺序规则：

a:hover 必须 a:link 和 a:visited 之后
a:active 必须在 a:hover 之后

/* 未被访问的链接 */
a:link {
  color: red;
}

/* 已被访问的链接 */
a:visited {
  color: green;
}

/* 将鼠标悬停在链接上 */
a:hover {
  color: hotpink;
}

/* 被选择的链接 */
a:active {
  color: blue;
}

文本装饰

text-decoration 属性主要用于从链接中删除下划线：

a:link {
  text-decoration: none;         /* 没有下划线 */
}
a:hover {
  text-decoration: underline;    /* 有下划线 */
}

链接按钮

<style>
a:link, a:visited {
  background-color: hotpink;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>
</head>
<body>

<h1>链接按钮</h1>
<p>把链接样式设置为按钮：</p>
<a href="default.asp" target="_blank">这是一个链接</a>

在这里插入图片描述

CSS 列表

在 HTML 中，列表主要有两种类型：

无序列表（<ul>）- 列表项用的是项目符号标记
有序列表（<ol>）- 列表项用的是数字或字母标记

CSS 列表属性使您可以：

为有序列表设置不同的列表项标记
为无序列表设置不同的列表项标记
将图像设置为列表项标记
为列表和列表项添加背景色

list-style-type 属性指定列表项标记的类型

ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

显示为：
在这里插入图片描述
注：有些值用于无序列表，而有些值用于有序列表！

list-style-image 属性将图像指定为列表项标记：

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

在这里插入图片描述

list-style-position 属性指定列表项标记（项目符号）的位置

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

在这里插入图片描述
list-style-type:none 属性也可以用于删除标记/项目符号。请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在

或
1. 中添加 margin:0 和 padding:0 ：

浮动

文档流

文档流又叫标准流，是浏览器在渲染网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

在这里插入图片描述

行内块问题

浏览器解析行内块或行内标签的时候，如果标签换行书写会产生一个空格的距离

认识浮动

浮动的作用：实现更好的网页布局

写法：float:left/right

浮动的特点

在这里插入图片描述
浮动中的元素不能通过text-align:center或者margin:0 auto来居中

补充：
在这里插入图片描述
如果父级的宽度不够，子级会自动换行

消除浮动

浮动不好的影响：
父子级标签，子级浮动，父级没有高度，后面的标准流盒子会收到影响，显示到上面的位置

方法一：直接设置父元素高度

方法二：额外标签法
在这里插入图片描述
添加的块级元素一般命名为clearfix

方法三：单伪元素清除法

.clearfix::after {
       content: '';
       display: block;
       clear: both;

       /*为了兼容性*/
       height: 0;
       visibility: hidden;
    }

方法四：双伪元素清除法

.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
}

/*真正清除浮动的标签*/
.clearfix::after {
    clear: both;
}

.clearfix::before用来解决外边距塌陷问题

方法五：给父元素设置overflow:hidden

定位

可以让元素自由的摆放在网页的任意位置
定位之后的元素层级最高，可以层叠在其他盒子上面

设置定位方式：
用属性名position
在这里插入图片描述
设置偏移值：

偏移值分为两个方向，水平和垂直各选一个即可
选取的原则一般是就近原则

相对定位

position:relative;

占有原有的位置
仍然具备标签原有的显示模式特点
改变位置参照自己原来的位置（没有脱标）

如果left和right都有，以left为准；如果top和bottom都有，以top为准

绝对定位

先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位；
有父级但是父级没有定位，就以浏览器窗口来定位
查找父级的方式就是找最近的父级

position:absolute;

脱标，不占位
改变标签的显示模式特点：变为行内块元素

子绝父相：子级使用绝对定位，父级使用相对定位

案例：子绝父相水平居中

让子盒子在父盒子中水平居中（父子元素任意宽度下都能实现）
在这里插入图片描述
还有一种写法，当宽或高需要修改的时候可以不用更改具体数值：

第一个50%是水平方向上，第二个是垂直方向

如果绝对定位的盒子没有宽度也没有内容，那么它的宽度尺寸就是0
如果子级和父级的宽度相同，可以直接写width:100%

固定定位

position:fixed;

脱标，不占位
改变标签的显示模式特点：变为行内块元素
相对于浏览器可视区域进行移动

元素的层级关系

在这里插入图片描述

定位的盒子，后来者居上
z-index:整数，取值越大，显示顺序越靠上，默认值是0
z-index必须配合定位才生效

装饰

基线：浏览器文字类型元素排版中存在用于对齐的基线

浏览器把行内和行内块标签当作文字处理，默认基线对齐

垂直对齐方式

属性名：vertical-align

属性值：
在这里插入图片描述
将图片垂直居中：先给父级加一个和自己高度相等的行高line-height，然后给图片加vertical-align:middle

将图片水平居中：给图片加text-align:center

光标

场景：设置鼠标光标在元素上显示的样式
属性名：cursor
常见属性值：
在这里插入图片描述

边框圆角

让盒子四个角变得圆润
属性名：border-radius，可以取数字+px或者百分比，百分比最大为50%
原理：
在这里插入图片描述
赋值规则：4个值分别是左上，右上，右下，左下，要是缺哪个就看它对角

画一个正圆：

盒子必须是正方形
border-radius值为盒子宽高的一半

画一个胶囊状按钮：

盒子必须是长方形
border-radius值为盒子高的一半

溢出部分显示效果

溢出部分：指的是盒子内容部分所超出盒子范围的区域
属性名：overflow
常见属性值：
在这里插入图片描述

元素本身隐藏

让某些元素本身在屏幕中不可见

常见属性：

visibility:hidden /*占位隐藏*/
display:none      /*不占位隐藏*/

元素整体透明度

让某些元素整体（包括内容）一起变透明

属性名：opacity
属性值：0~1之间的数字，1表示完全不透明，0表示完全透明

opacity会让元素整体透明，包括里面的内容

HLXchamp

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录