简单的布局套路

wuyangchun 发布于2019-08-29 15:18 / 2248人阅读

摘要：布局给子元素加上给父元素加上布局给父元素加上给父元素加上发现两个小游戏感觉好脑残不过挺适合新人学习的简单的布局做定位的的元素上面不要加任何属性，需要加属性，在它里面做，最少。

Float 布局

给子元素加上float:left

给父元素加上clearfix

 .clearfix::after{
            content: "";
            display: block;
            clear:both;
        }

Flex 布局

给父元素加上 display:flex;

给父元素加上 justify-content:space-between;

发现两个Flex 小游戏（感觉好脑残）不过挺适合新人学习的：
http://flexboxfroggy.com/#zh-cn
http://www.flexboxdefense.com/

简单的布局：做定位的的元素上面不要加任何属性，需要加属性，在它里面做，bug最少。

1、单栏布局


  
    eee    
  
    eee
  
    eee

2、两栏布局



    aside
    main

footer

3、三栏布局



    aside
    aside
    main

footer

GPU云服务器云服务器 html简单布局网站套路 CDN套路云服务商套路

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113235.html

Sticky footers实现套路

摘要：第二种方式首先提一个概念相对于视窗的高度视窗高度是。这种需求刚好符合。提供一种增加包裹层实现方式。无论是pc还是移动端，有一种布局叫做Sticky footers，何为Sticky footers？百度翻译：粘粘的页脚[笑哭],不过意思也算对吧，就是如果页面内容不够长的时候，页脚粘贴在视窗底部；如果内容足够长时，页脚块会附在内容区块下面。那么如何来实现这种效果呢，今天来用两种方式聊一...

sushi 2019-08-29 11:33 评论0 收藏0
CSS1:CSS难学与好学,CSS学习方法

摘要：只需要熟悉常用套路，足以应付日常工作包括阿里巴巴腾讯这些公司的日常工作现在的公司更喜欢好的程序员，对要求不高，面试题也很基础。 CSS1:CSS难学与好学,CSS学习方法 1.CSS难学与好学 1.1CSS为什么难学 CSS 属性很多，难以一次性记下来 CSS 属性之间互相影响，难以完全掌握 CSS 核心概念都写在文档中，但是如果不熟悉一些英文词汇，很难短时间看完 CSS 文档 CS...

刘明 2019-08-29 15:43 评论0 收藏0
webpack多页应用架构系列（一）：一步一步解决架构痛点

摘要：本文首发于的技术博客实用至上，非经作者同意，请勿转载。原文地址如果您对本系列文章感兴趣，欢迎关注订阅这里这系列文章讲什么本系列文章主要介绍如何用这一当前流行的构建工具来设计一个多页应用的架构。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000006843916如果您对本系列文章...

Lowky 2019-08-20 10:50 评论0 收藏0
分享一下软件测试面试历程和套路，真的很实在

摘要：软件测试自学秘诀面试失败一天，心态稳的一批，因为面试的全是外包人事帮我联系的公司，工资全都是一万以上，之前只有四五千的自己根本不觉得自己能胜任。个人是去年年底零基础转行，两三千培训费学出来，学完后也是稀里糊涂，仅是知道功能测试就是找问题，其他接口，性能，数据库，python基础，虚拟机搭建网站都实现了课程展示那样。面试资...

Lyux 2021-11-23 09:51 评论0 收藏0
CSS2:宽度与高度疑难点解析

摘要：宽度与高度如果你的代码里经常出现和属性说明你对宽度与高度理解的不够深文档流翻译很烂应该为普通流或者常规流的高度字体高度与行高字和字之间是通过基线对齐的行高与默认行高是字体设计室写进去的不同字体行高不一样跟字体设计有关系字体的建议行高写在了 CSS2:宽度与高度如果你的CSS代码里经常出现height和width属性,说明你对宽度与高度理解的不够深 1.文档流(Normal Flow)...

raledong 2019-08-29 15:43 评论0 收藏0