Loading

CSS基础

1. 基础选择器

选择器 写法 说明
标签选择器 标签名 {...} 用 HTML 标签名作为选择器，为页面中同类型的标签统一设置样式
类选择器 .类名 {...} 1. 可单独选一个或几个标签
2. 长名称或词组可加中横线，如：star-sing
3. 可以给一个标签指定多个类名，从而设置更多样式
id 选择器 #id名 {...} 为标有特定 id 的元素标签设置样式（id 唯一）
通配符选择器 * {...} 给所有元素使用样式（特殊情况才使用）
  • 示例：
<style>
.red {
    color: red;
}

.font20 {
    font-size: 20px;
}

#pink {
    color: pink;
}
</style>

<div class="red font20"> 变红色 </div>
<div id="pink"> 迈克尔·杰克逊 </div>

2. 字体属性

2.1 字体系列

  • font-family属性定义文本的字体系列 【即哪种字体】
p {
	font-family: "微软雅黑";
}
div {
	font-family: Arial, "Microsoft Yahei", "微软雅黑";
}

  • 说明：

    • 各种字体之间用逗号隔开

    • 一般情况下，如果有空格隔开的多个单词组成的字体，加引号

    • 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正常显示

/* 常见字体 */
body {
	font-family: "Microsoft Yahei", tahoma, arial, "Hiragino Sans GB";
}
  • 引入外部字体
@font-face {
	font-family: NotoSansHansRegular;
	src: url("NotoSansHans-Regular.otf");
	font-weight: normal;
	font-style: normal;
}

2.2 字体大小

p {
	font-size: 20px;
}

  • 谷歌浏览器默认字体大小：16px

  • 不同浏览器显示的字体大小可能不同，尽量给一个明确值大小，不要默认大小

  • 可以给 body 指定整个页面文字的大小

  • 标题标签比较特殊，需要单独指定文字大小

2.3 字体粗细

p {
    font-weight: normal | bold | bolder | lighter | number;
               正常(400) 粗体(700) 特粗体    细体     100~900
}
  • 注：实际开发更推荐用数字

2.4 文字样式

p {
    font-style: normal | italic;
    		   正常(默认)   斜体
}
  • 注：一般不给文字加斜体，而是将斜体标签（em、i）改为正常字体

2.5 字体复合属性

  • 可以节约代码
body {
	font: font-style font-weight font-size/line-height font-family;
}

  • 注：

    • 有顺序，且不能随意更换

    • 不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性不起作用

3. 文本属性

属性 表示 说明
color 文本颜色 1. 预定的颜色值：blue、green
2. 十六进制：#666666可简写为#666，#ff00ff可简写为#f0f
3. RGB 代码：rgb(255,0,0)或rgb(100%,0%,0%)
text-align 文本对齐 设置文字水平对齐方式
text-indent 文本缩进 常用来设置段落的首行缩进
text-decoration 文本修饰 添加下划线：underline，取消下划线： none
line-height 行间距 1. 控制行与行之间的距离
2. 行间距 = 上间距 + 文本高度 + 下间距

3.1 文本缩进

  • 长度可以是负数，但没必要

  • em 是一个相对单位，即当前元素 1 个字体的大小，如果当前元素没有设置大小，则会按照父元素的 1 个文字大小

div {
	text-indent: 10px;
}

p {
	text-indent: 2em;
}

3.2 对齐文本

  • 图片居中：让其父标签<p>添加水平居中的代码

  • 文字两端对齐

    • 以下方法仅针对文字，如果写上连续的字母或者数字，需要在 字母 / 数字 之间加空格

    • 如：111abc ---> 1 1 1 a b c

/* 法一：*/
.justified {
	text-align: justify;
	text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
	text-align-last: justify;
}

/* 法二：*/
.justified {
	text-align: justify;
	&:after {
		// 这里 伪元素after 或者 伪元素before 都行
		content: "";
		display: inline-block;
		width: 100%;
	}
}
  • 单行文字垂直居中：让文字的行高等于盒子的高度

3.3 装饰文本

  • text-decoration属性可以给文本添加下划线、删除线、上划线等
