2.CSS

原文链接:https://github.com/helloyoucan/knowledge

CSS(层叠样式表)相关

1、BFC(块级格式化上下文)

是页面盒模型布局中的一种CSS渲染模型,相当于一个独立容器。

特点:

  • 垂直方向上的BFC,margin会重叠
  • bfc不与浮动元素重叠
  • 浮动元素会参与bfc高度计算
  • 独立的区域,里面与外面的元素互不影响

如何创建:

  • html根元素
  • float != none
  • position = absolute 或 fixed
  • display = inline-block 或 table-cell 或 table-caption 或 flex 或 inline-flex或gird或inline-grid
  • overflow != visible

主要作用:

  • 解决浮动元素造成父元素高度塌陷(清除浮动)
2、盒模型

box-sizing : content-box 或 border-box

标准模型 content-box 宽度= content

IE模型 border-box 宽度 = content + padding + border

3、多栏布局要点
  1. float
  2. flex
  3. grid
  4. position
  5. table-cell
4、GPU加速

使用3D变换的样式

translate3d
rotate3d
scale3d
translateZ

在 Chrome 和 Safari 中,使用 CSS 变换或动画时,可能会闪烁,解决办法:

.demo {
    -webkit-backface-visibility: hidden;//表示隐藏被旋转的背面
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000; //定义 3D 元素距视图的距离
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
}
5、水平垂直居中
  1. position:absolute + transform:translate
  2. inline-block +font-size:0 + text-align:center + line-height=height + vertical-align: middle
  3. display:grid + margin:auto
  4. display:flex + margin:auto
  5. display:flex + justify-content: center + align-item: center
6、自适应布局
  1. float + margin
  2. flex
  3. grid + grid-template-columns
  4. absolute
7、清除浮动
  1. 浮动元素下方空div设置 {clear:both;height:0;overflow:hidden;}

  2. 父元素浮动

  3. 父元素设为inline-block

  4. 父元素设为bfc

  5. 伪类

    .clearfix:after{
     content:"";
     clear:both;
     display:block;
     height:0;
     overflow:hidden;
     visibility:hidden;
    }
    .clearfix{
     zoom:1
    }
    
8、CSS选择器权重
权重 选择器
10000 !important
1000 内联样式
100 ID选择器
10 类、伪类、属性选择器
1 标签、伪元素选择器
0 通用选择器(*)、子选择器(>)、相邻选择器(+)、兄弟选择器(~)
9、层叠上下文

从最低到最高

  • background/border
  • z-index < 0
  • block块级水平盒子
  • float浮动盒子
  • inline/inline-block水平盒子
  • z-index:auto/z-index:0
  • z-index > 0
10、display:none vsvisibility:hidden
display:none visibility:hidden
不占据空间 元素空间保留
影响css3的transition过渡 不影响过渡效果
触发重绘和回流 触发重绘
节点和子孙元素不可见 子元素可设visibility:visible显示,因 visibility: hidden属性值具有继承性
11、flex

display:flex|inline-flex

  • 容器有两根轴,水平的主轴(main axis)和垂直的交叉轴(cross axis)
容器属性
  • flex-direction:row | row-reverse | column | column-reverse;(主轴方向:起点在左的水平|起点在右的水平|起点在上的垂直|起点在下的垂直)
  • flex-wrap: nowrap | wrap | wrap-reverse;(一条轴线放不下,如何换行:不换|换行,第一行在上|换行,第一行在下)
  • flex-flow:<flex-direction>|<flex-warp>;两个属性的缩写
  • justify-content: flex-start | flex-end | center | space-between | space-around;(项目在主轴对齐方式,与flex-direction的值有关,假设是row:左对齐 | 右对齐 | 居中 | 两端对齐,项目间隔相等|每个项目两则有相等的间隔,项目之间距离为间隔*2)
  • align-items: stretch | flex-start | flex-end | center | baselin;(交叉轴上对齐方式,与交叉轴方向有关,假设是从上到下:占满容器高度 | 起点对齐 |终点对齐 | 中点对齐 | 项目第一行文字基线对齐 )
  • align-content: stretch | flex-start | flex-end | center | space-bewtween | space-around;(多跟轴线的对齐方式:轴线占满整个交叉轴 | 交叉轴起点对齐|交叉轴终点对齐 | 交叉轴中点对齐 | 两端对齐,轴线之间间隔相等| 轴线两边有相等的间隔)
项目属性
  • order(项目排序顺序,越小越前,默认0)
  • flex-grow (项目放大比例,默认0,即剩余空间也不放大)
  • flex-shrink(缩小比例,默认1,,即空间不足将缩小项目)
  • flex-basis: auto |<number> ;(在分配多余空间之前,项目占据的主轴空间,浏览器根据这个属性计算主轴多余空间)
  • flexflex-grow, flex-shrinkflex-basis的简写,默认none,有两个快捷属性auto (1 1 auto) 和 none (0 0 auto))
  • align-self:auto | flex- start | flex-end | center | baseline | stretch;(单个项目的对齐方式,默认auto继承父元素的align-items,没父元素则为stretch)
