提高网站百度权重,站长工具seo综合查询分析,做网站公司负责修图吗,移动互联网开发培训稍微了解前端的人都知道#xff0c;圣杯布局和双飞翼布局是前端面试时必问的问题#xff0c;因为它既能体现你懂HTML结构又能体现出你对#xff24;IVCSS布局的掌握#xff0c;毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~事实上#xff0c;圣杯布局其实和…稍微了解前端的人都知道圣杯布局和双飞翼布局是前端面试时必问的问题因为它既能体现你懂HTML结构又能体现出你对IVCSS布局的掌握毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~事实上圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局两边的盒子宽度固定中间盒子自适应也就是我们常说的固比固布局。它们实现的效果是一样的差别在于其实现的思想。圣杯布局的出现是来自于a list part上的一篇文章In Search of the Holy Grail。比起双飞翼布局它的起源不是源于对页面的形象表达。在西方圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED可以说是灵感来自于页面渲染。一起来看看这两种布局的区别在哪一、双飞翼布局可以看到我们在main里面又加了一个内容层。如果知道盒子模型就知道我们是不能直接给main添加margin属性因为我们已经设置了width100%再设置margin的话就会超过窗口的宽度所以我们再创造一个内容层将所有要显示的内容放到main-content中给main-content设置margin就可以了。因为不改变父元素所以只需要给main-content设置margin: 0 200px 0 200px;属性就可以了达到效果通过缩放页面就可以发现随着页面的宽度的变化这三栏布局是中间盒子优先渲染两边的盒子框子固定不变即使页面宽度变小也不影响我们的浏览。如果你有了那么一点理解以后我们来看看圣杯布局的实现二、双飞翼布局第一步给出HTML结构Header内容区中间弹性区左边栏右边栏Footer内容区学习Q-q-u-n 767-273-102 分享学习的方法和需要注意的小细节写结构的时候要注意父元素的的三栏务必先写中间盒子。因为中间盒子是要被优先渲染嘛~并且设置其自适应也就是width:100%。第二步给出每个盒子的样式header{width: 100%;height: 40px;background-color: darkseagreen;}.container{ height:200px;overflow:hidden;}.middle{width: 100%;height: 200px; background-color: deeppink;float:left;}.left{ width: 200px;height: 200px;background-color: blue;float:left;}.right{width: 200px;height: 200px;background-color: darkorchid;float:left;}footer{width: 100%; height: 30px;background-color: darkslategray;}第三步看此时的效果图大家可以看到三栏并没有在父元素的一行显示就是因为中间盒子我们给了百分之百的宽度。所有左右两个盒子才会被挤下来。那么如何让它们呈现出一行三列的效果呢那就要让左边的盒子要到中间盒子的最左边右边的盒子到中间盒子的最右边。换个想法如果中间盒子不是100%的宽度那么按照文档流左边的盒子一定会在中间盒子的后面显示接着显示右边的盒子。但是现在中间盒子是满屏了的所以左右两个盒子被挤到下一行显示。我们要做到的是让左右两个盒子都上去。此时CSS的负边距(negative margin)该上阵了。第四步利用负边距布局1.让左边的盒子上去需要设置其左边距为负的中间盒子的宽度也就是.left {margin-left:-100%;}。这样左盒子才可以往最左边移动。2.让右边的盒子上去需要设置其左边距为负的自己的宽度也就是.right {margin-left-200px;}。这样右盒子才可以在一行的最右边显示出自己。第五步看此时的效果图第六步让中间自适应的盒子安全显示首先:利用父级元素设置左右内边距的值把父级的三个子盒子往中间挤。代码如下.container{ padding: 0 200px;} 这里的200px是左右盒子的宽度。效果如下我们可以看到左右两边的内边距是有了但是中间盒子上的内容还是被压着。其次:给左右两个盒子加一个定位加了定位之后左右两个盒子就可以设置left和right值。代码如下.left{ position: relative; left: -200px;}.right{position: relative;right: -210px;学习Q-q-u-n 767-273-102 分享学习的方法和需要注意的小细节现在圣杯布局终于搞定了也实现了我们要的效果左右侧的盒子固定中间盒子自适应而且中间盒子的内容完全不受影响。你是不是也懂了呢?
