CSS-常用属性【看这一篇就够了】

前言文章

一些作者之前的文章，建议串读：

CSS-display属性【看这一篇就够了！！】_css display-CSDN博客

CSS-background属性【看这一篇就够了！！！】-CSDN博客

CSS-径向渐变【看这一篇就够了！！！】-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>

效果：