CSS布局常见的几个问题和解决方案-网络教程-学码思教育
全国热线

025-86901720

全国监督投诉热线:9:00-23:00

CSS布局常见的几个问题和解决方案

今天南京学码思web培训学校​老师要给大家说的是CSS布局常见的几个问题以及相对应的解决方案,这样日后工作中再遇到类似问题的时候,也能更好的应对解决。

CSS是web前端中的重要知识点,主要用于修饰网页,对网页中的元素进行格式化和布局,想做好web前端设计和开发,就要掌握CSS用法和常见布局。今天南京学码思web培训学校老师要给大家说的是CSS布局常见的几个问题以及相对应的解决方案,这样日后工作中再遇到类似问题的时候,也能更好的应对解决。


三栏式布局


涉及浮动和清除浮动,主要讲解“圣杯”和“双飞翼”两种解决方法。这两种方法实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,它们实现的效果是一样的,差别在于其实现的思想。


圣杯布局


圣杯:父盒子包含三个子盒子(左,中,右)


中间盒子的宽度设置为 width: 100%; 独占一行;


使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行;


.left {margin-left:-100%;} 把左边的盒子拉上去


.right {margin-left:-右边盒子宽度px;}把右边的盒子拉上去


父盒子设置左右的 padding 来为左右盒子留位置;


对左右盒子使用相对布局来占据 padding 的空白,避免中间盒子的内容被左右盒子覆盖;


CSS布局常见的几个问题和解决方案


双飞翼布局


双飞翼:父盒子包含三个子盒子(左,中,右),中间的子盒子里再加一个子盒子。


中间盒子的宽度设置为 width: 100%;独占一行;


使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行;


在中间盒子里面再添加一个 div,然后对这个 div 设置 margin-left和 margin-right来为左右盒子留位置;


CSS布局常见的几个问题和解决方案


圣杯布局和双飞翼布局


圣杯布局和双飞翼布局解决的问题是一样的,都是两边定宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。


两种方法基本思路都相同:首先让中间盒子 100% 宽度占满同一高度的空间,在左右两个盒子被挤出中间盒子所在区域时,使用 margin-left 的负值将左右两个盒子拉回与中间盒子同一高度的空间。接下来进行一些调整避免中间盒子的内容被左右盒子遮挡。


主要区别在于 如何使中间盒子的内容不被左右盒子遮挡:


圣杯布局的方法:设置父盒子的 padding 值为左右盒子留出空位,再利用相对布局对左右盒子调整位置占据 padding 出来的空位;


双飞翼布局的方法:在中间盒子里再增加一个子盒子,直接设置这个子盒子的 margin 值来让出空位,而不用再调整左右盒子。


简单说起来就是双飞翼布局比圣杯布局多创建了一个 div,但不用相对布局了,少设置几个属性。


利用浮动实现


我自己使用浮动也实现了三栏式布局:左边盒子左浮动,右边盒子右浮动,中间盒子利用 margin-left


和margin-right来为左右盒子留位置,同时父盒子设置 overflow: auto;来避免子盒子溢出。


CSS布局常见的几个问题和解决方案


负 margin


简单总结几点:


不使用 float 的话,负 margin 元素是不会破坏页面的文档流。所以如果你使用负 margin 上移一个元素,所有跟随的元素都会被上移(而 relative 定位的元素则不同,会保留原位置,影响文档流)。


当 static 元素的 margin-top/margin-left 被赋予负值时,元素将被拉进指定的方向。


如果你设置 margin-bottom/right 为负数,元素并不会如你所想的那样向下/右移动,而是将后续的元素拖拉进来,覆盖本来的元素。


当元素不存在 width 属性或者 width: auto的时候,负 margin 会增加元素的宽度.


margin-top 为负值不会增加高度,只会产生向上位移;margin-bottom 为负值不会产生位移,会减少自身的供 CSS 读取的高度,影响下方的元素位置;上下相邻的元素两者均为负时,效果不叠加,取负值更多的那个效果。


清除浮动


大体分为两类:


其一,通过在浮动元素的末尾添加一个空元素,设置 clear: both属性,after 伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素;


其二,通过设置父元素 overflow或者 display: table属性来闭合浮动


居中布局


水平居中


对于行内元素(inline):text-align: center;


对于块级元素(block):设置宽度且 marigin-left和 margin-right是设成 auto


对于多个块级元素:对父元素设置 text-align: center;,对子元素设置 display: inline-block;;或者使用 flex 布局


垂直居中


已知高度:子元素使用绝对布局 top: 50%;,再用负的 margin-top 把子元素往上拉一半的高度


未知高度:子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%);


使用 Flexbox:选择方向,justify-content: center;


单行:设置上下 pandding 相等;或者设置 line-height和 height相等


多行:设置上下 pandding 相等;或者设置 display: table-cell;和 vertical-align: middle;;或者使用 flex 布局;或者使用伪元素


对于行内元素(inline)


对于块级元素(block):下面前两种方案,父元素需使用相对布局


水平垂直居中


定高定宽:先用绝对布局 top: 50%; left: 50%;,再用和宽高的一半相等的负 margin 把子元素回拉


高度和宽度未知:先用绝对布局 top: 50%; left: 50%;,再设置 transform: translate(-50%, -50%);


使用 Flexbox:justify-content: center; align-items: center;


响应式设计


响应式设计(Responsive Design)” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略。


媒体查询(Media Queries)是做此事所需的最强大的工具。


注: Responsive Web Design = RWD,Adaptive Web Design = AWD


RWD:


。采用 CSS 的 media query 技术


。流体布局(fluid grids)


。自适应的图片/视频等资源素材


(为小、中、大屏幕做一些优化,目的是让任何尺寸的屏幕空间都能得到充分利用)


AWD:


。CSS media query 技术(仅针对有限几种预设的屏幕尺寸设计)


。用 JavaScript 来操作 HTML 内容


。在服务器端操作 HTML 内容(比如为移动端减少内容,为桌面端提供更多内容)


以上这几个常见问题,希望大家日后遇到的时候能够积极应对解决。作为一家专业的web培训学校,南京学码思课程体系健全,除了全职讲师面授,并随时答疑解惑外,还会不定期为大家分享一些web前端技巧和常见疑问,如果你想获得直接学码思web前端教程和课程资料的话,可以多关注学码思网站,也欢迎大家亲自前来实地考察,还能直接试听课程。


上一篇:web前端工程师总结的几个开发经验
下一篇:如何让html5移动页面自适应手机屏幕

相关推荐

免费试听 | 学费咨询 | 在线报名 | 申请补贴 | 软件培训 | 网站地图

2016-2020 南京学码思教育科技有限公司 .All Rights Reserved

苏ICP备16033487号 www.njxms.com.cn

全国热线

400-080-3312

全国监督服务热线:9:00-23:00