前言

也许你自认为非常熟悉基本的css2属性以及效果，但有些知识盲区你还是不清楚的。

置换元素

  • 有些元素本身，你认为是行内元素但是却可以设置高宽，比如input、button、img等，这些元素本身其实是行内块级元素，具有行内块级的基本特征。
  • 置换元素设置padding-top以及padding-bottom是有效的，设置line-height无效；而行内非置换元素无效，两者对于padding-left,padding-right都是有效的。
  • 拓展延伸：行内非置换元素设置行高无效，高度识别自动。

    margin塌陷

  1. 行内非置换元素，在写外边距时，如果外层盒模型没有padding,border时，行内元素的margin-top会移植到父元素的margin-top实现，而本身没有margin-top效果，俗称margin塌陷。下面代码的最终效果p margin-top:15px,span没有margin-top的效果。（外层模型有padding,border可以正常实现外层10px 内层15px的外间距）
  1. <p style="margin-top:10px">
  2.     <span style="margin-top:15px">我是行内非块级元素</span>
  3.     </p>
  1. 行内置换元素，不管外层是否有padding,border时，都会正常实现外层10px 内层15px的外间距。
  1. <p style="margin-top:10px">
  2.     <img style="margin-top:15px" src="">
  3.     </p>

3 div元素也会有这种情况

可用的解决方案如下：

（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合 （可以设置成透明：border：1px solid transparent）。

（2）为父盒子添加overflow：hidden；

（3）为父盒子设定padding值；

（4）为父盒子添加position：fixed；

（5）为父盒子添加 display：table；

（6）利用伪元素给子元素的前面添加一个空元素

同级元素margin合并问题

  1. 本元素margin-bottom与下一个元素margin-top ,取较大值15px
    <p style="margin-bottom:15px"> </p> <p style="margin-top:10px"> </p>

  2. 本元素margin-right与下一个元素margin-left ,取和也就是25px
    <span style="margin-right:15px;"> sdv </span> <span style="margin-left:10px"> sdv </span>

同时筛选出符合多个条件

  • 中间不加任何空格,多用于追加active样式，前提在保证语法正确的情况下.a.active{} <span class="a active"></span>

html,body不能包含整个页面

  • 需要全屏设置背景的时候无效html,body{ width:100%; height:100%； }

文本框内提示文字颜色

  • -webkit-input-placeholder/* WebKit browsers */ ::-webkit-input-placeholder { color: #777; } /* Mozilla Firefox 4 to 18 */ :-moz-placeholder { color: #777; opacity: 1; } /* Mozilla Firefox 19+ */ ::-moz-placeholder { color: #777; opacity: 1; } /* Internet Explorer 10+ */ :-ms-input-placeholder { color: #777; }

display:none 对元素盒模型影响

position:relative 与默认的static区别

点击元素之后的蓝色轮廓

它是元素在focus伪类状态下的触发的边框效果，如果你想去掉或者修改，代码如下：
：focus{outline:none}