首页 > 其他分享 >Web前端开发 CSS常用样式大全

Web前端开发 CSS常用样式大全

时间：2024-08-16 12:24:27浏览次数：17  
标签：Web 盒子 color 标签 选择器 background 前端开发 CSS 属性

Web前端开发 CSS常用样式大全

文章目录

1 CSS简介

层叠样式表（Cascading Style Sheets，CSS），是一种样式表语言，用来描述HTML文档的呈现（美化内容）。属性名和属性值成对出现（键值对）。

引入方式：

  • 内部样式表：学习使用
    • CSS代码写在<style>标签中
    <title>CSS 初体验</title>
<style>
	/* 选择器 { } */
	p {
		/* CSS 属性 */
		color: red;
	}
</style>

<p>体验CSS</p>
  • 外部样式表：开发使用
    • CSS代码写在单独的.css文件中
    • 在HTML中使用<link>标签引入
    <link rel="stylesheet" href="./my.css">
  • 行内样式：配合JavaScript使用
    • CSS写在标签的style属性里
    <div style="color: red; font-size: 20px;">这是 div 标签</div>

Emmet写法：代码的简写方式，输入缩写 VS Code 会自动生成对应的代码。

  • HTML标签
    在这里插入图片描述
  • CSS：大多数简写方式为属性单词的首字母
    在这里插入图片描述

2 选择器

作用：查找标签，设置样式。

2.1 标签选择器

使用标签名作为选择器，选中同名标签设置相同的样式。

例：p、h1、div、a、img…

<style>
    p {
        color: red;
    }
</style>

通配符选择器（*）：查找页面所有标签，设置相同样式。无需手动调用，浏览器会自动查找页面所有标签设置相同的样式。

* {
	color: red;
}

通配符选择器可用于清除标签的默认样式，如标签默认的外边距、内边距。

在这里插入图片描述

2.2 类选择器

查找标签，差异化设置标签的显示效果。

  1. 定义类选择器：.类名
  2. 使用类选择器：标签添加属性值 class="类名"
<style>
    /* 定义类选择器 */
    .red {
        color: red;
    }
</style>

<!-- 使用类选择器 -->
<div class="red">这是div标签</div>
<div class="red size">div标签</div>
  • 一个类选择器可供多个标签使用
  • 一个标签可以使用多个类，类名之间用空格隔开

多个单词可以用-连接

2.3 id选择器

查找标签，差异化设置标签的显示效果。一般配合JavaScript使用，很少用于设置CSS样式。

  1. 定义id选择器：#id名
  2. 使用id选择器：标签添加属性值 id="id名"
<style>
    /* 定义id选择器 */
    #red {
        color: red;
    }
</style>

<!-- 使用id选择器 -->
<div id="red">这是div标签</div>

同一个id选择器在一个页面只能使用一次。

2.4 复合选择器

由两个或多个基础选择器通过不同的方式组合而成，能够更准确、更高效的选择目标元素（标签）。

2.4.1 后代选择器

选中某元素的后代元素（该标签内的所有指定标签）。

写法：父选择器 子选择器 { CSS属性 }，父子选择器之间用空格隔开。

<style>
    div span {
        color: red;
    }
</style>

<span>span标签</span>
<div>
	<span>这是div的儿子span</span >
</div>

2.4.2 子代选择器

选中某元素的子代元素（最近的子级）。

写法：父选择器 > 子选择器 { CSS属性 }，父子选择器之间用>隔开。

<style>
    div > span {
        color: red;
    }
</style>

<div>
    <span>这是div里面的span</span>
    <p>
        <span>这是div里面的p里面的span</span>
    </p>
</div>

2.4.3 并集选择器

选中多组标签设置相同的样式。

写法：选择器1, 选择器2, ... , 选择器N { CSS属性 }，选择器之间用,隔开。

<style>
    div, p, span {
        color: red;
    }
</style>

<div>div标签</div>
<p>p标签</p>
<span>span标签</span>

2.4.4 交集选择器

选中同时满足多个条件的元素。

