南京金融网站建设,wordpress免插件生成地图,律师网站建设费用,怎么做网页链接教程文章目录 Css预处理sass less是什么#xff1f;为什么使用他们怎么转换 less 为 css#xff1f;重绘和回流是什么http 是什么#xff1f;有什么特点HTTP 协议和 HTTPS 区别什么是 CSRF 攻击HTML5 新增的内容有哪些Css3 新增的特性flex VS grid清除浮动的方式有哪些#xff… 文章目录 Css预处理sass less是什么为什么使用他们怎么转换 less 为 css重绘和回流是什么http 是什么有什么特点HTTP 协议和 HTTPS 区别什么是 CSRF 攻击HTML5 新增的内容有哪些Css3 新增的特性flex VS grid清除浮动的方式有哪些定位的属性值有何区别子元素如何在父元素中居中元素垂直居中如何让 chrome 浏览器显示小于 12px 的文字Css 选择器有哪些?那些属性可以继承?优先级如何计算Css3 新增的伪类有哪些?常见 CSS 选择器属性继承性优先级计算关系选择器 网页中有大量图片加载很慢 你有什么办法进行优化浏览器的标准模式和怪异模式区别弹性盒子布局属性有那些请简述?怎么实现标签的禁用Pxremem 的区别三栏布局方式两边固定中间自适应什么是HTML什么是XML与HTML的区别双边距重叠问题外边距折叠css 动画如何实现CSS文本溢出的处理怎么画一条0.5px的边 Css预处理sass less是什么为什么使用他们
CSS 的预处理器让css像编程语言变量继承嵌套混合
怎么转换 less 为 css
在webpackvue cli babel构建工具里面配置
重绘和回流是什么
重绘Repaint和回流Reflow是浏览器渲染页面时的两个关键概念它们涉及到页面元素的布局和样式的改变。 重绘Repaint 重绘是指当元素样式的改变不影响其布局时浏览器将根据新样式重新绘制元素但不会改变元素的大小和位置。重绘的过程是比较快速的因为它不涉及对元素布局的重新计算。例如改变元素的颜色、背景色等。 回流Reflow 回流是指当元素的尺寸、结构或某些布局属性发生改变导致浏览器重新计算元素的大小和位置的过程。回流是一种相对较为昂贵的操作因为它涉及到整个页面的布局更新。例如改变元素的宽度、高度、边距、添加或删除元素等。
在实际开发中应当尽量减少回流和重绘的次数以提高页面性能。 优化的策略包括
使用样式操作代替布局操作 尽量使用更轻量的样式操作代替布局操作例如使用 transform 替代改变元素的位置和大小。【transform 属性不会触发回流】 // 直接改变布局属性触发回流// box.style.width 200px;// box.style.height 200px;// box.style.top 50px;// box.style.left 50px;// 使用 transform 属性不触发回流box.style.transform translate(50px, 50px) scale(2);合并多次操作 如果需要进行多次样式或布局操作可以将它们合并在一起然后一次性进行减少回流和重绘的次数。 避免频繁访问布局相关属性 尽量避免频繁访问会触发回流的布局相关属性比如 offsetTop、offsetLeft、offsetWidth、offsetHeight。
http 是什么有什么特点
http 叫做超文本传输协议是互联网应用最广泛的一种网络协议 特点基于请求-响应的模式 无状态保存每次请求都是独立的 无连接发完请求就断开发完响应就断开
HTTP 协议和 HTTPS 区别
HTTP明文传输 HTTPS更安全s-security使用使用 SSLSecure Socket Layer或其继任者 TLSTransport Layer Security协议对数据进行加密
什么是 CSRF 攻击
“吃生日饭”CSRFCross-Site Request Forgery跨站请求伪造攻击者获取用户在目标网站上的会话例如cookie然后构造一些恶意的请求目标网站接收到请求后认为是合法的用户请求解决同源策略
HTML5 新增的内容有哪些 语义化元素 article定义页面中独立的内容如一篇文章或新闻报道。section定义文档中的节或区段。nav定义导航链接的部分。header定义文档或节的页眉。footer定义文档或节的页脚。aside定义页面内容之外的内容如侧边栏或广告。 多媒体元素 audio用于嵌入音频文件。video用于嵌入视频文件。source定义多媒体元素的媒体资源。 新表单控件 input 的新类型如 date、email、url、color 等使得表单更易于填写和验证。datalist用于定义 input 元素的预定义选项列表。 Canvas 绘图 canvas 元素允许通过 JavaScript 脚本进行图形的绘制。 本地存储 localStorage 和 sessionStorage 提供了在客户端存储数据的能力以便在页面刷新后数据仍然可用。 离线应用 使用 Application Cache可以让网页在离线时仍然可访问。 Web Workers 允许在后台运行的 JavaScript 线程提高了多核系统上的性能。
Css3 新增的特性 选择器的增强 新的通用选择器*。属性选择器的增强如 :nth-child、:nth-of-type(选择同类型元素中的第 n 个元素) 等。类型选择器的增强如 :not(选择不匹配指定选择器的元素)。 #home:not(p)选择home元素中不是p的元素 盒模型 box-sizing 属性用于控制盒模型的计算方式包括 content-box 和 border-box。 区别 默认content-box 宽度内容也就是默认的W3C盒模型计算方法 border-box宽度内容padding边框IE盒模型计算方法 border-box 计算更方便更直观而无需考虑内边距和边框的额外计算 多列布局 column-count、column-gap 等属性用于创建多列布局。 背景和边框 border-radius用于创建圆角边框。box-shadow用于添加元素的投影效果。background-size控制背景图片的尺寸。 颜色和渐变 支持 RGBA 和 HSLA 颜色表示法。linear-gradient() 和 radial-gradient() 等渐变效果。 字体 font-face 规则允许使用自定义字体。font-size-adjust 属性用于调整不同字体间的垂直对齐。 文本效果 text-shadow为文本添加阴影效果。text-overflow控制溢出文本的显示方式。 变换和过渡 transform 属性允许对元素进行旋转、缩放、平移等变换。transition 属性实现元素状态变化的平滑过渡效果。 动画 keyframes 规则用于定义动画序列。animation 属性用于指定动画的名称、持续时间等参数。 Flexbox 布局 引入 Flexbox 模型使得创建灵活的、响应式的布局更为容易。 Grid 布局 引入 Grid 布局提供了更强大的二维布局系统。 过滤效果 filter 属性用于应用图像过滤效果如模糊、饱和度调整等。 响应式设计 media 查询允许根据设备特性和屏幕尺寸应用不同的样式。
flex VS grid Flexbox 主要关注 一维布局通过 flex-direction 属性控制主轴的方向行或列默认是行-x轴 justify-content-x轴align-items-y轴 Grid 关注 二维布局可以同时定义行和列通过 grid-template-rows 和 grid-template-columns 定义网格的行和列。 清除浮动的方式有哪些 浮动元素脱离文档流容器的高度不能自动伸长以适应内容的高度使得内容溢出到容器外面而影响甚至破坏布局的现象。这个现象叫浮动溢出这时就需要一些技巧来清除浮动。
解决方法
给父元素添加overflow:hidden。 原理父元素会变成BFCBFC块级格式化上下文Block Formatting ContextBFC 是一个独立的渲染区域具有一套渲染规则。 BFC 不会让浮动元素溢出到它的外部。 在浮动元素后添加一个元素a在a上添加属性clear:both或left。 或者使用一个伪元素
.clearfix::after {content: ;display: table;clear: both;
}定位的属性值有何区别
Position 有5个属性值 Relative 相对定位: 不脱离文档流。相对于自身定位。 Absolute 绝对定位: 脱离文档流。相对于最近的已定位的祖先元素进行定位不考虑 static 定位的祖先元素。 Fixed 固定定位: 脱离文档流。相对于浏览器窗口定位。 Static 默认值: 元素出现在正常的流中。 Sticky 粘性定位: 滚动到某个设定阈值后表现为固定定位。
.element { position: sticky; top: 50px; }
子元素如何在父元素中居中
子元素设置 marginauto并且子元素不能设置浮动父元素设置弹性盒子displayflex justfy-contentcenter align-itemcenter
元素垂直居中
.子元素设置为行内块再加 vertical-alignmiddle弹性盒父元素 displayflex子元素 align-selfcenter
如何让 chrome 浏览器显示小于 12px 的文字
谷歌浏览器默认情况下字体最小只能设置到12px小于12px的设置会无效化。 解决办法 通过缩放来实现transform:scale(0.8)把它变为原来的0.几倍即可实现设置小字体的效果。
Css 选择器有哪些?那些属性可以继承?优先级如何计算Css3 新增的伪类有哪些?
常见 CSS 选择器 元素选择器Element Selector 类选择器Class Selector ID 选择器ID Selector 通配符选择器Universal Selector: 即* 群组选择器Grouping Selector: h1, h2, h3 {/* styles */
}属性选择器Attribute Selector: input[typetext] {/* styles */
}伪类选择器Pseudo-class Selector: a:hover {/* styles */
}伪元素选择器Pseudo-element Selector: p::first-line {/* styles */
}属性继承性
一些常见的可继承的属性包括字体的一些属性颜色字体行高大小粗细
优先级计算
!important 优先级最高。color: red !important;行内样式ID 选择器类选择器、属性选择器和伪类选择器元素选择器和伪元素选择器通配符和关系选择器组合器
Css3 新增的伪类与child有关的都是
关系选择器
div p {后代}
ul li {直接子元素}
h2 p {相邻兄弟 }
h2 ~ p {同级兄弟元素}网页中有大量图片加载很慢 你有什么办法进行优化
压缩JPEG懒加载CDN*利用图片精灵CSS Sprites: 将多个小图标或图片合并成一张图片通过 CSS 的背景定位来显示需要的部分。减少请求次数提高加载速度。
浏览器的标准模式和怪异模式区别
标准模式使用W3C盒模型 怪异模式使用IE盒模型
弹性盒子布局属性有那些请简述?
Flex-direction弹性容器中子元素排列方式主轴排列方式 Flex-wrap设置弹性盒子的子元素超出父容器时是否换行 Flex-flow是 flex-direction 和 flex-wrap 简写形式 flex-flow: flex-direction flex-wrap; Align-item设置弹性盒子元素在侧轴上的对齐方式 Align-content设置行对齐
.flex-container {display: flex;flex-wrap: wrap; /* 允许多行 */align-content: center; /* 多行居中对齐 */
}Justify-content设置弹性盒子元素在主轴上的对齐方式
怎么实现标签的禁用
添加 disabled 属性 input typetext disabled
Pxremem 的区别 em是1个相对单位 px 是绝对单位不受父元素影响。 rem root是相对于根元素字体大小的单位 em 是相对于父元素字体大小的单位
三栏布局方式两边固定中间自适应
使用ui库flexbox给左右元素设置宽度即可。grid
.container {display: grid;grid-template-columns: 200px 1fr 200px; /* 左右两列固定宽度中间列自适应 */grid-gap: 10px; /* 可选设置列之间的间隔 */
}fr 是 CSS Grid 布局中的一个单位表示fraction分数 在 grid-template-columns 或 grid-template-rows 中可以使用 fr 单位来指定一个分数用于分割剩余的可用空间。例如1fr 表示分割可用空间的一个等份2fr 表示分割可用空间的两等份以此类推。 什么是HTML
HTMLHyperText Markup Language是一种标记语言用于创建和设计网页的结构。HTML 使用标记tag来包围文本这些标记告诉浏览器如何显示文本或者处理文本的结构。每个 HTML 标记都有特定的含义用于表示文本的不同部分、链接、图像、表格等。
什么是XML与HTML的区别
XMLeXtensible Markup Language是一种用于描述数据的标记语言HTML 的设计目标是展示内容有专门的元素和属性便于浏览器解析XML 的设计目标是传输和存储数据它目标是把数据转为计算机能理解的格式化语言没有预定义XML 允许用户定义自己的标签和数据结构因此它更灵活适用于各种数据交换和存储的场景。XML用处配置文件、小数据库、数据传输 现在用json更多因为json更容易被js操作
双边距重叠问题外边距折叠
多个相邻兄弟或者父子关系普通流的块元素垂直方向 marigin 会重 叠折叠的结果为 两个相邻的外边距都是正数时折叠结果是它们两者之间较大的值。两 个相邻的外边距都是负数时折叠结果是两者绝对值的较大值。 两个外 边距一正一负时折叠结果是两者的相加的和。
css 动画如何实现
定义关键帧
keyframes exampleAnimation {0% {/* 初始状态 */transform: translateX(0);}50% {/* 中间状态 */transform: translateX(100px);}100% {/* 最终状态 */transform: translateX(200px);}
}应用动画
.element-to-animate {animation: exampleAnimation 3s ease-in-out infinite;
}3s 是动画的持续时间ease-in-out 是动画的缓动函数infinite 表示动画将无限循环。
CSS文本溢出的处理
.example {white-space: nowrap; /* 防止文本换行 */overflow: hidden; /* 隐藏溢出的文本 */text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
}怎么画一条0.5px的边
一条边存在渐变
一条边存在定位伪元素缩放
四个边都存在的情况 定义两倍大小的伪元素然后再以两倍缩放
