css小技巧总结

下面总结一些css小技巧

(1)目的:让网页中文字在div中垂直居中

    解决办法: 为文字设置line-height属性，值与div高度相同，这样便可以垂直居中

(2)目的:vertical-align 文字或图片垂直居中 于div

    解决办法: 首先vertical-align只适用于内联元素,不适用于块状元素，需要对父元素div设置display:table-cell 以及 vertical-align:middle才行

        

<div style="height:50px;width:200px;background-color: bisque;display: table-cell;text-align: center;vertical-align: middle">
    <img src="images/tel.jpg" />
</div>

(3)white-space 属性:

     pre : 保留文字中多余的空格和换行符

     nowrap: 让文本不换行，除非有<br> ,不换行指的是让文字不自动换行，无论CSS宽度设置多少，所有文字都在一行内显示。特别是标题列表

(3)行内元素也可以浮动

    比如<span>

(4)牢记制作新闻中心的时候，日期要放标题前面，然后用float：right，可以解决IE浏览器下的错位，也就使用所有浏览器了

(5)元素内容不确定时，不能给元素及它的父元素设置固定高度，否则内容会溢出，可以给元素及它的父元素设置一个最小高度min-height,它会随着内容增多自动撑开div

   PS：ie6 不支持min-height属性，支持_height属性，所以为了兼容性两个都写上 ,记得给外围div也设置追小高度

(6)<img>是一个内联元素，通过设置display：block；和margin：0 auto；可以使图片居中

(7)任意大小图片水平垂直居中，div居中可以用绝对定位和负margin

   
<div class="test">
    <img src="a.JPG" alt="">
</div>
test {
    width:600px;
    height:300px;
    background-color: grey;
    text-align: center;  /*迷之垂直居中*/
    vertical-align:middle; /*迷之垂直居中*/
    display: table-cell;/*迷之垂直居中*/
}.test img {    vertical-align: middle;/*迷之垂直居中*/
}

(8)通过让元素设置position:fixed可以让元素不随浏览器滑块移动而消失，相当于固定在窗口某个位置，常用于页面顶部banner

(9)任何元素都可以浮动，内联一样，不过会生成一个块级框

(10)清除浮动(在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。)

结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
.news {
  background-color: gray;
  border: solid 1px black;
  }


.news img {
  float: left;
  }


.news p {
  float: right;
  }


.clearfix:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }


.clearfix {
  /* 触发 hasLayout */ 
  zoom: 1; 
  }


<div class="news clearfix">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

(11)一排缩略图实现方法，如下图，要求水平居中于父div

父div的css

height:60px;
text-align: center; /*做到自适应宽度*/
缩略图每个格子的css,最后一句话是为了保证边框重合时还是只有1px，inline-block保证了在一行显示，如果用float则不行，因为都跑左右去了

另外inline-block有个副作用，格子间会有空隙，这是div间空格造成的，在div间加上空白注释即可消除空格

width: 50px;
height:50px;
border: 1px solid #cccccc;
display:inline-block; /*做到自适应宽度*/
margin-left:-1px;/*紧挨着的边框还是1像素，不会加深颜色*/

(12)<img>标签下方出现空隙的解决办法

问题:,满换购图片无法与字体下端对齐，有空隙存在

解决办法:给<img>样式加上如下之一即可,vertical-align:middle,vertical-align:top,vertical-align:bottom

加上后:

(13)想要实现导航栏hover时下方产生横条的效果，可以使用border-bottom,但是有一点要注意，这样会破坏布局

因为border会增加占用面积，解决办法是给元素加上box-sizing:border-box,它为元素指定的任何内边距和边框都

将在已设定的宽度和高度内进行绘制，这样就不会改变布局了，但是有一点要注意，必须为元素设定宽高，不能继承

否则不起作用

(14)行内元素，如<span>,则margin-top,margin-bottom,padding-top,padding-bottom无效，左右有效

(15)任意宽高div垂直居中,只需要在父div加上这3句话,只不过是css3的属性
display:flex;
justify-content:center;
align-items:center;zhi

display:flex;
justify-content:center;
align-items:center;

(16)注意css的优先级，比如.class1 p li {color:"red"}的优先级是3个相加，类为10，标签为1，id为100

(17)可以对任何元素使用:hover,不仅限于a标签，对于a标签，可以这样用a:visited:hover ，起到更加出众的效果

(18)让背景图片垂直水平居中的一个办法:background:url() 50% 50% no-repeat

      这是因为百分比设定是让图片上距离自己左上角百分比距离的点到背景左上角的距离为2个百分比

