有时候网页页面有横线滚动条，这个除非是甲方提出了这个要求，否则是不容许有这个横线滚动条的，而有时候css里面给body设置‘overflow-x:hidden;’却无效，那么可以考虑一下js，这里有四个属性可以设置：

document.body.parentNode.style.overflow = “hidden";//隐藏且禁用横向纵向两个滚动条

document.body.parentNode.style.overflow = “auto";//开启横向纵向两个滚动条

document.body.parentNode.style.overflowX = ”hidden“;//隐藏横向滚动条

document.body.parentNode.style.overflowX = ”auto“;//开启横向滚动条

document.body.parentNode.style.overflowY = ”hidden“;//隐藏纵向滚动条

document.body.parentNode.style.overflowY = ”auto“;//开启纵向滚动条
 
之前这个也没试过，一般就是样式表里hidden一下，今天试了一下这个js设定滚动轴，给人体验感觉就是权重高，css做不到的，js做给你看 查看全部

 电脑就像一个高贵冷艳的妹纸。

400，是她冷冰冰地说：“我听不懂你在说什么”；
（由于语法格式有误，服务器无法理解此请求）

401，是她无情地转身：“我不认识你，别说那些奇怪的话”；
（一般来说该错误消息表明您首先需要登录‘输入有效的用户名和密码’，或者您的用户名密码中有至少一个错误）

403，是她残酷的拒绝：“我听懂你的话，也认出你的脸，可我不爱你”；
（表示资源不可用）

404，是她紧闭心门：“我这儿没有你想要的东西”；
（表示您所要的资源是不存在）

503，是“呵呵我去洗澡”。
（一般来说是服务器问题了，可能是资源不够用了、正在维护了、暂停了或者被攻击了等等原因） 查看全部

在实际运用时，真正使用HTML5标签来开发的似乎不是很多，可能一部分原因是仍有部分用户使用在使用低版本浏览器。但是就我个人而言，是因为选取一些标签时会比较纠结，所以仍使用了div。
什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。

    语义化优点：

易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析，如盲人阅读器根据语义渲染网页
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

    今天先介绍主体结构标签，如图所示：





 
   1、<header>

    <header>定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。

    在一个文档中，您可以定义多个<header>元素，但需要注意的是<header>元素不能作为<address>、<footer> 或 <header> 元素的子元素。

    2、<nav>

    <nav>描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表。

    在一个文档中，可定义多个<nav>元素。

    3、<main>

    <main> 定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。

    需要注意的是在一个文档中不能出现多个<main>标签。

    4、<article>

    <article>元素表示文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

    当<article>元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。

    5、<aside>

    <aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

    6、<footer>

    <footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

    使用footer插入联系信息时，应在 footer 元素内使用 <address> 元素。

    注意不能包含<footer>或者<header>

    7、<section>

    <section>表示文档中的一个区域（或节），比如，内容中的一个专题组。

    如果元素内容可以分为几个部分的话，应该使用 <article> 而不是 <section>。
不要把 <section> 元素作为一个普通的容器来使用，特别是当<section>仅仅是为了美化样式或方便脚本使用的时候，应使用<div>。

    这几个标签，比较容易混淆的是<section>、<article>，所以这里特别说明：

    “Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”

    通俗来说就是<article>比<section>更具有独立性、完整性。可通过该段内容脱离了所在的语境，是否完整、独立来判断。 查看全部

作为一个前端，如果对一个网页从发起请求到返回数据这期间具体发生了什么都不知道的话，那不是一个好前端。最近，读了图解http，以及有关http相关的文章，还有自己也下载了wireshark抓包工具，实际观察了一下这个过程，下面就此做些总结。

一.从输入一个url到返回数据，中间到底发生了什么？

假设，我们在浏览器输入http://www.baidu.com:80/index.html，假设解析出的ip地址是202.43.78.3

1.浏览器解析出主机名

解析出的主机名是www.baidu.com

2.浏览器查询这个主机名的ip地址（dns）

dns解析的作用就是把域名解析成ip地址，这样才能在广域网路由器转发报文给目标ip，不然路由器不知道要把报文发给谁。下面就讲下大概的过程，不会涉及太多细节。（以chrome为例子）

（1）浏览器启动时，首先浏览器会去操作系统获取dns服务器地址，然后把这个地址缓存下来。同时浏览器还会去读取和解析hosts文件，同样放到缓存中。浏览器对解析过的域名和ip地址，都会保存着这两者的映射关系。（存到cache中）

（2）当解析域名的时候，首先浏览器会去cache中查找有没有缓存好的映射关系，如果没有的话，就去hosts文件中查找，如果也没有的话，浏览器就会发起请求去dns服务器缓存查询了，如果缓存里面也没有，那最后就是dns服务器去查询了。

3.浏览器获取端口号

4.浏览器向目标ip地址发起一条到202.43.78.3:80的tcp连接

为了传输的可靠性，tcp协议要有三次握手过程：

