HTML学习总结4

定位(position)

如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。
定位是难点，一定要学好

为什么要用定位？

那么定位，最常运用的场景再那里呢？
如果用标准流或者浮动，实现会比较复杂或者难以实现，此时我们用定位来做，just soso！

元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。
1、边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

也就说，以后定位要和这边偏移搭配使用了， 比如 top: 100px; left: 30px; 等等
2、定位模式(定位的分类)
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
选择器{position:属性值;}
position属性的常用值

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

静态定位(static)

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。

白话：网页中所有元素都是静态定位，也就是标准流的特性

在静态定位下，没有偏移量

相对定位relative 自恋型

相对定位不脱标（不脱离标准流）
相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。
注意：
1.元素相对定位后，虽然可以用便偏移量改变位置，但是在文档流中的位置仍保留。
2.每次移动的位置，都是以自己的左上角为基点移动浮动：多个块级元素一行显示相对定位：主要价值就是移动位置

绝对定位absolute 拼爹型

绝对定位完全脱标
当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
父级没有定位
若所有父元素都没有定位，以浏览器为准对齐(document文档)。
父级有定位
绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
**子绝父相 **
非常重要，是我们的口诀
首先，绝对定位是将元素依据最近的已经定位绝对，固定，相对的父元素(祖先)进行定位。
也就是说,子级绝对定位，父级只要是定位(除static静态定位)就可以，也就是说，子绝父绝也行
那么，为何父级要求时相对定位呢？
子级绝对定位，父级就用相对定位(最优解),因为子级时绝对定位不占位置，就可放在父级的任何位置
因为父盒子在布局时，需要占有位置，因此父级要相对定位
绝对定位的盒子水平/垂直居中
普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了
水平居中的算法:
1.left 50% ，父盒子的一半大小
2.再有外边距负的一半值即可
固定定位fixed
它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
固定定位是一种特殊的绝对定位
叠放次序（z-index）
当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
1.默认值是0，取值越大，定位元素越居上
2.取值相同，看书写顺序
3.数字没有单位
4.只有定位才有该属性，浮动，标准流，静态定位都没有该属性
四种定位总结

定位模式	是否脱标（脱离标准流）	是否使用偏移量	移动位置基准
静态static	不脱标，正常模式	不可以	正常
相对定位relative	不脱标，占有位置	可以	相对与自己移动
绝对定位absolute	脱标，不占位置	可以	相对于定位父级移动
固定定位fixed	脱标，不占位置	可以	相对于浏览器移动

定位模式转换

跟 浮动一样， 元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式，

元素的显示与隐藏

在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。

display 显示

display 设置或检索对象是否及如何显示。
none 隐藏功能
block 除了转换成块级元素外，还有显示元素功能
特点：隐藏之后，不保留位置

visibility 可见性

设置或检索是否显示对象。
visible : 　对象可视
hidden : 　对象隐藏
特点：隐藏之后，继续保留位置

overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

/*overflow: visible;*/  /*默认值,超出显示*/
/*overflow: auto;*/ /*自动   超出显示滚动条,不超出不显示滚动条*/
/*overflow: scroll;*/  /*一直显示滚动条*/
overflow: hidden;  /*不显示超出的内容,超出的内容隐藏*/

CSS高级技巧

CSS用户界面样式

所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽

鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移动</li>
  <li style="cursor:text">我是文本</li>
</ul>

尽量不要用hand 因为 火狐不支持 pointer ie6以上都支持的尽量用

轮廓 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

 outline : outline-color ||outline-style || outline-width 

但是我们都不关心可以设置多少，我们平时都是去掉的。最直接的写法是 ： outline: 0;

 <input  type="text"  style="outline: 0;"/>

防止拖拽文本域resize

resize：none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域。

vertical-align 垂直对齐

vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片和表单等。

vertical-align : baseline |top |middle |bottom 

图片和文字对齐

所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。

去除图片底侧空白缝隙

有个很重要特性你要记住： 如果一个元素没有基线，比如图片或者表单等行内块元素，则他的底线会和父级盒子的基线对齐。</strong> 这样会造成一个问题，就是图片底侧会有一个空白缝隙。
解决的方法就是：
给img vertical-align:middle | top等等。 让图片不要和基线对齐。
给img 添加 display：block; 转换为块级元素就不会存在问题了。

溢出的文字隐藏

word-break:自动换行

normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。

text-overflow 文字溢出

text-overflow : clip | ellipsis
设置或检索是否使用一个省略标记（…）标示对象内文本的溢出
clip : 　不显示省略标记（…），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（…）

before和after伪元素(详解)

之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查
注意： 一定要有content，否则伪元素不起作用

过渡(CSS3)

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。
在CSS3里使用transition可以实现补间动画（过渡效果），A状态，B状态，
语法格式:

transition: 要过渡的属性  花费时间  运动曲线  何时开始;
如果有多组属性变化，还是用逗号隔开。

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。

transform-origin可以调整元素转换变形的原点

transform-origin: 50px 10px ; 

如果是4个角，用left,top，这些值，如果想要精确的位置，就用像素值

倾斜 skew(deg, deg)

transform:skew(30deg,0deg);

3D变形(CSS3) transform

rotateX()

就是沿着 x 立体旋转.

rotateY()

沿着y轴进行旋转

rotateZ()

沿着z轴进行旋转

透视(perspective)

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
透视原理： 近大远小 。
浏览器透视：把近大远小的所有图像，透视在屏幕上。
perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
注：并非任何情况下需要透视效果，根据开发需要进行设置。perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

translateX(x)

仅水平方向移动**（X轴移动）

translateY(y)

仅垂直方向移动（Y轴移动）

translateZ(z)

前后移动，直观的表现就是大小变化

translate3d(x,y,z)

[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值

backface-visibility

backface-visibility 属性定义当元素不面向屏幕时是否可见。

动画(CSS3) animation

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
语法格式：

animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;