3 css

定位

为什么需要定位

1 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。
2 定位可以在让盒子自由在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

定位组成

将盒子定在某一位置，也就是来摆盒子。

*定位=定位模式+边偏移{******重要}
定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。

定位模式
它是通过css的position属性来设置，其值可以分为四个。

static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位

边偏移
有top bottom left right 4个属性。

top top:80px; 顶端偏移，定义元素相对其父元素上边线的距离
bottom bottom:80px; 底部偏移，定义元素相对其父元素下边线的距离
left left:80px; 左侧偏移，定义元素相对其父元素左边线的距离
right right:80px; 右侧偏移，定义元素相对其父元素右边线的距离

static静态定位
是元素默认的定方式，无定位的意思

语法

选择器{ position：static}
1 按照标准流摆放位置 并没有脱离标准流，没有边偏移的
1很少用到。

relative定位 重要
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）
选择器{ position：relative}
1 它总是以自己原来的位置移动的 自恋型
2 原来的位置继续占有继续保留 后面的盒子依然以标准流方式对待他 ，不脱标
3 因此，相对定位并没有脱标，它最典型的应用就是给绝对定位当爹的。

absolute定位 重要
绝对定位是元素在移动位置的时候，是相对它的祖先元素来说的。（拼爹型）
选择器{ position：absolute；}

1 如果没有父元素的或者祖先元素没有定位，则以浏览器为准定位（文档为准）

2 如果我们祖先元素有定位（相对，绝对，固定），则以最近一级的有定位祖先元素为参考点移动位置。

3 绝对定位是脱离标准流的。

问题
1 绝对定位与相对定位到底什么使用场景呢？

2 为什么说相对定位给绝对定位当爹？

子绝父相的由来？
弄清楚这个问题，这明白了绝对定位和相对定位的使用场景

这个子绝父相太重要了，是我们学习定位的口诀，是定位中最常用的一种方式见这句话的意思：
子级是绝对定位，父级要用相对定位；

结论 1 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

2 父盒子需要限定子盒子在父盒子内显示。

3 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

4 fixed 固定定位2

是元素固定到浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动元素的位置不会改变。
选择器{ position：fixed；}
1 以浏览器的可视窗口为参照点移动元素的。
跟父元素没有任何关系。
不随滚动条滚动
2
固定定位不在占有原先的位置。

固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

固定到版心对齐
小算法
1 让固定定位的盒子left：50%，只走到浏览器可视区（也可以看做版心）的一半
2 让固定定位的盒子margin-left版心宽度的一半距离，多走版心快读的一半位置。
就可以让固定定位的盒子贴着版心右侧对齐了。

粘性定位sticky了解

相对和固定的混合

语法规范
选择器{position：sticky; top:10px}

1 以浏览器的可视窗口为参照点移动元素的，
2 保留原来位置。
3 必s须添加上下左右的其中任何一个边偏移。

1 定位叠放次序 在z-index

使用定位布局的时候，可能出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序。z轴
选择器{z-index:1;}
数值可以是正整数，负整数或者0，默认是auto，数值越大，盒子越靠上。
如果属性值相同,则按照书写顺序,后来居上。
不加单位
只有定位的盒子才有这样的属性。

                                             定位的拓展

1 绝对定位的盒子水平垂直居中

margin:0 auto呢！行不行呀? 不能这样设置了

小算法 水平居中
第一步 left走50%；父容器宽度的一半；
第二步 margin 负值 往左边走 自己盒子的一半；
垂直一样

 2 定位的特殊特性

绝对定位和固定定位也和浮动类似

1 行内元素添加绝对或者固定定位，可以直接设置高和宽。
2 块级元素添加绝对或者固定定位，如果不给宽度或者高度时，默认大小是内容的大小。

3 脱标的盒子时候不会触发外边距塌陷的

浮动元素，绝对定位 固定定位元素的都不会触发外边距合并的问题。

