一幅长文细学HTML5和CSS3（三）——CSS（中）
【摘要】 CSS3的基本入门
3.11 浮动
3.11.1 浮动概述
传统网页布局的三种方式
- 普通流
- 浮动
- 定位
标准流（普通流/文档流）
- 标准流就是标签按照规定好默认方式排列
- 块级元素独占一行，从上向下顺序排列
- 行内元素按照排序从左到右排列，碰到父元素边缘则自动换行
- 标准流是最基本的布局方式
为什么需要浮动
- 浮动可以改变元素标签默认的排列方式
- 最典型的就是让多个块级元素一行内排列显示
- 网页布局第一准则：==多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动==
浮动
原理：float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法：选择器{float:属性值};
属性选值：
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
示意图：
程序清单3_11_1
<!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>
div{
background-color: pink;
width: 100px;
height: 100px;
}
#Test1{
float:left;
}
#Test2{
float:right;
}
</style>
</head>
<body>
<div id = "Test1">左边</div>
<div id = "Test2">右边</div>
</body>
</html>
3.11.2 浮动脱标
浮动特性
- 浮动元素会脱离标准流（脱标）
- 浮动元素会一行内显示并且元素顶部对齐
- 浮动元素会具有行内块元素的特性
脱标
- 是设置浮动元素最重要的特性
- 脱离标准普通流的控制移动到指定位置
- 浮动的盒子不再保留原先的位置
说明：试想我们有两个盒子，如果没有做任何布局，则其呈现的应该是标准流效果。假设此时盒子A肯定在盒子B的下方。当我们对盒子A施加浮标效果，则A脱离原来位置，而B会填补上原来的位置。如果还是不能理解，可以试着敲下面的代码。
程序清单3_11_2
<!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>
.box1{
/* 注释下面一行即可取消浮动，仔细对比取消后的效果 */
float: left;
width:200px;
height:100px;
background: pink;
}
.box2{
width:400px;
height:200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class = "box1"></div>
<div class = "box2"></div>
</body>
</html>
3.11.3 行显示
行显示的示意图
若第一个盒子加了左浮动，则其会浮动到左上角，此时如果对第二个盒子加了浮动，它会贴着第一个盒子的边缘与它的左上角行对齐。
程序清单3_11_3
<!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>
.box1{
float: left;
width:200px;
height:100px;
background: pink;
}
.box2{
float: left;
width:400px;
height:200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class = "box1"></div>
<div class = "box2"></div>
</body>
</html>
3.11.4 浮动元素具有行内块特性
行内块特性
一个元素前面不管是块元素还是行内元素，当使用了浮动后，它可以转换为行内块元素。
程序清单3_11_4
<!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>
.box1{
float: left;
width:200px;
height:100px;
background: pink;
}
.box2{
float: left;
width:400px;
height:200px;
background-color: skyblue;
}
</style>
</head>
<body>
<span class = "box1"></span>
<span class = "box2"></span>
</body>
</html>
3.11.5 常见网页布局
浮动元素经常搭配标准流的父元素
为了约束浮动元素的位置，我们网页布局的一般策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。如小米官网，它们的页面是以大盒子为父标签先置中，子标签再去里面做布局：
一个元素浮动了，理论上其余的兄弟元素也要浮动
一个盒子里面有多个盒子，如果其中一个盒子动了，那么其他兄弟也应该浮动，以防止引起问题。浮动的盒子只会影响浮动盒子后面的标准流，而不会影响前面的标准流。
3.11.6 令人深思的问题
如果我们提前设置父盒子的宽高，则父盒子被确定，子盒子若超出父盒子的宽高，则会离开父盒子。我们的理想目标是：不设置父盒子的宽高，子盒子能够撑开父盒子。但是这样的想法是会出现问题的，当我们子盒子全部设置浮动，则父盒子会因为孩子的浮动导致高度为0，此时如果有一个标准流元素跟在父盒子之后，则会被压在父盒子的子盒子之下。为此，我们需要去除浮动。
3.11.7 清除浮动
清除浮动的原因
由于父级盒子的很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子，为此我们需要清除浮动。
由于浮动元素不占有原文档流的位置，所以它会对后面的元素排版产生影响。
清除浮动的本质
清除浮动的本质就是清除浮动元素造成的影响。
如果父盒子本身有高度，则不需要清除浮动。
清除浮动之后，父级会根据子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。
清除浮动及其语法
格式：选择器{clear:属性值}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素 |
| right | 不允许右侧有浮动元素 |
| both | 同时清除左右两侧浮动的影响 |
清除浮动的方法
- 额外标签法（隔墙法），是W3C推荐的做法
- 父级添加overflow属性
- 父级添加alter伪元素
- 父级添加双伪元素
额外标签法
如果想要使得往后的标签不再浮动，则可以使用隔墙法。使用的方法就是在浮动的标签后加一个块级标签，并且为这个标签添加clear样式，使得往后的标签都会清除浮动。
<!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>
.box{
background-color:skyblue;
width:60%;
height: 300px;
}
.box .innerbox{
background-color:pink;
width:20%;
height: 50px;
margin: 1px;
float:left;
}
.box .clear{
clear:both;
}
.box .footer{
background-color:pink;
width:20%;
height: 50px;
}
</style>
</head>
<body>
<div class = "box">
<div class = "innerbox"></div>
<div class = "innerbox"></div>
<div class = "innerbox"></div>
<div class = "clear"></div>
<div class = "footer"></div>
</div>
</body>
</html>
父级添加overflow
清除浮动的第二个方法是在需要清除浮动的父标签中添加overflow属性，并将其属性值设置为hidden、auto或scroll。虽然方法简便，但是无法显示溢出部分的盒子。且overflow不止有清除浮动这一用途，我们后面再做讲解。
<!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>
.clearfix{
overflow:hidden;
}
.box{
overflow: auto;
background-color:skyblue;
width:60%;
height: 300px;
}
.innerbox{
background-color:pink;
width:20%;
height: 50px;
margin: 1px;
float:left;
}
.footer{
background-color:pink;
width:20%;
height: 50px;
}
</style>
</head>
<body>
<div class = "box">
<div class = "clearfix">
<div class = "innerbox"></div>
<div class = "innerbox"></div>
</div>
<div class = "footer"></div>
</div>
</body>
</html>
父级元素添加:after伪元素
:after方式是额外标签法的升级版，也是给父元素添加。虽然没有增加标签，但是需要照顾低版本浏览器。
<!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>
/*======= after伪元素必须添加的东西 =======*/
.clearfix:after{
content:"";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
/*兼容IE6、7*/
*zoom: 1;
}
/* ========================================= */
.box{
overflow: auto;
background-color:skyblue;
width:60%;
height: 300px;
}
.innerbox{
background-color:pink;
width:20%;
height: 50px;
margin: 1px;
float:left;
}
.footer{
background-color:pink;
width:20%;
height: 50px;
}
</style>
</head>
<body>
<div class = "box">
<div class = "clearfix">
<div class = "innerbox"></div>
<div class = "innerbox"></div>
</div>
<div class = "footer"></div>
</div>
</body>
</html>
双伪元素清除浮动
和after同理，不过是前后都堵了个盒子。
<!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>
/*======= after伪元素必须添加的东西 =======*/
.clearfix::before,
.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
/*兼容IE6、7*/
*zoom: 1;
}
/* ========================================= */
.box{
overflow: auto;
background-color:skyblue;
width:60%;
height: 300px;
}
.innerbox{
background-color:pink;
width:20%;
height: 50px;
margin: 1px;
float:left;
}
.footer{
background-color:pink;
width:20%;
height: 50px;
}
</style>
</head>
<body>
<div class = "box">
<div class = "clearfix">
<div class = "innerbox"></div>
<div class = "innerbox"></div>
</div>
<div class = "footer"></div>
</div>
</body>
</html>
3.12 常见的图片格式
| 图片格式 | 说明 |
|---|---|
| jpg | jpeg(jpg)对色彩的信息保留较好，高清，颜色较多，我们产品类的图片继承用jpg格式 |
| gif | gif最多只能存储256色，通常用于显示简单图像及字体，但是可以保存透明背景和动画效果 |
| png | 结合了GIF和JPG的优点，具有存储形式丰富的特点，能够保持透明背景 |
| PSD | ps的专用格式，可以存放图层、通道、遮罩等多种设计稿 |
3.13 一些注意的问题
3.13.1 CSS属性书写顺序问题
CSS书写建议遵循以下顺序：
- 布局定位顺序：display/position/float/clear/visiblity/overflow
- 自身属性：width/height/margin/padding/border/backgroud
- 文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
- 其他属性：content/cursor/border-radius/box-shadow/text-shadow/background…
3.13.2 页面布局整体思路
为了提高网页制作的效率，布局时通常有以下的整体思路：
- 必须确定页面的版心，我们测量可以得知。
- 分析页面中的行模块，以及每个行模块中的列模块。
- 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置。
- 制作HTML结构，我们还是遵循先有结构后有样式的原则。
3.14 定位
3.13.1 定位概述
为什么需要定位
- 有些效果无法通过标准流和浮动实现。
- 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
- 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。
定位组成
- 定位：将盒子定在某一个位置
- 定位 = 定位模式+边偏移
- 定位模式：用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置
定位模式
定位模式决定了元素的定位方式，它通过CSS的position属性来设置，其值可以分为五个：
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
| sticky | 粘性定位 |
边偏移
边偏移是定位盒子移动的最终位置。
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top:80px | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| buttom | buttom:80px | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | left:80px | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | right:80px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
3.13.2 五种定位模式
静态定位
- 静态定位是元素的默认定位方式，即无定位。
- 静态定位按照标准流特性摆放位置，它没有边偏移
- 静态定位在布局时很少使用
相对定位
- 相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。如原来标准流中盒子的左上角顶点坐标为(110px,220px)，则施加绝对定位后再加top:80px的边偏移，盒子会移动到(110px,300px)上。
- 当盒子使用相对定位移动后，原先标准流的位置会被保留，如果还有一个盒子紧随其后，那么它自己施加完相对定位后，后面的盒子时不会像浮动那样顶替它的位置的。
绝对定位
- 绝对定位的元素在移动位置的时候，是相对于它的祖先元素来说的。
- 在没有祖先盒子的情况下，施加绝对定位的盒子以浏览器为基准。
- 如果有祖先盒子，但是祖先盒子没有施加定位，则施加绝对定位的盒子仍然以浏览器为基准。
- 如果祖先盒子有定位，则以最近一级有定位的祖先元素为基准。
- 绝对定位会导致脱标。
固定定位
- 固定定位是元素固定于浏览器可视区的位置，主要使用场景就是可以在浏览器滚动时元素的位置不会改变。
- 固定定位和父元素没有关系。
- 固定定位会导致脱标。
- 你最讨厌的浏览器广告就是定位做的。
粘性定位
- 粘性定位可以认为是相对定位和固定定位的混合。
- 粘性定位以浏览器的可视窗口为参照点移动元素。
- 粘性定位占有原先的位置。
- 必须添加top、left、right、bottom其中一个才会生效。
- 可以跟页面滚动搭配使用，兼容性差，IE不支持。
3.13.3 子绝父相
子绝父相：子级若是绝对定位，则父级要用相对定位。
目的：
- 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
- 父盒子需要加定位限制子盒子在父盒子之内显示。
- 父盒子布局时，需要占有位置，因此父亲只能是相对定位。
3.13.4 定位算法
固定定位于版心右侧位
- 让固定定位的盒子left:50%，走到浏览器可视区的一半位置。
- 让固定定位的盒子margin-left:版心宽度的一半距离，多走版心宽度一半的位置。
<!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>
.w{
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
.fixed{
position: fixed;
left: 50%;
margin-left: 400px;
width: 50px;
height: 150px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class = "fixed"></div>
<div class = "w"></div>
</body>
</html>
绝对定位盒子居中
绝对定位无法使用margin:0 auto来实现水平居中，故我们采取以下策略：
<!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>
.w{
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
.fixed{
position: absolute;
left:50%;
margin-left:-25px;
width: 50px;
height: 150px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class = "fixed"></div>
<div class = "w"></div>
</body>
</html>
3.13.5 定位拓展
叠放的问题
在使用绝对定位布局时，可能会出现盒子重叠的情况。此时我们可以使用z-index来控制盒子的最后次序，z-index的值可以是整数、负整数或0，默认是auto，数值越大，盒子越靠上。如果使用auto，则按照CSS的层叠性来叠放。
定位的特殊性质
- 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
- 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
- 脱标的元素不会触发外边距塌陷。
- 绝对定位会压住下面标准流的所有内容。
- 浮动的元素会压住下面标准流的盒子，但是不会压住标准流盒子中的文字。这是因为浮动产生的最初目的是为了做文字环绕效果。
3.15 阶段性总结
标准流：可以让盒子上下排列或者左右排列，==垂直的块级盒子显示就用标准流布局==。
浮动：可以让多个块级元素一行显示或者左右对齐盒子，==多个块级盒子水平显示就用浮动布局==。
定位：定位最大的特点就是含有重叠的概念，就是可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内移动就用定位布局。
3.16 元素的显示和隐藏
3.16.1 display
display属性用于设置一个元素应该如何显示。这在我们的3.7元素显示方式已经提到过。display搭配JS能做出许多网页特效。
| 属性值 | 说明 |
|---|---|
| none | ==隐藏==对象 |
| block | 除了转为块级元素外，还能显示元素 |
注：display隐藏元素后，原来位置会被抛弃。
3.16.2 visibility
visibility字如其名，即可见性。
| 属性值 | 说明 |
|---|---|
| inherit | 继承上一个父对象的可见性 |
| visible | 对象可视 |
| hidden | 对象隐藏 |
| collapse | 用于隐藏表格的行或列 |
注：visbility隐藏元素后，继续占有原来的位置。
3.16.3 overflow
如果一些内容溢出了盒子，那么overflow可以将内容进行控制。
| 属性值 | 说明 |
|---|---|
| visible | 默认值，不剪切内容也不添加滚动条，随它溢出。 |
| auto | body和textarea的默认值。在需要时剪切内容并添加滚动条 |
| hidden | 不显示超过对象尺寸的内容 |
| scroll | 总是显示滚动条 |
3.17 精灵图
3.17.1 精灵图概述
精灵图的需要
一个网页中往往会应用很多小的背景图来作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。
因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。其核心原理是将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求即可。
3.17.2 精灵图的使用
- 精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图中
- 移动背景图片位置，可以依靠background-position
- 移动的距离就是这个目标图片所在的精灵图的区域x和y，但这个坐标不同于传统的笛卡尔坐标系，而是一种倒立的笛卡尔坐标系，即二维坐标，y越往下越大，x越往右越大。如果给的值为正数，则按坐标轴方向找，如果给的是负数，则按反坐标方向找。
- 精灵图的使用需要精确测量每个小背景图片的大小和位置。
程序清单3_17_2
<!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>
.box1{
width: 195px;
height: 30px;
margin: 100px auto;
background:url(./3_17_2.png);
background-position: -211px -2px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
3.18 字体图标
字体图标的产生
字体图标的产生：主要常用于显示网页中通用、常用的一些小图标。
精灵图虽然有诸多优点，但是缺点也很明显：
- 图片文件较大
- 图片缩放会失真
- 图片制作完成更换复杂
为此，字体图标iconfont的出现解决了这一问题。字体图标展示的虽然是图标，但本质上属于字体。文字相关的属性都可以应用在其之上。
字体图标的优点
轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标马上就能渲染出来，减少了服务器的请求。
灵活性：本质其实是文字，可以随意改变颜色，产生阴影、透明效果、旋转。
兼容性：几乎支持所有浏览器，可以放心使用。
注：字体图标不能替代精灵技术，仅仅是对工作中图标部分技术的提升和优化罢了。
字体图标的下载
Icon Font & SVG Icon Sets ❍ IcoMoon
字体图标的使用
这里仅介绍阿里巴巴矢量图标库的图标使用，进入阿里巴巴矢量图标库-》帮助-》代码应用查看应用方法即可。
程序清单3_18
<!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>
/*引入项目文件*/
@font-face {font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
/*自定义字体样式*/
.iconfont{
font-family: 'iconfont'!important;
font-size:16px;
}
</style>
</head>
<body>
<!-- 复制svg代码后导入即可 -->
<div class="iconfont"><svg t="1658651375520" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1329" width="64" height="64"><path d="M460.8 947.2a473.6 473.6 0 1 1 486.912-460.8 25.6 25.6 0 1 1-51.2 0 422.4 422.4 0 1 0-435.712 409.6 25.6 25.6 0 0 1 0 51.2z" fill="#333333" p-id="1330"></path><path d="M742.4 522.752l164.864 132.608V972.8h-329.728v-317.44l164.864-132.608m0-61.952a12.8 12.8 0 0 0-8.192 2.56l-269.312 216.576a11.264 11.264 0 0 0 8.192 19.968h51.2V1024h432.128v-324.096h51.2a11.264 11.264 0 0 0 8.192-19.968l-265.216-216.576A12.8 12.8 0 0 0 742.4 460.8z" fill="#333333" p-id="1331"></path><path d="M780.8 844.8V972.8h-76.8v-128h76.8m51.2-51.2h-179.2V1024h179.2v-230.4zM500.224 401.92l-177.152 144.896 32.256 39.424 177.152-144.896-32.256-39.424z" fill="#333333" p-id="1332"></path><path d="M532.48 236.544h-51.2v204.8h51.2v-204.8z" fill="#333333" p-id="1333"></path></svg></div>
</body>
</html>
3.19 CSS三角
三角的本质
当你的盒子不指定宽高，四周又施加边框，则边框实际上是一个三角形。
程序清单3_19
<!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>
/*三角本质*/
.test1{
height:0;
width: 0;
border-top: 50px solid pink;
border-bottom: 50px solid red;
border-left: 50px solid blue;
border-right: 50px solid gold;
}
/*单三角效果*/
.test2{
height:0;
width: 0;
border: 50px solid transparent;
border-top: 50px solid pink;
}
</style>
</head>
<body>
<div class = "test1"></div>
<div class = "test2"></div>
</body>
</html>
3.20 CSS用于界面样式
3.20.1 鼠标样式
通过指定cursor值可以改变鼠标样式
| 属性值 | 描述 |
|---|---|
| default | 默认、白箭头样式 |
| pointer | 小手 |
| move | 移动十字架 |
| text | 文本 |
| not-allowed | 禁止 |
3.20.2 表单样式
| 样式 | 说明 |
|---|---|
| outline:none或outline:0 | 表单轮廓 |
| resize:none | 文本域禁止拖动大小 |
3.20.3 行内(块)元素的对齐
CSS的vertical-align可以用于设置图片或者表单等行内元素或行内块元素和文字垂直对齐。
| 属性值 | 说明 |
|---|---|
| baseline | 默认，元素放置在父元素的基线上 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| middle | 把此元素放置在父元素的中部 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐 |
注：图片放入div盒子中时对齐默认是baseline，这时会出现一条缝隙，如果不想出现缝隙，可以使用bottom。
3.20.4 溢出文字省略号显示
单行文本溢出文字
如果想要单行文本溢出显示省略号，可以采取以下策略：
- 先使用white-space:nowrap来强制文字全部在一行内显示，其默认值为normal可以自动换行。
- 其次使用overflow:hidden超出盒子的文字隐藏。
- 最后使用text-overflow:ellipsis来用省略号代替文字超出的部分。
多行文本溢出文字
多行文本溢出显示省略号，有较大的兼容性问题，其适用于webKit浏览器或移动端，想要使用可以采取以下策略：
- 先使用overflow:hidden，并且text-overflow:ellipsis。
- 其次使用display:-webkit-box，让盒子变成弹性伸缩盒子，然后使用-webkit-line-clamp:2来限制一个块元素显示文本的行数，这里写的是两行，最后使用-webkit-box-orient:vertical来设置或检索伸缩盒对象的子元素的排列方式。
注：推荐让后端人员来做这个效果。
3.21 常用布局技巧
3.22 CSS初始化
不同浏览器对有些标签的默认值是不同的，故我们需要对所有样式进行初始化操作。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）