（1）首先浏览器会向服务器发起一个连接请求

（2）服务器会对连接请求做出响应，表示同意建立连接

（3）浏览器收到响应后，再告知对方，它知道服务器同意它建立连接了。

5.ip层把ip地址转换成mac地址，一边传输，一边查找目标服务器的mac地址

6.数据链路层处理网络连接的硬件部分，比如网卡，找到服务器的网卡

7.浏览器向服务器发送一条http报文（重复5，6步）

每一条http报文的组成：

起始行+首部+主体(可选)

起始行：http/1.0 200 ok (一般包括http版本，返回状态码，返回码原因)

首部：content-type:text/plain content-length:19

主体：name=jane

8.服务器接受客户端请求，进行一些处理，返回响应报文

web服务器接收到请求之后，实际上会做些什么呢？

（1）建立连接，如果接受一个客户端连接，就建立连接，如果不同意，就将其关闭。

（2）接收请求，读取http请求报文

（3）访问资源，访问报文中指定的资源

（4）构建响应，创建带有首部的http响应报文

（5）发送响应，将响应回送给客户端

9.浏览器读取http响应报文

10.浏览器关闭连接

看了上面的一个简单过程，大家会不会有这样一个问题，难道每次发起一个http请求，都要建立一次tcp连接吗，我们经常写的并发ajax请求，每条请求都是各自独立建立的tcp连接？一条tcp连接建立之后，是什么时候关闭的？带着这些问题，看看下面要讲的http的特性

二.http的特性

1.http是不保存状态的协议

http协议是一种无状态的协议，意思就是说它不会对每次的请求和响应之间的通信状态进行保存。你之前发过的任何请求的信息，没有任何记录。之所以这样设计，也是为了让http变得比较简单，可以处理大量事物。但是无状态的特性，也会导致一些问题，比如说一个用户登录一家网站之后，跳到另一个页面，应该还保持着登录状态，所以后面就出了cookie状态管理技术。相信大家应该都很熟悉了。

2.请求只能从客户端开始。客户端不可以接收除响应以外的指令

服务器必须等待客户端的请求，才能给客户端发送响应数据，所以说服务器是不能主动给客户端推送数据的。对于一些实时监控的功能，常常用websocket来代替

3.没有用户认证，任何人都可以发起请求

在http协议通信时，是不存在确认通信方的处理步骤的，任何人都可以发起请求。另外，服务器只要收到请求，无论是谁，都会返回一个响应。所以会存在伪装的隐患。后面出现的https就可以解决这个问题。

4.通信使用的是明文

5.无法证明报文完整性

6.可任意选择数据压缩格式，非强制压缩发送

7.http持久连接和并行连接

一开始，http请求是串行的，一个http请求，就会建立一条tcp连接，浏览器收到响应之后，就会断开连接。等上一个请求回来了，下一个请求才能继续请求。这样做的缺点是，比较耗时间和内存，后面就出现了下面一系列的优化连接性能的方法。

（1）并行连接：

原理：通过多条tcp连接发起并发的http请求

并行连接可以同时发起多个http请求，每次发起一个http请求，就会建立一个tcp连接。每个http请求是独立的，不会相互等待，这样做，很可能会提高页面的加载速度，因为人们会看到页面上面，很多个东西会同时出现，所以感觉页面加载变快了。实际上有时候是真的变快了，因为它是并行工作的。但是有时候不是真的快了。比如说，客户端的网络带宽不足时，（浏览器是通过一个28kbps的modem连接到因特网上去的），如果并行加载多个请求，每个请求就会去竞争这个有限的带宽，每个请求就会以比较慢的速度加载。这样带来的性能提升就很小。

（2）持久连接：

原理：重用tcp连接，以消除连接及关闭时延

从http1.1开始，就允许当http响应结束后，tcp连接可以保持在打开状态，以便给未来的http请求重用现在的连接。那么，这个tcp连接什么时候会关闭呢，一般情况下，40s内，如果没有新的请求，就会关闭。

（3）管道化连接

原理：通过共享的tcp连接发起并发的http请求

并行连接可以提高复合页面的传输速度，但是也有许多缺点，比如每次都会建立一次tcp连接，会耗费时间和带宽。持久连接的优势就是降低了时延和tcp的连接数量。但是持久连接可能会导致的一个问题是，可能会累积大量的空闲连接。耗费资源。

持久连接和并行连接配合使用才是最高效的方式。

一般浏览器会限制，并行连接的个数是4个，即打开少量的并行连接，其中每个都是持久连接。这也是现在用的最多的方式。 查看全部

转载自“css大牛”张鑫旭
 
交互视频效果戳这里体验：http://t.cn/Rp01GKc

就是页面滚动的时候，列表会自动绕着iPhone X的刘海排列。