div {
    text-decoration: none | underline | overline | line-through;
    			  默认无装饰	  下划线	   上划线		 删除线
}

  • 重点记住如何添加、删除下划线，其余了解即可

  • 去掉默认的蓝色边框

input {
	outline: none;
}
  • 防止表单域拖拽
textarea {
	resize: none;
}

4. 引入方式

样式表 优点 缺点 控制范围
行内样式表 书写方便，权重高 结构样式混写（不推荐大量使用） 控制一个标签
内部样式表 部分结构和样式相分离 没有彻底分离 控制一个页面
外部样式表 完全实现结构和样式相分离 需要引入 控制多个页面

4.1 行内样式表（行内式）

  • 在元素标签内部的style属性中设定 css 样式，适合于修改简单样式
<div style="color: red; font-size: 12px;"> hello world </div>

4.2 内部样式表（嵌入式）

  • 写到 html 页面内部，将所有 css 代码写在<style>标签中

  • <style>标签可以放在 HTML 文档的任何地方，但一般会放在<head>标签中

<style>
    div {
        color: red;
        font-size: 12px;
    }
</style>

4.3 外部样式表（链接式）

  • 适合于样式比较多的情况，实际开发常用

  • 将样式单独写到 css 文件中，再引入到 HTML 页面中使用

<link rel="stylesheet" href="css文件路径">
属性 作用
rel 定义当前文档与链接文档之间的关系，此处需要指定为"stylesheet"，表示被链接的文档是一个样式表文件
href 定义所链接外部样式表文件的 url 【相对路径 / 绝对路径】

5. Chrome 调试工具

  • 打开调试工具

    • 按下 F12 键或者右击页面空白处 --> 检查

  • 使用调试工具

    • CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色

    • Ctrl + 0 复原浏览器大小

    • 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误

    • 如果有样式，但是样式前面有黄色叹号提示，则样式属性书写错误

6. Emment 语法

其前身是 Zen coding，它使用缩写，来提高 html / css 的编写速度，Vscode 内部已经集成该语法

6.1 快速生成 HTML 结构语法

快速生成代码 操作
生成标签 直接输入标签名，按下 tab 键
生成多个相同标签 div * 3 就可以快速生成 3 个 div
有父子级关系 可以用 > ，比如 ul > li 即可
有兄弟关系 用 + 即可，比如 div + p
生成带有类名或者 id 名字的 直接写 p.demo 或者 #two tab 键即可
生成的 div 类名是有顺序的 可以用自增符号$ ，比如 .demo$ * 5
想要在生成的标签内部写内容 可以用 { } 表示，比如，div

6.2 快速生成 CSS 样式语法

  • 基本采取简写形式

    • 比如w200 按 tab 可以生成width: 200px

    • 比如lh26 按 tab 可以生成line-height: 26px

7. 复合选择器

  • 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

  • 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等

选择器 作用 特征 使用情况 隔开符号及用法
后代选择器 用来选择后代元素 可以是子孙后代 较多 空格：.nav a
子代选择器 只选亲儿子 较少 大于：.nav>p
并重选择器 选择某些相同样式的元素 可以用于集体声明 较多 逗号：.nav, .header
链接伪类选择器 选择不同状态的链接 跟链接相关 较多 重点记住 a{ } 和 a: hover 实际开发的写法
:focus 选择器 选择获得光标的表单 跟表单相关 较少 input:focus

7.1 后代选择器

.nav li a {
    color: red;
}

<ul class="nav">
    <li></li>
    <li> <a></a> </li>
</ul>

7.2 子选择器

  • 只能选择最近一级元素

  • 元素 2 必须是亲儿子，其孙子、重孙之类都不归它管

/* 表示选择元素1里面的所有直接后代（子元素）元素2 */
元素1 > 元素2 {
	...;
}

例如： div > p {
	...;
} /* 选择div里面所有最近一级p标签 */

7.3 并集选择器

  • 可以选择多组标签定义相同的样式，通常用于集体声明

  • 逗号可以理解为和的意思

元素1,
元素2 {
	...;
}
例如： ul,
div {
	...;
} /* 选择ul和div标签元素 */

7.4 伪类选择器

  • 用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第 1 个，第 n 个元素

  • 最大的特点是用冒号表示，比如:hover、:first-child

  • 分类：链接伪类、结构伪类等

