Dean Front-end Dev Engineer

CSS 一些细节总结

2018-02-14
HTML&CSS

inline-block

inline-block元素常用于让一些块横着排列。经常会碰到块与块之间产生空白符的问题。这时可以通过设置父元素 font-size:0；再在子元素上设置需要的 font-size；

inline-block 元素并不像 block 那样顶部对齐，它们默认是按照父元素的基线对齐的。

需要的时候，可以通过 vertical-align 来设置 inline-block 的垂直方向的对齐方式。vertical-align 的上中下是相对于父元素的基线而言的，不是相对父元素而言的。

外边距合并

只有普通文档流中的 block 元素的垂直 margin 才会合并，其它情况不会合并。

一个 block 元素的第 1 个子 block 元素的 margin-top，会与父元素合并。因此要设置第一个块元素离父元素顶部的距离时，可以在父元素设置 padding，或把这个子元素设置为浮动，此时要在父元素设置伪类清除浮动。或将 block 设置为 inline-block。

清除浮动

通常用伪类来清除浮动

.cleanfloat:after{clear:both;  display:block;  content='';  visibility:none; }

position

static relative absolute fixed sticky

**sticky **这个值平时接触比较少。正如其字面意思，这是一个粘性定位。当距离视口顶部或左边末达到top 和 left 的设定值时，会表现为 relative；当在滚动状态下达到 top，left 设定值，就会表现为相对其父元素 fixed。

父元素，设置了 relative，absolute，fixed。任一个，子元素设置定位时，都会根据父元素进行定位。而不仅仅是 relative;

当元素设置了 fixed，则会跳出父元素，相对于页面定位。

z-index

z-index，仅能在定位元素上奏效，即设置了 relative、absolute、fixed、sticky 的元素。

本来网页的内容是相当于在一个平面上的。当某个定位元素设置了 z-index:1;就会比其它所有没设置 z-index 的同级元素更高。

不过，这个不会违背本来的逻辑结构，即父元素无论怎么设置也不会把子元素盖住。而子元素设置的z-index是相对于父元素而言的，不是绝对的层。

例如 A，B 是同级元素。A 有一个子元素 N，A 的 z-index:10; B 的 z-index:11;此时无论怎么设置 N 元素，也不会高于 B。

动画

所有CSS动画都是通过 transition，transform，animation，@keyframes 来实现的。canvas 另算。

transform 可以实现各种位移 translate、旋转 rotate、倾斜 skew、比例 scale

transition 则用于简单的往返动画，常用于hover渐变

**animation **结合 **@keyframes **使用，可以实现 transition 的一切效果。一般用于 transition 没办法做到的事。

注：animation 有个控制动作暂停，和继续的属性可用。

animation-play-state:paused/runing；

设置文字不可选择

-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;

###伪元素

伪元素都是在容器内进行渲染的。

input，img，iframe 等元素都不能包含其他元素，所以不能通过伪元素插入内容。

nth-child 和 nth-of-type

p:nth-child(2)：选择属于其父元素的第 2 个且为 p 的子元素

p:nth-of-type(2)：选择属于其父元素的第 2 个 p 子元素，不会计算其它元素

元素居中

/*一般div*/
div{
    margin: 0 auto;
}

/*绝对定位div*/
div{
    position: relative;
    width: 200px;
    height: 200px;
    /*子元素宽高不确定*/
    >div{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    /*子元素宽高确定*/
    >div{
        position:absolute;
        width: 100px;
        height: 100px;
        left: 50%;
        top: 50%;
        margin-top: -50px;
        margin-left: -50px;
    }
}

/*flex*/
div{
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    >div{
        
    }
}

单词分割

英文单词过长超出边界时，并不会自动换行。需要如下设置。

p{
    word-wrap: break-word;
}

百分比

  • 在子元素中设置 width:50%;height:50%; ，是相对父元素的 content 的宽度来计算的。
  • 在子元素中用百分比设置 padding: 10%; margin:10% 都是是相对父元素的 content 的宽度来计算的。
  • border 不能设置百分比

高度自适应 Div

一个div 有两个子 div 其中一个高度为100px; 另一个高度自适应；

div{
    position: relative;
    width:500px;
    height: 100%;
    div:firstchild{
        height: 100px;
    }
    div:last-child{
        position: absolute;
        top: 100px;
        bottom: 0;
        left: 0;
    }
}

CSS Sprites

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。

响应式设计

响应式设计就是一个网站能够兼容多个终端，基本上就是通过 @media 来判断终端宽度，然后调整成相对应的样式。

页面头部必须有meta 声明 viewport

    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    // width    设置viewport宽度，为一个正整数，或字符串‘device-width’
    // device-width  设备宽度
    // height   设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
    // initial-scale    默认缩放比例（初始缩放比例），为一个数字，可以带小数
    // minimum-scale    允许用户最小缩放比例，为一个数字，可以带小数
    // maximum-scale    允许用户最大缩放比例，为一个数字，可以带小数
    // user-scalable    是否允许手动缩放

###字体

    @ 宋体      SimSun
    @ 黑体      SimHei
    @ 微信雅黑   Microsoft Yahei
    @ 微软正黑体 Microsoft JhengHei
    @ 新宋体    NSimSun
    @ 新细明体  MingLiU
    @ 细明体    MingLiU
    @ 标楷体    DFKai-SB
    @ 仿宋     FangSong
    @ 楷体     KaiTi
    @ 仿宋_GB2312  FangSong_GB2312
    @ 楷体_GB2312  KaiTi_GB2312  
    @
    @ 说明：中文字体多数使用宋体、雅黑，英文用Helvetica
    
    body { font-family: Microsoft Yahei,SimSun,Helvetica; }

可能用到的 meta 标签

<!-- 设置缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
<meta name="format-detection"content="telephone=no, email=no" />

其他meta标签
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

消除transition闪屏

    .css {
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
    }
    过渡动画（在没有启动硬件加速的情况下）会出现抖动的现象， 以上的 解决方案只是改变 视角 来启动硬件加速的一种方式；
    启动硬件加速的 另外一种方式： 
        .css {
            -webkit-transform: translate3d(0,0,0);
            -moz-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }
    
    启动硬件加速
    最常用的方式：translate3d、translateZ、transform

上一篇 PHP 入门

下一篇 Flex 弹性布局

Comments

Content