分享css布局小技巧分享(新手必看)

1.max-width:

当页面左右宽度缩小时,为了避免出现左右滚动条的糟糕体验,就可以用到max-width啦!页面比宽度小时,会自动缩小哦~

2.box-sizing:

对元素设置box-sizing:border-box后,确定宽度后再设置padding和border,不会改变宽度。可以对全局设置,解决浏览器兼容问题的写法如下:

3.overflow:auto

边框自适应内容的大小,不会出现overflow的情况。

IE兼容方案:

4.响应式设计-媒体查询

运用媒体查询后,可以根据不同的页面宽度设置不同的布局,方法如下:

5.文字多列布局:

最后

“相信有很多想学前端的小伙伴,今年年初我花了一个月整理了一份最适合2018年学习的web前端干货,从最基础的HTML+CSS+JS到移动端HTML5等都有整理,送给每一位前端小伙伴,53763,1707这里是小白聚集地,欢迎初学和进阶中的小伙伴。”

祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,168评论 1 92
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 4,924评论 5 15
  • 文章开头:本文是艺林小宇老师发表在产品壹佰的文章(http://www.chanpin100.com/articl...
    萌丸1014阅读 408评论 0 2
  • “我有一个核桃大小的故事” “那是什么故事” “吃核桃的故事” “说来听听” “说有一天有一个傻子突然意识到自己好...
    无良别语阅读 466评论 0 0
  • 生命是个过程, 零零碎碎的时光,断断续续的记忆,终归会随着时光流水滚滚逝去。 流水汇聚的沧海,终归会随着命运浮沉化...
    一世明哥阅读 1,498评论 8 27

友情链接更多精彩内容