1.CSS引用
有三種引用方式称近，分別為：
- 1.內(nèi)部樣式
- 2.內(nèi)聯(lián)樣式
- 3.外部樣式
1.1內(nèi)部樣式
CSS和HTML分開
/*內(nèi)部樣式*/
div{
width: 100px;
height: 100px;
background: red;
}
<div>hello world</div>
1.2內(nèi)聯(lián)樣式
<!--內(nèi)聯(lián)樣式
不要這樣寫-->
<div style="width: 100px;height: 100px;background: red;"></div>
1.3外部樣式
<!--外部樣式表 推薦使用-->
<link rel="stylesheet" href="css/index.css">
2.CSS 定位高寬繼承問題
<style>
.parent{
width: 300px;
height: 300px;
background: red;
position: relative;
}
/*如果給子元素絕對定位奢赂，它不會繼承父元素的寬度*/
.child{
/*width: 200px;*/
position: absolute;
height: 50px;
background: pink;
}
</style>
3.Margin問題
3.1 第一個子元素Margin-top問題
<style>
/*如果給父元素的第一個元素設(shè)置margin-top办斑，父元素移動，子元素不移動*/
/*解決方法1：給父元素一個overflow：hidden
解決方法2：給父元素一個before偽元素*/
.parent{
width: 300px;
height: 300px;
background: red;
overflow: hidden;
}
.parent:before{
content: '';
display: table;
}
.child{
width: 100px;
height: 100px;
margin-top: 100px;
background: green;
}
</style>
3.2兄弟級元素的margin重復(fù)問題
<style>
.parent{
width: 400px;
height: 400px;
background: red;
}
/*兄弟級元素margin重復(fù)的問題
first 和second 會共用一個margin 取兩者最大值
沒有解決方法俐镐，以后設(shè)計(jì)時注意*/
.first{
width: 100px;
height: 100px;
margin-bottom: 100px;
background: green;
}
.second{
margin-top: 100px;
width: 100px;
height: 100px;
background: yellow;
}
</style>
4.表單
<form action="">
<!--label是給input注釋用的-->
<!--label中的for對應(yīng)后面元素的id
實(shí)現(xiàn)效果位點(diǎn)擊label則后面的元素選中-->
<div><label for="user">用戶名</label><input type="text" id="user"></div>
<div><label for="pwd">密碼</label><input type="password" id="pwd"></div>
<div><input type="submit" value="提交"></div>
</form>
5.單選框 復(fù)選框
<!--單選框 注意name保持一致-->
<div>性別 <label for="male">男</label> <input type="radio" id="male" name="sex">
<label for="female">女</label><input type="radio" id="female" name="sex">
</div>
<!--復(fù)選框-->
<div>
<label>愛好</label>
<input type="checkbox">籃球
<input type="checkbox">足球
<input type="checkbox">乒乓球
</div>
6.下拉框 文本域
<!--下拉框-->
<select >
<option value="武漢市">武漢市</option>
<option value="荊州市" selected>荊州市</option>
<option value="天門市">天門市</option>
</select>
<!--文本域-->
<textarea placeholder="請吐槽" ></textarea>
7.input輸入框補(bǔ)充
<div>
<!--這兩個相等-->
<input class="btn" type="submit" value="提交">
<button type="submit">提交</button>
</div>
/*當(dāng)input類型為submit時秒梳，加邊框不會改變其元素的寬和高*/
input{
width: 100px;
height: 30px;
}
8.display和visibility
<style>
/*visibility:hidden只是將元素隱藏（透明度為0），頁面中仍有這個元素只是看不見*/
/*display:none 是元素直接從頁面上消失了*/
div{
/*visibility: hidden;*/
display: none;
}
</style>
9.iframe
HTML
<!--iframe的name的值要跟a標(biāo)簽的target的值一樣-->
<iframe src="" frameborder="0" name="frame"></iframe>
<a href="first.html" target="frame">first</a>
<a href="second.html" target="frame">second</a>
CSS
<style>
iframe{
width: 300px;
height: 200px;
border: 1px solid #333333;
}
</style>
10.span button問題
<div>
<span>span</span>
<button>button</button>
</div>
/*給button設(shè)置margin-top凭戴，span會隨著一起動 沒有解決辦法 設(shè)計(jì)時注意*/
<style>
button{
margin-top: 40px;
}
</style>
image.png
11. iconfont
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" >
<script src="http://at.alicdn.com/t/font_720210_7hpimz4vgb7.js"></script>
<style>
.sousuo{
font-size: 20px;
}
.icon {
width: 40px; height: 40px;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<div>
<i class="iconfont icon-sousuo sousuo"></i>
<i class="iconfont icon-gouwucheman"></i>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xuexiao"></use>
</svg>
</div>
</body>
</html>
