<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[sisterAn的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/sisterAn</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; sisterAn]]></copyright><item><title><![CDATA[CSS 实现多行文本展开收起效果 极简教程]]></title><link>https://blog.youkuaiyun.com/sisterAn/article/details/119747124</link><guid>https://blog.youkuaiyun.com/sisterAn/article/details/119747124</guid><author>sisterAn</author><pubDate>Tue, 17 Aug 2021 07:52:24 +0800</pubDate><description><![CDATA[最终实现效果：

本文主要实现难点：

如何实现 展开 和 收起 切换按钮的文字环绕效果
如何实现多行文本溢出省略效果
如何实现 展开 和 收起 的状态切换

初始 html：
&lt;div class=&quot;text&quot;&gt;
  &lt;label class=&quot;btn&quot;&gt;展开&lt;/label&gt;
  &lt;span&gt;
    但听得蹄声如雷，十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅，
    里面玄色布衣，但见人似虎，马如龙，人.]]></description><category></category></item><item><title><![CDATA[实现元素水平垂直居中的 N 种方式]]></title><link>https://blog.youkuaiyun.com/sisterAn/article/details/119742736</link><guid>https://blog.youkuaiyun.com/sisterAn/article/details/119742736</guid><author>sisterAn</author><pubDate>Mon, 16 Aug 2021 21:34:43 +0800</pubDate><description><![CDATA[水平居中
1. 行内元素
若是行内元素，给其父元素设置 text-align:center 即可实现行内元素水平居中
&lt;div class=&quot;parent&quot;&gt;
  &lt;span class=&quot;child&quot;&gt;测试&lt;/span&gt;
&lt;/div&gt;
&lt;style&gt;
  .parent {
    background-color: aqua;
    text-align: center; /* 水平居中 */
  }.]]></description><category></category></item><item><title><![CDATA[介绍下 BFC 布局规则，除此之外，你还知道哪些 CSS 格式化上下文?]]></title><link>https://blog.youkuaiyun.com/sisterAn/article/details/119556269</link><guid>https://blog.youkuaiyun.com/sisterAn/article/details/119556269</guid><author>sisterAn</author><pubDate>Tue, 10 Aug 2021 05:26:55 +0800</pubDate><description><![CDATA[BFC 布局规则
什么是 BFC
既 Block Formatting Context（块级格式化上下文），是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
BFC 的触发条件

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, ]]></description><category></category></item><item><title><![CDATA[如何解决移动端 Retina 屏 1px 像素问题 ？]]></title><link>https://blog.youkuaiyun.com/sisterAn/article/details/119529729</link><guid>https://blog.youkuaiyun.com/sisterAn/article/details/119529729</guid><author>sisterAn</author><pubDate>Mon, 09 Aug 2021 07:04:03 +0800</pubDate><description><![CDATA[什么导致了 1px 问题？
在移动端 Web 开发中，UI 设计稿中设置边框为 1 像素，前端在开发过程中如果出现 border:1px ，测试会发现在 Retina 屏机型中，1px 会比较粗，即是较经典的移动端 1px 像素问题。

以 iphone6 为例，iphone6 的屏幕宽度为 375px ，设计师做的视觉稿一般是750px ，也就是 2x ，这个时候设计师在视觉稿上画了 1px 的边框，于是你就写了 border:1px ，so...1px边框问题产生了。
对设计师来说它的 1px 是相对于]]></description><category></category></item><item><title><![CDATA[px、rpx、em、rem 、vw/vh、百分比的区别？]]></title><link>https://blog.youkuaiyun.com/sisterAn/article/details/119441000</link><guid>https://blog.youkuaiyun.com/sisterAn/article/details/119441000</guid><author>sisterAn</author><pubDate>Fri, 06 Aug 2021 07:35:44 +0800</pubDate><description><![CDATA[px：绝对长度单位，来描述一个元素的宽高以及定位信息
rpx：微信小程序独有的、解决屏幕自适应的尺寸单位
em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认16px）em作为字体单位，相对于父元素字体大小；em作为行高单位时，相对于自身字体大小，整个页面内 1em 不是一个固定的值。
rem：相对单位，可理解为”root em”，相对根节点html的字体大小来计算，CSS3新加属性，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，.]]></description><category></category></item><item><title><![CDATA[CSS 会阻塞 DOM 解析吗？]]></title><link>https://blog.youkuaiyun.com/sisterAn/article/details/119405994</link><guid>https://blog.youkuaiyun.com/sisterAn/article/details/119405994</guid><author>sisterAn</author><pubDate>Thu, 05 Aug 2021 08:03:25 +0800</pubDate><description><![CDATA[浏览器的渲染
浏览器的渲染流程如下：

