簡單的布局套路

wuyangchun 發布于2019-08-29 15:18 / 2264人閱讀

摘要：布局給子元素加上給父元素加上布局給父元素加上給父元素加上發現兩個小游戲感覺好腦殘不過挺適合新人學習的簡單的布局做定位的的元素上面不要加任何屬性，需要加屬性，在它里面做，最少。

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套路云服務商套路

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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