web前端面试题之肉(css)

CSS复习


HTML 复习

HTML版本

  • HTML4/4.01(SGML) 超级xml(可扩展标记语言)
  • XHTML(XML) 要求严格,所有的标签、属性小写,属性必须要有值
  • HTML5
HTML4 XHTML HTML5
标签允许不结束 标签必须结束 标签允许不结束
属性不用带引号 属性必须带引号 属性不用带引号
标签属性可大写 标签属性必须小写且有值 标签属性可大写
Boolean属性可省略值 Boolean属性必须写值 Boolean属性可省略值

w3c的html文档出错验证网址:validator.w3.org

w3c的html5文档: https://www.w3.org/TR/html5/dom.html

html元素嵌套关系

  • 块级元素可以包含行内元素
  • 块级元素不一定能包含块级元素
  • “行内元素一般不能包含块级元素”

H4嵌套规则:Allowed nesting of elements in HTML 4 (and XHTML 1.0)

H5 嵌套规则:Text-level semantics

H5 嵌套原则主要看

  • Categories(Categories 是该元素本身的分类)
  • Content Model(Content model 规定了合法的元素的内容(子元素、文本等)类型)

Categories元素内容分类:动态图网址

CSS rest

常用方案:2018’s most popular CSS Reset scripts

  • 归零 (Meyer’s “Reset CSS” YUI Reset )
    • *{margin:0; padding: 0;}
  • 统一样式 (Normalize.css)

HTML面试真题

1、doctype的意义是什么?

  • 让浏览器以标准模式渲染
  • 让浏览器知道元素的合法性

2、HTML XHTML HTML5的关系?

  • HTML属于SGML
  • XHTML属于XML, 是HTML进行XML严格化得结果
  • HTML5不属于SGML或XML,比XHTML宽松

3、HTML5有什么变化?HTML5

  • 新的语义化元素
  • 表单增强
  • 新的API(离线、音视频、图形、实时通信、本地存储、设备能力)
  • 分类和嵌套的变更

4、em和i有什么区别?

  • em是语义化标签,表强调。
  • i是纯样式的标签,表示斜体。
  • HTML5中i不推荐使用,一般用作图标。

5、语义化的意义是什么?

  • 开发者容易理解
  • 机器容易理解结构(搜索、读屏软件)
  • 有助于SEO
  • semantic microdata

6、哪些元素可以自闭合?

  • 表单元素 input
  • 图片 img
  • br hr
  • meta link

7、HTML和DOM的关系?

  • HTML是"死"的
  • DOM由HTML解析而来,是活的
  • JS可以维护DOM

8、property和attribute的区别? 详细

  • property是DOM中的属性,是JavaScript里的对象;
  • attribute是HTML标签上的特性,它的值只能够是字符串;
  • 自定义的Property与Attribute不同步,不相等;
  • 非自定义的DOM property与 attributes 是有条件同步的

9、form的作用有哪些?

  • 直接提交表单
  • 使用submit/reset按钮
  • 便于浏览器保存表单
  • 第三方库可以整体提取值
  • 第三方库可以进行表单验证

CSS基础

  • Cascading Style Sheet
  • 层叠样式表

选择器分类

  • 元素选择器 a{}
  • 伪元素选择器 ::before{} (可以显示的真实的元素)
  • 类选择器 .link{}
  • 属性选择器 [type=radio]{}
  • 伪类选择器 :hover{} (表示一个元素的状态)
  • ID选择器 #id{}
  • 组合选择器 [type=checkbox] + label{}
  • 否定选择器 :not(.link){}
  • 通用选择器 *{}

选择器权重

  • 行内样式 1,0,0,0
  • ID选择器 0,n,0,0
  • 类,伪类,属性 0,0,n,0
  • 元素,伪元素 0,0,0,n
  • 其他选择器 0,0,0,0
  • !important 优先级最高
  • 相同权重,后写优先级高

非布局样式

  • 字体、字重、颜色、大小、行高
  • 背景、边框
  • 滚动、换行
  • 粗体、斜体、下划线
  • 其他

字体族

  • serif (衬线字体)笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。 宋体

  • snas-serif(无衬线体)没有额外的装饰,而且笔画的粗细差不多

  • monospace (等宽字体)字符宽度相同

  • cursive(手写体)草书

  • fantasy(花体)

  • 多字体fallback

  • 网络字体、自定义字体

    @font-face{
    	font-family: 'IF';
    	src: url("./IndieFlower.ttf");
    }
    .custom-font {
        font-family: IF;
    }
    
  • iconfont

  • 字体加引号,字体族不能加引号

如何优雅的选择字体(font-family)

使用 @font-face

行高

深入理解CSS中的行高

vertical-align属性

去除inline-block元素间间距的N种方法

