目录
前言文章
一些作者之前的文章，建议串读：
CSS-display属性【看这一篇就够了！！】_css display-CSDN博客
CSS-background属性【看这一篇就够了！！！】-CSDN博客
常用属性
鼠标样式，外轮廓，超出部分隐藏，vertical-align属性
cursor鼠标样式
- 设置光标的类型，在鼠标指针悬停在元素上时显示相应样式
| 值 | 描述 |
|---|---|
| url | 需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 |
| default | 默认光标（通常是一个箭头） |
| auto | 默认。浏览器设置的光标。 |
| crosshair | 光标呈现为十字线。 |
| pointer | 光标呈现为指示链接的指针（一只手） |
| move | 此光标指示某对象可被移动。 |
| e-resize | 此光标指示矩形框的边缘可被向右（东）移动。 |
| ne-resize | 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 |
| nw-resize | 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 |
| n-resize | 此光标指示矩形框的边缘可被向上（北）移动。 |
| se-resize | 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 |
| sw-resize | 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 |
| s-resize | 此光标指示矩形框的边缘可被向下移动（南）。 |
| w-resize | 此光标指示矩形框的边缘可被向左移动（西）。 |
| text | 此光标指示文本。 |
| wait | 此光标指示程序正忙（通常是一只表或沙漏）。 |
| help | 此光标指示可用的帮助（通常是一个问号或一个气球）。 |
outline外轮廓
这个属性用于设置元素周围的轮廓，其用法和border属性一样
/* 边框宽 边框风格 边框颜色 */
outline: 10px solid red;
- outline-width 边框宽
- outline-style 边框风格
- outline-color 边框颜色
border与outline的区别
- outline：不占据空间，绘制于元素内容周围的轮廓，不参与盒子模型的占位计算，不会因为添加这个属性，而造成盒子占位空间变化。
- outline没有办法单独控制某一边效果，也就是没有outline-left、outline-top、outline-right、outline-bottom属性
- border：参与盒子模型计算，会因为边框值的变化，早成盒子占位空间变化
<style>
.box {
width: 100px;
height: 100px;
/* 上 右 下 左 */
margin: 50px 0px 0px 30px;
background-color: tomato;
/* 外轮廓 */
outline: 30px dotted skyblue;
/* border: 30px dotted skyblue; */
}
</style>
<body>
<div class="box"></div>
我是页面中的其它元素喽
</body>| 添加outlin效果 | 添加border效果 |
|---|---|
 |  |
去掉表单元素默认的outline属性
- outline的值设置为“0”或“none”会移除元素的默认轮廓
- 表单元素为了提高可访问性(聚焦提示)，都有默认的outline值
input { outline: none; }
我们可使用outline属性给表单元素添加“点击时(聚焦时)”的边框效果：
<style>
input:focus {
outline: 1px blue solid;
}
</style>
<body>
<form>
<input type="text">
</form>
</body>效果：
| 点击前 | 点击后 |
|---|---|
 |  |