4 绝对定位和（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面的标准流的盒子，但是不会压住下面标准流盒子里面的内容。
绝对固定定位不同，会完全压住。

浮动产生的产生的最初目的就是为了文字环绕的效果，文字会环绕浮动元素。

          元素的显示与隐藏、

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，就会出现。

让一个元素在页面中显示或者隐藏出来

1 display显示隐藏

display:none;隐藏对象
display隐藏元素后，不再占有原来的位置。

display:block;除了转换为块级元素之外，同时还有显示元素的意思。

后面应用及其广泛，搭配js可以做很多网页游戏。

2 visibility显示隐藏
visibility:visible元素可见。
visibility：hidden元素隐藏。
隐藏元素后，继续占有原来的位置。

3 overflow 溢出部分显示和隐藏

指定了如果内容溢出了一个元素框（超过其指定的高度和宽度）时，会发生什么

overflow：visible原本可见 本来。
overflow：hidden隐藏起来
overflow：scroll 溢出的部分显示滚动条； 不溢出也显示
overflow：auto 在需要时添加滚动条； 不溢出不显示 溢出显示。

注意 有定位的盒子，请慎用overflow ：hidden属性。

精灵图

1 为什么需要精灵图

为了解决减少服务器接收和发送请求次数，提高网页的加载速度，出现了css精灵技术。

2 精灵图的使用

1 精灵技术主要针对我们的背景图片的使用，就是把多个小背景图片整合到一张大图片中。
2 这些大的图片也叫sprites 精灵图 也称雪碧图。
3 主要移动背景图片的位置，此时用我们的background-position;
4 移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同。
5 一般我们向上向左移动都是负值。

核心总结

1 主要针对我们的小的背景图片
2 借助我们的背景位置实现
3 一般情况下精灵图都是负值，

3 案例加强

字体图标

主要用于显示网页中通用，常用的一些小图标。

精灵图有诸多优点，但是缺点还是很大的
1 图片文件还是比较大的
2 图片本身放大和缩小会失真。
3 一旦制作完了 更换很复杂。

此时有一种技术出现解决了此问题，就是字体图标iconfont
字体图标为前端工程师提供一种方便高效的图标使用方法，显示的图标，本质上字体。

特点
轻量级 一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来
，减小服务器的压力。

灵活性 本质其实是文字，可以随意的改变颜色，产生阴影，透明效果 旋转

兼容性 几乎支持所有的浏览器，请放心使用。

注意 不能替换我们的精灵图。
总结

如果遇到一些结构和样式比较简单的小图标，就用字体图标。

复杂的用精灵图来做。

字体图标是一些网页常见的小图标，我们直接网上下载即可，
1 下载

推荐网址 icomoon字库
阿里iconfont字库

