CSS 总结

1. 新特性

  • transition 过渡
  • transform 移动、缩放、旋转、倾斜
  • animate 动画
  • gradient 渐变
  • shadow 阴影
  • border-radius 圆角

2. 选择器

  • 基础
    • 通配符选择器 *
    • ID选择器 id
    • 类选择器 class
    • 属性选择器 []
    • 标签选择器
  • 关系
    • 相邻选择器 +
    • 兄弟选择器 ~
    • 子代选择器 >
    • 后代选择器 空格
    • 交集选择器 .
    • 并集选择器 ,
  • 辅助
    • 伪类选择器 :
    • 伪元素选择器 ::
  • 可继承:字体样式、颜色、大小
  • 不可继承:宽高、内外边距、边框

3. 元素划分

  • 行内元素
    • 定义:在一行内显示,宽高靠内容撑开,超出屏幕自动换行。宽高、外边距上下不可设置。
    • span、em、i、s、q、u、a、strong、small、sup、sub
  • 块级元素
    • 定义:占据一行,可设置宽高,内外边距,边框。
    • div、p、h1-h6、ul、li、ol、dd、dt、dl、table、form、pre、header、footer、aside、section
  • 行内块
    • input、button、img
  • 空元素
    • br、hr、link、meta

4. 渐进增强/优雅降级

  • 渐进增强
    • 页面开发过程中,针对低版本浏览器构建页面,满足基本功能,再针对高版本浏览器进行效果、交互、追加各种功能达到更好的用户体验。
    • 低版本功能为基础,向上兼容。
    • 初期投入资金大、开发周期长、维护资金小、长期来说降低开发成本。
  • 优雅降级
    • 页面开发过程中,针对高版本浏览器构建页面,先完善所有功能,再针对低版本浏览器进行修复兼容、保证低版本浏览器也有基本功能即可。
    • 高版本功能为基础,向下兼容。
    • 开发周期短,节约成本。

5. link 和 @import

  • 类型区别
    • link是html标签,用于加载样式文件
    • @import 是css提供的方式
  • 加载顺序
    • 页面加载,link引用的css同时加载
    • 页面加载完毕,@import引用的css才加载,会导致页面刚开始没样式,网速慢特别明显。
  • dom区别
    • link可以通过js操作dom
    • @import 没有dom

6. Css 优先级/权重

  • 优先级
    • !important 无穷大
    • 内联样式 1000
    • Id选择器 100
    • 类选择器&属性选择器&伪类 10
    • 标签&伪元素&关系选择器 1
    • 通配符 0
  • 特性
    • 继承没权重
    • 层级相同,则向后比较
    • 层级不同,层级高的权重大

7. text 文本

  • color 颜色
  • text-align 文本水平对齐方式
    • left、right、center
  • text-decoration 文本修饰线
    • none 无/underline 下划线/overline 上划线/line-through 删除线
  • text-transform 大小写转换
    • capitalize 英文首字母大写/uppercase 小写变大写/lowercase 大写变小写
  • text-indent 首行缩进
    • px、em、rem
  • text-overflow 文本溢出
    • ellipsis 省略
  • line-height 行高
  • letter-spacing 文本间距
  • word-spacing 单词间距
  • word-break 溢出强制换行 Firefox
    • break-all
  • word-wrap 溢出强制换行 IE
    • break-word
  • white-space 文本不换行
    • nowrap

8. font 字体

  • font-style 字体样式
    • normal 正常/italic 斜体
  • font-weight 字体粗细
    • normal 正常/bold 加粗
  • font-size 字体大小
  • font-family 字体
  • font 包含以上所有属性,简写
    • 样式 粗细 大小 字体
    • 空格隔开,并且有序

9. box 盒子模型

  • 盒子类型
    • IE 盒子模型 border-box
      • 块级宽度:width + margin
    • w3c 盒子模型 content-box
      • 块级宽度:width + padding + border + margin
  • 盒子方法
    • box-sizing
      • border-box
      • content-box

10. bfc 格式化上下文

  • 定义:指元素拥有独立渲染区域,规定内元素块级盒子如何布局,使内外元素互不影响。
  • 规则
    • 包含浮动元素
    • 所有块级元素向父元素左边界靠拢
  • 触发
    • display:inline-block、table-cell
    • position: absolute、fixed
    • overflow 不为 visible
    • float 不为 none
  • 适应场景
    • 解决垂直外边距重叠
    • 解决浮动元素塌陷
    • 解决文字环绕图片,文字触发bfc即可

