CSS小技巧

CSS小技巧

嵌套块元素塌陷问题（外边距合并）

给父元素定义上边框/给父元素定义内边距/为父元素添加overflow：hidden

清除内外边距

{
   margin：0；
   padding：0；
}

清除浮动

选择器{
         clear：left/right/both;不允许左/右/两边有浮动元素                   
				}

1.在最后一个浮动子元素后面添加一个额外标签（必须是块标签）添加清除浮动的样式
2.给父元素添加overflow：hidden；（缺点无法显示溢出部分）
3.：after伪元素标签法。在父元素上添加这个属性.clearfix

.clearfix:after {
    content: "";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}
.clearfix {
    /* I6,I7专有 */
    *zoom: 1;
}

4.双伪元素清除浮动在父元素上添加这个属性.clearfix

.clearfix:before,.clearfix:after {
      content:"";
      display:table;
      /* 如果写display:block的话两个块元素就会分行显示，影响父盒子大小 */
      /* table是表格，转化成块级元素并同行显示 */
    }
    .clearfix:after {
     clear:both;
    }
    .clearfix {
      *zoom:1;
    }

绝对定位的盒子不能通过 margin：0 auto来水平垂直居中

.box {
            position: absolute;
            /* 1. left 走 50%  父容器宽度的一半 */
            left: 50%;
            /* 2. margin 负值 往左边走 自己盒子宽度的一半 */
            margin-left: -100px;
            top: 50%;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
            /* margin: auto; */
        }

字体图标使用

 /* 字体声明 */
     @font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?p4ssmb');
  src:  url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
    url('fonts/icomoon.woff?p4ssmb') format('woff'),
    url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
 span {
    font-family: 'icomoon';
    font-size: 100px;
    color:pink;
  }

三角制作

.box2 {
         width: 0;
         height: 0;
         border: 50px solid transparent;
         border-left-color: pink;
     }

图片底侧有空白缝隙解决方案

1.vertical-align: top/bottom/left/right;
2.display: block;

单行溢出文字显示省略号

/* 这个单词的意思是如果文字显示不开自动换行 */
/* white-space: normal; */
/* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
    white-space: nowrap;
/* 2.溢出的部分隐藏起来 */
     overflow: hidden;
/* 3. 文字溢出的时候用省略号来显示 */
 text-overflow: ellipsis;

多行溢出文字显示省略号

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

border-radius

border-radius:10px;
(四个角分别与半径为10px的圆相切)圆角边框

设置不同位置的圆角四个不同值
设置radiu为正方形盒子高度的一半则为圆
圆角矩形则把radius设置为长方形高度的一半