CSS知识点

1、未知宽高的元素实现水平垂直居中

方法一：flexbox布局

优点：方便
缺点：兼容性不好,IE支持很差

<style>
.parent4{
    
    display: flex;
    justify-content: center;
    align-items: center;

    width: 300px;
    height:300px;
    background: #FD0C70;
}
.parent4 .child{
    color:#fff;
}
</style>
<body>
   <div class="parent4">
        <div class="child">hello world</div>
    </div>
</body>
</html>

方法二：使用CSS3的transform + 绝对定位

优点：方便，支持webkit内核
缺点：transform兼容性差，IE9以下不支持

<style>
.parent3{
    position: relative;
    height:300px;
    width: 300px;
    background: #FD0C70;
}
.parent3 .child{
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
}
</style>
<body>
<div class="parent3">
        <div class="child">hello world</div>
    </div>
</body>

方法三：使用display: table-cell

优势：父元素可以动态改变高度。
劣势：table属性容易造成多次reflow,IE8以下不支持

<style>
.parent1{
    display: table;
    height:300px;
    width: 300px;
    background-color: #FD0C70;
}
.parent1 .child{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 16px;
}
</style>
<body>
    <div class="parent1">
        <div class="child">hello world-1</div>
    </div>
</body>

方法四：利用空元素或伪类

优点：兼容性好
缺点：多出来个空元素、麻烦

<style>
   .wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #92b922;
	}
	.test {
	    background: #de3168;
	    display: inline-block;
	    color: #fff;
	    padding: 20px;
	}
	.wrap:after {
	    display: inline-block;
	    content: '';
	    width: 0px;
	    height: 100%;
	    vertical-align: middle;
	}
</style>
<body>
   <div class="wrap">
        <div class="test">
            水平垂直居中了吧<br>
            两行文字哦
        </div>
    </div>
</body>

2、position 几个属性的作用

relative，absolute，fixed，static

  • static：默认位置。一般情况下，不需要特别去声明它，但有时候遇到继承的情况，可以用Position:static取消继承，即还原元素定位的默认值。设置为 static 的元素，它始终会处于页面流给予的位置(static 元素会忽略任何 top、 bottom、left 或 right 声明)。一般不常用。

  • relative:相对定位。 相对定位是相对于元素默认的位置的定位，它偏移的 top，right，bottom，left 的值都以它原来的位置为基准偏移，而不管其他元素会怎么 样。注意： relative 移动后的元素在原来的位置仍占据空间。

  • absolute:绝对定位。设置为 absolute 的元素，如果它的父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，它就会依据父容器的位置进行偏移。如果其父容器没有设置 position 属性，偏移是以 body 为基准。注意：设置 absolute 属性的元素在标准流中不占位置。

  • fixed:固定定位。 设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以 body 为依据的。 注意：设置 fixed 属性的元素在标准流中不占位置。

sticky

position新增的属性“sticky”：
设置为sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

sticky属性的特点：

  • 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
  • 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
  • 这个属性的兼容性不是很好，它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。

3、浮动与清除浮动

float属性的取值：

  • left：元素向左浮动。
  • right：元素向右浮动。
  • none：默认值。元素不浮动，并会显示在其在文本中出现的位置。

浮动的特性：

  • 浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。
  • 不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height，因此float常常用于制作横向配列的菜单，可以设置大小并且横向排列。

浮动元素的展示在不同情况下会有不同的规则：

  • 浮动元素在浮动的时候，其margin不会超过包含块的padding。PS：如果想要元素超出，可以设置margin属性
  • 如果两个元素一个向左浮动，一个向右浮动，左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。
  • 如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象。

浮动元素的延伸性

  • 元素被设置成浮动后，该元素会进行延伸进而包含其所有浮动的子元素

浮动元素超出包含块的padding

  • 1）将浮动元素的margin-left设置成负数。
  • 2）将浮动元素的宽度设置大于父级元素。

重叠问题

  • 行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之上
  • 块级元素与浮动元素发生重叠时，边框和背景会显示在浮动元素之下，内容会显示在浮动元素之上

