> For the complete documentation index, see [llms.txt](https://mistborn.gitbook.io/til-coding/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mistborn.gitbook.io/til-coding/pai-ban.md). # 排版 ## 文字置中對孩子做置中非本身 ``` text-align: center; ``` ## img css 設定因為原來 img 預設格式為 inline，bottom 會多一點點空白，設為 block 貼齊容器，width 設為 100%，不然會爆開超出容器範圍，hight 設 auto 保持原圖片的比例。 ```css img { display: block; width: 100%; height: auto; } ``` ## 版面置中 ### 單欄確認 html 元素為 block，設定內容的寬度，將 margin 平分。 ```markup

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, quibusdam.

``` ```css .container { width: 600px; margin: 0 auto; } img { display: block; width: 100%; height: auto; } ``` ### 多欄比照單欄做外圍 block 置中設定，將內容依欄數設定寬，用 float 把 margin 清掉，最後加 clearfix 讓下面的內容不會跑上來。 ```markup

Lorem ipsum dolor sit amet consectetur adipisicing elit.

``` ```css .container { width: 600px; margin: 0 auto; } img { display: block; width: 100%; height: auto; } .work { float: left; width: 33.3333%; } .clearfix { clear: both; } ``` ## 網頁導覽列先做版面置中，把 logo 往左移，nav 往右移，清掉 ul 預設格式。\ li 變為橫向有 2 種方法：1.display: inline 2.float: left (inline 有間隔空間無法點，float 加 padding 更好)\ 最後一樣要加 clearfix 區隔段落。 ```markup

``` ```css .container { width: 600px; margin: 0 auto; } img { display: block; width: 100%; height: auto; } #logo { float: left; } #nav { float: right; } #nav ul { margin: 0; padding-left: 0; list-style-type: none; } #nav li { float: left; } #nav a { padding: 0 10px; } .clearfix { clear: both; } ``` ## 特殊版面將圖片移出 block 有 2 種方法：\ 1.position: relative 2.margin-top: xxpx (margin 不會留白，position 只有圖片會單獨移動) ```markup

I am handsome

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellat.

``` ```css body { background: #ccc; } .container { width: 300px; padding: 20px; margin-top: 50px; background: #fff; text-align: center; } .container img { margin-top: -70px; } /* .container img { position: relative; top: -70px; } */ ``` 滑鼠移到圖片上會有其他資訊\ 將資訊 position:absolute 移到圖片初始位置(要將圖片 position:relative 作為參考點)，加 padding 讓資訊往下移，但整個 block 會超出圖片範圍，因此要加 box-sizing 自動計算寬高，最後加上 hover 讓滑鼠移上去透明度變 1。 ```markup

Lorem ipsum dolor sit amet.

``` ```css .container { position: relative; width: 300px; background: #ccc; } img { display: block; width: 100%; height: auto; } .info { opacity: 0; position: absolute; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 100%; padding-top: 40px; text-align: center; background: rgb(0, 0, 0, 0.5); } .info:hover { opacity: 1; } ```