(19)在hmtl5中，<article>和<section>的区别，一块内容比较独立完整的时候用article，当将一块内容分成几段的时候 用section

(20)头疼的对齐问题:<input type="radio">按钮，出现单选按钮和文字对不齐的情况(文字偏下),解决方法很简单，对

      单选按钮设置css : position:relative;top:3px;相对于原来位置上移一定距离即可

(21)若要给table间的td设置自己的border，则table的样式要这样设置:border:none border-collapse:collapsed

(22)让页面返回顶部的方法:给顶部的元素设置name或者id，然后在按钮上<a href="#name"></a>

(23)清除浮动还可以给父元素添加overflow:hidden,原理如下，

1. BFC （Block Formatting Context）全称是块级格式化上下文，用于对块级元素排版，默认情况下只有根元素（body)一个块级上下文，但是如果一个块级元素 设置float:left，overflow:hidden或position:absolute样式，就会为这个块级元素生成一个独立的块圾上下文，就像在window全局作用域内，声明了一个function就会生成 一个独立的作用域一样，新开僻的BFC像是开僻了一个新的小宇宙，使这个块圾元素内部的排版完全独立隔绝。独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，也就是说包含块会把浮动元素的高度也计算在内，所以不用清除浮动来撑起高度。

(24)背景图片等比例缩放到全屏,用到属性background-size:cover

html{

  background:url(mytest/demo/antzone.jpg) no-repeat center center fixed;

  -webkit-background-size:cover;

  -moz-background-size:cover;

  -o-background-size:cover;

  background-size:cover;

}

(25)对于css而言，link和@import有如下区别：

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

  (26)A~B 波浪形选择符，表示选中A后面的所有B元素，而且是同级的,如 .d1~p

<div class="d1">
    <p>1</p>
    <p>1</p>
    <p>1</p>
</div>
<p>1</p>

只有最后一个p会受影响

(27)防止文字溢出容器且自动换行的方法有2：

  word-break:break-all  和  word-wrap:break-word

(28)伪选择器 nth-child(2n) nth-child(2n+1)很有用，参数可以是从1开始到n的任意值，如div p:nth-child(1),则匹配div中第一个p元素，这里不是指p的儿子

如果要匹配一个元素下所有偶数项子元素 则可以用 E *:nth-child(2n)

(29)text-shadow属性前三个参数代表水平偏移，垂直偏移，模糊半径，最后一个是阴影颜色

(30)white-space 属性可以设置文本对于空白的处理方式

nowrap:文本不换行，除非遇到</br>，不保留空白字符

pre:保留空白字符，类似于<pre>

normal:不保留空白字符，多余的空白合并成一个空白

(31)要让文本显示省略号，必须设置如下3条

white-space:nowrap

text-overflow:ellipsis

overflow:hidden

(32)有用的属性;pointer-events，设置了none的元素表现为不会被鼠标事件影响，就像不存在一样

auto：

与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同

none：

元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。

(33)创造图片镜像(垂直翻转，按x轴翻转)可以用transform:rotateX(180deg)，注意这里不是rotate(180)，否则就成了中心对称图片了

(34)让图片自适应外层容器大小，比如div

        <div>

<img src='a.jpg'>

</div>

只需要给img设置css {width:100%;height:100%}即可

(35)获得图片原始尺寸在现代浏览器里:img.naturalWidth,  img.naturalHeight 这2个属性即可获得，如果直接用img.height则获得的是

图片处理后的尺寸，比如被div约束后

对于ie早期浏览器，可以用如下办法获得

function getNaturalWeightHeighta(img){

var newImg = new Img();

newImg.src = img.src;

return [newImg.width, newImg.height];

}

(36)在盒模型中，背景默认延伸到边框之下，background-clip默认值是border-box,可以改为padding-box或者content-box来限制背景区域

(37)多重边框，如果2重，可以用outline和border来模拟，如果要大于2重，只能用box-shadow来模拟，

(38)外边距合并问题，有点要注意，如果父div没有设置margin，而子div设置了margin，则margin也会被合并到父div上，所以用padding最好

(39)绝对定位的具体含义：相对于 static 定位以外的第一个父元素进行定位。以前老是理解为必须是相对于relative，醉了

(40)hover有个要注意的地方，如果父div为relative，子div为absolute，但子div离父div很远，那么鼠标移到子div上的时候

会触发父div的hover