宇六岁鸭-CSDN博客

2022-02-23 21:32:34 144

原创【前端学习 - CSS（21）border:none 与 border:0 】

1.border:none 与 border:0 的区别？首先是性能差异：{border：0;}: 把 border 设置为 0 像素，虽然在页面上看不到，但是按 border默认值理解，浏览器依然对 border-width/border-color 进行了渲染，即已经占用内存值； {border：none；}被理解为 border-style:none。boder:0;比 border:none多渲染了一个border-width:0,也就是为什么 border:none 的性能要比 bord

2022-02-22 08:15:00 505

原创【前端学习 - CSS（20）回流（重排）和重绘】

1. 回流（重排）和重绘区别？回流（重排），reflow:当 render tree 中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变时而需要重新构建；重绘（repaint）:当 render tree 中的一些元素需要更新属性，而这些属性只影响元素的外观，风格，而不会影响布局时，称其为重绘，例如颜色改变等。注意：每个页面至少需要引发一次重排+重绘，而且重排（回流）一定会引发重绘。触发重排（回流）的条件：增加或者删除可见的 dom 元素；元素的位置发生了改变；元素的尺寸发

2022-02-22 08:00:00 195

原创【前端学习 - CSS（19）CSS 优化、提高性能】

1.CSS 优化、提高性能的方法有哪些？多个 css 可合并，并尽量减少 http 请求属性值为 0 时，不加单位（margin: 0）将 css 文件放在页面最上面（CSS会阻塞渲染，在CSS文件请求、下载、解析完成之前，浏览器将不会渲染任何已处理的内容。如果放在下面，当html结构渲染完以后，解析css，又会重新渲染一次，导致页面闪动）避免后代选择符，避免链式选择符过长使用紧凑的语法（margin: 8px 6px 7px 5px; ）使用语义化命名，便于维护（属于优化）尽量

2022-02-22 07:30:00 144

原创【前端学习 - CSS（18）为什么要初始化 CSS 样式】

1. 为什么要初始化 CSS 样式？因为浏览器的兼容问题，不同浏览器对标签的默认值是不同的，如果没有对浏览器的 CSS 初始化，会造成相同页面在不同浏览器的显示存在差异。

2022-02-22 01:15:00 261

原创【前端学习 - CSS（17）CSS3 新特性】

1. CSS3 有哪些新特性？选择器（E:last-child 匹配父元素的最后一个子元素E。）; 圆角（border-raduis）; 多列布局（multi-column layout）; 阴影（shadow）和反射（reflect）; 文字特效（text-shadow）; 文字渲染（text-decoration）; 线性渐变（gradient）; 旋转（rotate）/缩放（scale）/倾斜（skew）/移动（translate）; 媒体查询（@media）; RGBA 和透明

2022-02-22 01:00:00 215

原创【前端学习 - CSS（16）CSS 属性继承】

1. CSS 有哪些属性可以继承？字体系列属性：如 font，font-family，font-size，font-weight，font-style 文本系列属性：如 color，text-indent(文本缩进)，text-align(文本水平对齐)，line-height，word-spacing(字间隔) 元素可见性：visibility 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

2022-02-22 00:45:00 171

原创【前端学习 - CSS（14）常见单位】

1. 常见单位px：绝对单位，页面按精确像素展示 em：相对单位，基准点为父节点字体的大小，如果自身定义了 font-size 按自身来计算（浏览器默认字体是 16px），整个页面内 1em 不是一个固定的值 rem：相对单位，可理解为”root em”, 相对根节点 html 的字体大小来计算，CSS3 新加属性，chrome/firefox/IE9+支持 vw：viewpoint width，视窗宽度，1vw 等于视窗宽度的 1% vh：viewpoint height，视窗高度，1vh 等

2022-02-21 20:21:48 89

原创【前端学习 - CSS（14）实现单行和多行文本溢出添加省略号】

1. 实现单行和多行文本溢出添加省略号单行溢出：p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}多行溢出：overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; //3行溢出...

2022-02-21 20:20:39 58

原创【前端学习 - CSS（13）用 css 画三角形】