背景

  • 背景颜色

    .c1{
        background: red;
      /*background: #F00;
        background: hsl(0, 100%, 50%);//角度、饱和度、亮度
        background: hsla(90, 100%, 30%, .3);//透明
        background: rgba(255,0,0,.3);
        background: url(./test.png);*/
    }
    
  • 渐变色背景

    .c2{
        height: 90px;
        background:-webkit-linear-gradient(left, red, green);
        /*background: linear-gradient(to right, red, green);//标准写法,和上面一样
        background: linear-gradient(0deg, red, green);
        background: linear-gradient(135deg, red 0, green 10%, blue 100%);*/
    }
    
  • 多背景叠加 示例 CSS3 Patterns Gallery background-blend-mode CSS秘密花园:复杂背景图案

    .c3{
        background: linear-gradient(135deg,transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%),linear-gradient(45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%);
        background-size: 30px 30px;
    }
    
  • 背景图片和属性(雪碧图)

  • base64和性能优化 节省http连接数,解码开销,体积会增大1/3。用于使用不多的小图标,例如loading图

  • 多分辨率适配

    //在适配移动端,高分辨率屏的时候,需要将图片缩小,雪碧图width/2,height/2,position/2, size/2;
    .c4{
        width:40px;  
        height:40px;
        background:url(./test_bg.png) no-repeat;
        background-position: -169px -23px;
        background-size: 261px 113px;
    }
    

边框

  • 边框的属性:线型 大小 颜色

    .c1 {
    	border: 5px solid red;
        border: 5px dotted red;
        border: 5px dashed red;
    }
    
  • 边框背景图 实例

    .c2 {
        border: 30px solid transparent; //这里必须是实线
        border-image: url(./border.png) 30 round;
    }
    
  • 边框衔接(三角形)

    .c3 {
        height: 0;
        width: 0;
        border-bottom: 20px solid red;
        border-right: 40px solid transparent;
        border-left: 40px solid transparent;
    }
    .c3 {
        width: 0;
        height: 0;
        font-size: 0;
        /*border-radius: 20px;*/
        border-width: 40px 20px;
        border-style: solid;
        border-color: transparent transparent red transparent;
    }
    

滚动

  • 滚动行为和滚动条

    visible(撑开容器)/hidden(超出部分隐藏)/scroll(滚动条显示)/auto

文字折行

  • white-space 控制空白字符的显示,同时还能控制是否自动换行。

    • white-space: nowrap永不换行 ,空格被合并,换行符无效,原本的自动换行失效!只有
      才能换行!
    • white-space: pre:preserve保留,自动换行没了,空格和换行符全都保留!
    • white-space: pre-wrap:preserve+wrap 保留空格和换行符,且可以自动换行
    • white-space:pre-line:preserve+new line+wrap 空格被合并了,但是换行符可以发挥作用
  • word-break 控制单词如何被拆分换行 (中文句子也是单词,还有日文、韩文等)

    • word-break: keep-all所有“单词”一律不拆分换行,或者可以理解为只有空格换行符可以触发自动换行
    • word-break: break-all所有单词碰到边界一律拆分换行,慎用!
  • word-wrap(overflow-wrap) 也是控制单词如何被拆分换行的,实际上是作为word-break的互补

    • break-word只有当一个单词一整行都显示不下时,才会拆分换行该单词

彻底搞懂word-break、word-wrap、white-space

装饰性属性及其他

  • 字重(粗体)font-weight
  • 斜体 font-style: itatic;
  • 下划线: text-decoration
  • 指针:cursor

CSS Hack

  • Hack即不合法但生效的写法
  • 主要用于区分不同浏览器
  • 缺点:难理解、难维护、易失效
  • 替代方案:特性检测
  • 替代方案:针对性加class

注意:hack写在后面 body{width: 200px; width: 180px\9;}

方案: http://browserhacks.com/ CSS-only Filters Summary 常用CSS hacks

CSS面试真题

  1. CSS样式(选择器)的优先级
  2. 雪碧图的作用?
    • 减少HTTP请求数,提高加载性能
    • 有一些情况可以减少图片大小
  3. 自定义字体的使用场景
    • 宣传/品牌/banner等固体文案
    • 字体图标
  4. base64的使用
    • 用于减少HTTP请求
    • 适用于小图片
    • base64的体积约为原图4/3
  5. 伪类和伪元素的区别?
    • 伪类表状态
    • 伪元素是真的有元素
    • 前者是单冒号,后者双冒号
  6. 如何美化checkbox
    • label[for]和id
    • 隐藏原生input
    • :checked + label

CSS布局

  • 早期以table为主(简单)

  • 后来一技巧性布局为主(难)

  • 现在有的flexbox/grid(偏简单)

  • 响应式布局是必备知识

table表格布局

