CSS基础四

发表于 | 分类于

1.外边距塌陷问题

块级元素的上下外边距有时候会合并，合并后的外边距等于合并前两个外边距中的较大值，这种现象称为外边距塌陷。
外边距的塌陷问题只会在垂直之间产生塌陷；水平之间不受影响的；
两个盒子的垂直外边距完全接触才会触发。
两个盒子上下分布时，出现外边距塌陷很常见。
当两个盒子嵌套时，对里面的盒子设置margin-top:10px;时，外面的盒子会和里面的盒子一起向下移动，有两种解决方法：

1
2
3
1. .father {border: 1px solid black;}

2. .father {overflow: hidden;}

2.清除浮动的方法

为了解决父级元素因为子集元素为浮动而引起内部高度为0的问题

  1. 额外标签法
    在浮动元素末尾添加一个div
    1
    2
    <div class="clear"></div>
    .clear {clear: both;}

缺点：多一个无意义的标签，结构化差

  1. 父级元素添加overflower属性方法，常用
    1
    .father {width: 98%; overflower: hidden;}

原理：必须定义width或zoom:1，同时不能定义height。使用overflower:hidden时，浏览器会自动检查浮动区域的高度。
优点：简单代码少
缺点：不能和position配合使用，因为超出部分会被隐藏

  1. 使用after伪元素
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div class="father clearfix"></div>
    .clearfix:after{      // 正常浏览器清除浮动
    	content:"";
    	display: block;
    	height: 0;
    	clear: both;
    	visibility: hidden;
    }
    .clearfix{           // IE7以下版本
    	*zoom: 1;
    }

优点：浏览器支持好，推荐使用

  1. 使用before,after双伪元素清除浮动
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div class="father clearfix"></div>
    .clearfix:before,clearfix:after {      // 正常浏览器清除浮动
    	content:"";
    	display: table; // 块级表格元素
    }
    .clearfix:after {
    	clear: both;
    }
    .clearfix {
    	*zoom: 1;
    }

优点：浏览器支持好，推荐使用

  1. 父级div手动定义height，解决了父级div无法自动获取到高度的问题。只适合高度固定的布局，不推荐使用。

3.定位补充

  1. 子绝父相
    绝对定位是相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
    子绝父相就是指子元素设置绝对定位，而父元素设置相对定位，然后设置子元素的top、left、right、bottom的值，我们就可以让子元素到达相应的位置。
  2. z-index叠放次序
    只有定位的盒子才能用这个属性。
    如果为正数，则离用户更近，为负数则表示离用户更远。

4.元素的显示与隐藏

1
2
3
4
5
6
div {display: none;} // 隐藏后不保留位置
div {display: block;} // 显示

div {visibility: inherit;}
div {visibility: visible;} // 显示
div {visibility: hidden;} // 隐藏后保留位置

5.溢出文字隐藏，带省略号

1
2
3
4
5
div {
	white-space: nowrap; // 强制一行显示 || normal，默认自动换行
	overflow: hidden;
	text-overflow: ellipsis; // 用...标记||clip,不显示省略标记
}

6.CSS Sprites精灵图

Css sprites是将多张零散的背景图片整合到一张背景图上，然后通过background-position来调整背景的位置；
确保使用该张精灵图的容器要比背景图片小才是OK的，不然很容易漏出其他的背景图片，所以尤其要控制好盒子的大小；
这样做的目的就是为了降低浏览器向服务器的请求次数，可以大大提高网页的加载速度。

7.字体图标

字体图标的本质是文字，可以随意改变颜色、大小、产生阴影、透明效果等，几乎支持所有浏览器。
使用流程：

  1. 下载兼容字体文件包到本地,推荐网址：icomoon字库，阿里icon font字库
  2. 解压下载包，取出font文件夹，放到相应路径

  3. 在样式里声明字体

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
    	@font-face {  /*声明字体  引用字体*/
    	  font-family: "icomoon";  /*我们自己起名字可以*/
    	  src:  url('fonts/icomoon.eot?7kkyc2');
    	  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    	    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    	    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    	    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
    	  font-style: normal;  /*倾斜字体正常*/
        }
    </style>

  4. 给盒子使用字体
    打开解压的文件里的demo.html，下载的字体信息都在里面，复制小方块

    1
    2
    3
    4
    5
    span::before {
    	content: "\e900";
    }
    或者：
    <span></span>

  5. 声明字体

    1
    2
    3
    span {
    	font-family: icomoon;
    }
补充
  1. 上传生成字体图标
    UI设计人员给我们svg格式的文件，我们需要上传生成字体图标，在icomoon字库网站，点击Import Icons，将本地的svg文件上传，
  2. 追加字体图标
    点击Import Icons，导入我们以前的selection.json文件