一、定位
1. 定位组成
定位：将盒子定在某一个位置，所以定位也是摆放盒子，按照定位的方式移动盒子
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了 该元素的最终位置
1.1 定位模式
通过position属性来设置
| 值 | 语义 |
|---|---|
| staitic | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
1.2 边偏移
| 属性 | 描述 |
|---|---|
| top | 顶端偏移量 |
| bottom | 底部偏移量 |
| left | 左侧偏移量 |
| right | 右侧偏移量 |
2. 定位方式
1.3 静态定位static
选择器{position:static}
- 静态定位按照标准流特性摆放位置，没有边偏移
- 静态定位在布局中很少用到
1.4 相对定位 relative
- 它是相对于自己的位置来移动的
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它(不脱标，继续保留原来位置)
1.5 绝对定位 absolute
- 如果没有父元素或父元素没有定位，则以浏览器为准
- 如果父元素有定位，则以最近一级的有定位父元素为参考点
- 绝对定位不占有位置
1.6 固定定位 fixed
在浏览器页面滚动时元素的位置不会改变
- 以浏览器的可视窗口为参照点移动元素
- 跟父元素没有关系
- 不随滚动条滚动
- 固定定位不在占有原先位置
- 固定定位也是脱标的，其实固定定位也可以看做时一种特殊的绝对定位
特殊固定定位：固定在版心右侧位置
小算法：
- 让固定定位的盒子left:50%,走到浏览器可视区的一半位置
- 让固定定位盒子margin-left版心宽度的一半距离
1.7 粘性定位 stickly
- 以浏览器的可视窗口为参照点移动元素
- 占有原来位置
- 必须添加top等才有效
3. 子绝父相
子级使用绝对定位，父级则需要相对定位
- 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
- 父盒子需要加定位限制子盒子在父盒子内显示
相对定位经常用来作为绝对定位的父级
因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位
4. 定位的叠放顺序z-index
选择器{z-index:1}
- 数值可以是正整数，负数或0，数值越大盒子越靠上
- 如果属性值相同，则按照书写顺序，后来居上
- 数字不能加单位
- 只有有定位的盒子才有z-index属性
5. 定位的拓展
5.1 绝对定位的盒子居中
加了绝对定位的盒子不能通过marigin:0 auto水平居中，但是可以通过一下计算方法实现水平和垂直居中
- left:50%：让盒子的左侧移动到父级元素的水平中心位置
- margin-left:-100px，让盒子向左移动自身宽度的一半
5.2 定位的特殊特性
绝对定位和固定定位也和浮动相似
- 行内元素添加绝对定位或者固定定位，可以直接设置宽度和高度
- 块级元素添加绝对或者固定，如果不给宽度和高度，默认大小是内容的大小
5.3 绝对定位会完全压住盒子
- 浮动元素不同，只会压住下面标准流的盒子，但是不会压住下面标准流盒子里面的文字 但是绝对定位会压住下面标准流所有的内容
浮动的产生目的是做文字环绕效果
二、元素的显示和隐藏
本质：让一个元素在页面中隐藏或者显示出来
1. display属性
- none：隐藏对象
- block：转换为块级元素and 显示元素
隐藏后不占有位置
2. visibility可见性
- visible：元素可视
- hidden：元素隐藏
隐藏后保留位置
3.overflow溢出
对溢出的元素进行显示或隐藏
- visible：不剪切内容也不添加滚动条
- hidden：不显示超过对象尺寸的内容，超过部分隐藏
- scoll:显示元素并总是显示滚动条
- auto：显示元素但仅在需要的时候显示滚动条
三、精灵图
为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度
核心原理：将网页中的一些小背景图整合到一张大图中，这样服务器就需要一次请求
- 主要针对于背景图的使用
- 大图片也称为sprites精灵图或者雪碧图
- 移动背景图片位置，可以使用background-position
- 移动距离是目标图片的xy坐标
- 一般情况都是往上往左移动，所以数值是负值
缺点：
- 图片文件较大
- 本身放大和缩小会失真
- 更换图片复杂
四、 字体图标
展示的是图标，本质属于字体
- 轻量级：一个图标字体比一系列图小，一旦字体加载，图标马上渲染出来，减少了服务器的请求
- 灵活性：本质是文字，可以任意更改颜色，透明旋转等
- 兼容性：几乎支持所有的浏览器
不能完全替代精灵图，仅用于一些简单的小图标
小图标下载网址：
icomoon字库：http://icomoon.io
阿里iconfont字库：http://www.iconfont.cn/
五、CSS制作三角
原理：在不设置高度宽度仅设置边框情况如下
将其他三个角设置为透明即可
<style>
.box {
height: 0px;
width: 0px;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
border-right: 100px solid transparent;
border-left: 100px solid rgb(255, 252, 159);
margin: 100px auto;
}
</style>
六、用户界面样式
- 更改用户的鼠标样式
- 表单轮廓
- 防止表单域拖拽
1. 鼠标样式
li{cursor:pointer}
| 属性值 | 描述 |
|---|---|
| default | 小白 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
2.轮廓线 outline
给表单添加outline 0或者outline:none样式之后，就可以去掉默认的蓝色边框
3. 防止拖拽文本域 resize
textarea{resize:none；}
七、行内块和文字垂直居中对齐
vertical-align
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| middle | 把此元素防止在父元素的中部 |
| bottom | 把元素的顶端与汉中最低的元素的顶端对齐 |
解决图片默认空白缝隙问题
- 给图片添加vertical-align:middle等
- 把图片转换为块级元素
八、溢出文字省略号显示
1.单行文本溢出显示省略号
<!-- 1.先强制一行内显示文本 -->
white-space:nowrap;
<!-- 超出部分隐藏 -->
overflow:hidden;
<!-- 文字省略号替代超出部分 -->
text-overflow:ellipsis;
2.多行文本溢出显示省略号
overflow:hidden;
text-overflow:ellipsis;
<!-- 弹性伸缩盒子模型显示 -->
display:-wedkit-box;
<!-- 限制在一个块元素显示的文本的行数 -->
-wedkit-line-clamp:2;
<!-- 设置或检索伸缩盒对象的子元素的排列方式 -->
-wedkit-box-orient:vertical;
九、常见布局技巧
- margin负值的运用
- 文字围绕浮动元素
- 行内块的巧妙运用
- css三角强化
案例
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>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.promo {
position: relative;
width: 846px;
height: 472px;
background-color: palegoldenrod;
margin: 100px auto;
}
.promo img {
width: 846px;
height: 472px;
}
.prev,
.next {
position: absolute;
top: 50%;
margin-top: -15px;
width: 40px;
height: 50px;
background: rgba(0, 0, 0, 0.3);
text-align: center;
line-height: 50px;
color: aliceblue;
text-decoration: none;
}
.prev {
left: 0;
border-radius: 0 25px 25px 0;
}
.next {
right: 0;
border-radius: 25px 0 0 25px;
}
.promo-nav {
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -70px;
width: 140px;
height: 26px;
background-color: rgba(255, 255, 255, .3);
border-radius: 13px;
}
.promo-nav li {
float: left;
width: 16px;
height: 16px;
background-color: aliceblue;
border-radius: 50%;
margin: 6px 6px;
}
.promo-nav .selected {
background-color: #ff5000;
}
</style>
</head>
<body>
<div class="promo">
<div class="pic">
<img src="promo.png" alt="">
<a href="#" class="prev"><</a>
<a href="#" class="next">></a>
<div class="promo-nav">
<ul>
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</body>
</html>
效果如下：
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>
.tudou {
position: relative;
width: 183px;
height: 257px;
background-color: blue;
margin: 100px auto;
}
.tudou img {
width: 100%;
height: 100%;
}
.mask {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(背景.png) no-repeat center;
}
.tudou:hover .mask {
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<div class="mask">
</div>
<img src="tudou.jpg" alt="">
</div>
</body>
</html>
鼠标经过后：