.table{
    margin-top:20px;
    display: table;
    width:800px;
    height:200px;
}
.table-row{
    display: table-row;
}
.table-cell{
    vertical-align: center;
    display: table-cell;
}

float浮动 + margin

  • 两栏布局
  • 三栏布局
  • 等高布局

inline-block 布局

flexbox布局

响应式布局

  • 在不同设备上使用
  • 一般主要处理屏幕大小问题
  • 主要方法
    • 隐藏 + 折行 + 自适应空间
    • rem/viewport/media query

CSS面试真题

  1. 实现两栏(三栏)布局的方法
    • 表格布局
    • float + margin 布局
    • inline-block 布局
    • flexbox布局
  2. position:absolute/fixed有什么区别?
- 前者相对最近的absolute/relative祖先元素
- 后者相对屏幕(pc)/viewport(移动 )   (早期移动端有兼容性问题)
  1. display:inline-block的间隙
- 原因:字符间距 
- 解决: 消灭字符(去掉所有空格)或者消灭间距(font-size:0)
  1. 如何清除浮动
- 让盒子负责自己的布局
- overflow:hidden(auto)
- ::after{clear:both}
  1. 如何适配移动端页面
- viewport
- rem/viewport/media query
- 隐藏、折行、自适应空间

CSS效果属性

  • box-shadow

    • 营造层次感(立体感)
    • 充当没有宽度的边框
    • 特殊效果(无限投影)
  • text-shadow

    • 立体感
    • 印刷体质感
  • border-radius

    • 圆角矩形
    • 圆形
    • 半圆/扇形
    • 一些奇怪的角角
  • background

    • 纹理图案
    • 渐变
    • 雪碧图动画
    • 背景图尺寸适应
  • clip-path 注意兼容性

    • 对容器进行裁剪
    • 常见几何图形
      • clip-path: inset(100px 50px); 矩形(x, y)

      • clip-path: circle(50px at 100px 100px); 圆形(r at x y)

      • clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 多边形(x0% y0%, x1% y1%, x2% y2%, x3% y%)

      • clip-path: url(#id); 路径 svg图

        <svg>
            <defs>
                <clipPath id="clipPath">
                    
                    <polygon stroke="#979797" points="0.4921875 81.2070313 92.640625 81.2070313 121.601562 0.21875 153.648437 81.2070313 247.390625 80.7734375 173.394531 140.496094 200.308594 227.09375 121.601562 172.71875 53.4960937 227.09375 80.859375 140.496094">polygon>
                clipPath>
            defs>
        svg>
        
    • 自定义路径
  • 3D、2D变换 transform 变换是按顺序的

    • translate 平移
    • scale 缩放
    • skew 倾斜
    • rotate 旋转

CSS面试真题

1、如何用一个div画XXX

  • box-shadow无限投影
  • ::before
  • ::after

2、如何产生不占空间的边框

  • box-shadow
  • outline

3、如何实现圆形元素(头像)

  • border-radius: 50%

4、如何实现iOS图标的圆角

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mrv8Qer8-1590070987440)(https://i.loli.net/2019/05/23/5ce60cc12fd2e22232.png)]

  • clip-path: (svg)

5、如何实现半圆、扇形等图形

  • border-radius组合:
    • 有无边框
    • 边框粗细
    • 圆角半径

6、如何实现背景图居中显示、不重复、改变大小

  • background-position
  • background-repeat
  • background-size(cover/contain)
  • cover:图片宽高比不变、铺满整个容器的宽高,而图片多出的部分则会被裁掉;cover即为”塞满“
  • contain:图片自身的宽高比不变,缩放至整个图片自身能完全显示出来,所以容器会有留白区域。contain即为“包含”,我图片虽然缩放了,但是整个图是被“包含”在里面了,完整显示,不能裁剪。

7、如何平移/放大一个元素

  • transform: translateX(100px)
  • transform:scale(2)

8、如何实现3D效果

  • perspective:500px; //3d效果正面查看距离 透视距离
  • tansform-style: preserve-3d; 3d透视
  • tansform: translate rotate

CSS动画

动画的原理:

  1. 视觉暂留作用
  2. 画面逐渐变化

动画的作用:

  1. 愉悦感
  2. 引起注意
  3. 信息反馈
  4. 掩饰(loading加载)

CSS中的动画类型

  1. transition补间动画
    • 位置 - 平移
      • (left/right/margin/transform)
    • 方位 - 旋转(transform)
    • 大小 - 缩放(transform)
    • 透明度(opacity)
    • 其他 - 线型变化(transform)
    transition: margin-right 2s ease-in-out .5s;
    transition: margin-right 2s, color 1s;
    transition: all 1s ease-out .5s;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease-out;
    transition-delay: .5s;
    
  2. keyframe关键帧动画
    • 相当于多个补间动画
    • 与元素状态的变化无关
    • 定义更加灵活
    .contrainer {
        width:100px;
        animation: run 1s;
        animation: run 3s ease-in 1s infinite reverse both running;
        animation-name: run;
    	animation-duration: 0s;
    	animation-timing-function: ease;
    	animation-delay: 0s;
    	animation-iteration-count: 1; //播放次数
    	animation-direction: normal; 
    	animation-fill-mode: none; // 最后停止的位置
    	animation-play-state: running; //暂停/播放 动画
        
    }
    @keyframes run {
        from {
            width: 100px;
        }to {
            width: 200px;
        }
    }
    @keyframes identifier {
      0% { top: 0; left: 0; }
      30% { top: 50px; }
      68%, 72% { left: 50px; }
      100% { top: 100px; left: 100%; }
    }
    
  3. 逐帧动画
    • 适用于无法补间计算的动画
    • 资源较大 (可能会使用很多动画)
    • 使用steps() 去掉补帧

CSS面试真题

1、 CSS动画的实现方式有几种?

  • transition 过渡动画
  • keyframe(animation) 关键帧动画

2、过渡动画和关键帧动画的区别

  • 过渡动画需要有状态变化
  • 关键帧动画不需要状态变化
  • 关键帧动画能控制更精细

3、如何实现逐帧动画

  • 使用关键帧动画
  • 去掉补间(steps)
    • animation-timing-function: steps(1);

4、CSS动画的性能

  • 性能不坏
  • 部分情况下优于JS
  • 但JS可以做到更好
  • 部分高位属性
    • box-shadow等 不管什么动画都影响性能

CSS预处理器

  • 基于CSS的另一种语言
  • 通过工具编译成CSS
  • 添加了很多CSS不具备的特性
  • 能提升CSS文件的组织方式
  1. 嵌套 反映层级和约束
  2. 变量和计算 减少重复代码
  3. Extend和Minxin 代码片段
  4. 循环 使用于复杂有规律的样式
  5. import CSS文件模块化 (css中的import并不会做代码合并,只是在浏览器端动态引用其他样式表,但是浏览器中动态引用CSS文件性能非常差,每一个引用都会发一个独立请求

less sass

  • 变量
  • 嵌套
  • mixin 复杂的情况 需要带参数
  • extend 简单,需要减小代码文件大小
  • loop
  • import

CSS预处理器框架

  • SASS - Compass
  • Less - Lesshat/EST
  • 提供现成的mixin
  • 类似JS类库 封装常用功能

CSS面试真题

  1. 常见的CSS预处理器
    • Less(Node.js)
    • Sass (Ruby 有Node版本)
  2. 预处理器的作用
    • 帮助更好的组织CSS代码
    • 提高代码的复用率
    • 提升可维护性
  3. 预处理器的能力
    • 嵌套 反映层级和约束
    • 变量的使用 减少重复代码
    • Extend和Minxin 代码片段
    • 循环 适用于复杂有规律的样式
    • import CSS文件模块化
  4. 预处理器的优缺点
    • 优点:提高代码的复用率可可维护性
    • 缺点:需要引入编译过程 有学习成本

Bootstrap 4

  • 一个CSS框架
  • twitter出品
  • 提供通用基础样式

bootstrap 4 改变

  1. 兼容IE10+ (bootstrap3 兼容IE9+)
  2. 使用flexbox布局
  3. 抛弃Nomalize.css
  4. 提供布局和reboot版本 (相当于reset.css)

基础样式 (标题、正文、reset。。。)

常用组件 (按钮、表格、表单、网格布局。。。)

JS插件(弹出框、下拉。。。)

bootstrap没有中文官网

3.0 以前使用源文件是less写的

4.0源文件是sass编写

Bootstrap 定制方法

  • 使用CSS同名覆盖 (简单 会留有死角 bug
  • 修改源码重新构建 (修改彻底 需要了解bootstrap结构
  • 引用scss源文件 修改变量 (更灵活 干净 只引用自己需要的模块 需要对bootstrap的模块了解更多)

CSS工程化

  • 组织
  • 优化
  • 构建
  • 维护

PostCSS

CSS - > PostCSS(解析转换) - > CSS

模块化 加前缀 兼容性。。。

  • PostCSS本身只有解析能力
  • 各种神奇特性全靠插件
  • 目前至少有200多个插件
插件
  • import 模块合并
  • autoprefixier 自动加前缀
  • cssnano 压缩代码 去除无用代码 合并 简写
  • cssnext 使用CSS新特性
  • precss 变量、mixin、循环等

框架中的CSS

  • Angular Vue React 三大框架
  • Angular Vue 内置样式集成
  • React 一些业界实践

你可能感兴趣的:(笔记,html,css,css3,前端)