写法：选择器1选择器2 { CSS属性 }，选择器之间连写，没有任何符号。

如果交集选择器中有标签选择器，标签选择器必须写在最前面。

<style>
    p.box {
        color: red;
    }
</style>

<p class="box">p标签，使用了类选择器box</p>
<p>p标签</p>
<div class="box">div标签，使用了类选择器box</div>

2.4.5 伪类选择器

伪类表示元素状态，选中元素的某个状态设置样式。

写法：选择器:伪类 { CSS 属性 }

<style>
    a:hover {	/* 鼠标悬停 */
        color: red;
    }
    .box:hover {
        color: green;
    }
</style>

<a href="#">a标签</a>
<div class="box">div标签</div>

超链接伪类：

  • :link：访问前
  • :visited：访问后
  • :hover：鼠标悬停
  • :active：点击时（激活）

如果要给超链接设置以上四个状态，需按LVHA的顺序书写。

a {
  color: red;
}
a:hover {
  color: green;
}

2.5 结构伪类选择器

根据元素的结构关系查找元素。

  • E:first-child：查找第一个E元素
  • E:last-child：查找最后一个E元素
  • E:nth-child(N)：查找第N个E元素（第一个元素的N值为1）

nth-child公式

功能公式
偶数标签2n
奇数标签2n+1、2n-1
找到5的倍数的标签5n
找到第5个以后的标签n+5
找到第5个以前的标签-n+5
li:first-child {
	background-color: green;
}

2.6 伪元素选择器

创建虚拟元素/伪元素，用来摆放装饰性的内容。

  • E::before：在E元素里面最前面添加一个伪元素
  • E::after：在E元素里面最后面添加一个伪元素

必须设置content属性来设置伪元素的内容，如果没有内容则引号留空即可。

div::before {
	content: "before伪元素";
}
div::after {
	content: "after伪元素";
}
  • 伪元素默认为行内（inline）显示模式
  • 权重与标签选择器相同

3 CSS特性

3.1 继承性

子级默认继承父级的文字控制属性。

在这里插入图片描述

注：若标签有默认文字样式则会继承失败。 例如：a标签的颜色、标题的字体大小。

3.2 层叠性

  • 相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
  • 不同的属性会叠加：不同的CSS属性都生效
<style>
    div {
        color: red;
        font-weight: 700;
    }
    div {
        color: green;
        font-size: 30px;
    }
</style>

<div>div标签</div>

注：选择器类型相同则遵循层叠性，否则按选择器优先级判断。

3.3 优先级

也叫权重。当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

  • 基础选择器
    • 规则：选择器优先级高的样式生效
    • 公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
      （选中标签的范围越大，优先级越低）
  • 复合选择器
    • 规则：权重叠加计算。
    • 公式： ( ( (行内样式 , , , id选择器个数 , , , 类选择器个数 , , , 标签选择器个数 ) ) )
      （每一级之间不存在进位）
      • 从左至右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
      • !important权重最高
      • 继承权重最低
<style>
    div {
        color: red;
    }
    .box {
        color: green;
    }
</style>

<div class="box">div标签</div>

4 文字控制属性

4.1 字体大小（font-size）

  • 属性名：font-size
  • 属性值：文字尺寸，PC端网页最常用的单位为px
p {
	font-size: 30px;
}

谷歌浏览器默认字号为16px。

4.2 字体样式（font-style）

设置字体是否倾斜

  • 属性名：font-style
  • 属性值
    1. 正常（不倾斜）：normal
    2. 倾斜：italic
  • 作用：清除文字默认的倾斜效果

4.3 行高（line-height）

  • 属性名：line-height
  • 属性值
    1. 数字 + px
    2. 数字（当前标签font-size属性值的倍数）
  • 作用：设置多行文本的间距
line-height: 30px;

/* 当前标签字体大小为16px */
line-height: 2;

在这里插入图片描述

行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。

4.4 单行文字垂直居中

垂直居中技巧：行高属性值line-height等于盒子高度属性值height

该技巧仅适用于单行文字垂直居中效果。

