CSS若干常見問題小結

2021-06-28 04:14:39 字數 1490 閱讀 7600

【邊框為虛線】

border:1px dashed #ddd;

【邊框為實線】

border:1px solid #ddd;

【table中的tr加下劃線邊框】

在css中做如下宣告

.mytable

【table 中的單元格 出現間斷邊框】

【給單選/複選 新增文字可選資訊】

注意使用 label 標籤時 for屬性的值  對應的是表單中元素的id屬性的值

【td內 文字的對齊問題】

【td 文字垂直對齊】

屬性可選值: top   middle    bottom    baseline

【td 文字水平對齊】

屬性可選值:left  right   center   justify

【tr中設定行高】

不建議使用 height屬性 這樣會使部分內容隱藏

line-height:15px; /*建議使用此屬性*/

【td中如果內容為空】

請使用空格字元填充:   

這樣即使沒有 內容 依然會填充空白進去

【table中的tr加下劃線邊框】

在css中做如下宣告

.mytable 

tr

【不想出現滾動條】

overflow:hidden;
【不想出現水平滾動條】

overflow-x:hidden;

overflow-y:auto;

【不想出現垂直滾動條】

overflow-y:hidden;

overflow-x:auto;

【不想出現滾動條 但是垂直方向高度隨內容自增長】

overflow-x:hidden;

overflow-y:auto;

min-hight :*** px;

[注意:] 使用此法 必須確保 自增長的高度包括了 padding 和 margin 否則還是會出現垂直滾動條

那麼需要注意的是 dom中的元素(除了height外 還必須考慮 margin和padding)沒有超出 父容器的實際高度

【那麼水平方向同上 修改部分引數即可】

【若想出現滾動條,但是是出現在瀏覽器邊框滾動條】

overflow:visible;

常見問題小結

二 tips 實際也是一種塌陷,運用bfc,給元素新增overflow hidden 構建成另乙個bfc來處理 doctype html en utf 8 title box block1 block2 style head box block1 div box block2 內容 隱藏 displ...

CSS常見問題

viewport fit,它有三個可選值 contain 可視視窗完全包含網頁內容 cover 網頁內容完全覆蓋可視視窗 auto 同contain的作用.box box after在flex多行布局中,justify content space between 這個屬性如果最後一行元素沒有填滿,會...

CSS常見問題

viewport fit,它有三個可選值 contain 可視視窗完全包含網頁內容 cover 網頁內容完全覆蓋可視視窗 auto 同contain的作用.box box after在flex多行布局中,justify content space between 這個屬性如果最後一行元素沒有填滿,會...