7.4.1 链接伪类

a:link        /* 选择所有未被访问的链接 */
a:visited    /* 选择所有已被访问的链接 */
a:hover      /* 选择鼠标指针位于其上的链接 */
a:active    /* 选择活动链接（鼠标按下未弹起的链接） */

  • 注：

    • 按照 LVHA 的顺序声明

    • a 链接在浏览器中具有默认样式，所以在实际工作中都需要给链接单独指定样式

  • 常用写法：

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

7.4.2 :focus 伪类选择器

  • 该选择器用于获得光标的表单元素
input:focus {
	background-color: yellow;
}

8. 元素显示模式

元素模式 元素排列 设置宽度、高度 默认宽度 包含
块级元素 一行一个 √ 容器的 100% 容器级可以包含任何标签
行内元素 一行可多个 不可以直接设置 本身的内容宽度 容纳文本或其他行内元素
行内块元素 一行可多个 √ 本身的内容宽度

8.1 块元素

  • 常见块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等

  • 特点：

    • 独占一行

    • 高度、宽度、外边距以及内边距都可以控制

    • 宽度默认是容器（父级宽度）的 100%

    • 是一个容器及盒子，里面可以放行内或者块级元素

  • 注：文字类的元素内不能使用块元素，如<p>、<h1>~<h6>

8.2 行内元素

  • 常见的行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等

  • 特点：

    • 相邻行内元素在一行上，一行可以显示多个

    • 高、宽直接设置是无效的

    • 默认宽度就是它本身内容的宽度

    • 行内元素只能容纳文本或其他行内元素

  • 注：

    • 链接里面不能再放链接

    • 特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

8.3 行内块元素

  • <img/>、<input/>、<td>同时具有块元素和行内元素的特点，一般称它们为行内块元素

  • 特点：

    • 和相邻行内元素（行内块）在一行上，但中间有空隙，一行可以显示多个

    • 默认宽度是本身内容的宽度

    • 高度、行高、外边距以及内边距都可以控制

  • 巧用行内块元素

    • 行内块元素会自带外边距，不用自己调整

    • 直接给父元素添加 text-align: center 即可实现水平居中

8.4 元素显示模式转换

  • 转换为块元素：display: block
a {
    width: 200px;
    height: 300px;
    display: block;
}
<a href="#">百度<a/>

  • 转换为行内元素：display: inline

  • 转换为行内块：display: inline-block

9. 背景

属性 作用 值
background-color 背景颜色 transparent(默认)
color：预定的颜色值、十六进制、RGB代码
background-image 背景图片 none或url(图片路径)
background-repeat 背景平铺 repeat(默认)：横向+纵向平铺
no-repeat：不平铺
repeat-x：横向平铺
repeat-y：纵向平铺
background-position 背景位置 x 坐标和 y 坐标
background-attachment 背景附着
（可以制作视差滚动的效果）		 scroll：背景图像随页面的其余部分滚动
fixed：背景图像固定
背景简写 书写更简单（没有固定顺序） background: transparent url(image.jpg) repeat-y fixed top;
背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景色半透明 背景色半透明 background: rgba(0, 0, 0, .3);

9.1 背景图片

  • background-image：实际开发中常见于 logo / 一些装饰性的小图片 / 超大的背景图

  • 优点：便于控制位置，精灵图也是一种运用场景

  • 让图片完全覆盖页面