div {
	height: 100px;
	background-color: skyblue;

	/* 注：仅适用于单行文字垂直居中 */
	line-height: 100px;
}

4.5 字体族（font-family）

  • 属性名：font-family
  • 属性值：字体名
font-family: 楷体;

可以书写多个字体名，各字体名之间用逗号隔开，执行顺序为从左向右依次查找。网页开发时建议在最后设置一个无衬线字体。

在这里插入图片描述

font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

4.6 字体复合属性（font）

字体属性的简写方式，一个属性对应多个值。

写法：font: 是否倾斜 是否加粗 字号/行高 字体（各属性值之间用空格隔开，必须按顺序书写）

div {
	font: italic 700 30px/2 楷体;
}

注：字号和字体值必须书写，否则font属性不生效 。

4.7 文本缩进（text-indent）

  • 属性名：text-indent
  • 属性值：
    1. 数字 + px
    2. 数字 + em（推荐。1em = 当前标签的字号大小）
p {
	text-indent: 2em;
}

4.8 文本对齐方式（text-align）

  • 属性名：text-align
  • 属性值
    1. left：左对齐（默认）
    2. center：居中对齐
    3. right：右对齐
  • 作用：控制内容水平对齐方式
text-align: center;

text-align本质是控制内容的对齐方式，属性应设置给内容的父级。

<style>
	div {
		text-align: center;
	}
</style>

<div>
	<img src="./images/1.jpg" alt="">
</div>

4.9 文本修饰线（text-decoration）

  • 属性名：text-decoration
  • 属性值
    1. none：无
    2. underline：下划线
    3. line-through：删除线
    4. overline：上划线

4.10 文字颜色（color）

颜色表示方式属性值说明使用场景
颜色关键字颜色英文单词red、green、blue…学习测试
rgb表示法rgb(r, g, b)r、g、b分别表示红绿蓝三原色，取值：0~255了解
rgba表示法rgba(r, g, b, a)a表示透明度，取值：0~1开发使用，实现透明色
十六进制表示法#RRGGBB#000000、#ffcc00，简写：#000、#fc0开发使用（从设计稿复制）

只要属性值为颜色，都可以使用上述四种颜色表示方式，例如：背景色background-color。

5 背景属性

在这里插入图片描述

5.1 背景图（background-image）

使用背景图实现装饰性的图片效果。

  • 属性名：background-image（bgi）
  • 属性值：url(背景图URL)
div {
	width: 400px;
	height: 400px;

	background-image: url(./images/1.png);
}

背景图默认有平铺（复制）效果。

5.2 平铺方式（background-repeat）

  • 属性名：background-repeat（bgr）
  • 属性值
    1. no-repeat：不平铺
    2. repeat：平铺（默认效果）
    3. repeat-x：水平方向平铺
    4. repeat-y：垂直方向平铺
div {
	width: 400px;
	height: 400px;
	background-color: pink;
	background-image: url(./images/1.png);
	
	background-repeat: no-repeat;
}

5.3 背景图位置（background-position）

  • 属性名：background-position（bgp）
  • 属性值：水平方向位置 垂直方向位置
    • 关键字
      1. left：左侧
      2. right：右侧
      3. center：居中
      4. top：顶部
      5. bottom：底部
    • 坐标
      • 水平：正数向右；负数向左
      • 垂直：正数向下；负数向上
div {
    width: 400px;
    height: 400px;
    background-color: pink;
    background-image: url(./images/1.png);
    background-repeat: no-repeat;

    background-position: center bottom;
    background-position: 50px -100px;
    background-position: 50px center;
}
  • 关键字取值写法可以颠倒取值顺序。
  • 可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向、垂直方向为居中。

5.4 背景图缩放（background-size）

设置背景图大小

  • 属性名：background-size（bgz）
  • 常用属性值
    • 关键字
      1. cover：等比例缩放背景图片以完全覆盖背景区（部分背景图可能会看不见）
      2. contain：等比例缩放背景图片以完全装入背景区（背景区部分可能空白）
    • 百分比：根据盒子尺寸计算图片大小
    • 数字 + 单位（如px）