图：WebKit 主流程

图：Mozilla 的 Gecko 呈现引擎主流程（3.6）
结合上图，一个完整的渲染流程如下：

渲染进程解析 HTML 内容转换为能够读懂的 DOM 树结构，解析 CSS 为 CSSDOM
把 DOM 和 CSSOM 结合起来生成渲染树(Render Tree)
渲染树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标
把渲染树展示到屏幕上。再下一步就是绘制，即遍历渲染树，并使用UI后端层绘制每个节点。

值得注意的是：]]></description><category></category></item><item><title><![CDATA[position 属性有哪些值，各有什么特点？]]></title><link>https://blog.youkuaiyun.com/sisterAn/article/details/119370883</link><guid>https://blog.youkuaiyun.com/sisterAn/article/details/119370883</guid><author>sisterAn</author><pubDate>Wed, 04 Aug 2021 06:57:53 +0800</pubDate><description><![CDATA[positon

 定义和用法：position 属性规定元素的定位类型。
说明：这个属性定义建立元素布局所用的 定位机制 。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
—— 来自 w3school

position 有以下可选值：



值
描述



absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 &quot;left&quot;, &quot;top]]></description><category></category></item><item><title><![CDATA[浅入浅出实现一个异步求和函数]]></title><link>https://blog.youkuaiyun.com/sisterAn/article/details/119341244</link><guid>https://blog.youkuaiyun.com/sisterAn/article/details/119341244</guid><author>sisterAn</author><pubDate>Tue, 03 Aug 2021 05:50:51 +0800</pubDate><description><![CDATA[简化：两数之和
我们先来简单的实现一个异步两数之和函数
function sumT(a, b) {
    return await new Promise((resolve, reject) =&gt; {
        asyncAdd(a, b, (err, res) =&gt; {
            if(!err) {
                resolve(res)
            }
            reject(err)
        })
    })
}]]></description><category></category></item><item><title><![CDATA[DNS 协议是什么？完整查询过程？为什么选择使用 UDP 协议发起 DNS 查询？]]></title><link>https://blog.youkuaiyun.com/sisterAn/article/details/119314837</link><guid>https://blog.youkuaiyun.com/sisterAn/article/details/119314837</guid><author>sisterAn</author><pubDate>Mon, 02 Aug 2021 07:52:20 +0800</pubDate><description><![CDATA[你可能了解 DNS 协议是什么？那你了解 DNS 完整查询过程是什么吗？它底层是基于 TCP 还是 UDP 喃？TCP 与 UDP 又各自负责 DNS 的哪些部分喃？

引言
本文从以下几个方面循序渐进走进 DNS 协议、它的完整查询过程以及底层是基于 UDP 还是 TCP 实现？

DNS 协议是什么？
域名结构
域名解析缓存优化
DNS 查询方式有哪些
DNS 完整查询过程
为什么选择基于 UDP 协议发起 DNS 查询，而不是 TCP？

DNS 协议是什么？

DNS（Domain Name Sy.]]></description><category></category></item><item><title><![CDATA[你真的了解 GET 和 POST 吗，它们的区别是什么？]]></title><link>https://blog.youkuaiyun.com/sisterAn/article/details/119278134</link><guid>https://blog.youkuaiyun.com/sisterAn/article/details/119278134</guid><author>sisterAn</author><pubDate>Sat, 31 Jul 2021 16:53:06 +0800</pubDate><description><![CDATA[引言
本文从以下几个方面走进 GET 与 POST 的区别：

w3school 给出的标准答案
从 HTTP 是什么开始，深入 GET 与 POST 请求方法，即两者的本质区别
常见的 GET 与 POST 误解
POST 方法比 GET 方法安全？
POST 方法会产生两个 TCP 数据包？



标准答案
GET 与 POST 是 HTTP 请求中最常用的两种方法，GET 与 POST 的区别也是老生常谈的问题了，信手拈来




GET
POST



后退按钮/刷新
无害
数据会被重新提交（浏览器]]></description><category></category></item><item><title><![CDATA[HTTP 状态码有哪些？该怎么用？]]></title><link>https://blog.youkuaiyun.com/sisterAn/article/details/119242688</link><guid>https://blog.youkuaiyun.com/sisterAn/article/details/119242688</guid><author>sisterAn</author><pubDate>Fri, 30 Jul 2021 11:24:32 +0800</pubDate><description><![CDATA[引言
本文从以下几个方面，循序渐进走进 HTTP 状态码

状态码用来做什么的
常见状态码有哪些
容易争论的点

状态码用来做什么的
HTTP 状态行中使用状态码（Status Code）和原因短语（Reason Phrase）来简单描述请求的结果


