自己有域名怎么做免费网站,青少年编程培训机构排名前十,佛山有什么好玩的,长春代做网站1、HTTP和HTTPS
1.1、http和https的基本概念 http: 是一个客户端和服务器端请求和应答的标准#xff08;TCP#xff09;#xff0c;用于从 WWW 服务器传输超文本到本地浏览器的超文本传输协议。 https: 是以安全为目标的 HTTP 通道#xff0c;即 HTTP 下 加入 SS…
1、HTTP和HTTPS
1.1、http和https的基本概念 http: 是一个客户端和服务器端请求和应答的标准TCP用于从 WWW 服务器传输超文本到本地浏览器的超文本传输协议。 https: 是以安全为目标的 HTTP 通道即 HTTP 下 加入 SSL 层进行加密。其作 用是建立一个信息安全通道来确保数据的传输确保网站的真实性。 1.2、 http 和 https 的区别及优缺点
http 是超文本传输协议信息是明文传输HTTPS 协议要比 http 协议安全https 是具有安全性的 ssl 加密传输协议可防止数据在传输过程中被窃取、改变确保数据的完整性(当然这种安全性并非绝对的对于更深入的 Web 安全问题此处暂且不表)。 http 协议的默认端口为 80https 的默认端口为 443。 http 的连接很简单是无状态的。https 握手阶段比较费时会使页面加载时间延长 50%增加 10%~20%的耗电。 https 缓存不如 http 高效会增加数据开销。 Https 协议需要 ca 证书费用较高功能越强大的证书费用越高。 SSL 证书需要绑定 IP不能再同一个 IP 上绑定多个域名IPV4 资源支持不了这种消耗
1. 3、https 协议的工作原理 客户端在使用 HTTPS 方式与 Web 服务器通信时有以下几个步骤 1. 客户端使用 https url 访问服务器则要求 web 服务器 建立 ssl 链接 。 2. web 服务器接收到客户端的请求之后会 将网站的证书证书中包含了公钥传输给客户端。 3. 客户端和 web 服务器端开始 协商 SSL 链接的安全等级 也就是加密等级。 4. 客户端浏览器通过双方协商一致的安全等级 建立会话密钥 然后通过网站的公钥来加密会话密钥并传送给网站。 5. web 服务器 通过自己的私钥解密出会话密钥 。 6. web 服务器 通过会话密钥加密与客户端之间的通信 。 2、TCP三次握手 1. 第一次握手 建立连接时客户端发送 syn 包 synj 到服务器并进入 SYN_SENT状态等待服务器确认 SYN 同步序列编号Synchronize Sequence Numbers。 2. 第二次握手 服务器收到 syn 包并确认客户的 SYN ackj1 同时也发送一个自己的 SYN 包 synk即 SYNACK 包此时服务器进入 SYN_RECV 状态 3. 第三次握手 客户端收到服务器的 SYNACK 包向服务器发送确认包 ACK(ackk1 此包发送完毕客户端和服务器进入 ESTABLISHED TCP 连接成功状态完成三次握手。 握手过程中传送的包里不包含数据三次握手完毕后客户端与服 务器才正式开始传送数据。 3、TCP/IP / 如何保证数据包传输的有序可靠 对字节流分段并进行编号然后 通过 ACK 回复 和 超时重发 这两个机制来保证。 1为了保证数据包的可靠传递发送方必须把已发送的数据包保留在缓冲区 2并为每个已发送的数据包启动一个超时定时器 3如在定时器超时之前收到了对方发来的应答信息可能是对本包的应答也可以是对本包后续包的应答则释放该数据包占用的缓冲区; 4否则重传该数据包直到收到应答或重传次数超过规定的最大次数为止。 5接收方收到数据包后先进行 CRC 校验如果正确则把数据交给上层协议然后给发送方发送一个累计应答包表明该数据已收到如果接收方正好也有数据要发给发送方应答包也可方在数据包中捎带过去。 4、TCP 和 UDP 的区别 1. TCP 是面向 链接 的而 UDP 是面向无连接的。 2. TCP 仅支持 单播传输 UDP 提供了单播多播广播的功能。 3. TCP 的三次握手保证了连接的 可靠性 ; UDP 是无连接的、不可靠的一种数据传输协议 首先不可靠性体现在无连接上通信都不需要建立连接对接收到的数据也不发送 确认信号发送端不知道数据是否会正确接收。 4. UDP 的 头部开销 比 TCP 的更小数据 传输速率更高 实时性更好 。 5、HTTP请求跨域问题 跨域问题指的是在浏览器发起 HTTP 请求时由于浏览器的安全限制只允许相同域名、协议、端口号之间的请求而禁止不同域名之间的请求。例如如果网站 A 的页面中使用 JavaScript 向网站 B 发起 HTTP 请求由于跨域限制这个请求会被浏览器拒绝。 解决跨域问题可以采取以下几种方法 JSONP JSONP 是一种利用 script 标签的跨域方法。通过在页面中添加一个 script 标签并将 src 属性设置为目标 URL服务器返回的内容会被当作 JavaScript 代码执行从而实现跨域请求。 缺点JSON 只支持 get因为 script 标签只能使用 get 请求JSONP 需 要后端配合返回指定格式的数据。 CORS CORSCross-Origin Resource Sharing是一种基于 HTTP 头部的跨域解决方案。通过在服务器端设置响应头 Access-Control-Allow-Origin可以允许指定源的请求访问资源。 代理 在客户端和服务器之间添加一个代理层所有的 HTTP 请求都先经过代理服务器再由代理服务器向目标服务器发起请求。由于代理服务器和目标服务器之间没有跨域问题因此可以成功地完成请求。 6、Cookie、sessionStorage、localStorage 的区别
Cookie、sessionStorage、localStorage 都是浏览器端存储数据的方式但它们之间有以下区别 存储大小Cookie 最大只能存储 4KB 的数据而 sessionStorage 和 localStorage 可以存储更多的数据一般最大可存储几十 MB 的数据。 生命周期Cookie 的生命周期由 expires 或 max-age 字段控制在其生存期内有效可以在不同的页面之间共享。相比之下sessionStorage 只在当前会话页面关闭后即失效中有效而 localStorage 的数据则始终有效除非通过代码或用户手动清除。 与服务器的通信Cookie 在请求时会自动携带到服务器端因此可以用于保存会话信息等。sessionStorage 和 localStorage 则仅存储在本地不会与服务器进行交互。 安全性Cookie 的数据可以在浏览器和服务器之间传输存在被劫持的风险。相比之下sessionStorage 和 localStorage 数据仅存储在本地相对更加安全。 综上所述Cookie、sessionStorage、localStorage 在存储数据的大小、生命周期、与服务器的通信和安全性等方面不同使用时需要根据具体情况选择合适的方式。 7、粘包问题分析与对策 粘包问题是指在网络传输过程中对于多个数据包的发送在接收端会被看成一个大的数据包导致数据处理出错。粘包问题的原因一般是由于发送方和接收方之间的通信协议不同步导致的。 对于解决粘包问题主要可以从以下几个方面入手 固定包长可以将每个数据包的长度固定为一个特定值例如设置为 1024 字节则每次发送时都会按照这个长度进行封包从而避免粘包问题的发生。 添加分隔符通过在每个数据包的结尾加上特殊的分隔符例如 \r\n接收端就可以根据分隔符将接收到的数据拆分成多个数据包进行处理从而避免粘包问题的发生。 发送数据大小信息在每个数据包的开头添加一个表示数据包大小的字段接收端在接收数据时先读取该字段并根据该字段决定本次读取多少字节的数据从而避免粘包问题的发生。 使用应用层协议应用层协议可以定义数据包的具体格式包括包头、包体等信息从而确保每个数据包的边界清晰明确避免粘包问题的发生。 8、 从输入 URL 到页面加载的全过程
从输入 URL 到页面加载的全过程可以概括为以下几个步骤 DNS 解析浏览器首先根据 URL 中的域名部分解析出对应的 IP 地址查询本地 DNS 缓存如果不存在则向 ISP 的 DNS 服务器发起请求并递归查询直到查到对应的 IP 地址。 TCP 连接浏览器使用 HTTP 协议向对应的 Web 服务器发送请求时需要通过 TCP 协议建立与 Web 服务器的连接包括三次握手和四次挥手等过程。 发送 HTTP 请求在建立好 TCP 连接后浏览器向 Web 服务器发送 HTTP 请求包括请求头、请求方法、请求参数等信息。 服务器处理请求Web 服务器接收到浏览器发送的 HTTP 请求后根据请求的内容进行相应的处理包括解析请求参数、读取数据库、处理业务逻辑等操作并将处理结果返回给浏览器。 接收 HTTP 响应浏览器接收到 Web 服务器返回的 HTTP 响应后开始解析响应头、解压缩响应体、校验响应状态码等。 渲染页面浏览器根据响应体中的 HTML、CSS 和 JavaScript 文件开始渲染页面包括构建 DOM 树、解析 CSS 样式、执行 JavaScript 脚本等操作。 页面加载完成当页面所有资源都下载完成并且解析完毕后页面便加载完成此时浏览器会触发 DOMContentLoaded 事件通知网页已经加载完毕可以开始交互。 综上所述从输入 URL 到页面加载的全过程包括 DNS 解析、TCP 连接、发送 HTTP 请求、服务器处理请求、接收 HTTP 响应、渲染页面和页面加载完成等多个阶段。在每个阶段中各种协议和技术都发挥了重要作用并通过协同工作实现了整个过程。 9、浏览器重绘与重排的区别 浏览器的重绘repaint指的是一个元素的外观被改变但是没有改变布局的情况下浏览器需要重新绘制这个元素。例如修改了文字颜色、背景颜色、边框颜色等属性都会触发浏览器的重绘过程。 而重排reflow指的则是因为元素的布局或者几何属性发生了改变导致整个页面布局的重新计算和绘制。例如改变了元素的大小、位置、字体等属性都会触发重排因为它们都会影响到其他元素的布局和位置。 重排比重绘更加耗费浏览器性能因为它不仅会重新计算和绘制当前元素还会涉及到其他元素的计算和绘制引起全局性的效果。在优化网站性能的时候我们应该尽量避免触发浏览器的重排过程而通过合理的 CSS 设计和使用一些技巧可以减少重排的次数提高页面加载速度和响应速度。 10、如何避免重绘或者重排
为了避免页面中的重排和重绘可以考虑以下几个方面来优化页面 使用 CSS transform 代替 top 或者 left 来进行元素的位置移动因为使用 top 和 left 会导致浏览器进行页面布局的计算而使用 transform 进行位移则不会影响到布局的计算。 使用 CSS opacity 代替 visibility 来控制元素的显示和隐藏因为使用 visibility 属性会影响到布局的计算而使用 opacity 不会影响布局。 避免逐条修改 DOM 元素的样式而是通过预先定义好 class然后修改 DOM 的 className 来统一修改样式。 可以将需要频繁操作的 DOM 元素先从文档中移除出来再修改其样式和属性最后再把元素加回文档中可以避免由于对 DOM 元素频繁修改而导致的多次重排、重绘等性能问题。 使用 CSS3 动画或者过渡代替 JavaScript 对元素样式的直接操作因为使用 CSS3 动画或过渡可以利用 GPU 加速使得动画效果更加流畅。 11、介绍下 304 过程
304 是 HTTP 协议中的一个状态码表示请求资源未被修改可以直接从本地缓存中获取。 浏览器在发起 HTTP 请求时会先检查浏览器缓存是否有可用的资源副本如果有则向服务器发送一个条件请求该请求会包含一个 If-Modified-Since 头部这个头部的值是上次请求时服务器返回的 Last-Modified 值。如果服务器端验证发现这个时间之后文件没有发生改变则会返回状态码 304 Not Modified此时浏览器就可以从本地缓存中获取资源而不需要重新下载。 此外在请求资源时浏览器还会检查资源的 ETag 和 Cache-Control 头部信息如果命中了缓存策略则同样返回 304 状态码。 需要注意的是浏览器的缓存机制依赖于响应头中的各种缓存控制字段比如 Expires、Cache-Control、Last-Modified 等需要在服务器端进行正确的配置才能使得缓存起到良好的性能优化作用。 12、浏览器的缓存机制 强制缓存 协商缓存
浏览器的缓存机制可以分为强制缓存和协商缓存两种类型。
强制缓存 当浏览器需要请求某个资源时会先检查该资源的缓存情况并根据缓存情况来决定是否需要从服务器重新获取资源。如果该资源在浏览器中有可用的缓存副本并且没有过期则浏览器会直接使用该缓存副本而不需要向服务器发送 HTTP 请求。这被称为“强制缓存”。 强制缓存可以通过设置资源的响应头信息来实现常见的设置方式有两种Expires 和 Cache-Control。
Expires 是一个绝对时间表示资源的过期时间当请求资源时如果当前时间未超过 Expires 的值则直接使用缓存资源。Cache-Control 则是一个相对时间表示资源的有效期在请求资源时如果当前时间距离上次资源请求时间在 Cache-Control 规定的时间范围内则直接使用缓存资源。
协商缓存 当浏览器发现某个资源的缓存已经过期了或者没有缓存副本可用时就需要向服务器发送条件请求询问该资源是否有修改。如果服务器返回的响应中包含了该资源的 ETag 或者 Last-Modified 等标识资源版本的请求头信息则浏览器可以根据这些头信息来决定是否需要从服务器重新获取资源。这种缓存方式被称为“协商缓存”。 协商缓存的逻辑是浏览器在请求资源时会带上一个 If-None-Match 头部该头部的值就是上一次服务器返回的 ETag 值或者带上一个 If-Modified-Since 头部该头部的值是上次请求时服务器返回的 Last-Modified 值。如果服务器发现客户端传来的 ETag 或者 Last-Modified 与服务器上的资源版本相同则返回 304 Not Modified 状态码表示资源没有修改让浏览器使用本地缓存。如果资源已经被修改则返回新的资源并且在响应头中添加新的 ETag 和 Last-Modified 信息。
13、 说下进程、线程和协程 进程 是一个具有一定独立功能的程序在一个数据集上的一次动态执行的过程 是操作系统进行资源分配和调度的一个独立单位是应用程序运行的载体。进程是一种抽象的概念从来没有统一的标准定义。 线程 是程序执行中一个单一的顺序控制流程是 程序执行流的最小单元 是处理器调度和分派的基本单位。一个进程可以有一个或多个线程各个线程之间共享程序的内存空间( 也就是所在进程的内存空间 ) 。一个标准的线程由线程 ID 、当前指令指针(PC) 、寄存器和堆栈组成。而进程由内存空间 ( 代码、数据、进程空间、打开的文件) 和一个或多个线程组成。 协程 英文 Coroutines 是一种 基于线程之上但又比线程更加轻量级的存在 这种由程序员自己写程序来管理的轻量级线程叫做『用户空间线程』具有对内核来说不可见的特性 HTML CSS
14、HTML5 新特性
HTML5 是一个用于结构化和呈现万维网内容的标记语言与 HTML 4 相比HTML5 引入了很多新的特性。
一些 HTML5 的新特性 语义化标签如 header、footer、nav、section、article 和 aside 等标签用于更好地描述内容。 视频和音频HTML5 引入了 video 和 audio 标签来支持视频和音频播放从而无需使用 Flash 或其他插件。 Canvas 绘图Canvas API 可以在网页上实时绘制图形这对于游戏和数据可视化非常有用。 Web 存储HTML5 引入了 Web 存储技术如 localStorage 和 sessionStorage可以在客户端存储数据。 Web WorkersHTML5 中的 Web Workers 允许在主线程之外运行 JavaScript 代码实现多线程并发处理。 地理定位通过 HTML5 的 Geolocation API网页可以获取用户的地理位置信息。 以上只是 HTML5 的一些新特性还有很多其他的新特性如表单控件、Web 应用程序和离线 Web 应用等。
14.1、语义化的优点 在没 CSS 样式的情况下页面整体也会呈现很好的结构效果 代码结构清晰易于阅读 利于开发和维护 方便其他设备解析如屏幕阅读器根据语义渲染网页。 有利于搜索引擎优化SEO搜索引擎爬虫会根据不同的标签来赋予不同的权重
15、 CSS 选择器及优先级 选择器 id 选择器(#myid) 类选择器(.myclass) 属性选择器(a[relexternal]) 伪类选择器(a:hover, li:nth-child) 标签选择器(div, h1,p) 相邻选择器h1 p 子选择器(ul li) 后代选择器(li a) 通配符选择器(*) 优先级 !important 内联样式1000 ID 选择器100 类选择器/属性选择器/伪类选择器10 元素选择器/伪元素选择器1 关系选择器/通配符选择器0 带!important 标记的样式属性优先级最高 样式表的来源相同时!important 行内样式ID 选择器 类选择器 标签 通配符 继承 浏览器默认属性 16、 position 属性的值有哪些及其区别 固定定位 fixed 元素的位置相对于浏览器窗口是固定位置即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置与文档流无关因此不占据空间。Fixed定位的元素和其他元素重叠。 相对定位 relative如果对一个元素进行相对定位它将出现在它所在的位置上。然后可以通过设置垂直 或水平位置让这个元素“相对于”它的起点进行移动。在使用相对定位时无论是否进行移动元素仍然占据原来的空间。因此移动元素会导致它覆盖其它框。 绝对定位 absolute 绝对定位的元素的位置相对于最近的已定位父元素如果元素没有已定位的父元素那 么它的位置相对于。absolute 定位使元素的位置与文档流无关因此不占据空间。 absolute 定位的元素和其他元素重叠。 粘性定位 sticky元素先按照普通文档流定位然后相对于该元素在流中的 flowrootBFC和 containing block最近的块级祖先元素定位。而后元素定位表现为在跨越特定阈值前为相对定 位之后为固定定位。 默认定位 Static 默认值。没有定位元素出现在正常的流中忽略 top, bottom, left, right 或者 z-index 声 明。 inherit: 规定应该从父元素继承 position 属性的值。 17、box-sizing 属性 box-sizing 规定两个并排的带边框的框语法为 box-sizing:content-box/border-box/inherit content-box宽度和高度分别应用到元素的内容框在宽度和高度之外绘制元素的内边距和边框。【标准盒子模型】 border-box为元素设定的宽度和高度决定了元素的边框盒。【IE 盒子模型】inherit继承父元素的 box-sizing 值 18、CSS 盒子模型 CSS 盒子模型Box Model指的是一个 HTML 元素的大小和边距如何计算。在 CSS 中所有的元素都可以看作是盒子每个盒子由四个部分组成contentpaddingborder 和 margin。 在标准的盒子模型中width 指 content 部分的宽度。 在 IE 盒子模型中width 表示 contentpaddingborder 这三个部分的宽度。 故在计算盒子的总宽度时存在差异 标准盒模型 一个块的总宽度 widthmargin( 左右 )padding( 左右 )border( 左右) 怪异盒模型 一个块的总宽度 widthmargin 左右既 width 已经包含了padding 和 border 值 19、BFC 1、BFC 的概念 BFC 是 Block Formatting Context 的缩写即块级格式化上下文。 BFC 是 CSS布局的一个概念是一个独立的渲染区域规定了内部 box 如何布局 并且这个区域的子元素不会影响到外面的元素其中比较重要的布局规则有内部 box垂直放置计算 BFC 的高度的时候浮动元素也参与计算。 2、BFC 的原理布局规则 内部的 Box 会在垂直方向一个接一个地放置 Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发 生重叠 每个元素的 margin box 的左边 与包含块 border box 的左边相接触(对于从左往右的格式化否则相反 BFC 的区域不会与 float box 重叠 BFC 是一个独立容器容器里面的子元素不会影响到外面的元素 计算 BFC 的高度时浮动元素也参与计算高度 元素的类型和 display 属性决定了这个 Box 的类型。不同类型的 Box 会参与不同的 Formatting Context。 3、如何创建 BFC 根元素即 HTML 元素 float 的值不为 none position 为 absolute 或 fixeddisplay 的值为 inline-block、table-cell、table-caption overflow 的值不为 visible 4、BFC 的使用场景 去除边距重叠现象 清除浮动让父元素的高度包含子浮动元素 避免某元素被浮动元素覆盖 避免多列布局由于宽度计算四舍五入而自动换行 20、让一个元素水平垂直居中 使用 display 和 table-cell 属性将父元素设置为 display: table;子元素设置为 display: table-cell; vertical-align: middle; text-align: center;这样即可实现水平和垂直居中。使用绝对定位 position将子元素的左上角分别调整至居中位置此时需要将 margin 设置为负宽高的一半。我们可以这样设置子元素的样式position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); 即可实现水平和垂直居中。使用 flex 布局将父元素设置为 display: flex;并设置 justify-content: center; align-items:center;这样即可实现水平和垂直居中。使用 grid 布局将父元素设置为 display: grid;并使用 justify-content: center; align-items:center; 实现水平和垂直居中。 21、隐藏页面中某个元素的方法 opacity0该元素隐藏起来了但不会改变页面布局并且如果该元素已经绑定 一些事件如 click 事件那么点击该区域也能触发点击事件的 visibilityhidden该元素隐藏起来了但不会改变页面布局但是不会触发该元素已 经绑定的事件 隐藏对应元素在文档布局中仍保留原来的空间重绘displaynone把元素隐藏起来并且会改变页面布局可以理解成在页面中把该元素。 不显示对应的元素在文档布局中不再分配空间回流重绘 22、用 CSS 实现三角符号
可以通过设置元素的 border 属性来实现三角形的效果。 具体来说可以将一个元素的上下左右四个边框设置为一个宽度为 0 的 border然后再将其中三个边框设置为非零宽度且透明的 border。这样就可以在元素的某一侧生成一个三角形了。 例如要在一个元素的左侧生成一个向右的三角形可以按如下方式添加 CSS 样式
.triangle {width: 0;height: 0;border-top: 10px solid transparent; /* 上边框透明 */border-bottom: 10px solid transparent; /* 下边框透明 */border-right: 10px solid red; /* 右边框红色宽度为 10 像素 */
}
这样设置之后就会在 .triangle 元素的左侧生成一个宽度为 0、高度为 0、底部为直线、右侧为斜线的三角形因为上、下两个边框都是透明的而右边框是红色且有宽度的。
类似地可以通过修改上下左右四个边框的设置来实现不同方向和不同大小的三角形。
页面布局
23、flex布局 布局的传统解决方案基于盒状模型依赖 display 属性 position 属性 float 属性。它对于那些特殊布局非常不方便比如垂直居中就不容易实现。 Flex 是 Flexible Box 的缩写意为 弹性布局 , 用来为盒状模型提供最大的灵活性。 指定容器 display: flex 即可。 简单的分为容器属性和元素属性。 容器的属性 flex-direction决定主轴的方向即子 item 的排列方法flex-direction: row | row-reverse | column | column-reverse; flex-wrap决定换行规则 flex-wrap: nowrap | wrap | wrap-reverse; flex-flow .box { flex-flow: || ; } justify-content对齐方式水平主轴对齐方式 align-items对齐方式竖直轴线方向 align-content 项目的属性元素的属性 order 属性定义项目的排列顺序顺序越小排列越靠前默认为 0 flex-grow 属性定义项目的放大比例即使存在空间也不会放大flex-shrink 属性定义了项目的缩小比例当空间不足的情况下会等比例的缩小如果 定义个 item 的 flow-shrink 为 0则为不缩小 flex-basis 属性定义了在分配多余的空间项目占据的空间。 flex是 flex-grow 和 flex-shrink、flex-basis 的简写默认值为 0 1 auto。 align-self允许单个项目与其他项目不一样的对齐方式可以覆盖 align-items默认属 性为 auto表示继承父元素的 align-items 比如说用 flex 实现圣杯布局 24、Rem 布局 首先 Rem 相对于根 (html) 的 font-size 大小来计算。 简单的说它就是一个相对单例 如:font-size:10px;, 那么1rem 10px 了解计算原理后首先解决怎么在不同设备上设置 html 的 font-size 大小。其实 rem 布局的本质是等比缩放一般是基于宽度。 优点 可以快速适用移动端布局字体图片高度 缺点 ① 目前 ie 不支持对 pc 页面来讲使用次数不多 ② 数据量大所有的图片盒子都需要我们去给一个准确的值才能保证不同机型的适配 ③ 在响应式布局中必须通过 js 来动态控制根元素 font-size 的大小。也就是说 css 样式和 js 代码有一定的耦合性。且必须将改变 font-size 的代码放在 css样式之前。 25、 百分比布局 通过百分比单位 % 来实现响应式的效果。通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化从而实现响应式的效果。 直观的理解我们可能会认为子元素的百分比完全相对于直接父元素height 百分比相对于 heightwidth 百分比相对于 width。 padding、border、margin 等等不论是 垂直方向还是水平方向都相对于直接父元素的 width。 除了 border-radius 外还有比如 translate、background-size 等都是相对于自身的。 缺点 计算困难 各个属性中如果使用百分比相对父元素的属性并不是唯一的。造成我们 使用百分比单位容易使布局问题变得复杂。
26、浮动布局 当元素浮动以后可以向左或向右移动直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流所以文档的普通流中的框就变的好像浮动元素不存在一样。 优点 这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后它有着块级元素的一些性质例如可以设置宽高等但它与 inline-block 还是有一些区别的第一个就是关于横向排序的时候float 可以设置方向而 inline-block 方向是固定的还有一个就是 inline-block 在使用时有时会有空白间隙的问题 缺点 最明显的缺点就是浮动元素一旦脱离了文档流就无法撑起父元素 会造成父级元素高度塌陷 27、如何使用 rem 或 viewport 进行移动端适配 使用 rem 布局 remfont size of the root element是 CSS3 新增的一个相对单位它以根元素的字体大小作为参考值实现了在不同设备和不同分辨率下的网页布局一致性。因此使用 rem 布局进行移动端适配时需要将页面的宽度设置为设置的视窗宽度后再根据设计稿中的尺寸将像素值转换成 rem 值。 例如如果设计图的宽度为 750px要在 iPhone 6 上显示则网页宽度应为 375pxiPhone 6 的屏幕宽度这时我们可以将根元素的字体大小设置为 37.5px然后按照设计图上的尺寸将像素值除以 37.5 得到转换后的 rem 值。 html {font-size: 37.5px;
}.box {width: 100px; /* 在设计稿上宽度为 100px */height: 100px;font-size: 16px; /* 设计稿中的字体大小 */
} rem 适配的优缺点 优点没有破坏完美视口 缺点px 值转换 rem 太过于复杂(下面我们使用 less来解决这个问题) 使用 viewport Viewport视口是指浏览器可视区域的大小可以通过 meta 标签来设置 viewport 的大小和缩放比例等。使用 viewport 进行移动端适配时需要将页面的宽度设置为 device-width这样就可以根据设备屏幕的宽度来自动适配了。 meta nameviewport contentwidthdevice-width, initial-scale1.0 设置好 viewport 后就可以使用百分比等相对单位进行布局从而实现移动端适配。 viewport 适配的优缺点 在我们设计图上所量取的大小即为我们可以设置的像素大小即所量即所设 缺点破坏完美视口 总结
rem 和 viewport 都可以用来进行移动端适配其核心思路是让页面内容充满整个视窗。使用 rem 布局时需要将像素值转换成 rem 值而使用 viewport 时则直接使用相对单位进行布局即可。 28、清除浮动的方式
在父元素中定义 overflow 属性为 hidden 或 auto开启bfc设置高度最后一子元素 宽100%清除both
.clearfix:after{content:;display:block;clear:both;visibility:hidden;
}
// visibility隐藏不会继承 opacity可以被继承 都占用原来的位置
//display:none 不占用原来的位置
4. 额外标签法即在浮动元素下添加一个空的块级元素并设置 clear 属性从而达到清除浮动的目的。例如
div classparentdiv classfloat-left浮动元素/divdiv styleclear: both;/div
/div