11. position 定位

  • relative 相对定位,相对自身定位【不脱离文档】
  • absolute 绝对定位,相对于最近的已定位的祖先元素定位【脱离文档】
  • fixed 固定定位,相对浏览器定位【脱离文档】
  • static 默认,标准文档流【不脱离文档】
  • inherit 继承,继承父元素定位属性值

12. display 显示

  • inline 行内元素
    • 特性:一行内显示,溢出换行。宽高、外边距上下不可设置。
  • block 块级元素
    • 特性:独占一行,可设置宽高、内外边距、边框。
  • Inline-block 行内块元素
    • 特性:一行内显示、可设置宽高、内外边距、边框
  • none 隐藏

13. float 浮动

  • 属性
    • left 左浮动
    • right 有浮动
    • none 不浮动
  • 问题
    • 子元素设置浮动,会出现父元素盒子塌陷问题。使用清浮动
  • 清浮动
    • overflow:hidden; 触发bfc实现清浮动
    • clear:both; 新增div尾标签添加样式,清浮动
    • clearfix:after; 伪元素清浮动

14. overflow 溢出

  • visible 默认值,内元素会溢出盒子之外
  • hidden 内元素溢出盒子隐藏
  • scroll 内容元素溢出盒子,出现滚动条
  • auto 内元素溢出部分出现滚动条
  • Inherit 继承父元素的overflow属性

15. rem 和 em 区别

  • 定位:可扩展单位,由浏览器转为 px 值
  • rem 根据页面的 html 根节点的字体大小,计算相应的 px 值
  • em 根据父元素的字体大小,计算相应的 px 值

rem 可用于移动端适配,但最新的 viewport 更适合移动端适配。

16. flex 弹性盒子

  • 容器属性
    • flex-derection切换主轴方向,默认水平排列
    • flex-wrap 是否换行,默认不换行
    • flex-flow:flex-drection(row) flex-wrap(nowrap)
    • justify-content 主轴对齐方式
    • align-items 交叉轴对齐方式
    • align-content 交叉轴多根轴线对齐方式,只有一条则不起作用
  • 项目属性
    • order 排序,数值越小越靠前,默认 0
    • flex-grow 项目放大属性,默认 0 (存在剩余空间,项目拉伸填充)
    • flex-shrink 项目缩小属性,默认 1 (空间不足,项目缩小)
    • flex-basis 主轴分配空间前,先占据主轴空间。默认 auto
    • flex: flex-grow(0) flex-shrink(1) flex-basis(auto)
    • align-self 单个项目设置不同对齐方式,flex-start/flex-end

17. grid 网格布局

参考阮一峰文章:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

18. column 多列布局

  • column-count 分割列数
  • column-fill 填充列数
  • column-gap 列与列的间隔
  • column-rule 所有-*简写
  • column-span 元素跨越多少
  • column-width 指定宽度
  • colums:column-width 和 column-count 简写

19. 常见布局

1. 垂直水平居中(5种)

  • 定位
<!-- 1. 定位,已知宽度  position + margin -->
<style>
    .container{
        position: relative;
        height: 100px;
        width: 100px;
        border: 1px solid #cccccc;
    }
    .content{
        height: 50px;
        width: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -25px;
        margin-top: -25px;
        background-color: #535FFF;
    }
</style>
<div class="container">
    <div class="content"></div>
</div>
<!-- 2. 定位,未知宽度  position + margin -->
<style>
    .container{
        position: relative;
        height: 100px;
        width: 100px;
        border: 1px solid #cccccc;
    }
    .content{
        height: 50px;
        width: 50px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        background-color: #535FFF;
    }
</style>
<div class="container">
    <div class="content"></div>
</div>
<!-- 3. 定位,未知宽度  position + transform -->
<style>
    .container{
        position: relative;
        height: 100px;
        width: 100px;
        border: 1px solid #cccccc;
    }
    .content{
        height: 50px;
        width: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #535FFF;
    }
</style>
<div class="container">
    <div class="content"></div>
</div>
  • flex
<!-- 4. flex 弹性盒子,未知宽度 flex + margin  -->
<style>
    .container{
        display: flex;
        height: 100px;
        width: 100px;
        border: 1px solid #cccccc;
    }
    .content{
        margin: auto;
        height: 50px;
        width: 50px;
        background-color: #535FFF;
    }