body {
	background-image: url(../img/***.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

9.2 背景图片位置

background-position: x y;

  • 参数：x 坐标和 y 坐标，可以使用方位名词 / 精确单位

    • 2 个方位词：顺序不重要，如left top等价于top left

    • 只指定 1 个方位词：则第二个值默认居中对齐

    • 只指定 1 个数值：则该数值一定是 x 坐标，另一个默认垂直居中

    • 方位词+数值混用：则第一个值是 x 坐标，第二个值是 y 坐标

参数值 说明
length 百分数 | 由浮点数和单位标识符组成的长度值【单位 px】
position top | center | bottom | left | center | right

9.3 背景色半透明

background: rgba(0, 0, 0, 0.3);

  • 最后一个参数是 alpha 透明度，取值范围在 0~1 之间，常把0.3简写为.3

  • 注：背景半透明是指盒子背景半透明，盒子里的内容不受影响

  • 给图片设置透明度

img {
	opacity: 数值;
}

10. CSS 的三大特性

10.1 层叠性

  • 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式

  • 层叠性主要解决样式冲突的问题

  • 层叠性原则

    • 样式冲突：遵循就近原则

    • 样式不冲突，不会层叠

10.2 继承性

  • 子标签会继承父标签的某些样式，如文本颜色和字号

    • 可以继承：以 text-、font-、line- 开头，以及 color 属性

    • 宽度和高度不会被继承

  • 行高的继承性

    • 行高的单位可有可无

    • 若子元素没有设置行高，则继承父元素的行高

/* line-hight = font-size * 1.5 */
body {
	font: 12px/1.5 Microsoft Yahei;
}
  • 优点：子元素可以根据自己文字大小自动调整行高

10.3 优先级

  • 当同一个元素指定多个选择器，就会产生优先级

    • 选择器相同，就近原则

    • 选择器不同，则根据选择器权重执行

选择器 选择器权重
继承 或者 * 0，0，0，0
元素选择器 0，0，0，1
类选择器，伪类选择器 0，0，1，0
ID 选择器 0，1，0，0
行内样式 style="" 1，0，0，0
!important 重要的 无穷大

  • 注：

    • 权重由 4 组数字组成，但是不会有进位

    • 等级判断从左向右

    • 继承的权重为 0，若该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0

  • 权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重

    • div ul li -----> 0,0,0,3

    • .nav ul li -----> 0,0,1,2

    • a:hover -----> 0,0,1,1

11. 盒子模型

  • 网页布局过程：

    • 先准备好相关的网页元素，网页元素基本都是盒子

    • 利用 css 设置好盒子样式，然后放到相应的位置

    • 往盒子里面装内容

  • 网页布局的本质：利用 css 摆盒子

  • 组成

组成 描述
边框 border 盒子的边框
外边距 margin 盒子与盒子间的距离
内边距 padding 盒子内容与边框的距离
实际内容 content 盒子里的内容

11.1 边框 border

  • 边框会影响盒子的实际大小

  • 如：一个 200×200 的盒子，边框 10px，宽度和高度变成了 220px

  • 语法格式
border: border-width  border-style  border-color 
         边框粗细(px)    solid 实线     边框颜色 
                        dashed 虚线 
                        dotted 点线
  • 示例
/* 复合写法（没有顺序） */
border: 1px solid red; 

/* 只设定上边框，其余同理 */
border-top: 1px solid red; 

/* 表示相邻边框合并在一起 */
border-collapse: collapse;
  • 边框其实是一个等边三角形
div {
	width: 0;
	height: 0;
	line-height: 0;
	font-size: 0;
	border: 50px solid transparent;
	border-bottom-color: pink;
}
  • 普通三角
width: 0;
height: 0;
// 只保留右边框有颜色
border-color: transparent red transparent transparent;
// 样式都是solid
border-style: solid;
// 上边框宽度要大，右边框宽度稍小，其余边框为0
border-width: 22px 8px 0 0;

11.2 圆角边框

border-radius: length; /* 可以是数值或百分比 */
  • 可以设置不同的圆角，顺时针变化
border-radius: 10px 20px 30px 40px;

  • 如果设置两个数值，则是对角线圆角进行变化

  • 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

11.3 内边距 padding

  • padding属性用于设置边框与内容之间的距离（可单独设置，如：padding-bottom 下内边距）

  • padding 也会影响盒子实际大小

  • 如：一个 200×200 的盒子，内边距 10px，宽度和高度变成了 220px

  • padding不会撑开盒子的情况：不设定宽度或者高度【子元素也一样】

  • padding 复合属性

值的个数 描述
padding: 5px; 表示上下左右都有 5px 内边距
padding: 5px 10px 表示上下内边距是 5px，左右内边距是 10px
padding: 5px 10px 20px 表示上内边距 5px，左右内边距 10px，下内边距 20px
padding: 5px 10px 20px 30px 上 5px，右 10px，下 20px，左 30，顺时针

11.4 外边距 margin

11.4.1 基本使用

  • 写法与 padding 一致

  • 外边距典型应用：让块级盒子水平居中，但必须满足以下条件

    • 盒子必须指定了宽度（width）

    • 盒子左右的外边距都设置为 auto

.header {
	width: 96px;
	margin: 0 auto;
}

  • 常见写法：

    • margin-left: auto;

    • margin-right: auto;

    • margin: auto;

    • margin: 0 auto;

  • 注：以上写法是让块级元素水平居中的写法，行内元素和行内块元素水平居中给其父元素添加text-align: center即可

  • 外边距合并

    • 上下元素外边距的合并：取较大者【尽量只给一个盒子添加 margin 值】

    • 嵌套块元素垂直外边距的塌陷【儿子把父亲拽下来了】

  • 解决：

    • 为父元素定义上边框

    • 为父元素定义上内边距

    • 为父元素添加overflow: hidden;

    • 还有其他方法，比如浮动、固定、绝对定位的盒子不会有塌陷问题

11.4.2 margin 负值运用

  • 解决两个边框线重合问题

  • 让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框

  • 鼠标经过某个盒子时，提高当前盒子的层级即可

【如果没有定位，则加相对定位（保留位置），如果有定位，则加 z-index】

ul li:hover {
	z-index: 1;
	border: 1px solid blue;
}

ul li:hover {
	position: relative;
	border: 1px solid blue;
}

11.5 清除内外边距

  • 网页元素很多带有默认的内外边距，而且不同浏览器默认的也不一致，此时需要先清除网页元素的内外边距
* {
	padding: 0;
	margin: 0;
}
  • 注：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以

11.6 盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;
值 描述
h-shadow 必需，水平阴影的位置，允许负值
v-shadow 必需，垂直阴影的位置，允许负值
blur 可选，模糊距离
spread 可选，阴影的尺寸
color 可选，阴影的颜色
inset 可选，可将外部阴影（outset）改为内部阴影

  • 注意：

    • 默认的是外阴影（outset），但是不能写这个单词，否则阴影无效

    • 盒子阴影不占空间，不会影响其他盒子的排列

/* 当鼠标经过盒子时有阴影：*/
div:hover {
	box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.3);
}

11.7 文字阴影（了解）

text-shadow: h-shadow v-shadow blur color;
值 描述
h-shadow 必需，水平阴影的位置，允许负值
v-shadow 必需，垂直阴影的位置，允许负值
blur 可选，模糊距离
color 可选，阴影的颜色

12. 布局方式

12.1 标准流

  • 标签按照规定好的默认方式排列

  • 块级元素独占一行，从上向下顺序排列

  • 行内元素按从左到右顺序排列，碰到父元素边缘则自动换行

  • 标准流是最基本的布局方式

12.2 浮动

12.2.1 基本使用

  • 典型作用：让多个盒子在一行显示，并且中间无空隙

  • 网页布局第一准则

    • 多个块级元素纵向排列——标准流

    • 多个块级元素横向排列——浮动

  • float 属性用于创建浮动框

/* 两个盒子紧靠在一起放一行，向左侧贴紧 */
div {
	float: left;
}
属性值 描述
none 元素不浮动（默认值）
left 向左浮动
right 向右浮动

12.2.2 特性

  • 最重要的特性

    • 脱离标准流的控制，移动到指定位置（俗称脱标）

    • 浮动的盒子不再保留原先的位置（让给了其他元素，实现叠加效果）

  • 若多个盒子都设置了浮动，则它们会按照属性值一行内显示并顶端对齐排列

  • 注：浮动的元素紧贴在一起（没有缝隙），若父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

  • 浮动元素具有行内块元素的特性

    • 不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性

    • 若块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，其大小根据内容来决定

  • 浮动元素经常和标准流父级搭配使用

    • 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

  • 注：

    • 一个元素浮动了，理论上其余的兄弟元素也要浮动

    • 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

12.2.3 文字围绕浮动元素

  • 浮动元素不会压住文字

12.2.4 清除浮动

  • 为什么？

    • 由于父级盒子很多情况下不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子

  • 本质

    • 清除浮动元素造成的影响

    • 如果父盒子本身有高度，则不需要清除浮动

    • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了

选择器 {
	clear: 属性值;
}
属性值 描述
left 清除左侧浮动的影响
right 清除右侧浮动的影响
both 同时清除左右两侧浮动的影响【几乎只用这个】

  • 清除浮动的策略：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

  • 清除浮动方法

    • 额外标签法

      • 在浮动元素末尾添加一个空的标签，添加清除浮动样式【不常用】

      • 注：要求这个空标签必须为块级元素

    • 父级添加overflow属性

      • 优点：代码简洁

      • 缺点：无法显示溢出的部分

overflow: hidden | auto | scroll;

  • 父级添加:after伪元素

    • 优点：没有增加标签，结构简单

    • 缺点：照顾低版本浏览器

.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visability: hidden;
}
.clearfix {
	*zoom: 1;
}

  • 父级添加双伪元素

    • 优点：代码简洁

    • 缺点：照顾低版本浏览器

