首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS面试题

:相对单位,相对父节点的字体大小 rem:相对单位,相对于根节点html的字体大小 vw:天生就是随着屏幕的宽度变化而变化 css几种定位方式?...:居中 space-between:两端对齐,项目之间的间距相等 space-around:每个项目两侧间隔相等,所以项目之间的间隔比项目与边缘间隔大一倍 flex...list-item 像块类型元素一样显示,并添加样式列表标记。 table 此元素会作为块级表格来显示。 inherit 规定应该从父元素继承display属性的值。...浏览器渲染机制 浏览器采用流式布局模型(Flow Based Layout) 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tree...然后计算他们在页面上的大小和位置,最后把节点绘制到页面上。

42040
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    升级你的webpack(下)-- webpack入门教程(三)

    但这样只能应付简单的场景,在大型多页面应用中,往往需要对页面进行优化,涉及拆包、分模块加载: (1)分离业务代码和第三方的代码:之所以将业务代码和第三方代码分离出来,是因为业务代码更新频率高,而第三方代码更新迭代速度慢...那么如何进行拆包,分模块进行加载呢? 在webpack4之前,可以使用webpack 内置插件:CommonsChunkPlugin。...1.2 使用optimization属性,替代CommonsChunkPlugin 每个配置项的作用: -- minSize  分离前的最小块文件大小,单位为字节 -- minChunks 分离前该块被引入的次数...-- chunks 匹配的块的类型:initial(初始块),async(按需加载的异步块),all(所有块) -- priority 这个配置很重要,即便是所有配置项都写好了,优先级不够,或者优先级设置不正确...optimization.minimizer的数组列表中进行配置,例如这样配置: //在optimization.minimizer的数字列表中配置,使用第三方的压缩插件 const UglifyJsPlugin

    3.4K600

    体积太大,怎么拆包?--vite

    首先说第一个问题,一般而言,一个前端页面中的 JS 代码可以分为两个部分: Initital Chunk和Async Chunk,前者指页面首屏所需要的 JS 代码,而后者当前页面并不一定需要,一个典型的例子就是...Rollup 应用构建的能力,在拆包能力这一块的扩展就是很好的体现。...─ index.html // 入口 HTML对于 Vite 的拆包能力,从产物结构中就可见一斑。...的大小已经达到 500 KB 以上,显然是有进一步拆包的优化空间的,这个时候我们就需要用到 Rollup 中的拆包 API ——manualChunks 了。...type="module" src="/a.js">html>在浏览器中打开会出现类似的报错代码的执行原理如下:JS 引擎执行 a.js 时,发现引入了 b.js,

    4.2K100

    if语句

    先使用一个等号"="将car的值设置为‘bmw',使用两个等号"=="检查car的值是否为'bmw'。这个相等运算符在它两边的值相等时返回True,否则返回False。 ?...2.检查是否相等时考虑大小写 2.1在Python中检查是否相等时区分大小写,两个大小写不同的值会被视为不相等。 ? 2.2函数lower()将变量的值转换为小写,再进行比较。...执行这种检查时,如果已经有用户名'john'(不管大小写如何),则用户提交用户名“John'时将被拒绝。 3.检查是否不相等 判断两个值是否不相等"!="。 ? 输出: ? 4.比较数字 ? ?...1.2在紧跟在if语句后面的代码块中,可根据需要包含任意数量的代码行。 ? 输出: ? 2.if-else语句 在条件测试通过了时执行一个操作,并在没有通过时执行另一个操作。...2.确定列表是不是空的 在if语句中将列表名用在条件表达式中时,Python将在列表至少包含一个元素时返回True,并在列表为空时返回False。 ? 输出: ?

    1.8K10

    JavaWeb02-CSS,JS(Java真正的全栈开发)

    外部样式表通常存储在 CSS 文件中,可以极大提高工作效率 一个HTML元素可以被不同位置的样式进行修饰,多个样式根据一定规则层叠为一个(123举例) 2.CSS书写规则 基本语法 Css规则主要由两部分组成...在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。 伪类名称对大小写不敏感。...5.CSS属性 字体 Css字体属性定义文本的字体系列,大小,加粗,风格(如斜体)和变形(如小型大写字母) 常用属性: font:简写属性,作用是把所有针对字体的属性设置在一个声明中。...常用属性: width:设置元素的宽度 height:设置元素的高度 列表 CSS 列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。 常用属性: list-style:简写属性。...JavaScript与java一样都区分大小写 js作用: 通过js可以改变html内容,改变html样式,进行验证输入等。

    2.6K150

    重温前端-css篇

    CSS 1.css选择某一个 (CSS :first-child 选择器,CSS选择器——伪类选择器) q:请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成”rgb(255,...:inline-block } 6、固定定位 position:fixed 7、CSS单位(一) em和rem 简单的说 em: 就是字体大小,根据元素自身的字体大小来定,如果自身没有定义字体大小,则继承父元素的字体大小...,即1em = 1 font-size; rem: 和em差不多,可以看成是root-em,是根据根元素的字体大小来定义的,即html设置的字体大小来定义,默认html的字体大小是16px; 8、继承相关...3.根据标签语义化的理念,行内元素最好只包含行内元素,不包含块级元素。 转换 当然块级元素与行内元素之间的特性是可以相互转换的。HTML可以将元素分为行内元素、块状元素和行内块状元素三种。...比较规则 遵循如下法则: 选择器都有一个权值,权值越大越优先; 当权值相等时,后出现的样式表设置要优于先出现的样式表设置; 创作者的规则高于浏览者:即网页编写者设置的 CSS 样式的优先权高于浏览器所设置的样式

    83430

    HTML、CSS温故而知新

    HTML、CSS 温故而知新 参加字节跳动的青训营时写的笔记。这部分是韩广军老师讲的课。 前端: 前端需要关注的东西: 功能 美观 安全 兼容 体验 性能 无障碍 1....HTML 用于创建网页的标准标记语言 1.1 HTML 语法 标签和属性不区分大小写,但是推荐小写 部分空标签可以不闭合,如 input、meta 属性值推荐使用双引号包裹 属性值为 true 时,可以省略属性值...强调,表示内容的重要性 em:斜体强调标签,更强烈的强调,表示内容的强调点 1.3 语义化 ​ HTML 中的元素、属性及属性值都拥有某种含义,如有序列表用 ol,无序列表用 ul....CSS: 用来定义页面元素的样式(如文字的大小、颜色) 2.1 使用 css 的三种形式 外链 <link rel="stylesheet" href="....2.9 Grid 布局 display: grid 使元素生成一个块级的 Grid 容器 使用 grid-template 相关属性将容器划分为网格 设置每一个子项占哪些行/列 暂时只是初略了解,之后还是得正式学

    91310

    Java Web前端基础

    1.1 HTML结构 ​ 一个HTML页面主要有两部分组成,第一部分为最开始的文档类型标记,其次为html根标记,每个标记基本上都是成对出现的,比如html>html>,根标记中有head和body...1.6列表标签 1.7超链接标签 ​ target属性用于指定页面的打开方式,其取值有_self和_blank,其中_self为默认值,意为在原窗口打开,_blank为在新窗口打开。...在实际开发中,主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。...还有就是,页面中使用css有三种方式:1.嵌入式,在html中使用style标签包裹,一般写在head中;2.内联式,直接写在标签中,使用style属性,样式之间使用分号分隔;3.链接式,在HTML中使用...W3C中将DOM标准分为3个不同的部分:核心DOM、XML DOM和HTML DOM,其中核心 DOM 是针对任何结构化文档的标准模型,XML DOM是针对XML文档的标准模型,而HTML DOM是针对

    1.6K30

    CSS3 属性选择器 伪类选择器 盒模型 圆角 阴影 CSS定位和浮动

    我把CSS3分为了:CSS选择器、CSS属性、CSS模型框架三部分。...注:CSS优先级从大到小为:行内CSS>内嵌式CSS>外联CSS and CSS优先级从大到小为:ID选择器>伪类选择器>类选择器>标签选择器>通用选择器 (两种分类不同)其中在属性值的后面加上“!...目标伪类选择器 如果让你实现一个功能:在HTML中的瞄的基础之上,跳转到瞄内容的时候,背景显示红色。...最终效果图: ---- CSS定位和浮动 (纯个人理解)HTML标签分为块元素和行元素,其中行元素是按照从左往右依次排列的,比如这样 111 111 111...那么问题来了,我如果想让三个在同一行显示,如何实现? ---- 先来解释一下CSS定位的概念,也就是说你一个HTML元素在网页的哪里? 自动定位:默认的定位方式。

    15620

    「拥抱开源」这个假前端开发有点虎

    ---- 01 页面分析 上周的实现思路是:表格以上部分拆为三层 div 来实现。 导致出现的问题:每行元素不能固定在应该呆的位置,给人一种整个页面元素很飘忽不定的感觉。...为了方便实现,这次把表格以上部分拆为左右两块区域。 左边的区域,占大部分宽度。其中内部元素分为三层。 右边的区域,占小部分宽度。其中内部元素分为两层。...DOCTYPE html> html xmlns:th="http://www.thymeleaf.org"> Simple.../bootstrap.min.css"> css"> body { font-family: Source Han Serif; font-size: 12px...全局的字体、文字大小与行高。 自定义指定高度、行高是 40 px 的样式。 通过增加两个样式,以及对原代码的重排。这样简简单单就能让产品“裂开”的页面,变得整整齐齐。

    59210

    掌握Markdown技巧,轻松应对写作需求

    1.3 强调 使用一定数量的*或_标记加粗、倾斜等效果表示强调,它需要在目标文本的前后添加相同相等的符号来标记开始和结束。推荐使用*。...> 区块引用 > >> 嵌套的区块引用 1.6 列表 列表分为无序和有序两种。使用*、+或-标记无序列表,使用数字.标记有序列表。列表可以嵌套,有序列表可以自定义序号。...使用两个```在代码上下标记代码块,第一个```后指定语言可将代码高亮显示。...3.1 复杂表格 使用 HTML 标签可以让表格实现合并单元格等效果,rowspan 为跨行合并,colspan 为跨列合并,style 可以添加 CSS 样式。...标签还可以给文本添加各种 CSS 样式,如改变颜色、字体、大小等。

    16810

    掌握Markdown技巧,轻松应对写作需求

    1.3 强调 使用一定数量的*或_标记加粗、倾斜等效果表示强调,它需要在目标文本的前后添加相同相等的符号来标记开始和结束。推荐使用*。...> 区块引用 > >> 嵌套的区块引用 1.6 列表 列表分为无序和有序两种。使用*、+或-标记无序列表,使用数字.标记有序列表。列表可以嵌套,有序列表可以自定义序号。...使用两个```在代码上下标记代码块,第一个```后指定语言可将代码高亮显示。...3.1 复杂表格 使用 HTML 标签可以让表格实现合并单元格等效果,rowspan 为跨行合并,colspan 为跨列合并,style 可以添加 CSS 样式。...标签还可以给文本添加各种 CSS 样式,如改变颜色、字体、大小等。

    16510

    (3)JVM——对象的创建和内存布局

    对象所需内大小在类加载完成后便可完全确定,为对象分配空间的任务实际上等同于把一块确定大小的内存块从 Java 堆中划分出来。...所有被使用过的内存都放在一边,空闲的内存被放在另一边,中间放着一个指针作为分界点的指示器,那所分配内存就仅仅是把那个指针指向空闲空间方向挪动一段与对象大小相等的距离。...比如:Serial、ParNew 空闲列表:虚拟机维护一个列表,记录了哪些内存块是可用的,在分配的时候从列表中找到一块足够大大的空间划分给对象实例,并更新列表上的记录。...三、对象的内存布局 简介:在 HotSpot 虚拟机中,对象在堆内存中的存储布局可以划分为三个部分:对象头、实例数据和对齐填充。...具体的实现方式主要是两种:使用句柄和直接指针 句柄访问:Java 堆中将可能划分出一块内存来作为句柄池,reference 中存储的就是对象的句柄地址,而句柄中包含了对象实例数据与类型数据各自具体的地址信息

    64910

    【FE前端学习】第二阶段任务-基础

    每个列表项始于 。有序列表即把替换为 HTML块 HTML 元素被定义为块级元素(block level element)或内联元素(inline element)。...块级元素在浏览器中以新的一行开始和结束例如, , , ,内联元素如, , , HTML元素 是块级元素,作为组合其他元素的容器... 类名的第一个字符不能使用数字,类 属性可以在每个HTML中出现多次 CSS 元素选择器 h1 {color:blue;} CSS背景 p {background-color: gray...;} 字体大小 h1 {font-size:60px;} 1em=父元素的字体大小 h1 {font-size:3.75em;} 所有字体属性在一个声明里,其中30px表示line-height行高...和C语言一样的比较运算符,多了一个===全等号,值和类型都相等才返回true 和C语言一样的逻辑运算符&&、||、!

    5.1K10

    面试题整理|45个CSS面试题

    主要有:CSS 1,CSS 2,CSS 2.1,CSS 3,CSS 4几个版本 Q4、CSS集成到HTML页面的方式有哪些? 使用HTML页面在header的 Q5、什么是层叠?...堆叠顺序与父元素相等。 number——设置元素的堆叠顺序。 inherit——规定应该从父元素继承 z-index 属性的值。...以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。...vmax vw和vh中较大的那个。 % 相对父元素 *提示: rem与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。...使网站具有响应能力意味着某些元素将通过CSS媒体查询根据设备的屏幕尺寸(通常是视口宽度)来调整其大小或其他功能,从而做出响应。 例如,在较小的设备上减小字体大小。

    4.5K30

    cc++问题集四

    在数据库设计中将一个节点的大小设为等于一个页,这样每个节点只需要一次I/O就可以完全载入。...Best fit(最佳适配),就是遍历free list的所有空闲内存块,从中找到和所申请的内存大小最接近的空闲内存块,这里第二个16字节的内存块是最接近12字节的。...如果一次请求发送的数据量比较大,超过了缓冲区大小,TCP就会将其拆分为多次发送,这就是拆包。...常见的解决方案 对于粘包和拆包问题,常见的解决方案有四种: 发送端将每个包都封装成固定的长度,比如100字节大小。...如果发生拆包需等待多个包发送过来之后再找到其中的\r\n进行合并;例如,FTP协议; 将消息分为头部和消息体,头部中保存整个消息的长度,只有读取到足够长度的消息之后才算是读到了一个完整的消息; 通过自定义协议进行粘包和拆包的处理

    77740

    移动端H5各种各样的列表的制作方法(一) by FungLeo

    本人水平有限,能力一般,因此文章中将不可避免的有错误和遗漏.因此,欢迎大家在文章里评论留言.我将在第一时间内回应.谢谢大家....最简单的列表 首先,来一个最简单的列表.我们要实现的效果,如下图所示: 如上所示,我们要实现的就是这样简单的列表.这个没有丝毫的难度. html代码 html以及CSS都全部统一为utf-8编码.避免因为编码造成乱码的情况....rem,我们reset.scss里面,已经将html的字体大小设置为了62.5%,也就相当于正常情况下的10px.也就是说,上面的1.6rem相当于16px.至于为什么这么写,请到本文开头的链接里面查看前面我写的文章中的解释...这是两道开胃菜,非常的简单.需要说明的是这样几点: 不要给任何元素设置宽度,因为这是一个独占一行的列表 在不设置宽度的情况下,可以设定内填充,不会造成任何问题.

    32710
    领券