12、grid

display:grid | inline-grid

设为网格布局以后,容器子元素(项目)的floatdisplay: inline-blockdisplay: table-cellvertical-aligncolumn-*等设置都将失效。

容器属性
  • grid-template-columns 列宽

    grid-template-rows 行高

    • repeat() 函数,简化重复的值

      grid-template-columns: repeat(3, 33.33%);
      grid-template-columns: repeat(2, 100px 20px 80px); //重复后面三个值的模式

    • auto-fill 关键字 每一行容纳尽可能多的单元格

      grid-template-columns: repeat(auto-fill, 100px);

    • fr关键字 项目的比例关系,可与绝对长度单位结合使用
      grid-template-columns: 150px 1fr 2fr;

    • minmax() 长度在这个范围,接受两参数,最小值和最大值

      grid-template-columns: 1fr 1fr minmax(100px, 1fr);

    • auto 关键字 浏览器自己决定长度

      grid-template-columns: 100px auto 100px;

    • 网格线的名称 使用方括号,指定每一根网格线的名字,方便以后的引用

      grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];

  • grid-row-gap 行间距

    grid-column-gap 列间距

    grid-gap:<grid-row-gap> <grid-column-gap>; 两个属性的缩写

  • grid-template-areas 定以区域,一个区域由单个或多个单元格组成

    • 多个单元格合并一个区域的写法:将9个单元格分成abc三个区域

      grid-template-areas: 'a a a'
                           'b b b'
                           'c c c';
      
    • 布局实例:顶部是页眉区域header,底部是页脚区域footer,中间部分则为mainsidebar

      grid-template-areas: "header header header"
                           "main main sidebar"
                           "footer footer footer";
      
    • 不需要利用的区域用点(“.”)表示:中间一列不属于任何区域

      grid-template-areas: 'a . c'
                           'd . f'
                           'g . i';
      
    • 注意,区域的命名会影响到网格线。每个区域的起始网格线,会自动命名为区域名-start,终止网格线自动命名为区域名-end。

      比如,区域名为header,则起始位置的水平网格线和垂直网格线叫做header-start,终止位置的水平网格线和垂直网格线叫做header-end。

  • grid-auto-flow:row|column|row dense|column dense;(容器子属性顺序:先行后列|先列后行|先行后列,出现空白则按行的顺序依次填满|先列后行,出现空白则按列的顺序依次填满)

  • justify-item:stretch | start | end | center ;(单元格内容水平位置:拉伸占满单元格宽度|对齐起始边缘|结束边缘|居中)

    align-items:stretch | start | end | center;(单元格内容垂直位置:拉伸占满单元格宽度|对齐起始边缘|结束边缘|居中)

    place-items: <align-items> <justify-items>;(两属性的缩写,忽略第二个值则与第一个相等)

  • justify-content 内容区域在容器里面的水平位置

    align-content 内容区域在容器里面的垂直位置

    place-content <align-content> <justify-content>

    • stretch 拉伸占据整个容器
    • start 起始边框
    • end 结束边框
    • center 内部居中
    • space-around 每个项目两则有相等的间隔
    • space-between 项目之间的间隔相等,项目与边框之间没间隔
    • space-evenly 项目之间间隔相等,项目与容器边框之间也是一样的间隔
  • 指定现有网格外部的项目(项目数量超出设定的网格个数),用来设置,浏览器自动创建的多余网格的列宽和行高

    grid-auto-colmuns

    grid-auto-rows

    写法与grid-template-columnsgrid-template-rows完全相同

  • grid-templategrid-template-columnsgrid-template-rowsgrid-template-areas这三个属性的合并简写形式)

    gridgrid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-auto-flow这六个属性的合并简写形式。)

项目属性
  • 指定项目的四个边框,分别定位在哪根网格线。(指定项目的位置)

    grid-column-start:<number>|网格线名称;(左边框所在的垂直网格线)
    grid-column-end:<number>|网格线名称;(右边框所在的垂直网格线)
    grid-row-start:<number>|网格线名称;(上边框所在的水平网格线)
    grid-row-end:<number>|网格线名称;(下边框所在的水平网格线)
    **grid-column **grid-column-start和grid-column-end的合并简写形式
    grid-row grid-row-start属性和grid-row-end的合并简写形式

  • grid-area 属性指定项目放在哪一个区域。

    grid-area: e;

    grid-area属性还可用作grid-row-startgrid-column-startgrid-row-endgrid-column-end的合并简写形式,直接指定项目的位置。
    grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
    grid-area: 1 / 1 / 3 / 3;

  • justify-self :stretch|start | end | center ;(单元格内容的水平位置:占满单元格宽度|对齐起始边缘|对齐结束边缘|单元格内部居中)

    align-self:stretch|start | end | center ;(单元格内容的垂直位置)

    place-self: <align-self> <justify-self>;

