重温html+css第三天：6月6日小结（下一篇开始HTML5和CSS3）

相对定位没有脱标，原来的位置还在，还是再标准流当中
绝对定位：移动位置时是根据父元素位置来移动的（拼爹型）若果没有父元素或者父元素没有定位，就会根据浏览器来进行对齐，绝对定位是脱标的，比浮动飘的还要高，可以想到轮播图
子绝父相
固定定位：元素固定到浏览器的某个位置不动，特点是以浏览器的可视窗口为参照移动元素，跟父元素没有任何关系，只会以浏览器为准，不随滚动条滚动，不在保留原来的位置，也是脱离标准流的
固定定位也可以实现与版心保持距离相等，其实是用到了一点算法，具体还是相对于浏览器定位的，具体算法就是先写pf，再写一个left;50%，再给这个固定定位的盒子一个margin-left值设置为版心宽度的一般
粘性定位是相对定位和固定定位的混合，特点是以浏览器为参照，但是会占用位置，相当于标准流，兼容性很差，使用的比较少。
定位叠放次序z-index，在使用定位布局时，可能会出现盒子重叠的情况，此时可以使用z-index来控制盒子的前后次序

使用定位布局的时候可能会出现盒子重叠的情况，可以使用z-index来控制盒子的排列顺序，实现一种错落有致的效果就是用z-index来实现；只有定位的盒子才有z-index，默认是auto。
绝对定位的盒子不能用过margin设置水平居中，想要把定位的盒子设置水平居中，可以通过设置left50％，再来个marginleft等于-盒子宽度的一半，就可以实现。
定位的特点和影响：行内元素添加定位以后就可以设置宽高，块级元素添加定位以后如果不给宽高，那么它的宽高会变成内容的大小。
脱标的盒子不会触发外边距塌陷的问题，外边距塌陷指的就是外边距合并的问题。
浮动的元素如果不去浮会压住前面的块级元素盒子，但是不会压住块级元素里面的文字。绝对定位会压住。
淘宝焦点图小案例:一个大盒子，放一张大图片设置宽高和大盒子一样，里面左右放一个盒子（小三角），底部放一个盒子用ul li来做，因为有一些小圆点排列。
border-radius设置圆角
注意权重问题
标准流:上下左右排列的布局
标准流盒子使用方式：左右垂直方式排列的盒子
浮动盒子使用方式：多个块级盒子水平对齐或者左右对齐等
定位盒子使用方式：有层叠的关系，相对定位是相对自身位置算标准流，绝对定位是相对浏览器算脱标，固定定位是相对浏览器算标准流。如果多个盒子前后叠压显示或者有些元素可以在盒子内随意移动就要用到定位。

元素的显示与隐藏：display和overflow和visibility（可见性）
dn：隐藏元素，隐藏以后不占有原来的位置，但是元素依旧存在 db：转换为块级元素，也有显示的意思
vv可视，vh隐藏，隐藏以后会占有原来的位置
它俩的区别类似于标准流和浮动？
ov是默认显示 oh溢出部分隐藏（超出盒子区域的部分） os溢出的部分显示滚动条，不溢出也显示滚动条 oa溢出的部分显示滚动条，不溢出不显示滚动条

土豆网小案例

：黑色半透明的盒子本来没有，鼠标经过的时候显示；插入img图片的时候要使得图片和盒子一样大就给图片加一个属性w100% h100%即可，设置两个盒子上下排列，然后给上面的阴影盒子加一个绝对定位就不占用位置了，背景里面还可以加小图片直接在b的复合写法里面加，加完以后设置一个no-repeat去除密集排列效果。
直接用伪类写法只能处理鼠标经过时候加下划线改背景色等，要实现阴影效果还是用dn和db比较好，当然也要用到伪类处理鼠标经过才改变的问题
为什么要用到精灵图：一个网页往往需要很多的小背景图片，为了减少请求相应的次数，就要用到精灵图css sprites，也叫雪碧图，精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一个大图片之中；使用的方法就是移动背景图片的位置，移动距离就是目标图片的x和y坐标，注意网页中的坐标有所不同；一般情况都是往上往左移动所以数值是负数，要精准测量每个小图片的大小和位置。

越学到后面复合写法用的越多
行内元素span没有大小，要转换为行内块元素才能设置宽高
字体图标iconfont展示的是图标但是本质是文字，因为那些特别的小图标，精灵图更换非常麻烦，用字体图标会好一点，而且它容量小，本质是文字使用起来非常灵活
总之简单的小图标用iconfont，稍微复杂的用精灵图（本质就是图片的合理移动）
不同浏览器支持的字体文件格式是不一样的，字体图标的一堆css代码直接网上复制粘进去防范
字体图标的追加：把json文件导入到当时的下载页面，然后重新下载
CSS三角：比如盒子右边有个小三角，聊天框右下角那个小三角，做法是指定整个边框的宽高和颜色，在单独设置某一个边框的颜色。
界面的样式：更改用户操作的样式
更改用户的鼠标样式cursor：point（小手形状） move（十字移动形状）not-allowed（禁止形状
）
表单轮廓线：要去出的话写outline：none即可
textear文本域一般右下角有个东西可以把盒子给托大，那样的话也会影响其他盒子的布局，所以可以用resize：none即可
图片和文字都垂直对齐，用vertical-align：middle
行内块元素（img图片本身就是行内块元素）和vam更加搭配
解决图片底侧的空白缝隙问题：因为图片默认是和文字的基线对齐，不是和底线对齐的
溢出的文字用省略号显示：购物车的小案例里面经常用到，做法是先强制文字一行显示用white-space：nowrap，然后用overflow：hidden隐藏溢出部分，然后把溢出部分改成省略号用text-overflow：ellipsis
多行文本溢出显示省略号一般是给后端做的

常见布局技巧：1.margin负值的运用：合并浮动导致的细边框，将右边的盒子加一个margin-left为边框宽度即可，那样的话边框会压到（也就是重合）
2.文字围绕浮动元素：图片加浮动，文字不用管
3,。行内块元素运用：行内块元素自带一个小间距，常用来做网页中的12345那些翻页的按钮
Input是行内块元素
4.css三角巧妙运用：商城的秒杀栏有个斜着的三角

css初始化：可以去找一下京东的初始化css代码，就是包含*{padding：0 margin：0}这些初始样式（基本都会用到的样式）