- Age:
- 20
- Gender:
- Male
- Height:
- 180cm
資訊專欄INFORMATION COLUMN
摘要：在我們寫代碼的過程中，可以養成記錄一些小技巧的習慣。不到萬不得已，盡量少使用或在可控范圍內使用。可以在縮小瀏覽器窗口時等比例縮放。但此時不能加左右的，否則總寬度會超過的寬度。我們為達到目的讓同一類和左右排布不同類上下排布。
在我們寫CSS代碼的過程中，可以養成記錄一些小技巧的習慣。
1.一般特定的元素都有自己默認的樣式，但是在我們的整體布局中，可能適得其反。
我們可以去掉其默認樣式。
* {
margin: 0;
padding: 0;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
等等
2.border大法
在調試一個盒子的時候，我們可以為其加上邊框。更易于直觀地看出盒子的位置以及樣式。
.bd {
border: 1px solid red;
}
3.
一定要善用Chrome開發者工具檢查網頁代碼。
可以在網頁結構上直接作出暫時性的修改，非常的方便。還可以查看每個元素的樣式。
關于這點我們在之后的博客進行詳細說明。
盡量少用width和height這兩個屬性。
在定義元素的高度時，我們知道一個元素的高度是由內容決定的，比如div高度由其內部文檔流高度總和決定。
這樣直接用width輸入像素值，很容易造成內部溢出而顯示錯誤或超出范圍。
在定義元素高度時，如果直接用height輸入像素也會因一些變化或其他css樣式而引起顯示問題。不到萬不得已，盡量少使用或在可控范圍內使用。
我們可以根據實際大小位置需要，用margin和padding控制元素的位置以及樣式大小。
5.如果要規定div的寬度，盡量使用max-width。可以在縮小瀏覽器窗口時等比例縮放。
max-width: 600px;6.
固定定位
position: fixed; top: 0; left: 0;
一般在制作導航欄時會用到固定定位，使該元素脫離文檔流，可以相對于屏幕固定。
但是固定定位會導致元素樣式收縮，可以用width: 100%;來解決。
但此時不能加左右的padding，否則總寬度會超過body的寬度。
解決辦法是給一個父元素div 可以用來調整padding和margin。
div寬度無法超過body，而且會自適應。
.parentNav {
padding: 0 6px;
}
.parentNav .topNavBar {
position: fixed;
top: 0;
left: 0;
padding: 24px 0;
width: 100%;
}
7.
如何實現dl中的dt和dd左右布局？
將dt和dd一起設置通向浮動后，發現所有元素并排排在一起；雖然自動換行，但是是無序的。
我們為達到目的：讓同一類dt和dd左右排布；不同類上下排布。
可以利用自動換行的原理，為dt和dd分別設置百分比寬度，總和達到100%即可。
同時用padding調節上下間距。
- Age:
- 20
- Gender:
- Male
- Height:
- 180cm
.text dl dt {
float: left;
width: 30%;
padding: 6px 0;
}
.text dl dd {
float: left;
width: 70%;
padding: 6px 0;
}
持續更新中...
Written by：EdenSheng
Email：singlesaulwork@gmail.com
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117061.html
摘要：層疊樣式表二修訂版這是對作出的官方說明。速查表兩份表來自一份關于基礎特性，一份關于布局。核心第一篇一份來自的基礎參考指南簡寫速查表簡寫形式參考書使用層疊樣式表基礎指南，包含使用的好處介紹個方法快速寫成高質量的寫出高效的一些提示。 迄今為止，我已經收集了100多個精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設計脫穎而出。 CSS3 資源 20個學習CSS3的有用資源 C...
摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...
閱讀 1521·2021-11-24 09:38
閱讀 3373·2021-11-18 10:02
閱讀 3261·2021-09-22 15:29
閱讀 2944·2021-09-22 15:15
閱讀 1046·2021-09-13 10:25
閱讀 1860·2021-08-17 10:13
閱讀 1995·2021-08-04 11:13
閱讀 1981·2019-08-30 15:54