.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
/* 照顾ie6、7 */
.clearfix {
	*zoom: 1;
}
  • 总结
清除浮动的方式 优点 缺点
额外标签法 通俗易懂，书写方便 添加许多无意义的标签，结构化较差
父级 overflow: hidden; 书写简单 溢出隐藏
父级 :after 伪元素 结构语义化正确 由于 IE6-7 不支持 :after，兼容性问题
父级双伪元素 结构语义化正确 由于 IE6-7 不支持 :after，兼容性问题
  • 若父盒子装不下子元素，可将父级元素的宽度设置得足够宽

13. 定位

13.1 为什么需要定位

  • 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子

  • 定位则是可以让盒子自由的在某一个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子

13.2 定位组成

  • 定位：将盒子定在某一个位置

  • 定位 = 定位模式 + 边偏移

    • 定位模式用于指定一个元素在文档中的定位方式

    • 边偏移则决定了该元素的最终位置

13.2.1 定位模式

  • 用 position 属性来设置
定位模式 是否脱标 移动位置 是否常用
static 静态定位 否 无定位，按标准流特性摆放位置，没有边偏移 很少
relative 相对定位 否（占有位置） 相对于自身位置移动 常用
absolute 绝对定位 是（不占有位置） 带有定位的父级 常用
fixed 固定定位 是 浏览器可视区 常用
sticky 粘性定位 否 浏览器可视区 当前阶段少