div {
	width: 500px;
	height: 400px;
	background-color: pink;
	background-image: url(./images/1.png);
	background-repeat: no-repeat;
	
	background-size: cover;
	background-size: contain;
}

注：图片比例与盒子比例相同时，使用cover或contain缩放背景图效果相同。

5.5 背景图固定（background-attachment）

使背景不会随着元素的内容滚动。

  • 属性名：background-attachment（bga）
  • 属性值：fixed
body {
	background-image: url(./images/bg.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
}

5.6 背景复合属性（background）

  • 属性名：background（bg）
  • 属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格分隔各属性值，不区分顺序）
div {
	width: 400px;
	height: 400px;

	background: pink url(./images/1.png) no-repeat right center/cover;
}

6 显示模式（display）

标签（元素）的显示方式。

作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。

  1. 块级元素（block）
    • 独占一行
    • 宽度默认为父级的100%
    • 添加宽高属性生效

在这里插入图片描述

  1. 行内元素（inline）
    • 一行可以显示多个
    • 设置宽高属性不生效
    • 宽高尺寸由内容撑开

在这里插入图片描述

  1. 行内块元素（inline-block）
    • 一行可以显示多个
    • 设置宽高属性生效
    • 宽高尺寸可以由内容撑开

在这里插入图片描述

转换显示模式

  • 属性名：display
  • 属性值
    1. block：块级
    2. inline-block：行内块
    3. inline：行内

7 盒子模型

盒子模型：布局网页，摆放盒子和内容。

  • 内容区域尺寸（宽高）：width & height
  • 背景色：background-color（bgc）
  • 内边距：padding（出现在内容与盒子边缘之间）
  • 边框线：border
  • 外边距：margin（出现在盒子外面）
div {
	margin: 50px;
	border: 5px solid brown;
	padding: 20px;
	width: 200px;
	height: 200px;
	background-color: pink;
}

在这里插入图片描述
在这里插入图片描述

7.1 边框线（border）

  • 属性名
    • 四个方向：border（bd）
    • 单方向边框线：border-方位名词（bd+方位名词首字母，如bdl）
  • 属性值：边框线粗细 线条样式 颜色（不区分顺序）
    • 常见的线条样式属性值：
      1. solid：实线
      2. dashed：虚线
      3. dotted：点线
.c1 {
	border: 5px solid brown;
	width: 200px;
	height: 200px;
	background-color: pink;
}
.c2 {
    border-top: 2px solid red;
    border-right: 3px dashed green;
    border-bottom: 4px dotted blue;
    border-left: 5px solid orange;
    width: 200px;
    height: 200px;
    background-color: pink;
}

7.2 内边距（padding）

设置内容与盒子边缘之间的距离。用法类似border。

  • 属性名：padding、padding-方位名词
  • padding多值写法：从上开始顺时针赋值（上右下左），若当前方向无数值则与对面取值相同。如下表所示
取值个数示例含义
一个值padding: 10px;四个方向内边距均为10px
四个值padding: 10px 20px 40px 80px;上：10px；右：20px；下：40px；左：80px
三个值padding: 10px 40px 80px;上：10px；左右：40px；下：80px
两个值padding: 10px 80px;上下：10px；左右：80px
div {
    /* 四个方向 内边距相同 */
    padding: 30px;
    /* 单独设置一个方向内边距 */
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 40px;
    padding-left: 80px;
    width: 200px;
    height: 200px;
    background-color: pink;
}

7.3 尺寸计算

默认情况：盒子尺寸 = = = 内容尺寸 + + + 边框尺寸 + + + 内边距尺寸

给盒子加border/padding会撑大盒子，解决方法如下：

  • 手动做减法，减掉border/padding的尺寸
  • 设置内减模式：box-sizing: border-box

在这里插入图片描述

7.4 外边距（margin）

拉开两个盒子之间的距离

  • 属性名：margin
  • 属性值、用法：同padding

7.5 版心居中

设置左右margin值为auto（盒子要有宽度）

div {
	margin: 0 auto;
	width: 1000px;
	height: 200px;
	background-color: pink;
}

在这里插入图片描述

7.6 清除默认样式

使用通配符选择器清除标签默认的样式，例如默认的内外边距。

/* 清除默认内外边距 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/* 清除列表项目符号 */
li {
	list-style: none;
}

7.7 元素溢出（overflow）

控制溢出元素的内容的显示方式。

  • 属性名：overflow
  • 属性值
    1. hidden：溢出隐藏
    2. scroll：溢出滚动（无论是否溢出，都显示滚动条位置）
    3. auto：溢出滚动（溢出才显示滚动条位置）

7.8 外边距问题

7.8.1 合并现象

场景：垂直排列的兄弟元素，上下margin会合并

现象：取两个margin中的较大值生效

.one {
	margin-bottom: 50px;
}
.two {
	margin-top: 20px;
}

在这里插入图片描述

7.8.2 外边距塌陷

场景：父子级标签，子级添加上外边距会产生塌陷问题

现象：导致父级一起向下移动

.son {
	margin-top: 50px;
	width: 100px;
	height: 100px;
	background-color: orange;
}

在这里插入图片描述

解决方法：

  • 取消子级margin，父级设置padding
  • 父级设置overflow: hidden
  • 父级设置border-top

7.9 行内元素内外边距问题

场景：行内元素添加margin、padding无法改变元素垂直位置

解决方法：给行内元素添加行高line-height可改变垂直位置

span {
	/* margin 和 padding 属性，无法改变垂直位置 */
	margin: 50px;
	padding: 20px;
	/* 行高可以改变垂直位置 */
	line-height: 100px;
}

7.10 圆角（border-radius）

设置元素的外边框为圆角。

  • 属性名：border-radius
  • 属性值：数字 + px（圆角半径） / 百分比
    在这里插入图片描述
  • 多值写法：从左上角开始顺时针赋值，若当前角没有数值则与对角取值相同（同padding）
取值个数示例含义
一个值border-radius: 10px;四个角均为10px
四个值border-radius: 10px 20px 40px 80px;左上：10px；右上：20px；右下：40px；左下：80px
三个值border-radius: 10px 40px 80px;左上：10px；右上+左下：40px；右下：80px
两个值border-radius: 10px 80px;左上+右下：10px；右上+左下：80px
  • 正圆形状：给正方形盒子设置圆角属性值为宽高的一半 / 50%
img {
    width: 200px;
    height: 200px;

    border-radius: 100px;
    border-radius: 50%;
}

在这里插入图片描述

  • 胶囊形状：给长方形盒子设置圆角属性值为盒子高度的一半
div {
    width: 200px;
    height: 80px;
    background-color: orange;
    border-radius: 40px;
}

在这里插入图片描述

7.11 盒子阴影（box-shadow）

给元素设置阴影效果

  • 属性名：box-shadow
  • 属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
    • X轴Y轴偏移量必须书写
    • 默认为外阴影，内阴影需添加inset
div {
    width: 200px;
    height: 80px;
    background-color: orange;
    box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}

8 浮动（float）

标准流：也叫文档流，指的是标签在页面中默认的排布规则。例如：块元素独占一行，行内元素可以一行显示多个。

8.1 基本使用

让块元素水平排列。

  • 属性名：float
  • 属性值
    • left：左对齐
    • right：右对齐
<style>
    /* 特点：顶对齐；具备行内块显示模式特点；浮动的盒子会脱标 */
    .one {
        width: 100px;
        height: 100px;
        background-color: brown;

        float: left;
    }

    .two {
        width: 200px;
        height: 200px;
        background-color: orange;

        /* float: left; */
        
        float: right;
    }
</style>

<div class="one">one</div>
<div class="two">two</div>

特点：

  • 浮动后的盒子顶对齐
  • 浮动后的盒子具备行内块特点
  • 浮动后的盒子脱标，不占用标准流的位置

8.2 产品区域布局

在这里插入图片描述

HTML标签

<!-- 版心：左右，右面：8个产品 → 8个 li -->
<div class="product">
    <div class="left"></div>
    <div class="right">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

CSS样式

<style>
    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    .product {
        margin: 50px auto;
        width: 1226px;
        height: 628px;
        background-color: pink;
    }

    .left {
        float: left;
        width: 234px;
        height: 628px;
        background-color: skyblue;
    }

    .right {
        float: right;
        width: 978px;
        height: 628px;
        background-color: brown;
    }

    .right li {
        float: left;
        margin-right: 14px;
        margin-bottom: 14px;
        width: 234px;
        height: 300px;
        background-color: orange;
    }

    /* 第四个li和第八个li 去掉右侧的margin */
    .right li:nth-child(4n) {
        margin-right: 0;
    }
    /* 细节：如果父级宽度不够，浮动的盒子会掉下来 */
</style>

8.3 清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

场景搭建

在这里插入图片描述

<style>
    .top {
        margin: 10px auto;
        width: 1200px;
        /* height: 300px; */
        background-color: pink;
    }

    .left {
        float: left;
        width: 200px;
        height: 300px;
        background-color: skyblue;
    }

    .right {
        float: right;
        width: 950px;
        height: 300px;
        background-color: orange;
    }

    .bottom {
        height: 100px;
        background-color: brown;
    }
</style>

<div class="top">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="bottom"></div>

8.3.1 额外标签法

在父元素内容的最后添加一个块级元素，设置CSS属性 clear: both

<style>
    .clearfix {
        clear: both;
    }
</style>

<div class="top">
	<div class="left"></div>
	<div class="right"></div>
	<div class="clearfix"></div>
</div>

8.3.2 单伪元素法

准备after伪元素，父级使用clearfix类

<style>
	.clearfix::after {
		content: "";
		display: block;
		clear: both;
	}
</style>

<div class="top clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>

8.3.3 双伪元素法

准备after和before伪元素，父级使用clearfix类

<style>
	/* before解决外边距塌陷问题 */
	.clearfix::before,
	.clearfix::after {
	  content: "";
	  display: table;
	}
	
	/* after清除浮动 */
	.clearfix::after {
	  clear: both;
	}
</style>

<div class="top clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>

8.3.4 overflow法

.top {
	margin: 10px auto;
	width: 1200px;
	/* height: 300px; */
	background-color: pink;

	overflow: hidden;
}

9 Flex布局

Flex布局（弹性布局）是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。

Flex模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。
在这里插入图片描述

9.1 Flex组成

设置方式：给父元素设置display: flex，子元素可以自动挤压或拉伸

组成部分：

  • 弹性容器
  • 弹性盒子
  • 主轴：默认在水平方向
  • 侧轴 / 交叉轴：默认在垂直方向

在这里插入图片描述

9.2 主轴对齐方式（justify-content）

  • 属性名：justify-content
  • 属性值
    1. flex-start：弹性盒子从起点开始依次排列（默认值）
    2. flex-end：弹性盒子从终点开始依次排列
    3. center：弹性盒子沿主轴居中排列
    4. space-between：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
    5. space-around：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
    6. space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

9.3 侧轴对齐方式（align-items、align-self）

  • 属性名
    • align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
    • align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
  • 属性值
    1. stretch：弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
    2. center：弹性盒子沿侧轴居中排列
    3. flex-start：弹性盒子从起点开始依次排列
    4. flex-end：弹性盒子从终点开始依次排列

9.4 修改主轴方向（flex-direction）

主轴默认在水平方向，侧轴默认在垂直方向

  • 属性名：flex-direction
  • 属性值
    1. row：水平方向，从左向右（默认）
    2. column：垂直方向，从上向下
    3. row-reverse：水平方向，从右向左
    4. column-reverse：垂直方向，从下向上

9.5 弹性伸缩比（flex）

控制弹性盒子的主轴方向的尺寸。

  • 属性名：flex
  • 属性值：整数数字，表示占用父级剩余尺寸的份数。

9.6 弹性盒子换行（flex-wrap）

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。

  • 属性名：flex-wrap
  • 属性值
    • wrap：换行
    • nowrap：不换行（默认）

9.7 行内对齐方式（align-content）

  • 属性名：align-content
  • 属性值
    1. flex-start：弹性盒子从起点开始依次排列（默认值）
    2. flex-end：弹性盒子从终点开始依次排列
    3. center：弹性盒子沿主轴居中排列
    4. space-between：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
    5. space-around：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
    6. space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

10 定位（position）

灵活的改变盒子在网页中的位置

  1. 定位模式：position
  2. 边偏移：设置盒子的位置
    • left
    • right
    • top
    • bottom

10.1 相对定位

  • position: relative

特点：

  • 不脱标，占用自己原来位置
  • 显示模式特点保持不变
  • 设置边偏移则相对自己原来位置移动
div {
	position: relative;
	top: 100px;
	left: 200px;
}

10.2 绝对定位

  • position: absolute

使用场景：子级绝对定位，父级相对定位（子绝父相）

特点：

  • 脱标，不占位
  • 显示模式具备行内块特点
  • 设置边偏移则相对最近的已经定位的祖先元素改变位置
  • 如果祖先元素都未定位，则相对浏览器可视区改变位置
.father {
	position: relative;
}

.father span {
	position: absolute;
	top: 0;
	right: 0;
}

10.3 定位居中

在这里插入图片描述

实现步骤：

  1. 绝对定位
  2. 水平、垂直边偏移为 50%
  3. 子级向左、上移动自身尺寸的一半（左、上的外边距为尺寸的一半）
  • transform: translate(-50%, -50%)
img {
	position: absolute;
	left: 50%;
	top: 50%;

	/* margin-left: -265px;
	margin-top: -127px; */

	/* 50%即为自身宽高的一半 */
	transform: translate(-50%, -50%);
}

10.4 固定定位

  • position: fixed

场景：元素的位置在网页滚动时不会改变

特点：

  • 脱标，不占位
  • 显示模式具备行内块特点
  • 设置边偏移相对浏览器窗口改变位置
div {
	position: fixed;
	top: 0;
	right: 0;

	width: 500px;
}

10.5 堆叠层级（z-index）

在这里插入图片描述

默认效果：按照标签书写顺序，后来者居上

作用：设置定位元素的层级顺序，改变定位元素的显示顺序

  • 属性名：z-index
  • 属性值：整数数字（默认值为0，取值越大，层级越高）
.box1 {
	background-color: pink;
	/* 取值是整数，默认是0，取值越大显示顺序越靠上 */
	z-index: 1;
}

.box2 {
	background-color: skyblue;
	left: 100px;
	top: 100px;

	z-index: 2;
}

11 CSS精灵

CSS精灵（CSS Sprites）是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再用background-position精确地定位出背景图片的位置。

在这里插入图片描述

优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度

在这里插入图片描述
实现步骤：

  1. 创建盒子，盒子尺寸与小图尺寸相同
  2. 设置盒子背景图为精灵图
  3. 添加background-position属性，改变背景图位置
    1. 使用PxCook测量小图片左上角坐标
    2. 取负数坐标为background-position属性值（向左上移动图片位置）

PxCook（像素大厨） 是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。

开发面板（自动智能识别）
设计面板（手动测量尺寸和颜色）

使用方法：创建项目 → 输入 项目名称、项目类型 Web → 单击按钮【创建项目】 → 单击按钮【添加】，导入设计稿

在这里插入图片描述

12 CSS修饰属性

12.1 垂直对齐方式（vertical-align）

  • 属性名：vertical-align
  • 属性值
    1. baseline：基线对齐（默认）
    2. top：顶部对齐
    3. middle：居中对齐
    4. bottom：底部对齐

在这里插入图片描述

12.2 过渡（transition）

为一个元素在不同状态之间切换的时候添加过渡效果

  • 属性名：transition（复合属性）
  • 属性值：过渡的属性 花费时间 (s)
    • 过渡的属性可以为具体的CSS属性，也可以为all（两个状态属性值不同的所有属性，都产生过渡效果）
    • transition设置给元素本身
img {
	width: 200px;
	height: 200px;
	transition: all 1s;
}

img:hover {
	width: 500px;
	height: 500px;
}

12.3 透明度（opacity）

设置整个元素的透明度（包含背景和内容）

  • 属性名：opacity
  • 属性值： [ 0 , 1 ] [0,1] [0,1]
    • 0 0 0：完全透明（元素不可见）
    • 1 1 1：不透明
    • ( 0 , 1 ) (0,1) (0,1)内的小数：半透明

12.4 光标类型（cursor）

鼠标悬停在元素上时指针显示样式

  • 属性名：cursor
  • 属性值
    1. default：默认值，通常是箭头
    2. pointer：小手效果，提示用户可以点击
    3. text：工字型，提示用户可以选择文字
    4. move：十字光标，提示用户可以移动

标签：Web,盒子,color,标签,选择器,background,前端开发,CSS,属性
From： https://blog.csdn.net/Akira37/article/details/141088364

相关文章

  • 基于 Clouflare+D1 的web访客统计服务
    项目地址https://github.com/yestool/analytics_with_cloudflare部署步骤安装依赖npminstall-gwranglernpminstallhono创建D1数据库：web_analytics数据库名称为web_analytics，与package.json内保持一致npxwranglerd1createweb_analytics运行后控制台显示......
  • 前端新手必看：掌握CSS样式优先级和!important，让你的样式不再冲突！（CSS优先级和!important
    文章目录......
  • LiveGBS流媒体平台GB/T28181功能-获取GB28181接入的海康大华宇视华为摄像头硬件NVR设
    @目录1、背景2、视频流媒体集成2.1、页面集成2.1、视频流地址播放集成3、页面集成说明3.1、直播分享页集成3.1.1、查看通道3.1.2、开启分享3.1.3、分享页面传参3.1.4、分享页面播放3.2、时间轴回放分享页集成3.3、电子地图分享页集成4、视频流地址播放集成说明4.1、获取直播流地......
  • 437.蓝色简单的多乐士油漆公司网站 大学生期末大作业 Web前端网页制作 html+css+js
    目录一、网页概述二、网页文件 三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这......
  • 【安卓】WebView的用法与HTTP访问网络
    文章目录WebView的用法使用http访问网络使用HttpURLConnection使用OkHttp前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。WebView的用法  新建一个WebViewTest项目，然后修改activity_main.xml中的代码。在布......
  • Css预编语言的理解？有哪些区别?
    Css作为一门标记性语言，语法相对简单，但同时也带来一些问题。需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，Css预处理器便是针对上述问题的解决方案。Css预编译语言在前端里面有三大优秀的预编处理器，分别是：1、sass2、less3、stylus：变量：less声明的变量必须以@开......
  • websocket连接
    https://blog.csdn.net/qq_70071513/article/details/133171580//暴露自定义websocket对象exportconstsocket={//后台请求路径url:"",//websocket对象websocket:null,//websocket状态websocketState:false,//重新连接次数reconnectNum:0,//......
  • WebGL学习笔记
    完整demo和lib文件可以在https://github.com/tengge1/webgl-guide-code中找到。第2章WebGL入门第一个WebGL程序functionmain(){//获取canvas元素varcanvas=document.getElementById('webgl');//获取webgl绘图上下文vargl=getWebGLCo......
  • 乐器在线购物商城系统解决方案毕设毕业设计.web期末作业设计网页.css网页成品参考
     博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、P......
  • 【HW系列+技战法】内存马Webshell对抗
    一、什么是Webshell？二、迎接新的挑战：无文件型内存马三、对抗策略：从文件落地到内存马的全方位反击3.1文件型Webshell的检测与防御3.2内存型Webshell的检测与防御四、免杀技术：在攻防对抗中的进阶手段一、什么是Webshell？Webshell是黑客常用的一种“隐形利刃”，其......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99