13、animation
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
  • animation-name #动画名称
  • animation-duration #动画执行时间(默认0)
  • animation-timing-function:linear | ease | ease-in | ease-out | ease-in-out |cubic-bezier(n,n,n,n); #动画如何完成一个周期
  • animation-delay:n | infinite #动画延迟开始秒数
  • animation-iteration-count #动画重复次数
  • animation-direction:normal | reverse(反向播放) | alternate(奇数次正向,偶数次反向) | alternate-reverse (奇数次反向,偶数次正向) |initial | inherit; #是否轮流反向播放动画
  • animation-fill-mode:none | forwards | backwards | both | initial | inherit; #规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
  • animation-play-state:paused(指定暂停动画) | running(指定正在运行的动画); #指定动画是否正在运行或已暂停。
  • initial #设置属性为其默认值。
  • inherit #从父元素继承属性
14、Retina屏幕1px边框
  1. 0.5px边框

    IOS7以下和Android设备不支持

    // 判断设备是否支持
    if (window.devicePixelRatio && devicePixelRatio >= 2) {
    var testElem = document.createElement('div');
    testElem.style.border = '.5px solid transparent';
    document.body.appendChild(testElem);
    if (testElem.offsetHeight == 1) {
    document.querySelector('html').classList.add('hairlines');
    }
    document.body.removeChild(testElem);
    }
    
    div {
     border: 1px solid #bbb;
    }
    .hairlines div {
     border-width: 0.5px;
    }
    
  2. border-image

  3. background-image

  4. 多背景渐变

    .background-gradient-1px {
        background:
        linear-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat,
        linear-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat,
        linear-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
        linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat;
    }
    /* 或者 */
    .background-gradient-1px{
        background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #c8c7cc), to(#c8c7cc)) left bottom repeat-x;
        background-size: 100% 1px;
    }
    
  5. box-shadow模拟边框

.box-shadow-1px {
 box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
  1. viewport + rem(通过设置对应viewport的rem基准值)

  2. 伪类 + transform:scale 实现

    .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;
    }
    
    15、移动端1px边框

    根据像素比,利用媒体查询和伪类实现

    /*边框一像素*/
    .border-1px::after {
      content: "";
      box-sizing: border-box;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border: 1px solid red;
    }
    
    /*设备像素比*/
    @media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min-resolution: 2dppx) {
        .border-bottom-1px::after, .border-top-1px::after {
          transform: scaleY(0.5);
        }  
       .border-left-1px::after, .border-right-1px::after {
           transform: scaleX(0.5);
        } 
       .border-1px::after {
              width: 200%;
              height: 200%;
              transform: scale(0.5);
              transform-origin: 0 0;
         }
    }
    
    /*设备像素比*/
    @media only screen and (-webkit-min-device-pixel-ratio: 3.0), only screen and (min-resolution: 3dppx) {
       .border-bottom-1px::after, .border-top-1px::after {
          transform: scaleY(0.333);
       } 
       .border-left-1px::after, .border-right-1px::after {
         transform: scaleX(0.333);
       } 
      .border-1px::after {
          width: 300%;
          height: 300%;
          transform: scale(0.333);
          transform-origin: 0 0;
      }
    }
    
16、多行文本溢出省略效果

单行

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

多行

{
    display:-webkit-box;
    -webkit-box-content:vertical;
    -webkit-line-clamp:3;
    overfolow:hidden;
}

兼容

兼容:
p{
    position: relative; 
    line-height: 20px;
    max-height: 40px;
    overflow: hidden;
}
p::after{
    content: "...";
    position: absolute; 
    bottom: 0; right: 0; 
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容

  • CSS Grid(网格) 布局(又称为 “Grid(网格)” ),是一个二维的基于网格的布局系统它的目标是完全改变...
    诺CIUM阅读 1,305评论 0 3
  • 上一篇,介绍了grid的浏览器兼容和重要的几个概念,接下来继续介绍grid的容器属性。 Grid(网格) 属性目录...
    codeTao阅读 2,015评论 0 1
  • 转载地址:https://www.cnblogs.com/xiaohuochai/p/7083153.html 前...
    One_Hund阅读 1,302评论 0 1
  • 一个创业者开始就想做比尔盖茨,学哲学的学生上来就想超过黑格尔,这种人将一事无成。关键词:目标远超能力。本质:心跳急...
    瘦朵朵快乐相伴阅读 716评论 0 0
  • 玩游戏到午夜十二点,碰巧遇见了许久未曾联系的亲友,一起做了成就。 我告诉他我和你分开的时候,他表示了赞同的态度,或...
    陈晏兮阅读 244评论 0 0