六角學院｜網頁排版技巧

Float 浮動定位技巧:
-在寬度不夠寬時,會自動做計算換行.
-float 屬性有三個可能的值：left、right、和 none
-在wrap中放入box1.2.3...
-常用於將元素及元素放一起在同一行時使用.
example:
https://codepen.io/TANGJANE/pen/GvGjam
https://codepen.io/TANGJANE/pen/dzKMKV

使用 clear 清除浮動:
-wrap中有表頭header和表尾footer,左右邊放入float的並排元素(menu/content).此希望有正常的footer
出現,故在使用clearfix以清除浮動float.
example:
https://codepen.io/TANGJANE/pen/GvGjam
https://codepen.io/TANGJANE/pen/OjEbNQ
https://codepen.io/TANGJANE/pen/PKaWPL
https://codepen.io/TANGJANE/pen/oeyWZB
https://codepen.io/TANGJANE/pen/ayKEOR
https://codepen.io/TANGJANE/pen/dzKwqP

其他常見 clear 清除浮動效果
要清除浮動的內容就在父元素加上 clearfix 的 class 就大功告成.           

.clearfix:after{
  content:'';
  display:table;
  clear:both;
}
after 是加入在當下元素最後方的 "偽元素"
是用來清除浮動的
然後最多人會有疑問的是為何使用 display:table;
這段是為了解決 HTML 一項怪異的特性，稱為 Margin collapsing
此特性會讓元素內的 margin 不正常的顯示
如果是使用 display: table 就能解決這樣的問題
補充:


 使用絕對定位 / 相對定位 設計版型:(後面設定蓋掉前面設定)
絕對定位position:absolute + 上下/左右

 -<div>&<div>可以重疊在一起(因為float比較難做到)
-看副元素的定位點去做設定

 相對定位position:relative + 上下/左右
-可定位在你指定的區塊內擺放於相對應之方向
-可以是負值

*
div上到下
float左到右

 *浮動定位float:將元素作並排
  絕對定位 / 相對定位 :元素與元素做成彼此重疊時使用

 *z-index:ps圖層概念,較大值覆蓋較小值;數值相同時,code
               後者覆蓋前者.設定值吧1~30較好掌握.
  補充:http://www.webtech.tw/info.php?tid=36

 以float技巧,使用ul、li製作產品列表:

 是「主題式」的呈現方式: 以ul、li排版,讓觀者知道這區塊是個主題當中的列表,
                                              而不是一個獨立出來的東西.

 position: fixed 技巧
用於某元素想固定在版型上面,不希望滾動時畫面就跑掉時使用.

 example:
https://codepen.io/TANGJANE/pen/ayjdPx
https://codepen.io/TANGJANE/pen/EvpPqz
https://codepen.io/TANGJANE/pen/MvBjYv
https://codepen.io/TANGJANE/pen/KvBgNq
https://codepen.io/TANGJANE/pen/dzjRMZ
https://codepen.io/TANGJANE/pen/gxjKzX
https://codepen.io/TANGJANE/pen/VzBdRW

 補充position屬性:
http://zh-tw.learnlayout.com/position.html

                                               
  














评论

发表评论

热门博文