13.2.2 边偏移

  • 定位的盒子移动到最终位置，有 top、bottom、left 和 right 4 个属性
边偏移属性 示例 描述
top top: 80px; 顶端偏移量，定义元素相对于其父元素上边线的距离
bottom bottom: 80px; 底部偏移量，定义元素相对于其父元素下边线的距离
left left: 80px; 左侧偏移量，定义元素相对于其父元素左边线的距离
right right: 80px; 右侧偏移量，定义元素相对于其父元素右边线的距离

13.3 相对定位 relative

  • 特点：

    • 元素在移动位置时，是相对于它原来的位置

    • 不脱标，继续保留原来位置（下面的盒子不会浮动上来）

选择器 {
	position: relative;
}

13.4 绝对定位 absolute

  • 元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）
选择器 {
	position: absolute;
}

  • 特点：

    • 如果没有祖先元素 / 祖先元素没有定位（标准流 / 浮动的盒子），则以浏览器为准定位（Document 文档）

    • 若祖先元素有定位，则以最近一级的有定位祖先元素为参考点移动位置

    • 绝对定位不再占有原先的位置（脱标）

  • 子绝父相

  • 因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

  • 子绝父相不是永远不变的，若父元素不需要占有位置，子绝父绝也会遇到

13.5 固定定位 fixed

  • 元素固定于浏览器可视区的位置

  • 主要使用场景：可以在浏览器页面滚动时元素的位置不会改变

选择器 {
	position: fixed;
}

  • 特点：

    • 以浏览器的可视窗口为参照点移动元素

      • 跟父元素没有任何关系

      • 不随滚动条滚动

    • 固定定位不再占有原先的位置（脱标，可将其看作一种特殊的绝对定位）

  • 小算法：

    • 让固定定位的盒子 left: 50% 走到浏览器可视区（也可以看做版心）的一半位置

    • 让固定定位的盒子 margin-left：版心宽度的一半距离

    • 这样就可以让固定定位的盒子贴着版心右侧对齐了