看上面微博截图的反应，好像觉得这个效果实现很难，实际上，CSS3里面针对这种特定形状环绕的效果已经支持很久了，CSS3 Shapes和CSS3 Regions都是可以实现的，本文就将展示如何使用CSS3 Shapes实现元素内容在滚动的时候自动环绕iPhone X的齐刘海的效果。

一、CSS3 Shapes实现元素滚动自动环绕iPhone X头部刘海效果

可以直接手机（如果是iPhone的话）扫下面二维码体验：





环绕齐刘海滚动实现原理

CSS Shapes中有个CSS属性名为shape-outside，可以让内联元素以不规则的形状进行外部排列，其语法如下
 

/* 关键字值 */ 
shape-outside: none; 
shape-outside: margin-box; 
shape-outside: content-box; 
shape-outside: border-box; 
shape-outside: padding-box;
 /* 函数值 */
 shape-outside: circle(); 
shape-outside: ellipse(); 
shape-outside: inset(10px 10px 10px 10px);
 shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); 
/* <url>值 */ 
shape-outside: url(image.png);
 /* 渐变值 */ 
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
 
shape-outside属性要想生效，本身需要是浮动float元素。
本文demo效果实现使用的是shape-outside:polygon()，通过点坐标勾勒出和齐刘海形状相似的多边形形状，CSS代码为：

.shape { 
float: left; 
shape-outside: polygon(0 0, 0 150px, 16px 154px, 30px 166px, 30px 314px, 16px 326px, 0 330px, 0 0);
 }
如下图紫色区域示意：





此时，后面没有设置BFC（块状格式化上下文）的列表元素就会自动环绕这个形状排列，也就是自动避开了齐刘海区域。

然后，只要搞个假的iPhone X的齐刘海图片覆盖在区域上就可以了。

至此，一个静态的列表环绕齐刘海的效果就完成了。

下面关键的问题是如何让滚动的时候，列表元素动态的跟着环绕呢？

由于shape-outside所在的元素是浮动元素，因此，必定会跟着容器一起滚动，我们需要的效果是我们所绘制的这个刘海区域需要是固定的，怎么办？此时，我是借助JavaScript处理的。

原理很简单，监听容器的滚动事件，让我们的shape-outside绘制的区域实时偏移滚动的大小。此时肉眼看上去的效果就是shape-outside区域永远固定在了滚动容器clientHeight的中间。

整个效果就这么实现了，相关JS如下：

box.addEventListener('scroll', function () { var scrollTop = box.scrollTop; // 滚动偏移应用在shape-outside上 shape.style.shapeOutside = 'polygon(0 0, 0 '+ (150 + scrollTop) +'px, 16px '+ (154 + scrollTop) +'px, 30px '+ (166 + scrollTop) +'px, 30px '+ (314 + scrollTop) +'px, 16px '+ (326 + scrollTop) +'px, 0 '+ (330 + scrollTop) +'px, 0 0)'; });
 
二、CSS Shapes环绕iPhone X刘海的其它更简易方法

如果我们的技术选型是更看重简单易懂，而不是资源消耗与占用，还可以使用shape-outside:url(image.png)语法实现类似的效果，其中'image.png'就是用来被环绕的图片，环绕与否是基于计算alpha通道决定，用句简单的话描述，就是沿着图片非透明区域环绕。

由于使用url()的形状计算是基于图片元素，和inset(), circle(), ellipse()或者polygon()这些基础形状方法的计算性质不一样，因此，可以直接使用垂直方向的margin进行偏移。这要比polygon()这样实时计算坐标位置要好理解的多。

我们不妨看下CSS和JS代码，如下：

.shape { 
float: left;
 shape-outside: url(liu-outside.png); 
margin-top: 150px;
 }
box.addEventListener('scroll', function () { 
var scrollTop = box.scrollTop; // 滚动偏移应用在margin-top上 
shape.style.marginTop = (150 + scrollTop) + 'px'; 
});
可以看到，当我们滚动容器的时候，改变的就一个marginTop值就好了；而上面的 shape-outside:polygon()实现需要同时改变多个坐标值。
如果是iPhone手机，还可以扫下面码体验：






有个细节说明
这里有个细节需要说明下，那就是作为环绕区域的图片和前面显示的那个刘海图片不是一张图片，因为我们的刘海区域需要和后面的文字有一段的间隙，因此，url(liu-outside.png)中的这张'liu-outside.png'图片是有特别的实色填充处理的（扩展右侧环绕区域尺寸）：





 
三、CSS Shapes的兼容性以及结束语

CSS Shapes的兼容性为Chrome浏览器和Safari浏览器（包括iOS）都是支持的，也就意味着我们是可以在iPhone上使用的，完美。只是需要注意的是在iOS10.2及其之前的版本，CSS Shapes的使用还是需要加webkit私有前缀的，但据说iPhone X至少默认iOS 11，而刘海头交互效果就是针对iPhone X处理的，因此webkit私有前缀不加也没关系。
 
转载自“css大牛”张鑫旭 ！important 查看全部