Version：版本号，例如 HTTP/2
Reason：是状态码的简短文字描述，例如“OK”“Not Found”等等，也可以自定义，它其实对状态码的解释说明
Status Code：状态码，表示服务器对请求的处理结果

这里我们重点介绍状态码，状态码是用]]></description><category></category></item><item><title><![CDATA[TCP 的三次握手和四次挥手，了解泛洪攻击么]]></title><link>https://blog.youkuaiyun.com/sisterAn/article/details/119222236</link><guid>https://blog.youkuaiyun.com/sisterAn/article/details/119222236</guid><author>sisterAn</author><pubDate>Thu, 29 Jul 2021 22:24:29 +0800</pubDate><description><![CDATA[引言

TCP 建立连接与断开连接的过程
TCP 泛洪攻击（TCP 建立连接过程中的攻击手段）与防护

TCP 建立连接与断开连接的过程
TCP 三次握手（连接过程）

第一次握手
客户端向服务端发送连接请求报文段。该报文段中包含自身的数据通讯初始序号。请求发送后，客户端便进入 SYN-SENT 状态。
第二次握手
服务端收到连接请求报文段后，如果同意连接，则会发送一个应答，该应答中也会包含自身的数据通讯初始序号，发送完成后便进入 SYN-RECEIVED 状态。
第三次握手
当客户端收到连接同意的应答后，]]></description><category></category></item><item><title><![CDATA[了解 HTTP/1.x 的 keep-alive 吗？它与 HTTP/2 多路复用的区别是什么？]]></title><link>https://blog.youkuaiyun.com/sisterAn/article/details/119191727</link><guid>https://blog.youkuaiyun.com/sisterAn/article/details/119191727</guid><author>sisterAn</author><pubDate>Wed, 28 Jul 2021 22:33:14 +0800</pubDate><description><![CDATA[引言
本文分为以下三部分循序渐进走进 HTTP/1.x 的 keep-alive 与 HTTP/2 多路复用：

HTTP/1.x keep-alive 是什么
HTTP/2 多路复用
HTTP/1.x keep-alive 与 HTTP/2 多路复用区别

下面正式开始吧
HTTP/1.x keep-alive
在一文走进 TCP 与 HTTP 中，我们介绍过，HTTP 协议是建立在 TCP 协议上的应用层协议， HTTP 协议最初是一个非常简单的协议，通信方式也是采取简答的请求-应答的模式，即：客户端与]]></description><category></category></item><item><title><![CDATA[有关 HTTP 缓存的首部字段说一下]]></title><link>https://blog.youkuaiyun.com/sisterAn/article/details/119154476</link><guid>https://blog.youkuaiyun.com/sisterAn/article/details/119154476</guid><author>sisterAn</author><pubDate>Tue, 27 Jul 2021 22:04:14 +0800</pubDate><description><![CDATA[常见的HTTP 缓存首部字段有：

Expires：响应头，代表该资源的过期时间

Cache-Control：请求/响应头，缓存控制字段，精确控制缓存策略

If-Modified-Since：请求头，资源最近修改时间，由浏览器告诉服务器

Last-Modified：响应头，资源最近修改时间，由服务器告诉浏览器

Etag：响应头，资源标识，由服务器告诉浏览器

If-None-Match：请求头，缓存资源标识，由浏览器告诉服务器
其中， 强缓存 ：

Expires（HTTP/1.0）

Cache-]]></description><category></category></item><item><title><![CDATA[如果让你去实现一个 CSRF 攻击你会怎么做？]]></title><link>https://blog.youkuaiyun.com/sisterAn/article/details/117546305</link><guid>https://blog.youkuaiyun.com/sisterAn/article/details/117546305</guid><author>sisterAn</author><pubDate>Fri, 04 Jun 2021 07:47:32 +0800</pubDate><description><![CDATA[了解 CSRF
CSRF（Cross-site request forgery）跨站请求伪造，是指攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。
攻击流程如下：

受害者登录 http://a.com ，并保留了登录凭证（Cookie）
攻击者引诱受害者访问了 http://b.com
http://b.com 发送了一个请求： http://a.com/act=xx 。浏]]></description><category></category></item><item><title><![CDATA[说一下 HTTP/3 新特性，为什么选择使用 UDP 协议？]]></title><link>https://blog.youkuaiyun.com/sisterAn/article/details/117501762</link><guid>https://blog.youkuaiyun.com/sisterAn/article/details/117501762</guid><author>sisterAn</author><pubDate>Thu, 03 Jun 2021 05:38:47 +0800</pubDate><description><![CDATA[引言
本文主要分为以下几个方面循序渐进走进 HTTP/3: 