overflow超出部分隐藏
overflow属性规定当内容移除元素框时该做什么
overflow属性值
| 值 | 描述 |
|---|---|
| visible | 默认值。内容溢出，会呈现在元素框之外。 |
| hidden | 内容溢出，则溢出内容是不可见的。 |
| scroll | 不管内容是否溢出，都会显示滚动条。 |
| auto | 内容溢出，则显示滚动条以便查看其余的内容。如果不溢出，则不显示滚动条 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
<style>
.box {
width: 100px;
height: 100px;
background-color: skyblue;
line-height: 35px;
/* 左浮动 */
float: left;
margin-left: 20px;
}
.box1 {
overflow: hidden;
}
.box2 {
overflow: scroll;
}
.box3 {
overflow: auto;
}
</style>
<body>
<div class="box">啥处理都不做我是文本内容2，我是文本内容3</div>
<div class="box box1">hidden 我是文本内容1，我是文本内容2，我是文本内容3</div>
<div class="box box2">scroll 我是文本内容1，我是文本内容2，我是文本内容3</div>
<div class="box box3">auto 我是文本内容1，我是文本内容2，我是文本内容3</div>
</body>效果：
overflow-x和overflow-y
- overflow-x 水平方向溢出设置
- overflow-y 垂直方向溢出设置
overflow-x: hidden;
vertical-align属性
- 指定“行内元素”、“行内块元素”、“表格单元格元素”的垂直对齐方式
- 对“块级元素”是无效的
vertical:middle;和line-height:div高度;设置元素垂直居中的区别
- vertical-align:middle：适用于内联元素(<span>、<img>、<td>等)，对于多行文本可以很灵活的控制
- line-height:div高度：适用于块级元素(<div>、<p>)只适用于一行文本
| 属性值 | 描述 |
|---|---|
| baseline | 使元素的基线与父元素的 基线对齐 |
| sub | 使元素的基线与父元素的 下标基线对齐 |
| super | 使元素的基线与父元素的 上标基线对齐 |
| text-top | 使元素的顶部与父元素的字体顶部对齐。 |
| text-bottom | 使元素的底部与父元素的字体底部对齐。 |
| middle | 使元素的中部与父元素的基线加上父元素 x-height(x 高度) 的一半对齐。 |
| 数值(10px) | 使元素的基线对齐到父元素的基线 之上的给定长度 可以是负数 |
| 百分比 % | 使元素的基线对齐到父元素的基线之上的给定百分比，该百分比是line-height (opens new window)属性的百分比 可以是负数 |
| top | 使元素及其后代元素的顶部与整行的顶部对齐 |
| bottom | 使元素及其后代元素的底部与整行的底部对齐 |
小写字母x的下边缘就是我们的基线
<style>
.box {
height: 50px;
float: left;
margin: 10px 10px 10px 0px;
background-color: skyblue;
/* 行高 50px */
line-height: 50px;
}
.box span {
/* 行内块 */
display: inline-block;
line-height: 1;
background-color: yellow;
}
.baseline {
vertical-align: baseline;
}
.sub {
vertical-align: sub;
}
.super {
vertical-align: super;
}
.text-top {
vertical-align: text-top;
}
.text-bottom {
vertical-align: text-bottom;
}
.middle {
vertical-align: middle;
}
.top10px {
vertical-align: 10px;
}
.top10 {
vertical-align: 10%;
}
.top {
vertical-align: top;
}
.bottom {
vertical-align: bottom;
}
</style>
<body>
<div class="box">文字Xx<span class="baseline">x-baseline</span>文字</div>
<div class="box">文字Xx<sub>2</sub><span class="sub">x-sub</span>文字</div>
<div class="box">
文字Xx<sup>2</sup><span class="super">x-super</span>文字
</div>
<div class="box">文字Xx<span class="text-top">x-text-top</span>文字</div>
<div class="box">
文字Xx<span class="text-bottom">x-text-bottom</span>文字
</div>
<div class="box">文字Xx<span class="middle">x-middle</span>文字</div>
<div class="box">文字Xx<span class="top10px">x-10px</span>文字</div>
<div class="box">文字Xx<span class="top10">x-10%</span>文字</div>
<div class="box">文字Xx<span class="top">x-top</span>文字</div>
<div class="box">文字Xx<span class="bottom">x-bottom</span>文字</div>
</body>效果：
应用案例
常用的a标签布局按钮
<style>
.button {
/* 将标签变为块级元素,用来使高度和宽度生效 */
display: block;
width: 200px;
height: 50px;
/* 去掉下划线 */
text-decoration: none;
color: #fff;
background-color: tomato;
/* 水平居中 */
text-align: center;
/* 垂直居中 */
line-height: 50px;
margin: 50px auto;
}
</style>
<body>
<a href="#" class="button">点击获取100W</a>
</body>效果：
水平居中的轮播图按钮
<style>
.button {
width: 100%;
height: 100px;
background-color: dodgerblue;
text-align: center;
/* 去掉span标签默认间距 */
font-size: 0px;
/* 元素垂直居中 */
line-height: 100px;
}
.button > span {
/* 行内块元素 */
display: inline-block;
width: 10px;
height: 10px;
background-color: #fff;
margin: 0px 2px;
/* 垂直居中 */
vertical-align: middle;
/* 圆角 */
border-radius: 50%;
}
.button > .current {
background-color: black;
}
</style>
<body>
<div class="button">
<span></span>
<span></span>
<span></span>
<span></span>
<span class="current"></span>
</div>
</body>效果：
产品展示效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 200px;
margin: 50px auto;
border: 2px solid #e4e4e4;
border-radius: 5px;
/* 图片超出部分隐藏 */
overflow: hidden;
background-color: #fff;
/* 文字水平 */
text-align: center;
}
.container-bottom {
background-color: #f8f8f8;
/* 去除inline-block默认间隙 */
font-size: 0px;
text-align: center;
}
.container > img {
display: block;
width: 200px;
height: 100x;
}
.container span {
display: inline-block;
}
.describe {
color:#b9ad9e;
margin-bottom: 20px;
}
.container-bottom > span {
border: 1px solid;
border-radius: 2px;
font-size: 12px;
text-align: center;
padding: 2px;
margin: 10px 2px;
}
.type-1{
background-image: linear-gradient(to right,#ff2187 0%,#a921e8 100%);
color: #fff;
}
.type-2{
background-color: #fff6f4;
color: #f57263;
}
.type-3{
border-color: #cdd4de;
color: #6998d7;
}
.container-bottom > h3 {
font-size: 20px;
margin: 0px auto 5px;
}
.container-bottom > .price {
border: none;
font-size:18px;
margin: 0px 0px 10px 0px;
color: #8b2225;
}
</style>
</head>
<body>
<div class="container">
<img src="/static/cup.png">
<span class="describe">快速煮水，安心饮用</span>
<div class="container-bottom">
<span class="type-1">直播中</span>
<span class="type-2">特惠</span>
<span class="type-3">30天报价</span>
<span class="type-3">售后免邮</span>
<h3>云米水电壶</h3>
<span class="price">￥59</span>
</div>
</div>
</body>
</html>效果：
小米商城菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-image: linear-gradient(to right,#e8e5a4 0%,#daf1bb 100%);
}
.container{
width: 300px;
margin: 100px auto;
background-color: #f3f6e1;
border: 1px solid #fff;
border-radius: 1px;
}
ul {
list-style: none;
padding: 20px;
margin: 0px;
}
li {
padding: 5px;
/* 文字居中 */
vertical-align: center;
line-height: 30px;
}
ul > li > a {
display: block;
text-decoration: none;
color: black;
}
a > span {
float: right;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="">手机<span>></span></a></li>
<li><a href="">电视<span>></span></a></li>
<li><a href="">笔记本 平板<span>></span></a></li>
<li><a href="">家电<span>></span></a></li>
<li><a href="">出行 穿戴<span>></span></a></li>
<li><a href="">智能 路由器<span>></span></a></li>
<li><a href="">电源 配件<span>></span></a></li>
<li><a href="">健康 儿童<span>></span></a></li>
<li><a href="">耳机 音响<span>></span></a></li>
<li><a href="">生活 箱包<span>></span></a></li>
</ul>
</div>
</body>
</html>效果：
9860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