13.6 粘性定位 sticky

选择器 {
	position: sticky;
	top: 10px;
}

  • 特点：

    • 以浏览器的可视窗口为参照点移动元素（固定定位特点）

    • 粘性定位占有原先的位置（相对定位特点）

    • 必须添加 top、left、right、bottom 其中一个才有效

【跟页面滚动搭配使用，兼容性较差，IE 不支持】

13.7 定位叠放次序 z-index

  • 在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用 z-index 来控制盒子的前后次序（z 轴）
选择器 {
	z-index: -1;
}

  • 数值为任意整数，默认是 auto，数值越大，盒子越靠上

  • 如果属性值相同，则按照书写顺序，后来者居上

  • 数字后面不能加单位

  • 只有定位的盒子才有 z-index 属性

13.8 定位的拓展

  • 绝对定位的盒子居中

    • 加了绝对定位的盒子不能通过margin: 0 auto;水平居中，但是可以通过以下计算方法实现水平和垂直居中

    • left: 50%;：让盒子的左侧移动到父级元素的水平中心位置

    • margin-left: -100px;：让盒子向左移动自身宽度的一半

  • 定位特殊特性

    • 行内元素添加绝对或者固定定位，可以直接设置高度和宽度

    • 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

  • 脱标的盒子不会触发外边距塌陷

    • 浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题

  • 绝对定位（固定定位）会完全压住盒子

    • 浮动元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片），但是绝对定位（固定定位）会压住下面标准流所有的内容

    • 浮动之所以不会压住文字，因为浮动最初是为了做文字环绕效果的，文字会围绕浮动元素

14. 一些建议

14.1 CSS 属性书写顺序

  • 建议遵循以下顺序：

    • 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写）

    • 自身属性：width / height / margin / padding / border / background

    • 文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word

    • 其他属性（css3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient...

.jdp {
	display: block;
	position: relative;
	float: left;

	width: 100px;
	height: 100px;
	margin: 0 10px;
	padding: 20px 0;

	font-family: Arial;
	color: #333;

	background: rgba(0, 0, 0, 0.5);
	border-radius: 10px;
}

14.2 页面布局整体思路

  • 必须确定页面的版心，测量可得知

  • 分析页面中的行模块，以及每个行模块中的列模块，页面布局第一准则

  • 一行中的列模块经常浮动布局，先确定每个列的大小之后确定列的位置，页面布局第二准则

  • 现有结构，后有样式，结构永远最重要

  • 先理清楚布局结构，再写代码

14.3 导航栏注意

  • 实际开发中，不会直接用链接 a，而是用 li 包含链接 (li+a) 的做法

    • li + a 语义更清晰，一看就是有条理的列表型内容

    • 若直接用 a，搜素引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名

14.4 网页布局总结

  • 一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法

  • 标准流

    • 可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局

  • 浮动

    • 可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局

  • 定位

    • 定位最大的特点是有层叠的概念，即可以让多个盒子前后叠压来显示，若元素自由在某个盒子内移动就用定位布局

15. 元素的显示与隐藏

方式 说明
display: none; 隐藏对象，不再占有原来的位置
display: block; 转换为块级元素，也表示显示元素
visibility: visible; 元素可视
visibility: hidden; 元素隐藏，继续占有原来的位置

15.1 overflow 溢出

  • 指定了如果内容溢出一个元素的框时，会发生什么
属性值 描述
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll 不管是否超出内容，总是显示滚动条
auto 超出自动显示滚动条，不超出不显示
  • 一般情况下，不会想让溢出的内容显示，因为溢出的部分会影响布局，但如果有定位的盒子，请慎用overflow: hidden因为他会隐藏多余的部分

15.2 溢出的文字省略号显示

  • 单行文本溢出显示省略号 -- 必须满足三个条件
/* 先强制一行内显示文本 */
white-space: nowrap;    （默认 normal 自动换行）
/* 超出部分隐藏*/
overflow: hidden;
/* 文字用省略号替代超出的部分 */
text-overflow: ellipsis;

  • 多行文本溢出显示省略号

    • 有较大兼容性问题，适合于 webkit 浏览器 / 移动端（移动端大部分是 webkit 内核）0