clear属性

clear属性：确保当前元素的左右两侧不会有浮动元素。
clear只对元素本身的布局起作用。 取值：left、right、both

父元素高度塌陷问题

为什么要清除浮动?解决父元素高度塌陷问题：一个块级元素如果没有设置height，其height是由子元素撑开的。对子元素使用了浮动之后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以撑开其高度，这样父级元素的height就会被忽略，这就是所谓的高度塌陷。

清除浮动的方法

  • 1）给包含块设置高度
    优点：代码简洁
    缺点：高度被固定死了，是适合内容固定不变的模块。
  • 2）增加额外的空元素 —— 在包含块的内容中增加一个（作为最后一个子元素）
    优点：简单直接，初学者常常使用的方法，也易于理解
    缺点：增加额外的无意义标签，不利于语义化，每次清除都要添加额外的空标签，造成浪费
  • 3）为包含块添加overflow:hidden
    优点：代码量少，没有额外的标签
    缺点：如果子元素超出父元素的范围，会造成超出的部分被隐藏
  • 4）父级div定义 伪类:after 和 zoom
.clearfix:after{
    content:'.';
    display:block;
    height:0;
    clear:both;
    visibility: hidden;
}
.clearfix {zoom:1;}

  优点：结构和语义化完全正确,代码量也适中，可重复利用率（建议定义公共类） 
  缺点：代码不是非常简洁（极力推荐使用）

4. BFC相关知识

定义：BFC(Block formatting context)——"块级格式化上下文"。它是一个独立的渲染区域，规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。

BFC布局规则：BFC 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

  • BFC这个元素的垂直方向的边距会发生重叠，垂直方向的距离由margin决定，取最大值
  • BFC 的区域不会与浮动盒子重叠（清除浮动原理）。
  • 计算 BFC 的高度时，浮动元素也参与计算。

哪些元素会生成 BFC?

  • 根元素
  • float 属性不为 none
  • position 为 absolute 或 fixed
  • display 为 inline-block， table-cell， table-caption， flex， inline-flex
  • overflow 不为 visible

5. box-sizing

设置CSS盒模型为标准模型或IE模型。

  • content-box，默认值，只计算内容的宽度，border和padding不计算入width之内
  • padding-box，padding计算入宽度内
  • border-box，border和padding计算入宽度之内

6. px，em，rem 的区别

  • px 像素(Pixel)。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算 机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。
  • em ,相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置， 则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
  • rem 是 CSS3 新增的一个相对单位，使用 rem 为元素设定字体大小时，仍然是相对大小， 但相对的只是 HTML 根元素。

CSS 引入的方式有四种：内联(元素上的style属性)、内嵌(style标签)、外链(link)、导入(@import)

  • link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
  • link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
  • link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
  • link支持使用Javascript控制DOM去改变样式；而@import不支持。

8. 流式布局与响应式布局的区别

流式布局 使用非固定像素来定义网页内容，即百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
响应式开发 利用CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。

  • 超小屏幕(移动设备) 768px 以下
  • 小屏设备 768px-992px
  • 中等屏幕 992px-1200px
  • 宽屏设备 1200px 以上
- 流式布局 响应式开发
开发方式 移动Web开发+PC开发 响应式开发
应用场景 一般在已经有PC端网站，开发移动端的时候只需要单独开发移动端 针对一些新建的网站，要求适配移动端，就设计一套页面兼容各种终端
开发 正对性强，开发效率 兼容各种终端，效率低
适配 只适配移动设备，pad上体验相对较差 可以适配各种终端
效率 简洁，加载快 代码相对复杂，加载慢

9. 渐进增强和优雅降级

  • 优雅降级一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
  • 渐进增强针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

10. CSS隐藏元素的几种方式及区别

display:none

  • 元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，它会导致浏览器的重排和重绘。
  • 不会触发其点击事件

visibility:hidden

  • 元素在页面消失后，其占据的空间依旧会保留着，它只会导致浏览器重绘而不会重排。
  • 无法触发其点击事件
  • 适用于元素隐藏后不希望页面布局会发生变化的场景

