html day7-- 09错误集锦

1   box-sizing:设置元素盒子大小的计算方式的
   content-box;表示width中不包含border padding；默认盒模型的计算方式
   border-box：表示width中包含border padding；盒模型的计算方式是IE6中的计算方式-->.

2./*具有最小高度并且高度自适应*/
div{width:100px;background:#F00;min-height:200px;height:100px;}生效的是min-height

3.位移  旋转  放大缩小 倾斜(默认以元素的中心点为基点，)
transform:translate(x,y)位移   x-水平   y-垂直,可出父元素的位置，而不影响父元素的宽高

•  x,y如果为负就反方向移动

• translateX(<translation-value>)  通过给x方向上的指定参数值,实现x轴方向上的移动。

• translateY(<translation-value>) 通过给y方向上的指定参数值,实现x轴方向上的移动。

•  当translate(-30%,-50%)的参数值是百分比时，参照的是自身的大小
   

transform:scale(宽度,高度)放大缩小(n. 规模；比例；鳞；刻度；天平；数值范围)： 放大>1       0<y<1缩小
transform:rotate(n deg) 旋转   +顺时针旋转  -逆时针旋转(vt. 使旋转；使转动；使轮流)
*/
body:hover div{transform:rotate(-130deg)}这个属性允许你将元素旋转，缩放，移动，倾斜等

3.

4.div:after{content:""; display:block;clear:both;color:#fff;}

div:before{content:"新添加的文本"; display:inline-block;width:100px;height:100px;background:#6FC}

效果是在div内部的后面加上一张图片

div:after{content:attr(class)}/*获取哪个属的属性值作为添加的内容*/

div:first-line{background:#CF6;font-size:40px;}
div:first-letter{font-size:100px;}
div::selection{background:#F30;}

5./*万能清除法*/
div:after{content:"."; display:block; clear:both;height:0;overflow:hidden;visibility:hidden}
div:after{content:""; display:block; clear:both}
div:after{content:""; display:table; clear:both}

2.

3.

伪类是元素处于莫种状态下的要执行的代码（才能执行）：hover

伪元素是元素，当作标签处理；

div:after{}表示在div的文本内容后面添加的内容，对div里面操作

其他没覆盖的，代码依然有效

X是属性名，可以将div的某个属性的属性值作为内容添加到div的前后

例：会将class的属性值作为元素添加到div的后面和前面

3.div：first-line{}对div里面的内容的第一行设置样式

div::selection{}给文本选中时设置样式，由于兼容性问题，目前只能设置背景background和color

 

例：

div：after{}必须有content元素，表示添加了元素

当你清除浮动时，在div：after{}的content中添加了内容，如content:".",点会占据空间，必须height：0；overflow：hidden，使‘.’不占内容，再加上visibility：hidden，表示让这个元素不可见，而不能用display:none,相当于这段代码白写

保证添加的内容是块状元素，并清了浮动就可以

1.  了解说出什么是宽度和高度自适应
      如何写是宽高自适应
      (width:100%,不写  height:auto,不写}
      
2. min-height max-height min-width max-width(ie6不识别)
      

3. !important:表示所附加的声明具有最高的优先级      
      
4. * _ 

5. :before :after :first-line :first-letter ::selection
      
6. visibility:hidden/visible;隐藏/可见
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失。      

7. 浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）***********
hack1：给父元素添加声明overflow:hidden;
hack2: 在浮动元素下方添加空div,并给该元素添加声明：clear:both;height:0;overflow:hidden;
hack3:万能清除浮动法
选择符 :after{content:".";clear:both;display:block;height:0;
overflow:hidden;visibility:hidden;}(推荐使用)

8. 元素{height:100%}
   html,body{height:100%}
   
9.box-sizing:设置元素盒子大小的计算方式的
   content-box：表示width中不包含border padding；默认盒模型的计算方式
   border-box：表示width中包含border padding；盒模型的计算方式是IE6中的计算方式
   
10. transform:translate(x,y)位移   x-水平   y-垂直
      transform:translateX()
      transform:translateY();
     当translate(-30%,-50%)的参数值是百分比时，参照的是自身的大小
      
     transform:scale(宽度,高度)    放大>1       0<y<1缩小
     transform:rotate(deg) 旋转   +顺时针旋转  -逆时针旋转      

11./*
在高版本中：没有给div设置高度，会被图片撑大,但图片大小不会随着变，可能会溢出；
div:font-size:0
img:display:block
在低版本中：给div设置高度，会被图片撑大
div:font-size:0
img:display:block
*/

   12./*
双倍浮动：给元素设置浮动，并且设置了左右的margin值，会被双倍解释（低版本中可能会出现）
*/
div{background:#309;height:250px;width:100px;float:left;margin-left:200px; display:inline}

13.

/*
当li里面有a和span两个标签，并给span设置了浮动

*/
li{list-style:none;border:1px solid #C93;width:500px;overflow:hidden; }
a{float:left}
span{float:right}

14./*
 描述：在IE6及以下版本中，部分块元素拥有默认高度（低于18px高度）。
给元素添加overflow:hidden(推荐)/font-size:0(height:2px;)
*/

15./*map如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签;浏览器会忽略超过图像边界范围之外的坐标。*/

16. Trident ie
    gecko   ff
    webkit  c safari
    presto  o
    blink     c ff
2. 图片间隙
    默认高度（div块状元素有默认的18px的高度）
    双倍边距
    cursor：pointer
    ie6只支持png8位的背景透明
    
3. 热点链接  

 

 

此时div才自适应浏览器高度

background：center表示将背静的中心放到块的中心

设置了高度相同的两个input，明显左面的比右面的高；原因：文本框的边框不算在高度范围内的，而button按钮的边框是算在高度范围内的。button按钮和文本框按钮边框高度都是2像素，解决办法：

去点边框后，高度并未对齐，原因：input标签是个行内块元素，文本底部有一个对齐效果；解决方法：加一个浮动；

设置鼠标放在上面时，变成手型

可以看到这两张图片并不头部对齐，图图对齐，用vertical-align:middle；

当要使一个块中的图片居中显示，可以设置   <span style="vertical-align: middle;display: inline-block;height: 100%"></span>

2个input总是对不齐，在input标签上加上float:left;

left:100%,在包含块的右边；

定位后width:100%与height:100%,表示与包含块同宽同高