- Cascading Style sheets,層疊樣式表;
- style屬性，是內(nèi)聯(lián)樣式蚓哩，就是寫在標(biāo)簽里的樣式规婆；
- 外部樣式泽裳，用link標(biāo)簽的方式引入stylesheet
<link rel="stylesheet" href="./a.css">- 總結(jié)
- 內(nèi)聯(lián)style屬性坡慌；
- style標(biāo)簽黔酥；
- 外部文件css link
- @import url(./b.css);
6. 布局問題，一定要背
給所有的子元素加上float:left;
給子元素的爸爸添加上名為clearfix的類洪橘；
.clearfix::after{
content: '';
display: block;
clear: both;
}
- 頁面默認(rèn)字體大小是16px
- 文字裝飾為空，取消下劃線
text-decoration: none - 使la包裹住a,
display: block - 跟隨爸爸的顏色棵帽；有些元素可以繼承熄求，有些不可以，color可以逗概；
color: inherit; - padding順序是上右下左弟晚；
padding: 20px 16px 20px 16px; - 塊級元素div高度由其內(nèi)部文檔流元素的高度總和決定；
- 內(nèi)聯(lián)元素高度跟字體及字體設(shè)計(jì)師設(shè)置的參數(shù)有關(guān)；
- 文檔流：文檔內(nèi)元素的流動方向卿城；內(nèi)聯(lián)元素從左往右流動枚钓，遇到寬度不夠換行繼續(xù)流動；塊級元素每個(gè)塊占一行瑟押，一次從上往下搀捷；
- border調(diào)試大法：
border:1px solid red; - 內(nèi)聯(lián)元素很長時(shí)默認(rèn)不會打斷，添加
word-break:break-all;可以將其打斷多望； -
display:inline-block;盡量不用這個(gè)嫩舟，用float; - 字體基線對齊；
- 字體有建議行高怀偷；
- 深入了解家厌，搜索“方應(yīng)杭 CSS line height”;
- height盡量不要寫，會有bug椎工；
-
position: fixed;脫離文檔流饭于；相對于屏幕；少用width:100%; -
max-width: 940px;最大寬度可以自適應(yīng)维蒙； -
margin-left: auto; margin-right: auto;便可自動居中掰吕； - span里不能放地div,會出bug；span里加
display:block就是div木西； -
position: absolute;相對于祖先中的第一個(gè)position: relative;定位畴栖； - 搜索css tricks shape，圖畫參考八千；
- iconfont工具網(wǎng)站吗讶；
- 讓簡歷里圖標(biāo)svg上下空出的空間相等；
-
display:inline;需要后續(xù)學(xué)習(xí)恋捆； - content-box與border-box區(qū)別
- 太極圖畫法：
.yin-yang {
width: 192px;
box-sizing: content-box;
height: 96px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 4px 4px 100px 4px;
border-radius: 100%;
position: relative;
}
.yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 36px solid red;
border-radius: 100%;
width: 24px;
height: 24px;
box-sizing: content-box;
}
.yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 36px solid #eee;
border-radius: 100%;
width: 24px;
height: 24px;
box-sizing: content-box;
}
效果圖：
image