1. 用 css 画三角形.triangle { width: 0; height: 0; border-width: 100px; border-style: solid; border-color: tomato transparent transparent transparent; //3边透明，一边不透明}技巧--记住透明边框的数量：3点一线 (总共 4 条线，有 3 条变成点了，即变透明了，另外一条边还是线，即不透明)...

2022-02-21 20:19:03 167

原创【前端学习 - CSS（12）margin 重叠】

1. margin 重叠margin 重叠的规则当两个 margin 都是正值的时候，取两者的最大值；当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移；当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加,即取和的绝对值margin 重叠主要有四种情况的解决：相邻兄弟元素 margin-bottom 和 margin-top 重叠。可以将其中一个设为 BFC；父子元素 margin

2022-02-21 20:17:48 789

原创【前端学习 - CSS（11）布局 - 两侧定宽，中间自适应】

1. 布局1-1 两侧定宽，中间自适应浮动左侧设置左浮动，右侧设置右浮动即可，中间会自动地自适应。绝对定位左侧设置为绝对定位， left：0px。右侧设置为绝对定位， right：0px。中间设置为绝对定位，left 和 right 都为 300px，即可。中间的宽度会自适应。 flexbox布局将左中右所在的容器设置为 display: flex，设置两侧的宽度后，然后让中间的 flex = 1，即可。表格布局设置整个容器的宽度为 100%，设置三个部分均为表格(display:

2022-02-21 09:00:00 350

原创【前端学习 - CSS（10）浮动】

1. 浮动清除浮动的方法：父级盒子定义高度（height）; 最后一个浮动元素后面加一个 div 空标签，并且添加样式 clear: both; 包含浮动元素的父级标签添加样式 overflow 为 hidden/both; 父级 div 定义 zoom;最好的方法：clearfix:after{/*伪元素是行内元素正常浏览器清除浮动方法*/ content: ""; display: block; height: 0;

2022-02-21 08:45:00 76

原创【前端学习 - CSS（9）定位】

1. 定位1-1 基本含义相对定位，将元素的 position 设为 relative，元素相对于自身 content box 定位，仍占据原来位置空间；绝对定位，将元素的 position 设为 absolute，元素相对于第一个 position 不为 static 的祖先元素的 padding box 定位，元素不占据原来位置空间；固定定位，将元素的 position 设为 fixed，元素相对于浏览器窗口顶部定位，不占据原来位置空间1-2 水平居中通用方案：行内元素：父元素

2022-02-21 08:30:00 85

原创【前端学习 - CSS（8）BFC】

1. BFCBFC 指的是格式化上下文1-1 当一个元素形成 BFC 后:其内部元素的布局不会影响外部元素外部元素的布局不会影响内部元素。1-2 如何形成 BFC根元素浮动元素：float 除 none 以外的值绝对定位元素：position (absolute、fixed) display 为 inline-block、table-cells、flex 表格类元素 overflow 除了 visible 以外的值 (hidden、auto、scroll)【最常用】

2022-02-21 08:00:00 78

原创【前端学习 - CSS（7）伪类和伪元素的区别】

1. 伪类和伪元素的区别两者都是描述不在文本流中的东西。其中伪类用单冒号表示，当元素处于某种状态时，为该元素添加样式，如 a 标签的 hover；伪元素用双冒号表示，为了兼容老浏览器，有时候也会用单冒号表示，作用是创建不在文本流中的元素，并为其添加样式，如 ::before，在指定元素前添加元素。...

2022-02-21 02:00:00 84

原创【前端学习 - CSS（5）选择器怎么解析的】

1. 选择器怎么解析的样式系统从关键选择器开始，从右向左依次查找，如果出现未匹配的情况会放弃规则，否则会左移直至匹配完成。因此在写样式时，应尽量选择 ID 选择器或 class 选择器作为关键选择器，并且减少样式的层级，降低消耗。...

2022-02-20 21:30:13 282

原创【前端学习 - CSS（4）css 盒模型】

1. css 盒模型css 中，有两种盒模型，通过 box-sizing 切换：当设置为 content-box 时，属于标准盒模型，在设置宽度和高度时，只包含 content，不包含 padding 和 border；而设为 border-box 时，属于 IE 盒模型，设置宽度和高度时，包含 content、padding 和 border。标准（W3C）盒子模型：width = 内容宽度（content） + border + padding + margin 低版本I

2022-02-20 21:28:26 82

原创【前端学习 - CSS（3）元素消失的方法】

1.使元素消失的方法 visibility:hidden 该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件 display:none 把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉 z-index=-1 把元素遮盖起来，并且不会改变页面布局，可以理解被其它元素压在下面了 opacity：0, 该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定了一些事件，如 click 事件也能触发，常用于设置图片透明度为 0 ，然后

2022-02-20 21:27:14 1268

原创【前端学习 - HTML（11）link和@import有什么区别】

1. 页面导入样式时，使用link和@import有什么区别link属于HTML标签，而@import是css提供的；页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载； link是XHTML标签，无兼容问题,而@import只在IE5以上才能识别，； link方式的样式的权重高于@import的权重。...

2022-02-20 21:21:59 344

原创【前端学习 - HTML（9）常见的浏览器内核】

1. 常见的浏览器内核有哪些Trident内核：IE最先开发或使用的， 360浏览器； Gecko内核： Mozilla FireFox (火狐浏览器) ，K-Meleon浏览器； Presto内核：Opera浏览器； Webkit内核：Google Chrome，Safari，搜狗浏览器，360极速浏览器，阿里云浏览器等；技巧--记住内核和浏览器的对应：ti,gm,po,wg(踢积木，破挖机) (Trident-IE,Gecko-Mozilla,Presto-Opera,Webkit-Go

2022-01-30 02:15:00 569

原创【前端学习 - HTML（8）HTML5的Web storage的存储方式】

1. HTML5的Web storage的存储方式有两种：sessionStorage和localStorage。sessionStorage用于本地存储一个会话中的数据，当会话结束后就会销毁；和sessionStorage不同，localStorage用于持久化的本地存储，除非用户主动删除数据，否则数据永远不会过期； cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。区别：从浏览器和服务器间的传递看： cookie数据始终在同源的ht

2022-01-29 22:05:25 222

原创【前端学习 - HTML（7）property和attribute的区别是什么】

1. property和attribute的区别是什么attribute是HTML标签上的特性，它的值只能够是字符串; property是DOM中的属性，是JavaScript里的对象;简单的理解就是：Attribute就是DOM节点自带的属性，例如html中常用的id、class、title、align等；而Property是这个DOM元素作为对象，其附加的内容，例如childNodes、firstChild等。技巧： Property可以联想一下原型，原型本质上就是对象...

2022-01-29 22:02:19 979

原创【前端学习 - HTML（6）src与href有什么区别】

1. src与href有什么区别src用于替换当前元素；href用于在当前文档和引用资源之间确立联系； src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；而href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。...

2022-01-29 22:00:51 621

原创【前端学习 - HTML（5）iframe有哪些优缺点】

1. iframe有哪些优缺点优点：还原性iframe 能够原封不动的把嵌入的网页展现出来。模块化如果有多个网页引用 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每一个页面内容的更改，方便快捷。可复用网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 来嵌套，可以增加代码的可重用。 iframe可以跨域通信；解决了加载缓慢的第三方内容如图标和广告等的加载问题。缺点：iframe和主页面共享链接池，而浏览器对相同域的连接有限制

2022-01-29 21:59:34 827

原创【前端学习 - HTML（4）语义化标签】

1. 语义化标签概念:语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。语义化的好处:用正确的标签做正确的事情；去掉或者丢失样式的时候能够让页面呈现出清晰的结构；方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；便于团队开发和维护，语义化更具可

2022-01-29 21:58:09 518

原创【前端学习 - HTML（3）标签上title属性与alt属性的区别是什么】

1.标签上title属性与alt属性的区别是什么alt是为了在图片未能正常显示时（屏幕阅读器）给予文字说明，且长度必须少于100个英文字符。 title属性为设置该属性的元素提供建议性的信息，鼠标悬浮时会显示标题...

2022-01-29 21:56:08 788

原创【前端学习 - 浏览器（12）跨域】

1. 跨域什么是同源策略：同源策略是指协议、端⼝、域名相同，也就是在同⼀个域中。⾮同源受到的限制：cookie⽆法读取、dom⽆法获取、ajax请求⽆法发送。什么是跨域：两个不同域（协议、端⼝、域名不同）之间进⾏请求。解决跨域的⽅法：JSONP，通过动态创建⼀个script标签，script标签的src属性是没有跨域的限制的。 cors，服务端在response时增加⼀些头信息： Access-Control-Allow-Origin: http://ip:p

2022-01-21 15:00:00 192

空空如也

空空如也