資訊專欄INFORMATION COLUMN
摘要：如果里有多行，那么就把每一行的行高加起來算。姓名怎么和聯系方式對齊其他的方法直接用可以的，不過會受到字體的影響。字體一變，加的就會變。代碼解釋代碼如果是內聯元素要被改變寬度的話，一定要先寫上。
css float 布局以及其他小技巧總結
這篇博文 前面四個部分是關于css 經典布局 如果你已經知道了 可以直接跳過看第六部分 css 的其他小技巧
1.0 左右居中布局
Document
a1
a2
2.0 左中右布局
Document
Left
Right
Main
```
3.0 水平居中
Document
水平居中
4.0 垂直居中 （兩種方法）
垂直居中第一種方法table自帶
| 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 |
垂直居中第二種方法marginautoabsolute
垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直居中 垂直
5.0 水平垂直居中
Document
水平垂直居中
6.0 其他小技巧
6.1 css 有類似javascript 的console.log 的工具嗎？
//用border
div{
border: 1px solid red;
}
6.2 為什么明明在數字1和2之間敲兩個空格 但是網頁顯示出來它們之間 只有一個空格 ？ 那是因為你沒有添加 (no break space)
你寫的bug
1 2
6.3 為什么只有一個阿拉伯數字且已經設定了 字體大小是20 px 但一旦打開開發者工具：顯示的字體大小是 28px ？
因為每一種字體被設計時，為了【好看】設計師會給每一種字體一個好看系數 eg：默認的字體時pingfang 那么28px /20px =1.4 這個1.4 就是【好看（字體）系數 】每一種字體都有自己的 【好看系數】
如果不想使用字體設計師給你的【好看系數】一定要用自己的 可以添加一行
line-height： 20px；
代碼如下
test
1
6.4 為什么分別兩個span元素之間 看似什么都沒有 但游覽器 1 和 2 之間確有空隙 ？
? span元素 之間有tab 有回車等都會造成有空格的情況
Document
1
2
6.5 塊級元素的高度怎么確定？
如果div 里 只有一個內聯元素 那么div 的高度是由這個內聯元素的行高所決定。
如果div 里有多行，那么就把每一行的行高加起來算。
6.6 姓名怎么和聯系方式對齊 ？
? ? 其他的方法：直接用 ？可以的，不過會受到字體的影響。字體一變， 加的 就會變。
? ? ?代碼解釋：代碼如果是內聯元素要被改變寬度的話， 一定要先寫上display：inline-block 。
text-align: justify; 當有多行字體時，這句話會讓強迫癥看了之后 非（兩）常（邊）舒（對）心 （齊）。
? ? 那只有一行的時候 怎么對齊？看上去是多添加了一行。代碼
? ? ?如下：
? ? ?
span:after{
content:"";
display: inline-block;
width: 100%;
border: 1px solid pink;
}
JS Bin
姓名
聯系方式
6.7 六個內聯元素 怎么寫才能沒有空隙 ？
添加 float：left
clearFix
Document
6.8 怎么做 一行和多行文本過長變省略號？
//一行
Document
s d f d f d f s d f s d f d f s d f d f sd f s df d f s df d d f d f d f s d f d f d f d f d f d f d f df d f d f d f df d d s d s d s d s d s d s d s d s d s d s d s d s s d s d s d s d s d s d s d s sd s d s d s sd d v f ef e f e f e f ef ef e f ef e f ef e fe f e f e f e fe f ef e fe f
// css multi line text ellipsis
Document
s d f d f d f s d f s d f d f s d f d f sd f s df d f s df d d f d f d f s d f d f d f d f d f d f d f df d f d f d f df d d s d s d s d s d s d s d s d s d s d s d s d s s d s d s d s d s d s d s d s sd s d s d s sd d v f ef e f e f e f ef ef e f ef e f ef e fe f e f e f e fe f ef e fe f
6.9 什么情況下margin 會合并以及怎么修改使其正常化？
如果父元素沒有什么東西擋住子元素 那么子元素的邊距就會父合并起來
Document
111
怎么修改 ：
第一種添加： 在父元素里添加border -top 和 border - bottom ；
第二種添加： 同樣是在 父元素里添加 padding-top
Document
111
6.10 怎么break out words？
添加一行代碼： word-break: break-all;
JS Bin
1 apppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppple
6.11 怎么脫離文檔流 ？
三種方法：
position：absolute； float： left； position：fixed；
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116676.html
摘要：如果里有多行，那么就把每一行的行高加起來算。姓名怎么和聯系方式對齊其他的方法直接用可以的，不過會受到字體的影響。字體一變，加的就會變。代碼解釋代碼如果是內聯元素要被改變寬度的話，一定要先寫上。 css float 布局以及其他小技巧總結 這篇博文 前面四個部分是關于css 經典布局 如果你已經知道了 可以直接跳過看第六部分 css 的其他小技巧 1.0 左右居中布局 ...
摘要：在我們寫代碼的過程中，可以養成記錄一些小技巧的習慣。不到萬不得已，盡量少使用或在可控范圍內使用?？梢栽诳s小瀏覽器窗口時等比例縮放。但此時不能加左右的，否則總寬度會超過的寬度。我們為達到目的讓同一類和左右排布不同類上下排布。 在我們寫CSS代碼的過程中，可以養成記錄一些小技巧的習慣。 1. 一般特定的元素都有自己默認的樣式，但是在我們的整體布局中，可能適得其反。我們可以去掉其默認樣式。 ...
摘要：返回的是一個樣式聲明對象，只讀。方法返回一個最初值對象或值列表對象，這取決于屬性值的類型。而且，雖然中，對象支持方法，但總是返回因此，目前來講，方法可以先不聞不問。本文轉載之張鑫旭的博客 一、getComputedStyle是？getComputedStyle是一個可以獲取當前元素所有最終使用的CSS屬性值。返回的是一個CSS樣式聲明對象([object CSSStyleDeclara...
摘要：返回的是一個樣式聲明對象，只讀。方法返回一個最初值對象或值列表對象，這取決于屬性值的類型。而且，雖然中，對象支持方法，但總是返回因此，目前來講，方法可以先不聞不問。本文轉載之張鑫旭的博客 一、getComputedStyle是？getComputedStyle是一個可以獲取當前元素所有最終使用的CSS屬性值。返回的是一個CSS樣式聲明對象([object CSSStyleDeclara...
摘要：例一個高的，里面的文字垂直居中使該元素變大倍動畫過渡效果 CSS的兩種經典布局 左右布局 一欄定寬，一欄自適應 定寬 自適應 .left{ width: 200px; height: 600px; float: left; display: table; text-align: ...
閱讀 1213·2021-09-26 09:55
閱讀 3157·2019-08-30 15:55
閱讀 948·2019-08-30 15:53
閱讀 2285·2019-08-30 13:59
閱讀 2367·2019-08-29 13:08
閱讀 1098·2019-08-29 12:19
閱讀 3289·2019-08-26 13:41
閱讀 411·2019-08-26 13:24
