html布局的常用的四种实现方式

需求 ：假设高度默认100px ，请写出三栏布局，其中左栏、右栏各为300px，中间自适应

将左右的div宽度设为300px,分别左右浮动，中间盒子不设宽度。注意：先写右边盒子，再写中间盒子，否则先渲染中间盒子，中间盒子会占满该行剩下的宽度，右边盒子只能换行显示，就会出现下面的情况

正常的渲染效果如下所示：

第二种：绝对定位（position:absolute）

设置父盒子position:relative（相对定位），

三个子盒子position：absolute,

左盒子left:0,

右盒子right:0

中间盒子left:300pxright:300px

第三种：flex布局

父盒子 display:flex

左右盒子设置宽度：300px

中间盒子flex:1(flex-grow:1 flex-shrink:1 flex-basis:0%)不考虑元素尺寸自由伸缩

第四种：grid布局

父盒子display: grid

grid-template-columns:300px auto 300px(分割成3列，宽度分别为300px auto 300px)

grid-template-rows:100px(占一行，行高100px)

在网页中经常用到锚点，特别是在比较长的页面中锚点的使用会增加用户体验，现在php中文网介绍html 锚点三种实现方法

1） . 在同一页面中

<a name="add"></a>或者 <a id="add"></a>（ps：用id兼容性好些）

<a href="#add">跳转到add</a>

2） . 在不同页面中，锚点定位在a.html中，从另外一个页面的链接跳转到这个锚点

<a href="a.html#add">跳转到a.add</a>

3） . 点击链接触发js事件，同时跳转到锚点，有两种处理方式：

第一种：

<a href="#add" onclick="add()">触发add函数并跳转到add锚点</a>

第二种：

<p id="pNode"></p>

<a href="#" onclick="document.getElemetnById('pNode').scrollIntoView(true)return false">通过scrollIntoView实现锚点效果</a>

scrollIntoView()的用法

scrollIntoView 是一个与页面（容器）滚动相关的API（ 官方解释 ），该API只有boolean类型的参数能得到良好的支持（firefox 36+都支持），所以在这里只讨论参数Boolean类型的情况

调用方法为 element.scrollIntoView() 参数默认为true。

参数为true时调用该函数，页面（或容器）发生滚动，使element的顶部与视图（容器）顶部对齐；

参数为false时，使element的底部与视图（容器）底部对齐。

TIPS：页面（容器）可滚动时才有用！