HTTP/2 和 TCP 的致命缺陷
QUIC 协议为什么选择 UDP
QUIC 和 HTTP/3 新特性
QUIC 和 HTTP/3 前景发展展望

HTTP/2 和 TCP 的缺陷
 HTTP/2 使用二进制传输、Header 压缩（HPACK）、多路复用等，相较于 HTTP/1.1 大幅提高了数据传输效率，但它仍然存在着以下几个致命问题（主要由底层支撑的TCP 协议造成）：

建立连接时间长
队头阻塞问题相较于 HTTP/1.1 更严重.]]></description><category></category></item><item><title><![CDATA[HTTP/2对比HTTP/1.1，特性是什么？是如何解决队头阻塞与压缩头部的？]]></title><link>https://blog.youkuaiyun.com/sisterAn/article/details/117458820</link><guid>https://blog.youkuaiyun.com/sisterAn/article/details/117458820</guid><author>sisterAn</author><pubDate>Wed, 02 Jun 2021 07:45:18 +0800</pubDate><description><![CDATA[引言
本文主要通过以下四个方面介绍，循序渐进走进HTTP/2：

HTTP/1.1发明以来发生了哪些变化？
HTTP/1.1 协议的性能缺陷
HTTP/2 新特性
HTTP/2 遗留问题

HTTP/1.1发明以来发生了哪些变化？
近年来，如果你仔细观察那些最流行的网站首页所需要下载的资源的话，会发现一个非常明显的趋势：

消息变大 ：从几 KB 大小的消息，到几 MB 大小的消息；
页面资源变多 ：从每个页面不到 10 个的资源，到每页超 100 多个资源；
内容形式变多样 ：从单纯到文本内容，到图片、视]]></description><category></category></item><item><title><![CDATA[为什么说HTTPS比HTTP安全呢]]></title><link>https://blog.youkuaiyun.com/sisterAn/article/details/117454822</link><guid>https://blog.youkuaiyun.com/sisterAn/article/details/117454822</guid><author>sisterAn</author><pubDate>Tue, 01 Jun 2021 22:04:54 +0800</pubDate><description><![CDATA[HTTP 协议
HTTP（Hyper Text Transfer Protocol）协议是超文本传输协议的缩写，它是从WEB服务器传输超文本标记语言(HTML)到本地浏览器的传送协议，位于 OSI 网络模型中的应用层

HTTP 是一个基于TCP/IP通信协议来传递数据的协议，传输的数据类型为 HTML 文件、图片文件、查询结果等。
HTTP协议一般用于 B/S 架构。浏览器作为 HTTP 客户端通过 URL 向 HTTP 服务端即 WEB 服务器发送所有请求。

HTTP 特点

HTTP 协议支持客户端]]></description><category></category></item><item><title><![CDATA[http header怎么判断协议是不是websocket]]></title><link>https://blog.youkuaiyun.com/sisterAn/article/details/117409039</link><guid>https://blog.youkuaiyun.com/sisterAn/article/details/117409039</guid><author>sisterAn</author><pubDate>Mon, 31 May 2021 07:51:37 +0800</pubDate><description><![CDATA[引言
首先，解答本题， http 通过判断 header 中是否包含 Connection: Upgrade 与 Upgrade: websocket 来判断当前协议是否要升级到 websocket ，下面我们了解一下 WebSocket 协议与由来
WebSocket 由来
WebSocket 之前，如果需要在客户端和服务之间双向通信，需要通过 HTTP 轮询来实现， HTTP 轮询分为轮询与长轮询：

其中，轮询是指浏览器通过 JavaScript 启动一个定时器，然后以固定的间隔给服务器发请求，询问服]]></description><category></category></item><item><title><![CDATA[一文走进 HTTP 与 TCP 协议，它们的区别与联系]]></title><link>https://blog.youkuaiyun.com/sisterAn/article/details/117318221</link><guid>https://blog.youkuaiyun.com/sisterAn/article/details/117318221</guid><author>sisterAn</author><pubDate>Thu, 27 May 2021 08:16:15 +0800</pubDate><description><![CDATA[引言
本文从以下几个方面走进 GET 与 POST 的区别：

w3school 给出的标准答案
从 HTTP 是什么开始，深入 GET 与 POST 请求方法，即两者的本质区别
常见的 GET 与 POST 误解
POST 方法比 GET 方法安全？
POST 方法会产生两个 TCP 数据包？



标准答案
GET 与 POST 是 HTTP 请求中最常用的两种方法，GET 与 POST 的区别也是老生常谈的问题了，信手拈来




GET
POST



后退按钮/刷新
无害
数据会被重新提交（浏览器]]></description><category></category></item></channel></rss>