</style>
<div class="container">
    <div class="content"></div>
</div>
<!-- 5. flex 弹性盒子,未知宽度 -->
<style>
    .container{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100px;
        width: 100px;
        border: 1px solid #cccccc;
    }
    .content{
        height: 50px;
        width: 50px;
        background-color: #535FFF;
    }
</style>
<div class="container">
    <div class="content"></div>
</div>

2. 两栏(2种)

<!-- 1. 浮动, float + overflow -->
<style>
    .container{
      overflow: hidden; /* 清浮动 */
    }
    .content,
    .aside-right{
        height: 50px;
    }
    .content{
        width: 50px;
        float: left;
        background-color: #535FFF;
    }
    .aside-right{
        overflow: hidden; /* 触发bfc 使其与浮动元素互不影响*/
          background-color: #A0D28E;
    }
</style>
<div class="container">
    <div class="content"></div>
    <div class="aside-right"></div>
</div>
<!-- 2. flex 弹性盒子 flex-basis + flex-grow -->
<style>
    .container{
        display: flex;
        height: 50px;

    }
    .content{
        flex-basis: 50px;
        background-color: #535FFF;
    }
    .aside-right{
        flex: auto;
        background-color: #A0D28E;
    }
</style>
<div class="container">
    <div class="content"></div>
    <div class="aside-right"></div>
</div>

3. 三栏(4种)

<!-- 1. 定位,position + margin -->
<style>
    .container{
        position: relative;
    }
    .content{
        background-color: #535FFF;
        margin: 0 50px;
    }
    .aside-left,
    .aside-right{
        position: absolute;
        top: 0;
        width: 50px;
        background-color: #A0D28E;
    }
    .aside-left{
        left: 0;
    }
    .aside-right{
        right: 0;
    }
</style>
<div class="container">
    <div class="aside-left">left</div>
    <div class="content">content</div>
    <div class="aside-right">right</div>
</div>
<!-- 2. 浮动,flex + overflow -->
<style>
    .container{
      overflow:hidden; /* 清浮动 */
    }
    .content{
        overflow: hidden;
        background-color: #535FFF;
    }
    .aside-left,
    .aside-right{
        background-color: #A0D28E;
    }
    .aside-left{
        float: left;
    }
    .aside-right{
        float: right;
    }
</style>
<div class="container">
    <div class="aside-left">left</div>
    <div class="aside-right">right</div>
    <div class="content">content</div>
</div>
<!-- 3. 浮动,flex + margin -->
<style>
    .container{
        overflow:hidden; /* 清浮动 */
    }
    .content{
        margin: 0 50px;
        background-color: #535FFF;
    }
    .aside-left,
    .aside-right{
        width: 50px;
        background-color: #A0D28E;
    }
    .aside-left{
        float: left;
    }
    .aside-right{
        float: right;
    }
</style>
<div class="container">
    <div class="aside-left">left</div>
    <div class="aside-right">right</div>
    <div class="content">content</div>
</div>
<!-- 4. flex弹性盒子,flex-grow + flex-basis -->
<style>
    .container{
        display: flex;
        height: 50px;
    }
    .content{
        background-color: #535FFF;
        flex: auto;
    }
    .aside-left,
    .aside-right{
        flex-basis: 50px;
        background-color: #A0D28E;
    }
</style>
<div class="container">
    <div class="aside-left"></div>
    <div class="content"></div>
    <div class="aside-right"></div>
</div>

4. 圣杯

<!-- 圣杯,float + margin + position-->
<style>
    .container{
        overflow:hidden; /* 清浮动 */
        padding: 0 50px;
    }
    .content{
        width: 100%;
        background-color: #535FFF;
    }
    .content,
    .aside-left,
    .aside-right{
        float: left;
    }
    .aside-left,
    .aside-right{
        width: 50px;
        background-color: #A0D28E;
    }
    .aside-left{
        position: relative;
        left: -50px;
        margin-left: -100%;
    }
    .aside-right{
        margin-right: -100%;
    }
</style>
<div class="container">
    <div class="content">content</div>
    <div class="aside-left">left</div>
    <div class="aside-right">right</div>
</div>

5. 双飞翼

