CSS布局，居中，偽元素

一、 布局

單列布局

實現方式——定寬 + 水平居中。

雙列布局

一列固定寬度，另外一列自適應寬度。

實現方式——浮動元素 + 普通元素 margin。

三列布局

兩側兩列固定寬度，中間列自適應寬度。

"content"
>
<
!-- 注意為什麼不是 main 在前面！ --
>
="menu"
>aside<
/div>
="aside"
>aside<
/div>
="main"
>content<
/div>
<
/div>
"footer"
>footer<
/div>
#content:after 
.menu 
.aside 
.main 
#footer 水平等距排列
二、居中
水平居中
// 1.1在父元素上設定 text-align: center; 使文字/水平居中
.container 
// 1.2 margin
.container 

2.1 基礎居中

// 居中方式又很多，只列舉了一種

="ct"
>
hello<
/p>
hello<
/p>
<
/div>
.ct 2.2 絕對定位實現「彈窗」居中
="dialog"
>
="header"
>我是標題<
/div>
="content"
>我是內容<
/div>
<
/div>
<
/body>
html,body 
/* 注釋1️⃣ */
.dialog 
.dialog .header 
.dialog .content 2.3 偽元素實現居中
="box"
>
"" alt=
"">
<
/div>
<
/body>
.box 
.box:
:before 
.box img 2.4 table-cell 實現居中
="box"
>
"" alt=
"">
<
/div>
<
/body>
.box 
.box img 2.5 display: flex; 實現居中
.content

h6:

:first-letter 
/*?如果我們不用偽元素，我們就會在 html 中用更多的**表示--如加 span，
然後再在 css 中對 span 加樣式。
*/ h6::after 
/* ?可以很直接地在 h6 後邊新增內容。*/
/*?但一定要注意，這個 content 裡邊可以是空字串，
但 content 必須要寫，不然這個偽元素就沒有效了。
*/p:
:selection 
input:
:-webkit-input-placeholder 
/*?對於 placeholder，不同瀏覽器寫法可能是不一樣的，
這裡對於 chrome 瀏覽器，我們前邊要加上 -webkit- 和 input-。
*/

清除浮動，替代標籤，小三角

CSS 居中布局

居中在平時的運用很多，以下簡單做了一些總結。統一 html 格式如下 class container class content contentdiv div 居中效果如下 1.1.1 已知父元素子元素高度 container content 1.1.2 未知父元素高度，已知子元素寬度 高度.con...

CSS居中布局

方式一 css3 transform parent child 方式二 flex 布局 parent 適用於子元素為浮動，絕對定位，內聯元素，均可水平居中。常見的內聯元素有 span,a,img,input,label 等等 parent 此方法同樣適用於 display inline block ...

CSS居中布局

一 水平居中方案 1 行內元素 設定 text align center 2 定寬塊狀元素 設定 左右 margin 值為 auto 3 不定寬塊狀元素 a 在元素外加入 table 標籤 完整的，包括 table tbody tr td 該元素寫在 td 內，然後設定 margin 的值為 aut...