- Cascading Style sheets,層疊樣式表;
- style屬性，是內(nèi)聯(lián)樣式，就是寫在標簽里的樣式；
- 外部樣式，用link標簽的方式引入stylesheet
<link rel="stylesheet" href="./a.css">- 總結(jié)
- 內(nèi)聯(lián)style屬性；
- style標簽；
- 外部文件css link
- @import url(./b.css);
6. 布局問題，一定要背
給所有的子元素加上float:left;
給子元素的爸爸添加上名為clearfix的類；
.clearfix::after{
content: '';
display: block;
clear: both;
}
- 頁面默認字體大小是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è)計師設(shè)置的參數(shù)有關(guān)；
- 文檔流：文檔內(nèi)元素的流動方向；內(nèi)聯(lián)元素從左往右流動，遇到寬度不夠換行繼續(xù)流動；塊級元素每個塊占一行，一次從上往下；
- border調(diào)試大法：
border:1px solid red; - 內(nèi)聯(lián)元素很長時默認不會打斷，添加
word-break:break-all;可以將其打斷； -
display:inline-block;盡量不用這個，用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;相對于祖先中的第一個position: relative;定位； - 搜索css tricks shape，圖畫參考；
- iconfont工具網(wǎng)站；
- 讓簡歷里圖標svg上下空出的空間相等；
-
display:inline;需要后續(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
