1.定位
1.1 定位基础
需要定位的原因：
1.当需要某个元素自由的在盒子内移动位置，并且压住其他盒子时。
2.当滚动窗口时，需要固定在屏幕上的盒子。-
定位组成：
- 定位：将盒子定在某一个位置，所以定位也是在摆放盒子，只是在按照定位的方式来移动盒子。
- 定位=定位模式+边偏移
- 定位模式：用于指定一个元素在文档中的定位方式。
- 边偏移：决定了该元素的最终位置。
-
定位模式：
- 语法：通过CSS的
position属性来设置，有4个取值
值 语义 static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位 - 语法：通过CSS的
边偏移：
-
语法：有
top、bottom、left、right这4个属性边偏移属性 示例 描述 top top:80px 顶端偏移量，定义的元素相对于其父元素上边线的距离 bottom bottom:80px 底部偏移量，定义的元素相对于其父元素下边线的距离 left left:80px 左侧偏移量，定义的元素相对于其父元素左边线的距离 right right:80px 右侧偏移量，定义的元素相对于其父元素右边线的距离
1.2 定位模式
1.2.1 静态定位
- 作用：静态定位时元素的默认定位方式，未定位的意思
- 语法：
选择器{ position: static; }- 静态定位按照标准流特性摆放位置，它没有边偏移。
- 静态定位在布局时很少用到。
1.2.2 相对定位
- 作用：相对定位是在元素移动位置时，相对于它原来的位置来说的。
- 语法：
选择器 { position: relative; } -
特点：
- 是相对于自己原来的位置移动的，参考点是自己原来的位置。
- 原来的位置继续保留，不会被其他元素顶替。原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待（不脱标，继续保留原有位置）
相对定位最典型的应用是给绝对定位当爹的
1.2.3 绝对定位
- 作用：绝对定位是元素在移动时，是相对于它的祖先元素来说的。
- 语法：
选择器{position:absolute;} -
特点：
- 如果没有祖先元素或祖先元素没有定位，则以浏览器为准进行定位。
- 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点进行移动。
- 绝对定位不再占有原来的位置。（脱标）
1.2.4 子绝父相
- 含义：子级使用绝对定位，父级则需要使用相对定位
-
原因：
1.子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
2.父盒子需要加定位，限制子盒子在父盒子内显示。
3.父盒子布局时，需要占有位置，防止后面的盒子顶替原有的位置，因此父盒子只能是相对定位。
1.2.5 固定定位
- 作用：固定定位是元素固定于浏览器可视区的位置，主要使用于浏览器页面滚动时元素的位置不会改变。
- 语法：
选择器{ position:fixed; } - 场景：网页中固定在浏览器的广告
- 特点：
-
以浏览器的可视窗口为参考点进行移动。
- 跟父元素没有任何关系
- 不随滚动条滚动。
- 固定定位不占有原先的位置。 （脱标）
- 可以把固定定位看做特殊的绝对定位。
-
以浏览器的可视窗口为参考点进行移动。
1.2.6 固定在版心的右侧：
- 小算法：
- 让固定定位的盒子
left:50%，走到浏览器可视区的的一半位置（即版心的中间）。 - 让固定定位的盒子
margin-left:版心宽度的一半距离。即再多走版心宽度的一半，就可以让固定定位的盒子紧贴着版心右侧对齐了。
注意： 固定定位的盒子一定要写在版心盒子的前面，否则，固定定位的盒子会被版心盒子盖住。
1.2.7 粘性定位
- 作用：粘性定位可被看作 相对定位和固定定位的混合。
sticky：粘性的 - 语法：
选择器 {position: sticky; top:10px; } - 场景：
- 特点：
- 以浏览器可视窗口为参照点移动（固定定位的特点）
- 粘性定位占有原先的位置（相对定位的特点）
- 必须添加top、left、right、bottom 其中一个才有效
- 缺点：兼容性较差，IE不支持。
1.2.8 绝对定位盒子居中算法
- 原因：加了绝对定位的盒子不能通过
margin:0 auto;来水平居中。 - 算法：
1.left:50%;： 让盒子的左侧移动到父级元素的水平中心位置。
2.margin-left:-100px;： 让盒子向左移动自身宽度的一半。（注意是左移负值）
1.2.9 定位的特殊特性
-
绝对定位和固定定位也和 浮动类似。
- 行内元素添加 绝对或固定定位，可以直接设置宽度和高度。
- 块级元素添加 绝对或固定定位，如果不给宽高，默认大小是内容的大小。
- 浮动元素、绝对定位 和 固定定位的元素，都不会触发外边距合并问题
-
绝对定位和固定定位 会完全压制盒子
- 浮动元素不同，只会压住它下面标准流的盒子，但不会压住下面标准流盒子里的文字（图片）。因为浮动产生的目的，最初就是为了做文字环绕效果的。
- 但是绝对定位和固定定位会完全压住。
1.2.8 定位总结
| 定位模式 | 是否脱标 | 移动位置 | 是否常用 |
|---|---|---|---|
| static 静态定位 | 否 | 不能使用边偏移 | 很少 |
| relative 相对定位 | 否（占有位置） | 相对自身位置移动 | 常用 |
| absolute 绝对定位 | 是（不占位置） | 带有定位的父级 | 常用 |
| fixed 固定定位 | 是（不占位置） | 浏览器可视区 | 常用 |
| sticky 粘性定位 | 否（占有位置） | 浏览器可视区 | 当前阶段很少 |
- 注意：
1.三大定位的两个特点： 1.是否脱标 2.以谁为基准点移动位置。
2.重点是子绝父相。
1.3 定位叠放次序
- 作用：使用定位布局时，可能会出现盒子重叠的情况。因此，可以使用
z-index来控制盒子的前后次序（z轴） - 语法：
选择器{z-index:1;}- 数值可以是正整数、负数或0，默认是auto，数值越大，盒子越靠上。
- 只有定位的盒子才有
z-index属性 - 如果数值相同，则按照书写顺序，后来居上。
- 数字后面不能加单位。
2.网页布局总结
大部分的HTML标签是一个盒子
一个完整的网页，是由标准流、浮动、定位一起完成布局的，每个都有自己专门的用法
1.标准流
可以让盒子上下排列或左右排列，垂直的块级盒子显示就用标准流布局。2.浮动
可以让多个块级元素一行显示 或 左右对齐盒子，多个块级盒子水平显示就用浮动布局。3.定位
定位最大的特点是 有层叠的概念，就是可以让多个盒子前后层叠来显示，如果元素自由在某个盒子内移动就用定位布局。
3.元素显示和隐藏
- 作用：让一个元素在网页中隐藏或显示出来。
- 场景：类似一个网页广告，点击关闭就不见了，但是刷新网页会重新出现。
- 分类：
display显示隐藏，visibility显示隐藏，overflow溢出显示隐藏
3.1 display属性
- 作用：
display属性用于设置一个元素如何显示 - 语法：
-
display:none;隐藏对象 -
display:block;除了转化为块级元素之外，还有显示元素的意思
-
-
特点： display 隐藏元素后，不再占有原来的位置
后面的应用很广，搭配JS可以做很多网页特效。
3.2 visibility 可见性
- 作用：
visibility属性用于指定一个元素应该 可见还是隐藏。 - 语法：
-
visibility:visible;，元素可视 -
visibility:hidden;，元素隐藏
-
- 特点： visibility隐藏元素后，继续占有原来的位置
3.3 overflow 溢出
- 作用：
overflow属性指定了如果内容溢出一个元素的框（超过其指定的高度及宽度）时，会发生什么。 - 语法：
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管是否超出内容，都显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
注意：
1.一般情况下，都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
2.如果有定位的盒子，慎用overflow:hidden;，因为会隐藏多余的部分。
4.CSS技巧
4.1 精灵图
- 原因：有效减少服务器接受和发送请求的次数，提高网页的加载速度，出现了精灵图（CSS Sprited/CSS 雪碧）技术。
- 原理：将网页中的一些小背景图像整合在一张大图里，这样服务器只需要一次请求就可以了。这个大图也称为 sprites 精灵图。
- 使用：
-
移动背景图片位置，使用
background-position。 - 移动的距离就是这个目标图片的x和y值。注意：y轴是向下为正的。
- 一般情况是往上往左移动，所以数值是负值。
- 在使用精灵图的时候要精确测量，每个小背景图片的大小和位置。
-
移动背景图片位置，使用
注意： 移动的是背景图，不是移动的选择框。
4.2 字体图标
- 字体图标使用场景：网页中通用、常用的一些小图标。
- 不使用精灵图的原因：
- 精灵图还是比较大的
- 图片本身放大和缩小会失真。
- 一旦图片制作完毕更换会很麻烦。
- 字体图标：
iconfont，展示的是图标，本质是字体。- 优点：
1.轻量级-减少服务器的请求，图标渲染快。
2.灵活性-本质是文字，可以随意更改颜色、大小、阴影、透明、旋转等。
3.兼容性-几乎支持所有的浏览器。 - 缺点：字体图标不能代替精灵技术，只是对图标部分的技术提升和优化。
- 优点：
-
字体图标的引入：
1.把下载包里的font文件夹放入页面的根目录下。
2.在CSS样式中全局声明字体：可以理解为把这些字体通过CSS引入页面中。(不需要记忆，直接复制)
3.声明字体的种类，@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?q17km'); src: url('fonts/icomoon.eot?q17km#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?q17km') format('truetype'), url('fonts/icomoon.woff?q17km') format('woff'), url('fonts/icomoon.svg?q17km#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } span{ font-family: 'icomoon'; font-size: 14px; } ... <span> 小方框1</span> <span> 小方框2</span>font-family:'iconmoon';
4.复制下载下来的字体图标网页里的小方框，粘贴到HTML标签中。 -
字体图标的追加：
- 把压缩包里的 selection.json 重新上传，然后选中想要的新图标，重新下载压缩包，替换原来的文件即可。
4.3 CSS三角
- 语法：
border-size属性决定了三角形的大小。
后两句代码是为解决兼容性问题。.box{ width: 0; height: 0; border: 10px solid transparent; border-left-color: pink; line-height:0; font-size:0; }
4.4 CSS用户界面样式
4.4.1 鼠标样式
- 作用：改变鼠标的显示样式
- 语法：
选择器 { cursor:pointer;}属性值 描述 default 小白 默认 pointer 小手 move 移动 text 文本 not-allowed 禁止
4.4.2 轮廓线
- 作用：改变表单选中时的边框
- 语法：
input { outline:none;}，去掉默认的蓝色边框。
4.4.3 防止拖拽文本域
- 作用：防止文本域可拖拽，即去掉右下角。
- 语法：
textarea {resize:none;}
注意：要想文本域里的输入，起始和边框没有距离，只需要把
<textarea></textarea>放在一行里即可。
4.5 vertical-align 属性应用
- 作用：用于设置图片或表单（行内块元素） 和 文字的垂直对齐。
- 解释：设置一个元素的垂直对齐方式，只针对行内元素和行内块元素有效。
- 语法：
vertical-align: baseline | top |middle |bottom;值 描述 baseline 默认，元素放置在父元素的基线上 top 把元素的顶端和行中最高元素的顶端对齐 middle 把此元素放置在父元素的中部 bottom 把元素的底端和行中最低的元素的底端对齐
4.6 解决图片底部默认空白缝隙
- 问题：图片底侧会有一个空白缝隙，原因是 行内块元素 会和 文字的基线对齐。
- 解决方法：
1.给图片添加vertical-align: middle | bottom | top ;（提倡）
2.把图片转换为块级元素：display:block;
4.7 溢出的省略号显示
- 单行文本溢出省略号
- 必须满足三个条件：
/*1. 先强制一行内显示文本*/ white-space: nowrap; ( 默认 normal 自动换行) /*2. 超出的部分隐藏*/ overflow: hidden; /*3. 文字用省略号替代超出的部分*/ text-overflow: ellipsis; - 多行文本溢出省略号
问题：有较大的兼容性问题，适合于webkit浏览器或移动端（移动端大部分是webkit内核）overflow:hidden; text-overflow:ellipsis; /* 弹性伸缩盒子模型显示 */ display: -webkit-box; /* 限制在一个块元素显示的文本的行数 */ -webkit-line-clamp:2; /* 设置或检索伸缩盒对象的子元素的排列方式*/ -webkit-box-orient: vertical;
5.常见布局技巧
margin负值的运用
1.让每个盒子 margin 往左侧移动 -1px，正好压住相邻盒子边框。
（防止相邻盒子边重叠，造成加粗现象）
2.鼠标经过某个盒子时，提高当前的盒子层级。没有定位，则加相对定位（保留位置）；如果有定位，则加z-index。
（鼠标经过显示边框颜色，会出现边框颜色显示不全的现象。设置层级，可以压住其他盒子，显示完整。）-
文字围绕浮动元素
- 方法：直接在大盒子里写上文字，然后让图片浮动在盒子里，文字就会自动围绕图片排列。
-
行内块的巧妙运用
- 设置页数跳转。直接设置一个大盒子，然后在里面设置很多
a标签，在样式里使用display:inline-block;，可以方便设置。
- 设置页数跳转。直接设置一个大盒子，然后在里面设置很多
-
CSS三角强化
-
制造直角三角形：
1.将边框的宽和高都设置为0；
（此时相当于四个三角形上左下右，拼成一个正方形(各边宽度相等的情况下)）
2.左边和下边的边框宽度设置为0；
（下边的边框宽度为0，使下面的三角形减小到消失，同时左右的三角形逐渐变成直角三角形，最终剩下的三个三角形成为一个长方形；左边的同理，左边的三角形缩小到消失，右边的三角形不变，上三角形逐渐变成直角三角形，和右三角形成为一个小的长方形。）
3.把上边框的宽度调大，颜色为透明。（直角边的高度）
（上边框宽度越大，则长方形的高度越高，将上边框设置为透明，则上三角形消失，只剩下右边的直角三角形。）
width:0; height:0; border-color: transparent red transparent transparent; border-style: solid; border-width: 22px 8px 0 0; -
制造直角三角形：