2 引入HTML页面
用css引入。
/* 字体声明 */
@font-face {
font-family: ‘icomoon’;
src: url(‘fonts/icomoon.eot?p4ssmb’);
src: url(‘fonts/icomoon.eot?p4ssmb#iefix’) format(‘embedded-opentype’),
url(‘fonts/icomoon.ttf?p4ssmb’) format(‘truetype’),
url(‘fonts/icomoon.woff?p4ssmb’) format(‘woff’),
url(‘fonts/icomoon.svg?p4ssmb#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
font-display: block;}

3 字体图标的追加
如果在工作中 ，原来的字体图标不够的话，我们需要添加新的字体图标到原来的字体文件中。

需要先找到我们压缩包单独selection.json从新上传，然后选中自己想要的图标，从新下载压缩包中，
并替换原来的文件即可。

       css三角

让盒子的宽度和高度为0，，然后给我们border 几px solid transport ，然在给我们四个其中一个颜色为
别的。

                  css使用户界面的样式

1 更改用户的鼠标样式
curson：pointer；

default 小白默认
pointer 小手
move 移动
text 文本
not-allowed 禁止

2表单的轮廓
取消表单的轮廓
outline:0;或者给它一个none值样式之后，就可以去除默认的蓝色区域

3防止拖拽文本域
resize：none；

vertical-align属性应用

css的这个属性的应用使用场景，经常用于设置图片或者表单（行内块元素）的文字垂直对齐。
设置一个元素的垂直对齐方式，但是他只是针对行内元素或者行内块元素。

baseline 默认，元素设置在父元素的基线上

top 把元素的顶端与行中最高元素的对端对齐

middle 把此元素放在父元素的中部

bottom 把元素的顶端与行中最低的元素的顶端对齐。

让图片，表单都属于我们的行内块元素，默认是基线对齐，我们可以让他们与我们的文字实现对齐。

5.2 解决图片底部的默认空白缝隙问题。
bug 图片底册会有一个空白的缝隙，原因是行内块元素会和文字等基线对齐。

1 给图片添加一个 只要不是baseline就行当属性，

2 给图片转换为display:block;

溢出文字用省略号显示

1 单行文本省略号显示
1 先强制一行内显示文本
White-space：nowrap（默认normal自动换行）显示不开我也不允许你换行。
2 超出的部分隐藏
overflow：hidden；
3 文字用省略号替代超出的部分。
text-overflow：elipsis； 省略号。

2 多行文本省略号显示

这种写法有较大的兼容性问题，适合与webkit浏览器或者移动端
overflow：hidden
text-overflow：elipsis;
弹性伸缩盒子模型显示
display:webkti-box
限制在一个块元素显示的文本的行数；
—webit—line-clamp:2;
设置或检索伸缩盒子对象的子元素的排列方式；
-webit—box—orient:vertical;

最好让后台人员做这种效果

常见布局的技巧

1 margin负值的运用
/* ul li:hover {
1 如果盒子没有定位，则鼠标经过添加相对定位即可。
position: relative;
cursor: pointer;
border: 1px solid blue;
} /
ul li:hover {
/ 如果li都有定位，则利用的z-index提高层级 */
z-index: 1;
border: 1px solid blue;

    }

2 文字围绕浮动元素

文字完全占满的父盒子 宽度一样 然后给左侧盒子添加一个浮动就可以了。

3 行内块的巧妙运用
如果给我们父盒子添加我们的text-align:center;里面的行内块元素都会实现居中对齐。

4 css三角强化
如果我们只要左侧的盒子；
把border-bottom去掉

把border-top调高。
然后左边去去掉
然后top改成透明色 不要去掉 负责就会出问题 全部去除了。

/* 把上边框宽度调大 /
/ border-top: 100px solid transparent;
border-right: 50px solid skyblue; /
/ 左边和下边的边框宽度设置为0 /
/ border-bottom: 0 solid blue;
border-left: 0 solid green; /
/ 1.只保留右边的边框有颜色 /
border-color: transparent red transparent transparent;
/ 2. 样式都是solid /
border-style: solid;
/ 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
border-width: 100px 50px 0 0 ;

css初始化

不同浏览器对我们的有些标签的默认值是不同的，为了消除不同浏览器堆html文本呈现的差异
，照顾浏览器的兼容，我们需要对css初始化。

简单理解就是和css初始化是重设置浏览器的样式，

每个人网页都必须有初始化。
/* 把我们所有标签的内外边距清零 */

• {
  margin: 0;
  padding: 0
  }
  /* em 和 i 斜体的文字不倾斜 /
  em,
  i {
  font-style: normal
  }
  / 去掉li 的小圆点 */
  li {
  list-style: none
  }

img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 /
border: 0;
/ 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}

button {
/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
cursor: pointer
}

a {
color: #666;
text-decoration: none
}

a:hover {
color: #c81623
}

button,
input {
/* “\5B8B\4F53” 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, “\5B8B\4F53”, sans-serif
}

body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, “\5B8B\4F53”, sans-serif;
color: #666
}

.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: “.”;
height: 0
}

.clearfix {
*zoom: 1
}

                                     HTML和css提高部分