網頁前台設計 html小知識點梳理

-webkit-touch-callout:none

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6

不進行縮放

進行縮放
無需新增上述標籤即可

設定 display: inline-block

給父元素 新增  min-width 可以改善這個問題

兄弟元素對齊 vertical-align:top;

讓元素水平居中，使用 text-align: center;

讓水平居中，父元素使用 text-align: center;

塊級元素水平居中，使用 margin-right: auto; margin-left: auto; 

垂直居中

單行文字的垂直居中，讓 line-height 和 height 相等。

不確定高度的一段文字豎直居中，這裡不適用高度，使用 padding-top: ...; padding-bottom: ...; padding-top 和 padding-bottom 值相同.

確定高度的塊級元素豎直居中，使用 position: absolute; top: 50%; margin-top: ...;(margin-top的值為自身高度的值的一半的負值); 

絕對定位實現水平垂直居中，使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 

平移實現水平垂直居中法：通過使用 transform: translate(-50%,-50%); 新增廠商字首 -webkit- 相容 safari 和 chrome

讓瀏覽器計算子元素的寬高並讓其水平垂直居中：通過使用定位position: absolute; top:...; right: ...; bottom: ...; left: ...; 四個方向上的值缺一不可。

//一行

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

word-break: break-all;

//兩行

text-overflow: -o-ellipsis-lastline;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

line-clamp: 2;

-webkit-box-orient: vertical;

最好的方式 直接使用 flota:left  浮動來消除

#indicator

contenteditable="true"     //div變成文字框

placeholder=「預展示文字」

/*修復手機端input框顯示問題*/

input[disabled]

text-indent:6px;

手機端  單頁面完全顯示也依然將高度按em設定  高度不可百分比  因為不同的手機端高度不同 同時需要使用viewport 和禁止縮放

#給父元素新增padding 來解決

padding-top: 1px;

HTML小知識點

body 標準樣式 html 塊級元素div,dl dt dd 定義列表 hr 水平分隔線 p,ol,ul 非排序列表 table input,label br 換行 b 加粗 i 斜體 img 標籤 span 常用內聯容器，定義文字內區塊 select option 選擇元素，strong 粗體加...

Html語法小知識點

ul unordered lists 無序列表 ol ordered lists 有序列表 li lists是乙個定義列表,據我的瞎猜 dl應該是definition list的縮寫 定義了標題,所以應該是definition title的縮寫 描述用的,所以應該是definition descri...

html小知識點備忘錄

1.去 小黑點li 2.內聯元素加margin padding 上下無效。3.圓角樣式 border radius xxpx 當有圓角的半徑是正方形的長度的一般的時候，畫出來的是圓。4.到 內部不能巢狀塊元素 w3c規定 5 class cur cur 預設顯示的a標籤 6 左右箭頭，空格 7 透明...