壹、CSS
- css个属性书写顺序：
一、CSS三大特性
1.1 继承性
- 子级继承父级
- 所有关于文字控制属性都可以继承(color, line-height, font- ,text-)
1.2 层叠性
- 后面的覆盖前面的
1.3 优先级
- 条件：不同的选择器，相同的属性。
- 不同的选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器的样式
-
!important(∞) > 行内样式(1000) > id选择器(100) > 类选择器(10) > 标签选择器(1) > 通配符选择器(0) > 继承(0) 选择范围越广优先级越低 !important写在属性的后面，分号的前面 !important不能提升继承的优先级，只要是继承 优先级最低 实际开发过程中不建议使用!important 通配符选择器 > 继承
二、SEO三大标签（搜索引擎优化）
- title：网页标题
- descripition：网页描述标签
- keywords：网页关键词标签
三、基础选择器
3.1 通配符选择器
- 给所有的标签设置样式
* {
css属性名: 属性值;
}
3.2 标签选择器
- 选中所有的这个标签都生效
- 标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定 统一的 CSS 样式。
标签名称 {
css属性名: 属性值;
}
3.3 类选择器
- 一个标签可以有多个类名，用 空格 隔开
.类名 {
css属性名: 属性值;
}
3.4 id选择器
- id属性值 具有 唯一性，不能重复
- 一个标签 只能 有一个 id属性值
#id名称 {
css属性名: 属性值;
}
四、字体和文本样式
4.1 浏览器字号
- 浏览器默认文字大小 --- 16px
- 谷歌浏览器最小字号 --- 12px
4.2 字号
font-size: 像素值;
4.3 字体加粗
font-weight: ;
关键字：normal（正常） / bold（加粗）
数字：400(正常) / 700(加粗) （100-900的整百数）
<b></b>
<strong></strong>
4.4 字体样式（倾斜）
font-style: ;
normal(正常（默认值）)
italic(倾斜)
<i></i>
<em></em>
4.5 字体系列
- 使用字体名称中存在多个单词时，推荐使用引号包裹
- 最后一项 字体系列不需要引号包裹
font-family: '宋体';
4.6 ❌字体复合属性（简写方式 -- 空格隔开 不常用）
简写： font: style weight size/line-height '字体';
4.7 文本缩进
text-indent: ;
取值：
数字 + px （浏览器默认字体大小 --- 16px）
数字 + em （推荐 1em = 当前标签的 font-size 的大小）
如果当前元素设置了字体大小，就是用当前元素
如果当前元素没有设置字体大小，就去找它父级的font-size，如果父级也没有，就依次向上找
4.8 文本水平对齐方式
text-align: left（默认值） / center / right;
- 拓展： 文本两端对齐
text-align: justify; // 文本两端对齐 text-align-last: justify; // 文本最后一句两端对齐
4.9 特别标签的内容水平居中方法
- span标签 、 a标签、input标签 、 img标签
- 如果需要以上元素水平居中，需要给 父级元素 设置 text-align: center;
4.10 标签水平居中
margin: 0 auto;
4.11 文本修饰
text-decoration: ;
取值：
下划线 ： underline （常用）
删除线 ： line-through
上划线 ： overline
无装饰线 ： none （常用与 清除超链接 下划线）
4.12 行高
line-height: ;
取值：
倍数 （当前标签 font-size 的倍数） (常用)
数字 + px
4.13 文本阴影
text-shadow: h-shadow(水平阴影) v-shadow(垂直阴影) blur(模糊的距离) color(阴影的颜色);
4.14 文本换行
/* 强制文本一行显示，直到遇到 <br> 为止*/
white-space: nowrap;
4.15 禁止文本选中
.no-select {
/*系统默认菜单被禁用 iOS Safari*/
-webkit-touch-callout: none;
/*webkit浏览器Chrome/Safari/Opera*/
-webkit-user-select: none;
/*早期浏览器 Konqueror*/
-khtml-user-select: none;
/*火狐 Firefox*/
-moz-user-select: none;
/*IE10 Internet Explorer/Edge*/
-ms-user-select: none;
/* Non-prefixed version, currently not supported by any browser */
user-select: none;
}
IE < 10 和Opera < 15中我们需要在需要禁止选中的元素上面添加一个属性
unselectable=“on”，否则可能不会生效
4.16 文本溢出
text-overflow: ellipsis; // 文本溢出显示省略号
| 值 | 描述 |
|---|---|
| ellipsis | 显示省略号来代替被修建的文本 |
| clip | 修建文本 |
| string | 使用给定的字符来代替被修建的文本 |
五、复合选择器
5.1 后代选择器
- 元素1 和 元素2 中间用 空格 隔开
- 元素1是父级，元素2是子级，最终选择的是 元素2
- 元素2可以是儿子，也可以是孙子，只要是元素1的后代即可
- 元素1和元素2可以是任意基础选择器
元素1 元素2 {}
5.2 子代选择器
- 元素1 和 元素2 中间用 大于号 隔开
- 元素1是父级，元素2是子级，最终选择的是 元素2
- 元素2必须是元素1的亲儿子
元素1 > 元素2 {}
5.3 并集选择器
- 元素1 和 元素2 中间用 逗号 隔开
元素1,
元素2 {}
5.4 交集选择器
- 交集选择器中的选择器之间是紧挨着的，没有东西分隔
- 交集选择器中如果有标签选择器，标签选择器 必须写在 最前面
<head>
<style>
/* 交集选择器的权重 = p标签选择器的权重 + .box的权重 */
p.box {
color: red;
}
</style>
</head>
<body>
<p class="box">111</p>
<p>222</p>
<div class="box">333</div>
</body>
5.5 链接伪类选择器
- : --- 单冒号 --- 伪类
- :: --- 双冒号 --- 伪元素
5.5.1 :hover(鼠标悬停)
选择器:hover {}
- ⭐面试：
-
- :link --- 用于选取未被访问的链接
-
- :visited --- 对指向已访问过的链接设置样式
-
- :hover --- 用于设置鼠标指针浮动到链接上时的样式
-
- :active --- 用于设置点击链接时的样式
-
5.5.2 :focus 用于获取焦点的表单元素
focus 伪类选择器用于选取获得焦点的 表单元素。
焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
input:focus {
background-color:yellow;
}
六、元素显示模式
6.1 块级元素
- 独占一行（一行只能显示一个）
- 宽度 默认是 父级宽度的100%，高度默认 由 内容撑开
- 可以设置宽高
div , p , h1-h6 , ul , ol , li , dl , dt , dd , form , header , nav , footer ...
6.2 行内元素
- 不换行，一行显示多个
- 设置宽度 不生效
- 尺寸和内容的大小一样
span , a , b , u , i , s , strong , ins , em , del ...
6.3 行内块元素
- 一行可以显示 多个
- 可以 设置宽高
- img 标签有 行内块元素 的特点，但是谷歌浏览器中显示的结果是 line-block
input , textarea , select , button , td ...
6.4 元素显示模式切换
转换为块级元素 --- display: block;
转换为行内块元素 --- display: inline-block;
转换为行内元素 --- display: inline;
6.5 HTML嵌套规范注意点
- 块级元素一般作为大容器，可以嵌套 ： 文本、块级元素、行内元素、行内块元素等等...
- 但是 ：
- p标签内部不能嵌套div、p、h、等块级元素
- h标签也不能嵌套块级元素
- 语义化标签不能嵌套块级元素
- 但是 ：
- a标签内部可以嵌套任意元素
- 但是 ： a标签不能嵌套a标签
- 有语义的的标签不能嵌套无语义标签
七、背景
7.1 背景颜色
background-color: 颜色值;
十六进制、rgba、rgb
7.2 背景图片
background-image: url(图片路径);
7.3 背景图片大小
background-size: ;
数字 + px
百分比 --- 相对于当前盒子自身的宽高百分比
contain --- 包含，将背景图片等比例缩放，直到 不会超出盒子 的最大
cover --- 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白
- contain ： 图片 完整的显示 ，但是 不会填满盒子
- cover ： 图片 不完整显示 ，但是 会填满盒子
7.4 背景平铺
background-repeat: 取值;
repear --- 水平和垂直都平铺（默认值）
no-repeat --- 不平铺
repeat-x --- 沿着 水平方向（x轴） 平铺
repeat-y --- 沿着 垂直方向（y轴） 平铺
7.5 背景图片位置
background-position: x y;
/*水平垂直都居中
background-position: center;*/
-
- 参数是 方位名词
- 两个值 都是 方位名词，两个值 的 先后顺序无关
- 只指定了 一个方位名词，另 一个值省略，则 第二个值 默认 居中对齐
- left：图片的左边和盒子的左边是对齐的
- right：图片的右边和盒子的右边是对齐的
-
- 参数是 精确单位
- 参数 都是 精确坐标，第一个肯定是 x坐标 ，第二个一定是 y坐标
- 只指定 一个数值，该数值一定是 x坐标 ， 第二个值 默认居中
-
- 参数是混合单位
- 指定的 两个值 是 精确单位 和 方位名词 混合使用，则 第一个值 是 x坐标 ，第二个值 是 y坐标
7.6 背景图片固定
background-attachment: scroll（随页面滚动） | fixed（固定）;
-
代码展示：
body { height: 2020px; background-image: url(./1.jpg); background-repeat: no-repeat; background-attachment: fixed; }
7.7 背景复合写法（常用，没有顺序）
background: 背景颜色 背景图片地址 背景平铺 背景图片滚动（固定） 背景图片位置;
7.8 背景颜色渐变
7.8.1 线性渐变
background-image: linear-gradient(往那个方向渐变(to right), 颜色1, 颜色2, …);
默认是从上到下渐变
除了使用方位名词之外，还可以使用角度
重复的线性渐变：
repeating-linear-gradient() 函数用于重复线性渐变：
eg:
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
7.8.2 径向渐变
-
background-image: radial-gradient(shape size at position, start-color, …, last-color); 默认地，shape 为椭圆形，size 为最远角，position 为中心。 shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。 size 参数定义渐变的大小。它可接受四个值： closest-side --- 最近侧 farthest-side --- 最远侧 closest-corner --- 最近的角落 farthest-corner --- 最远角 重复径向渐变 repeating-radial-gradient() 函数用于重复径向渐变： eg: background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
八、盒子模型
8.1 盒子模型
css中规定每个盒子分别由 ： 内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成
边框、内边距、内容的改变 会改变 盒子整体的大小
8.2 内容（content）
盒子的宽高范围
8.3 外边距、内边距
margin: 像素值;
padding: 像素值;
8.4 边框（border）
border: 边框像素(width) 边框线样式(style) 边框颜色(color); --- 不分先后顺序
solid --- 实线
dashed --- 虚线
dotted --- 点线
border-方向名词: ; (top / right / bottom / left)
8.5 合并单元格相邻边框
border-collapse: collapse;
8.6 解决表格左右边框粗细不均
table {
margin: 10px auto;
/* start */
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid #333;
border-left: 1px solid #333;
/* end */
width: 500px;
}
th,
td {
/* start */
border-right: 1px solid #333;
border-bottom: 1px solid #333;
/* end */
text-align: center;
}
8.7 圆角边框
border-radius: 数值（根据盒子的高度设定） / 百分比（是基于宽度的百分比）; （没有上限）
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
分开写: border-top-left-radius;
border-top-right-radius;
border-bottom-right-radius;
border-bottom-left-radius;
8.8 块级元素水平居中
margin: 0 auto;
8.9 行内元素 / 行内块元素水平居中（给父级加）
给父级加 text-align: center;
8.10 IE盒模型
CSS3 的盒子模型
box-sizing: border-box;
8.11 盒子阴影
box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影尺寸 阴影颜色;
h-shadow --- 必须写，水平阴影的位置量，允许负值
v-shadow --- 必须写，垂直阴影的位置，允许负值
blur --- 可选，模糊距离（模糊度）
spread --- 可选，阴影的尺寸
color --- 阴影颜色
inset --- 可选，将阴影改为内部阴影
注意： h-shadow 和 v-shadow 为 0 的时候，盒子四周都有阴影
8.12 外边距合并问题
使用 margin 定义块元素的垂直外边距时，可能出现外边距的合并。
8.12.1 相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。而是 取'两个值中的较大者'这种现象被称为相邻块元素垂直外边距的合并。
解决方案：尽量只给一个盒子添加 margin 值
8.12.2 嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：
1. 可以为 父元素 '定义上边框'；
2. 可以为 父元素 '定义上内边距'；
3. 可以为 父元素 '添加 overflow: hidden'; (比上两个好用)
还有其他方法，比如浮动(float)、固定(fixed)、绝对定位(absolute)的盒子不会有塌陷问题。
九、伪元素
一般页面中的非主体内容可以使用伪元素
- : 单冒号 --- 伪类
- :: 双冒号 --- 伪元素
- 伪元素默认是 '行内元素' ，宽高不生效，需要转换成块级元素才能生效
::before 在父元素内容的最前添加一个伪元素
::after 在父元素内容的最后添加一个伪元素
必须设置 content 属性才能生效 --- content: '';
9.1 格式
元素::before {
content: '内容';
display: block / inline-block;
}
元素::after {
content: '内容';
display: block / inline-block;
}
9.2 标准流
标签的默认排版格式
浏览器解析行内块或者行内元素的时候，如果标签换行书写会产生一个空格的距离
十、❗❗ 浮动
本质：实现文字环绕效果（文字会围绕浮动元素）
10.1 三种布局：
- 标准流（最基本的布局方式）
- 标签按照规定号默认方式排列
- 浮动
- 定位
10.2 浮动
- 语法：
float: left/right ;
- 浮动特点：
-
- 浮动元素会脱离标准流，在标准流中不占位置
-
- ⚠ 浮动元素 比 标准流 高 半个 级别，可以覆盖标准流中的元素
-
- 具有行内块元素特点，一行可以显示多个，能设置宽高
-
- 一行显示不下可以折行显示
-
- 顶部对齐
- 浮动不会压住标准流的文字内容
-
- ⚠ 注意：
- 浮动的元素不能通过 text-align：center；或者 margin: 0 auto; 来水平居中
- ⭐为什么需要浮动
- 实现在一个大盒子里面，两个小盒子一左一右的布局方式；
- 一行显示多个块级元素
- 和元素转换模式（display）相比，浮动之后盒子之间没有间距（元素转换之后，盒子之间有间距，这个间距是浏览器加的，前端人员没有任何办法改变这个间距）
10.3 清除浮动
浮动的盒子只会影响浮动盒子后面的标准流，不会影前面的标准流。
10.3.1 ⭐为什么清除浮动
- 浮动的元素会脱离标准流的位置，导致他的父级高度就会变成0，影响后面元素的布局。
- 目前都是静态网页，数据都是死的；动态网页的数据都是从服务器获取，是随时变化的，
10.3.2 方法：
1.额外标签法
- 在父元素内容的最后添加一个 块级元素 （类名一般都是 --- clearfix）
- 给添加的块级元素添加样式属性 clear:both;
- 会在页面中添加额外的标签，会让页面的HTML结构变复杂
2.给父元素设置 overflow: hidden;
-
直接给 父 元素设置 overflow: hidden;
3.单伪元素清除法
- 推荐使用，项目中使用，直接给标签加类即可清除浮动
- 用伪元素代替额外标签
- 在父元素内容的最后一个添加一个 块级元素
- 基本写法：
-
.clearfix::after { content: ''; display: block; /* 用伪元素创建的标签是行内标签，设置宽高不起作用 */ clear: both; /* 清除左右两侧浮动的影响 */ } - 补充写法：
-
.clearfix::after { content: ''; display: block; clear: both; /* 补充代码： 在网页中看不到伪元素 */ /* 处理浏览器兼容性 */ height: 0; visibility: hidden;/* 隐藏 */ } .clearfix { *zoom: 1; }
4.双伪元素清除法
- 项目中使用，直接给标签加类即可清除浮动
- 将 .clearfix 设置给父级
-
/* before 低版本浏览器单伪元素清除不了浮动 */ .clearfix::before, .clearfix::after { content: ''; display: table; } /* 真正清除浮动的标签 */ .clearfix::after { clear: both; } /* IE7 */ .clearfix { *zoom: 1; }
十一、❗❗ 定位
- **注意：**后来者居上（后面的定位的元素都会盖住前面定位的元素）
- 绝对定位会压住下面标准流的所有内容
- 定位的组成 ： 定位模式 + 边偏移
position: ;
absolute 绝对定位 不占有原来的位置，相对于广义上的父级的位置移动,具备了行内块元素的特点
relative 相对定位 占有原来的位置，相对与自己原来的位置移动
static 静态定位 无定位（按照标准流特性摆放位置）
fixed 固定定位 相对与浏览器可视区域定位移动，不占有原来的位置，具备了行内块元素的特点
sticky 粘性定位 相对于浏览器可视区域定位移动，占有原来的位置，必须添加top、right、bottom、left其中一个才能生效
11.1 相对定位 --- relative
- 相对于自己原来的位置移动
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标）
- 可以压住其他标准流的盒子或者浮动的盒子
11.2 绝对定位 --- absolute
- 相对祖先元素的位置移动
- 具备了行内块元素的特点
- 不占有原来的位置（脱标）
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
11.3 固定定位 --- fixed
- 相对于浏览器可视窗口定位移动的（跟父元素没有任何关系）
- 不占有原来的位置（脱标）
- 具备了行内块元素的特点
11.4 粘性定位 --- sticky
- 以浏览器的可视窗口为参照点移动元素
- 占有原来的位置
- 必须添加 top、left、right、bottom其中一个才能生效
- 跟页面滚动搭配使用。兼容性较差，IE不支持
11.5 使用子绝父相，让子盒子在父盒子中水平垂直居中
- 代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box1 {
position: relative;
width: 600px;
height: 400px;
margin: 0 auto;
background-color: #6a006a;
}
.box2 {
position: absolute;
/*
left: 50%; 将box2的左边移动到父级的中心点
top: 50%; 将box2的上边移动到父级的中心点
margin-left: -150px; 将box2向左移动自身宽度的一半，box2的水平中心点和box1的中心点重合
margin-top: -100px; 将box2向上移动自身高度的一半，box2的垂直中心点和box1的中心点重合
*/
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
background-color: #ea0e5b;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>
11.6 元素层级问题
不同布局方式元素的层级关系：
- 标准流<浮动<定位
- 不同定位之间的层级关系
- 相对、绝对、固定定位默认层级是相同的
- 此时Html中，写在下面的元素层级更高，会覆盖上面的元素
- 注意：
- z-index 层级比较有顺序
- 先同级比较，同级没有z-index，再下层比较
11.7 定位叠放次序 --- z-index（只有定位有这个属性）
- 当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
- 在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。
- 比如： z-index: 2;
- 注意：
- z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
- 如果取值相同，则根据书写顺序，后来居上。
- 后面数字一定不能加单位。
- 只有 相对定位，绝对定位，固定定位 有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
- z-index不生效的情况：
在用z-index的时候，该元素没有定位（非static）. 在有定位的情况下，该元素的z-index没有生效，是因为该元素的子元素后来居上，盖住了该元素，解决方式：将盖住该元素的子元素的z-index设置为负数，而该元素不设z-index属性
11.8 定位拓展
- 行内元素 添加 绝对定位、固定定位，可以 直接 设置 高度 和 宽度；
- 块级元素 添加 绝对定位、固定定位，如果 不给设置宽度和高度，默认大小是内容的大小
- 脱标的盒子不会触发外边距塌陷
十二、元素的显示和隐藏
本质：让一个元素在页面中隐藏或者显示出来
12.1 display --- 显示隐藏
display: none; 隐藏对象
display: block; 除了转换为块级元素之外，同时还有显示元素的意思
display 隐藏元素之后，不再占有原来的位置
12.2 visibility --- 显示隐藏
visibility: visible; 显示元素
visibility: hidden; 隐藏元素
visibility 隐藏元素之后， 继续占有原来的位置 如果 隐藏元素 想要原来的位置，就用 visibility: hiddeh; 如果 隐藏元素 不想要原来的位置，就用 display: none;
12.3 overflow --- 溢出显示隐藏
指定了如果内容溢出一个元素的框（超过其指定的宽度和高度）时，会发生什么
overflow: visible; 不剪切内容也不添加滚动条（溢出内容显示）
overflow: hidden; 超出部分隐藏掉，不显示滚动条
overflow: scroll; 不论内容是否超出，总是显示滚动条
overflow: auto; 超出自动显示滚动条，不超出不显示滚动条
如果有定位的盒子，请慎用 overflow: hidden; 因为它会隐藏掉多余的部分
12.4 opacity --- 不透明度
-
opacity: 1; // 元素显示 opacity: 0; // 元素隐藏（该元素的所有子元素都会隐藏） - 隐藏之后，元素保留原来的位置
12.5 四者的区别
- display（block / none） ：显示隐藏元素，但是不保留位置
- visibility（visible / hidden） ： 显示隐藏元素，但是保留原来的位置
- overflow（visible / hidden）： 溢出部分显示隐藏，但是只是对于溢出的部分处理
- opacity（1 / 0）：显示隐藏元素
十三、精灵图
- 精灵图：将多张小图片，合并成一张大图片
- 优点：减少服务器发送次数，减轻服务器的压力，提高页面的加载速度
- 精灵技术目的：为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度
13.1 精灵图的使用步骤
- 创建一个盒子，设置盒子的尺寸和小图片的尺寸相同
- 将精灵图设置为盒子的背景图片
- 修改背景图片的位置
通过PxCook测量小图片左上角坐标，分别取负值设置给盒子background-position: x y;
- 一般精灵图的标签都用行内标签
- 盒子是固定的，把相应图片移动到盒子里
- background-position 一般都是负值 代码展示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> span { display: inline-block; width: 19px; height: 25px; background-image: url('taobao.png'); background-position: -3px 0; } </style> </head> <body> <span></span> </body> </html>
十四、装饰
14.1 图片、文字垂直居中对齐
浏览器解析 行内/行内块 元素，都当成文字去处理，和 文字 的 基线 对齐
解决 行内元素和 行内块元素 垂直对齐问题
基线：浏览器文字类型元素，排版中存在用于对齐的基线
vertical-align: ;
baseline --- 默认，基线对齐
top --- 顶部对齐
middle --- 中部对齐
bottom --- 底部对齐
14.2 图片底侧有空白间隙
img {
/* 三个任选一个 */
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
/* 不推荐 */
display: block;
}
14.3 文本溢出显示省略号
14.3.1 单行文本溢出显示省略号
/* 1.强制文本一行显示除非遇到 br */
white-space: nowrap;
/* 2.溢出的部分隐藏起来 */
overflow: hidden;
/* 3. 文字溢出的时候用省略号来显示 */
text-overflow: ellipsis;
14.3.2 多行文本显示省略号
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
14.4 光标类型
cursor: ;
default --- 默认样式
pointer --- 小手形状，表示可以点击
text --- 工字型，表示可以复制
move --- 十字型，表示可以移动
no-allowed --- 鼠标禁止样式
none --- 鼠标消失
14.5 表单轮廓和防止拖拽文本域
- 取消表单轮廓（表单边框）：
outline: none; /* 0 也可以 outline：大纲 */
- 防止文本拖拽(textarea)
resize: none; /* resize：调整 */
14.6 不透明属性
opacity: 0~1的数值;
- 会让 后代 继承 父级的opacity属性
- opacty 会让元素 整体透明 ，包括文字、图像等等
十五、网页布局总结
- 一个完整的网页，是标准流、浮动、定位一起完成布局的，每个布局方式都有自己专门的语法
- 标准流 可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局
- 浮动 可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局 浮动的元素 比 标准流 高 半个级别
- 定位 定位最大的特点是由层叠的概念，就是可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内移动就用定位布局 定位的元素比标准流高一个级别
贰、CSS3新增特性
- 类选择器、属性选择器、伪类选择器，权重 都是 10
2.1 属性选择器（不常用）
- 属性选择器可以根据元素特定属性的来选择元素
- 最终 选择的是 E 元素
E[att] 选择具有att属性的E元素
E[att="val"] 选择具有att属性且属性值等于val的E元素 （重点）
E[att^="val"] 选择具有att属性且值以val开头的E元素
E[att$="val"] 选择具有att属性且值以val结尾的E元素
E[att*="val"] 选择具有att属性且值中含有val的E元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*选择首先是input，然后具有value属性*/
/* input[value] {
color: purple;
font-size: 20px;
} */
/*选择首先是input，然后具有type属性，并且type属性值是text*/
/* input[type="text"] {
color: #098413;
font-size: 20px;
} */
/*选择首先是div，然后具有class属性，并且是icon开头的*/
div[class^="icon"] {
color: aqua;
font-size: 20px;
}
/*选择首先是section，然后具有class属性，并且是以data结尾的*/
section[class$="data"] {
color: aqua;
font-size: 20px;
}
/*选择首先是section，然后具有class属性，并且类中含有ico片段的*/
section[class*="ico"] {
color: #000000;
font-size: 20px;
}
</style>
</head>
<body>
<!-- <input type="text" name="" id="" value="one"> <br> -->
<!-- <input type="text" name="" id="" value="two"> <br> -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<section class="icon1-data">我是安琪拉</section>
<section class="icon2-data">我是哥斯拉</section>
<section class="icon3-ico">那我是什么拉</section>
</body>
</html>
2.2 结构伪类选择器
- 根据文档结构来选择元素
- 作用 ：根据元素在HTML中的结构关系查找元素
- 场景 ：常用于查找某父级选择器中的子元素
E:first-child {} --- 匹配父元素中的第一个子元素，并且是E元素
E:last-child {} --- 匹配父元素中的最后一个子元素，并且是E元素
E:nth-child(n) {} --- 匹配父元素中的第n个子元素，并且是E元素
E:nth-last-child(n) {} --- 匹配父元素中的倒数第n个子元素，并且是E元素
E:first-of-type {} --- 指定类型E的第一个
E:last-of-type {} --- 指定类型E的最后一个
E:nth-of-type(n) {} --- 指定类型E的第n个
- 两者区别：
nth-child 对于父元素里面 所有的子元素 进行排序选择（序号是固定的），先找到第n个孩子，然后看看冒号之前的元素是否和E匹配 （先看后面）
nth-of-type 对于父元素里面 指定的子元素 进行排序。先去匹配E，然后再根据E找到第n个孩子 （先看前面）
2.3 伪元素选择器
- before 和 after 创建的元素属于 行内元素
- 新创建的这个元素 在文档树中 是 找不到的，所以我们称为伪元素
- 伪元素选择器 和 标签选择器 一样，权重 为 1
::before 在元素内部的最前面插入内容
::after 在元素内部的最后面插入内容
语法：
element::before {}
before 和 after 必须有 content 属性
before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
2.4 ❗❗ 盒子模型
- CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
-
box-sizing: border-box; 盒子 width = border + padding + content box-sizing: content-box; 盒子 width = content （以前默认的） -
box-sizing: border-box 盒子最终大小为 width padding和border的改变，不会改变盒子大小（前提padding和border不会超过width宽度）
2.5 图片模糊处理（了解）
filter（ CSS属性将模糊或颜色偏移等图形效果应用于元素）
filter: 函数();
例如： filter: blur(5px); blur模糊处理 数值越大越模糊
2.6 ❗计算盒子宽度 cale 函数（移动端开发）
- 主要用于移动端开发（屏幕大小不一）
calc() 此CSS函数让你在声明CSS属性值时执行一些计算。
eg: width: calc(100% - 80px);
括号里面可以使用 + - * / 来进行计算。
2.7 过渡效果
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
1.属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all就可以。
2.花费时间： 单位是 秒（必须写单位） 比如 0.5s
3.运动曲线： 默认是 ease （可以省略）
4.何时开始 ：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
注意： 特例
- 宽高都可以变化，层叠性不生效
-
transition: width .5s ease; transition: height .5s ease;
2.8 ❗❗ 边框图片
- 切图原理：上右下左（顺序）
- 保留边框的完整性
-
用图片显示边框
叁、项目Bug及解决
一、li 嵌套 img
- 问题：li标签嵌套img的时候出现一些间隙
1.1 解决办法
- （1）、将图片转换为块级对象
即，设置img为“
display:block;”。在本例中添加一组CSS代码：“#sub img {display:block;}”。 - （2）、设置图片的垂直对齐方式
即设置图片的vertical-align属性为“
top，text-top，bottom，text-bottom”也可以解决。如本例中增加一组CSS代码：“#sub img {vertical-align:top;}”。） - （3）、设置父元素的文字大小为0px
即，在#sub中添加一行：“
font-size:0;”可以解决问题。但这也引发了新的问题，在父对象中的文字都无法显示。就算文字部分被子对象括起来，设置子对象文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。 - （4）、改变父元素的属性
如果父对象的宽、高固定，图片大小随父对象而定，那么可以设置“
overflow:hidden;”来解决。如本例中可以向#sub中添加以下代码：“width:88px;height:31px;overflow:hidden;”。 - （5）、设置图片的浮动属性
即在本例中增加一行CSS代码：“#
sub img {float:left;}”。如果要实现图文混排，这种方法是很好的选择。 - （6）、取消图片标签和其父对象的最后一个结束标签之间的空格。 这个方法要强调下，在实际开发中该方法可能会出乱子，因为在写代码的时候为了让代码更体现语义和层次清晰，难免要通过IDE提供代码缩进显示，这必然会让标签和其他标签换行显示，比如说DW的“套用源格式”命令。
1.2 原因分析
- 图片文字等
inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离（这个距离和font-size，font-family相关，不一定是 5px），所以设置 vertical-align:top/bottom/text-top/text-bottom都可以避免这种情况出现。而且不光li，其他的block元素中包含img也会有这个现象。 - 至于这里的HTML属性
align=”center”（对于图片浏览器会处理成align=”middle”），就相当于vertical-align:middle;所以道理也是一样的，只要vertical-align不取baseline，这个空隙就消失了。
二、表格边框
table {
border-collapse: separate; // 边框折叠属性 ---> 分离
border-spacing: 0; // 边框间距属性 ---> 0
border-top: 1px solid #333; // 设置整个table的上边框
border-left: 1px solid #333; // 设置整个table的左边框
}
th,
td {
border-right: 1px solid #333; // 设置单元格的右边框
border-bottom: 1px solid #333; // 设置单元格的下边框
}
三、li的粗细及层级
- 问题：li浮动之后边框粗细不均，鼠标hover右边框不显示
ul li {
position: relative;
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px; // 解决li浮动之后边框紧挨粗细显示不均
background-color: #fff;
}
/* 解决鼠标hover右边框不显示 */
/* 方案1.如果盒子没有定位，则鼠标经过添加相对定位即可 */
/*ul li:hover {
position: relative; // 相对定位会压住其他标准流和浮动的盒子
border: 1px solid blue;
}*/
/*方案2.如果li都有定位，则利用 z-index提高层级 */
ul li:hover {
z-index: 1;
border-color: blue;
}
四、数量测试
- 问题：电商首页购物车商品数量极限测试
.count {
max-width: 100px; // 给包裹文本的标签设置最大width
white-space: nowrap; // 强制文本一行显示
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 文本溢出显示省略号
}
五、数字字母换行
允许数字和单词换行显示
word-break: break-all;
六、body设置背景色
- 问题：移动适配给body设置渐变背景色
- 解析：
- body不设置高度的话，他是无法占整屏高度的
- 必须设置高度是100%，并且需要把html标签高度也设为100%
- 上面两步设置完成后，页面最小化，最下面还是有问题
- 需要添加 user-scalable = no
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> width=device-width --- 页面宽度等于设备宽度 initial-scale=1.0 --- 初始化页面宽度等于1倍设备宽度（不让缩放） minimum-scale=1.0 --- 最小缩放比例 maximum-scale=1.0 --- 最大缩放比例 user-scalab=no --- 禁止用户自由缩放
