关于css的基础知识点

1. calc, support, media各自的含义及用法？
@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。

calc() 函数用于动态计算长度值。 calc()函数支持 “+”, “-”, “*”, “/” 运算；

@media 查询，你可以针对不同的媒体类型定义不同的样式。

2. css水平、垂直居中的写法，请至少写出4种？
水平居中

行内元素: text-align: center
块级元素: margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center
垂直居中

设置line-height 等于height
position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;

3.画一条0.5px的直线？

height: 1px;
transform: scale(0.5);

4.标签的用法
label标签主要是方便鼠标点击使用，扩大可点击的范围，增强用户操作体验

4.浏览器渲染页面的过程

解析HTML，生成DOM树，解析CSS，生成CSSOM树
将DOM树结合CSSOM树结合，生成渲染树（Render Tree）
Layout（回流）:根据生成的渲染树，计算它们在设备视口（viewport）内的确切位置和大小，这个阶段是回流
Painting（重绘）: 根据渲染以及回流得到的几何信息，得到节点的绝对像素
Display：将像素发送给GPU，展示到页面上

5.关于移动端适配接触的一些方案

（1）媒体查询+rem针对不同屏幕设计不同的样式        当重置浏览器屏幕大小的时候   根据屏幕宽度和大小重新设计样式

下面的代码是这种方案必须添加的内容：

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

为的就是让布局视口等于真实视口

（2）淘宝flexible.js方案 它同样也是rem适配的，将设备分成十个部分，

引入flexible.js 这一步其实非常简单，只要把flexible.js的内容复制出来，在本地新建一个flexible.js的文件
接着在html页面里面，尽可能早的引入这个js文件（为了让适配的效果更快）
上面方案1 的代码就不需要了，我们只需要交给flexible.js自己去处理
（3）vh vw方案
这种方案目前兼容性不是很好

关于css的基础知识点相关推荐

Html+Css+JavaScript基础知识点
0.软件安装使用vscode进行开发安装中文插件 Vue学习笔记_lucky友人a的博客-CSDN博客软件下载点击 1.HTML 1.HTML(Hyper Text Markup Lang ...
前端css基础知识点之PC端项目-规范
前端css基础知识点之PC端项目-规范 1 文件管理文件名用英文命名 css文件夹 reset.css(常用的浏览器样式) public.css(公共的样式.比如页面的头部尾部.重复使用字体.字号等 ...
前端css基础知识点之opacity——透明度
前端css基础知识点之opacity--透明度 opacity opacity:num /*num 0到1*/ 兼容性 ie9及以上和标准浏览器都支持特点设置opacity的元素的所有后代会一起具 ...
前端css基础知识点之sprite——雪碧（精灵）
前端css基础知识点之sprite--雪碧(精灵) css sprite css精灵或css雪碧把网页中一些背景图片整合到一个大文件中,然后利用 background-image.backgroun ...
Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第11章 CSS简介 1.HTML是网页的结构,CSS是网页的外观,JavaScript是网页的行为. 2. ...
Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第24章 JavaScript简介 1.HTML是网页的结构,CSS是网页的外观,而JavaScript是网 ...
Web前端开发精品课HTML CSS JavaScript基础教程HTML部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第1章 HTML简介 1.前端技术简介 (1)从Web1.0到Web2.0,网页制作已经变成前端开发了. ...
python爬虫知识大全_Python爬虫入门有哪些基础知识点
1.什么是爬虫爬虫,即网络爬虫,大家可以理解为在网络上爬行的一直蜘蛛,互联网就比作一张大网,而爬虫便是在这张网上爬来爬去的蜘蛛咯,如果它遇到资源,那么它就会抓取下来.想抓取什么?这个由你来控制它咯. ...
java基础教程知识点,[Java教程]js基础知识点总结
[Java教程]js基础知识点总结 0 2016-11-01 21:00:04 如何在一个网站或者一个页面,去书写你的js代码: 1.js的分层(功能):jquery(tool) 组件(ui) 应用( ...

关于css的基础知识点

关于css的基础知识点相关推荐

最新文章

热门文章