德胜云资讯,添加一些关于程序相关的内容,仅供大家学习交流(https://www.wxclwl.com)
日期:2023/04/14 15:28作者:王怡乐人气:
可以看到内联样式(通过元素中 style 属性定义的样式)的优先级大于任何选择器;而给属性值加上 !important 又可以把优先级提至最高,就是因为它的优先级最高,所以需要谨慎使用它,以下有些使用注意事项:
一定要优先考虑使用样式规则的优先级来解决问题而不是 !important;只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important;永远不要在你的插件中使用 !important;永远不要在全站范围的 CSS 代码中使用 !important;字体相关:font-family、font-style、font-size、font-weight 等;
文本相关:text-align、text-indent、text-decoration、text-shadow、letter-spacing、word-spacing、white-space、line-height、color 等;
列表相关:list-style、list-style-image、list-style-type、list-style-position 等;
其他属性:visibility、cursor 等;
对于其他默认不继承的属性也可以通过以下几个属性值来控制继承行为:
inherit:继承父元素对应属性的计算值;
initial:应用该属性的默认值,比如 color 的默认值是 #000;
unset:如果属性是默认可以继承的,则取 inherit 的效果,否则同 initial;
revert:效果等同于 unset,兼容性差。
在 CSS 中任何元素都可以看成是一个盒子,而一个盒子是由 4 部分组成的:内容(content)、内边距(padding)、边框(border)和外边距(margin)。盒模型有 2 种:标准盒模型和 IE 盒模型,本别是由 W3C 和 IExplore 制定的标准。
如果给元素设置如下样式:
.box { width: 200px; height: 200px; padding: 10px; border: 1px solid #eee; margin: 10px; }标准盒模型认为:盒子的实际尺寸 = 内容(设置的宽/高) + 内边距 + 边框
所以 .box 元素内容的宽度就为 200px,而实际的宽度则是 width + padding-left + padding-right + border-left-width + border-right-width = 200 + 10 + 10 + 1 + 1 = 222。
IE 盒模型认为:盒子的实际尺寸 = 设置的宽/高 = 内容 + 内边距 + 边框
.box 元素所占用的实际宽度为 200px,而内容的真实宽度则是 width - padding-left - padding-right - border-left-width - border-right-width = 200 - 10 - 10 - 1 - 1 = 178。
现在高版本的浏览器基本上默认都是使用标准盒模型,而像 IE6 这种老古董才是默认使用 IE 盒模型的。
在 CSS3 中新增了一个属性 box-sizing,允许开发者来指定盒子使用什么标准,它有 2 个值:
content-box:标准盒模型;border-box:IE 盒模型;格式化上下文(Formatting Context)是 CSS2.1 规范中的一个概念,大概说的是页面中的一块渲染区域,规定了渲染区域内部的子元素是如何排版以及相互作用的。
概念:块格式化上下文,它是一个独立的渲染区域,只有块级盒子参与,它规定了内部的块级盒子如何布局,并且与这个区域外部毫不相干。
BFC的应用场景有代码
以上内容参考c s s原理-[Formatting Context]
IFC 的形成条件非常简单,块级元素中仅包含内联级别元素,需要注意的是当IFC中有块级元素插入时,会产生两个匿名块将父元素分割开来,产生两个 IFC。
就是flex布局这里就不多介绍了请看阮一峰的文章f le x 布局
内容过多建议查看阮一峰的文章Grid 网格布局教程
其实屏幕分辨率是指在屏幕的横纵方向上的像素点数量,比如分辨率 1920×1080 意味着水平方向含有 1920 个像素数,垂直方向含有 1080 个像素数。px表示css像素,在css中是绝对的长度单位,也是基础单位,其他长度单位会被浏览器换算成px。但是对于设备而言p x又是相对单位,比如说宽高为2px正常屏幕下,其实就是4个像素点,而在设备像素比(devicePixelRatio) 为 2 的 Retina 屏幕下,它就有 16 个像素点。所以屏幕尺寸一致的情况下,屏幕分辨率越高,显示效果就越细腻。
em 是 CSS 中x相对的长度单位。
在 font-size 中使用是相对于父元素的 font-size 大小,比如父元素 font-size: 16px,当给子元素指定 font-size: 2em 的时候,经过计算后它的字体大小会是 32px;在其他属性中使用是相对于自身的字体大小,如 width/height/padding/margin 等;em计算的时候会层层计算:比如
<div> <p></p> </div> div { font-size: 2em; } p { font-size: 2em; }对于上面的例子 由于html 的字体大小是16px,所以p标签最终计算出来后的字体大小是 16 * 2 * 2 = 64px
rem(root em) 和em一样也是相对长度单位,不过rem 相对的是html 根元素的font-size 值。
rem 由于是基于 html 的 font-size 来计算,所以通常用于自适应网站或者 H5 中。
比如在做 H5 的时候,前端通常会让 UI 给 750px 宽的设计图,而在开发的时候可以基于 iPhone X 的尺寸 375px * 812px 来写页面,这样一来的话,就可以用下面的 JS 依据当前页面的视口宽度自动计算出根元素 html 的基准 font-size 是多少。
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = orientationchange in window ? orientationchange : resize, psdWidth = 750, // 设计图宽度 recalc = function () { var clientWidth = docEl.clientWidth; if ( !clientWidth ) return; if ( clientWidth >= 640 ) { docEl.style.fontSize = 200 * ( 640 / psdWidth ) + px; } else { docEl.style.fontSize = 200 * ( clientWidth / psdWidth ) + px; } }; if ( !doc.addEventListener ) return; // 绑定事件的时候最好配合防抖函数 win.addEventListener( resizeEvt, debounce(recalc, 1000), false ); doc.addEventListener( DOMContentLoaded, recalc, false ); function debounce(func, wait) { var timeout; return function () { var context = this; var args = arguments; clearTimeout(timeout) timeout = setTimeout(function(){ func.apply(context, args) }, wait); } } })(document, window);比如当视口是 375px 的时候,经过计算 html 的 font-size 会是 100px,这样有什么好处呢?好处就是方便写样式,比如从设计图量出来的 header 高度是 50px 的,那我们写样式的时候就可以直接写:
header { height: 0.5rem; }相对视口的单位,除了 vw/vh 外,还有 vmin 和 vmax:
vmin:取 vw 和 vh 中值较小的;vmax:取 vw 和 vh 中值较大的;image-20211118100339533
Retina 显示屏比普通的屏幕有着更高的分辨率,所以在移动端的 1px 边框就会看起来比较粗,为了美观通常需要把这个线条细化处理。
最完美的解决方案:媒体查询+伪类+ transform 实现
.scale-1px-bottom { position: relative; border:none; } @media (-webkit-min-device-pixel-ratio: 2) { .scale-1px-bottom::after { content: ; position: absolute; left: 0; bottom: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; } }同时设置4个方向的边框线 写在项目里自己要添加关于媒体查询的内容哟
.scale-1px { position: relative; margin-bottom: 20px; border:none; } .scale-1px::after { content: ; position: absolute; top: 0; left: 0; border: 1px solid #000; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 200%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top; }浮动概念: 浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素。
需要清除浮动的原因,它造成的问题?
因为浮动元素会脱离正常的文档流,并不会占据文档流的位置,所以如果一个父元素下面都是浮动元素,那么这个父元素就无法被浮动元素所撑开,这样一来父元素就丢失了高度,这就是所谓的浮动造成的父元素高度坍塌问题。
父元素高度一旦坍塌将对后面的元素布局造成影响,为了解决这个问题,所以需要清除浮动,让父元素恢复高度,那该如何做呢?
清除浮动的两种方式:1BFC 清除浮动,2.clear清除浮动
原理: 计算BFC元素的高度的时候浮动的子元素的高度也会计算在内,就是利用这条规则清除浮动的。
假设一个父元素 parent 内部只有 2 个人元素 child,且它们都是左浮动的,这个时候 parent 如果没有设置高度的话,因为浮动造成了高度坍塌,所以 parent 的高度会是 0,此时只要给 parent 创造一个 BFC,那它的高度就能恢复了。
而产生 BFC 的方式很多,我们可以给父元素设置overflow: auto 来简单的实现 BFC 清除浮动,但是为了兼容 IE 最好用 overflow: hidden。
.parent { overflow: hidden; }可以结合这个 codepen demo 一起理解上图的 clear 清楚浮动原理。
上面这个 demo 或者图里为了展示需要所以给伪元素的内容设置为了 ::after,实际使用的时候需要设置为空字符串,让它的高度为 0,从而父元素的高度都是由实际的子元素撑开。
参考:CSS中的浮动和清除浮动,梳理一下
针对同一个类型的 HTML 标签,不同的浏览器往往有不同的表现,所以在网站制作的时候,开发者通常都是需要将这些浏览器的默认样式清除,让网页在不同的浏览器上能够保持一致。
针对清楚浏览器默认样式参考CSS 大师 Eric A. Meyer 写的reset.css ;
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ; content: none; } table { border-collapse: collapse; border-spacing: 0; }除了 reset.css 外,后来又出现了 Normalize.css 。关于 Normalize.css, 其作者 necolas 专门写了一篇文章介绍了它,并谈到了它和 reset.css 的区别。这个是他写那篇文章的翻译版:让我们谈一谈 Normalize.css。
这个偷个懒就不写写那么多描述
查看以上这些方案的示例: codepen demo
这里不多写了看我之前的知乎文章:常见的两栏布局三栏布局,圣杯双飞翼布局方案
对响应式布局的理解: 就是根据网页页面的放大缩小或者不同的机型,显示出来的页面效果是一样美观的。
你有用过哪些前端性能优化的方法?
减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存ajax请求结果,每次操作本地变量,不用请求,减少请求次数用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。当需要设置的样式很多时设置className而不是直接操作style少用全局变量、缓存DOM节点查找的结果。减少IO读取操作避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢谈谈性能优化问题
代码层面:避免使用css表达式,避免使用高级选择器,通配选择器缓存利用:缓存Ajax,使用CDN,使用外部js和css文件以便缓存,添加Expires头,服务端配置Etag,减少DNS查找等请求数量:合并样式和脚本,使用css图片精灵,初始首屏之外的图片资源按需加载,静态资源延迟加载请求带宽:压缩文件,开启GZIP前端性能优化最佳实践?
性能评级工具(PageSpeed 或 YSlow)合理设置 HTTP 缓存:Expires 与 Cache-control静态资源打包,开启 Gzip 压缩(节省响应流量)CSS3 模拟图像,图标base64(降低请求数)模块延迟(defer)加载/异步(async)加载Cookie 隔离(节省请求流量)localStorage(本地存储)使用 CDN 加速(访问最近服务器)启用 HTTP/2(多路复用,并行加载)前端自动化(gulp/webpack)