overflow: hidden;
text-overflow: ellipsis;
// 弹性伸缩盒子模型显示
display: -webkit-box;
// 限制在一个块元素显示的文本的行数
-webkit-line-clamp: 2;
// 设置 / 检索伸缩对象的子元素的排列方式
-webkit-box-orient: vertical;
  • 更推荐让后台人员来做这个效果，因为后台人员可以设置显示多个字，操作更简单

16. 精灵图

精灵技术目的：有效减少服务器接收和发送请求的次数，提高页面的加载速度

  • 使用

    • 主要针对背景图片使用，即把多个小背景图整合到一张大图片中

    • 移动背景图片位置，用background-position

    • 移动的距离是这个目标图片的 x 和 y 坐标，注意网页中的坐标有所不同

    • 因为一般情况下都是往上往左移动，故数值是负值

    • 使用精灵图的时候需要精确测量每个小背景图的大小和位置

17. 字体图标 iconfont

17.1 简介

  • 精灵图的缺点：

    • 图片文件较大

    • 图片本身放大和缩小会失真

    • 一旦图片制作完毕，想要更换非常复杂

  • 字体图标的优点

    • 字体图标展示的是图标，本质上字体

    • 轻量级：一旦字体加载了，图标会马上渲染出来，减少了服务器请求

    • 灵活性：可以随意改变颜色、产生阴影、透明效果、旋转等

    • 兼容性：几乎支持所有的浏览器

  • 注：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化

  • 总结：

    • 结构和样式比较简单 -- 字体图标

    • 结构和样式比较复杂 -- 精灵图

17.2 扩展

  • 不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，是因为包含了主流浏览器支持的字体文件

    • TureType(.ttf) 格式：window 和 Mac 的常见的字体

    • Web Open Font Format(.woff)格式

    • Embedded Open Type(.eot)格式：IE 专用字体

    • SVG(.svg)格式：基于 svg 字体渲染

  • 字体追加

    • 把压缩包里面的 selection.json 重新上传，然后选中自己想要的新的图标，重新下载压缩包，并替代原来的文件即可

18. 更改用户鼠标样式

li {
	cursor: pointer;
}
  • 设置鼠标指针形式
属性值 描述
default 小白 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止

19. vertical-align 属性应用

  • 常用于设置图片或表单和文字垂直对齐（仅针对行内元素 / 行内块元素）
vertical-align: baseline | top | middle | bottom;
值 描述
baseline 默认。元素放在父元素的基线上
top 把元素的顶端与行中最高元素的顶端对齐
middle 把此元素放置在父元素的中部
bottom 把元素的顶端与行中最低的元素的顶端对齐

  • 解决空白图片底部默认空白缝隙问题

    • 原因：行内块元素会和文字的基线对齐

    • 解决方法

      • 给图片添加 vertical-align: middle | top | bottom 等 【推荐】

      • 把图片转换为块级元素 display: block;

20. CSS 初始化

  • 清除内外边距

  • em 和 i 斜体的文字不倾斜

em,
i {
	font-style: normal;
}
  • 去掉 li 的小圆点
list-style: none;
  • 图片
img {
	// 照顾低版本浏览器，如果图片外面包含了链接会有边框的问题
	border: 0;
	// 取消图片底侧有空白缝隙的问题
	vertical-align: middle;
}
  • 鼠标经过
button {
	cursor: pointer;
}

  • 清除浮动

  • 抗锯齿形

// css3 抗锯齿形，让文字显示的更清晰
-webkit-font-smoothing: antialiased;

  • tips：Unicode 编码字体

    • 把中文字体的名称用相应的 Unicode 编码代替，可以有效避免浏览器解释 css 代码时出现乱码问题，如：

      • 黑体 \9ED1\4F53

      • 宋体 \5B8B\4F53

      • 微软雅黑 \5FAE\8F6F\96C5\9ED1

21. 浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加

21.1 私有前缀

  • -moz-：代表 firefox 浏览器私有属性

  • -ms-：代表 ie 浏览器私有属性

  • -webkit-：代表 safari、chrome 私有属性

  • -o-：代表 Opera 私有属性

21.2 提倡写法

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
posted @ 2024-12-10 17:24  iRuriCatt  阅读(29)  评论(0)    收藏  举报