CSS基础详解与实用技巧
目录
一、CSS 的三大特性
CSS 有三个非常重要的三个特性：层叠性、继承性、优先级。
1.1 层叠型
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题
层叠性原则：
-
样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
-
样式不冲突，不会层叠
1.2 继承性
现实中的继承: 我们继承了父亲的姓
CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。
- 恰当地使用继承可以简化代码，降低CSS样式的复杂性
- 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
行高的继承：
body {font:12px/1.5 Microsoft YaHei；}
- 行高可以跟单位也可以不跟单位
- 如果子元素没有设置行高，则会继承父元素的行高为 1.5
- 此时子元素的行高是：当前子元素的文字大小 * 1.5
- body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
1.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组数字组成,但是不会有进位。
- 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推..
- 等级判断从左向右，如果某一位数值相同，则判断下一位数值。
- 可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为10, id选择器100, 行内样式表1000, !important 无穷大.
- 继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。
- div ul li ------> 0,0,0,3
- .nav ul li ------> 0,0,1,2
- a:hover -----—> 0,0,1,1
- .nav a ------> 0,0,1,1
二、CSS 用户界面样式
所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。
2.1 鼠标样式 cursor
li {cursor: pointer; }
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
| 属性值 | 描述 |
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
2.2 轮廓线 outline
给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。
input {outline: none; }
2.3 防止拖拽文本域 resize
实际开发中，我们文本域右下角是不可以拖拽的。
textarea{ resize: none;}
三、 vertical-align 属性
3.1 vertical-align 属性应用
CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。
官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
语法：
vertical-align : baseline | top | middle | bottom
| 值 | 描述 |
| baseline | 默认。元素放置在父元素的基线上 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。
此时可以给图片、表单这些行内块元素的vertical-align 属性设置为middle就可以让文字和图片垂直
居中对齐了
3.2 解决图片底部默认空白缝隙问题
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。如下所示：
主要解决方法有两种：
1. 给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）
2. 把图片转换为块级元素 display: block;
四、溢出的文字省略号显示
4.1 单行文本溢出显示省略号
/*1. 先强制一行内显示文本*/
white-space: nowrap; （ 默认 normal 自动换行）
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
4.2 多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端（移动端大部分是webkit内核）
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。
五、常见布局技巧
5.1 margin负值的运用
我们在浮动盒子的时候，如果两个盒子都有边框，那么两个盒子的公共的那条线就会更粗一些，如下所示：
我们明显的可以看见盒子公共的那一条线会更粗，这是因为第一个盒子的右边框1px，第二个盒子左边框1px，两个盒子合起来就是2px。
我们就可以使用margin负值（margin-left:-1px;）来消除这个情况。如下所示
现在我们想要鼠标在一个盒子上方时，改变盒子边框的颜色。如下所示
但是我们鼠标在第四个盒子上面时候，会出现以下情况：
这是因为左边的盒子移动了-1px，就把第四个盒子的右边框给盖住了。
5.2 CSS三角强化
如果我们想要构建这种盒子，那该怎么构建呢？
我们可以使用两个两个盒子，和一个三角，那这个三角怎么构建呢？
首先将border-bottom的边框去掉，然后将border-top的边框像素值改的更高一点，之后将左边框的边框去掉，然后将上边框的颜色改为透明色。就完成了
border-top: 100px solid transparent;
border-right: 50px solid red;
border-bottom: 0px solid red;
border-left: 0px solid red;
也可以把他们合起来
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0px 0;
<!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>
.price{
width: 160px ;
height: 24px;
border:1px solid red;
line-height: 24px;
}
.miaosha{
position: relative;
float: left;
width: 90px;
height: 100%;
background-color: red;
text-align: center;
color: #fff;
}
.miaosha i{
position: absolute;
width: 0;
height: 0;
top: 0;
right: 0px;
border-color: transparent white transparent transparent;
border-style: solid;
border-width: 24px 10px 0px 0;
}
.d{
font-size: 12px;
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="price">
<span class="miaosha">
$1650
<i></i>
</span>
<span class="d">$6650</span>
</div>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