<!-- 双飞翼,是解决圣杯布局错乱问题,圣杯升级版!,float + margin -->
<style>
    .container{
        overflow:hidden; /* 清浮动 */
    }
    .content,
    .aside-left,
    .aside-right{
        float: left;
    }
    .content{
        width: 100%;
    }
    .inner{
        margin: 0 50px;
        background-color: #535FFF;
    }
    .aside-left,
    .aside-right{
        width: 50px;
        background-color: #A0D28E;
    }
    .aside-left{
        margin-left: -100%;
    }
    .aside-right{
        margin-left: -50px;
    }
</style>
<div class="container">
    <div class="content">
        <div class="inner">inner</div>
    </div>
    <div class="aside-left">left</div>
    <div class="aside-right">right</div>
</div>

6. 黏连布局

<!-- 黏连布局,min-height + padding + margin -->
<style>
    *{padding: 0;margin: 0;}
    html,body{height: 100%;width: 100%;}
    .container{
        min-height: 100%;
    }
    .content{
        padding-bottom: 50px;
    }
    .footer{
        height: 50px;
        margin-top: -50px;
        background-color: #A0D28E;
    }
</style>
<div class="container">
    <div class="content">
            content <br>
            content <br>
    </div>
</div>
<div class="footer"></div>

20. 1px边框问题

  • 盒子阴影
.box-shadow-1px {
  box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
  • 伪类 + transform
.scale-1px{
        position: relative;
        border:none;
    }
.scale-1px:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

最好判断下是否 retina 屏

if(window.devicePixelRatio && devicePixelRatio >= 2){
  document.querySelector('ul').className = 'scale-1px';
}
  • 万金油 1px 生成
@mixin thinBorder($directionMaps: bottom, $color: #ccc, $radius:(0, 0, 0, 0), $position: after)

$directionMaps: 是个list类型可以传入多个方向, 也就是可以生成多个防线边框, 默认值为bottom, 你可以根据需要传入(top, left, bottom, right) 4个方向;

$color: 边框的颜色, 默认#ccc;

$radius: 圆角半径, 默认0;

$position是一个高级设置, 一般都不需要改动, 由于细边框的实现使用了css的伪类, 所以为了规避可能出现的样式冲突, 我们可以自己指定使用:after还是:before, 默认after;

@mixin thinBorder($directionMaps: bottom, $color: #ccc, $radius:(0, 0, 0, 0), $position: after) {
    // 是否只有一个方向
    $isOnlyOneDir: string==type-of($directionMaps);

    @if ($isOnlyOneDir) {
        $directionMaps: ($directionMaps);
    }

    @each $directionMap in $directionMaps {
        border-#{$directionMap}: 1px solid $color;
    }

    // 判断圆角是list还是number
    @if(list==type-of($radius)) {
        border-radius: nth($radius, 1) nth($radius, 2) nth($radius, 3) nth($radius, 4);
    }

    @else {
        border-radius: $radius;
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        & {
            position: relative;

            // 删除1像素密度比下的边框
            @each $directionMap in $directionMaps {
                border-#{$directionMap}: none;
            }
        }

        &:#{$position} {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 200%;
            height: 200%;
            transform: scale(0.5);
            box-sizing: border-box;
            padding: 1px;
            transform-origin: 0 0;
            pointer-events: none;
            border: 0 solid $color;

            @each $directionMap in $directionMaps {
                border-#{$directionMap}-width: 1px;
            }

            // 判断圆角是list还是number
            @if(list==type-of($radius)) {
                border-radius: nth($radius, 1)*2 nth($radius, 2)*2 nth($radius, 3)*2 nth($radius, 4)*2;
            }

            @else {
                border-radius: $radius*2;
            }

        }
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 3) {
        &:#{$position} {

            // 判断圆角是list还是number
            @if(list==type-of($radius)) {
                border-radius: nth($radius, 1)*3 nth($radius, 2)*3 nth($radius, 3)*3 nth($radius, 4)*3;
            }

            @else {
                border-radius: $radius*3;
            }

            width: 300%;
            height: 300%;
            transform: scale(0.3333);
        }
    }
}

21. 文本溢出隐藏

单行文本

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

多行文本

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

22. Sass/less/styles 区别

  • 变量
    • sass 使用 $
    • less 使用 @
    • styles 没限定,变量值之间要有 = 号

我就用 sass ,其它的我不管。。。mmp

23. 移动端适配

留言

暂无评论

我要发表看法