NEC定寬自適應布局

2021-08-15 02:50:28 字數 613 閱讀 4273

nec是什麼?

nec是nice easy css的簡稱,是網易(杭州)前端css開源專案代號,她為您提供漂亮簡單的樣式解決方案。

她包括了規範、框架、**庫、外掛程式等內容,致力於為前端開發人員提供高效率高質量的前端頁面開發解決方案,提高多人協作效率,也為非專業人員提供快速製作網頁的解決方案。

今天特地學習了nec自適應相關的布局,下面是主要的使用示例。

左側定寬

右側自適應

其中左側定寬,設定相對定位,左浮動脫離文件流,右移定寬的負值;

右側設為右浮動,寬為100%,右側margin-left設為左側定寬+隔開距離;

注意:這裡負邊距如果低於左側寬度,將會無法滿足右側100%寬度要求,需要自己動手實驗哈。

我是左側

我是右側

和上乙個思路相同。

右側定寬1

右側定寬2

左側自適應

原理依然使用負邊距消除溢位。

左側定寬

中間自適應

右側定寬

左右布局 左邊定寬 右邊自適應

要求 不少於三種方法 所有方案 父元素的寬度為單位為 absolute padding left right 小結 父元素設定padding left是給左邊元素預留空間,左邊元素絕對定位到該位置。flex,未來趨勢,推薦 left right 小結 flow屬性為flow grow,flow sh...

CSS之常用自適應 定寬布局

左邊自適應,右邊固定寬度 思路 1.右邊元素float right 2.主元素不定寬,設定margin right為右元素寬度 3.html樹 右元素 主元素 html right main css right maindemo 左邊自適應右邊固定寬度 中間自適應 兩邊固定寬 1.聖杯布局 思路 1...

一定一自適應 左定寬,右自適應 左自適應,右定寬

兩個div,一側定寬一側自適應,涉及的原理 div有個預設的屬性,即如果不設定寬度,那他會自動填滿父標籤的寬度 也可以說是塊級元素的屬性 自適應區不能設定浮動,因為一旦浮動就不是塊級元素了,而是行內塊,失去了塊級元素的預設屬性 position absolute 絕對定位不受流式布局影響 calc ...