opacity:0

  • 将元素的透明度设置为0后，在用户眼中，元素也是隐藏的
  • 元素隐藏后依旧占据着空间，设置透明度为0后，元素只是隐身了，它依旧存在页面中。
  • 可以触发点击事件

设置height，width等盒模型属性为0

  • 将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素
  • 无法触发其点击事件

其他脑洞方法

  • 设置元素的position与left，top，bottom，right等，将元素移出至屏幕外
  • 设置元素的position与z-index，将z-index设置成尽量小的负数

11. 消除图片底部间隙的方法

  • 图片块状化 - 无基线对齐：img { display: block; }
  • 图片底线对齐：img { vertical-align: bottom; }
  • 行高足够小 - 基线位置上移：.box { line-height: 0; }

12. "nth-child"和"nth-of-type"的区别

nth-child选择的是父元素的子元素，这个子元素并没有指定确切类型，同时满足两个条件时方能有效果：其一是子元素，其二是子元素刚好处在那个位置；
nth-of-type选择的是某父元素的子元素，而且这个子元素是指定类型。

13. CSS中的颜色体系有哪些？

https://www.cnblogs.com/coco1s/p/5622534.html

14. CSS流体布局下的宽度分离

“宽度分离”原则，就是CSS中的width属性不与影响宽度的 pading/border（有时候包括margin）属性共存，width 独立占用一层标签，而padding、border、margin 利用流动性在内部自适应呈现。

.father { width:102px; }
.son {
    border:1px solid;
    padding:20px;
}

15. 基于伪元素的图片内容生成技术

需求：图片还没加载时就把 alt 信息呈现出来。
https://www.jianshu.com/p/28db1ce6686e

img::after{
    /* 生成 alt 信息 */
    content: attr(alt);
    /* 尺寸和定位 */
    postion:absolute; bottom: 0;
    width:100%;
    background-color:rgba(0,0,0,.5);
    transform: translateY(100%);
    transition: transform .2s;
}
img:hover::after{
    transform: translateY(0);
}

只要JavaScript脚本为标签添加上src属性后，原本设置的:before和:after伪元素将全部失效，取而代之的是加载完成的图片信息

16. 实现hover图片变成另外一张图片

img:hover{
    content: url(laugh-tear.png);
}

content 改变的仅仅是视觉呈现，当我们鼠标右键或其他形式保存这张图片时，所保存的还是原来 src 对应的图片。这种方法还可以用在官网标志上。

17. content换行符与打点loading效果

//html代码
正在加载中<dot>...</dot>

//CSS代码

dot {
    display: inline-block; 
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}

dot::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
}
@keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
}

18. margin:auto

margin:auto的填充规则：

  • 如果一侧定值，一侧auto，则 auto 为剩余空间大小
  • 如果两侧均是 auto，则平分剩余空间

块级元素垂直方向居中：

    1. 使用 writing-mode 改变文档流方向
.father{ 
    height200px; 
    writing-mode:vertical-lr; 
} 
.son{ 
    height:100px;
    margin:auto; 
}
    1. 绝对定位下的margin:auto居中
.father{
    width:300px; 
    height150px;
    position: relative;
}
.son{
    position:absolute;
    top:0; right:0; bottom:0; left:0;
    width:200px;
    height:100px;
    margin:auto;
}

19. border-width支持的关键字

  • thin：薄薄的，等同于1px
  • medium：（默认值）薄厚均匀，等同于3px
  • thick：厚厚的，等同于4px

20. border-color和color

border-color 默认颜色就是color色值，就是当没有指定border-color颜色值的时候，会使用当前元素的color计算值作为边框色

21. transition和animation的区别是什么？

过渡属性transition可以在一定的事件内实现元素的状态过渡为最终状态，用于模拟一种过渡动画效果，但是功能有限，只能用于制作简单的动画效果；
动画属性animation可以制作类似Flash动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画。

posted @ 2019-08-10 10:23  sunidol  阅读(236)  评论(0)  编辑  收藏  举报