知識(shí)要點(diǎn)梳理
1.布局
1.默認(rèn)布局
2.float布局
3.層級(jí)布局(定位布局)
2.CSS樣式引入
<!-- 內(nèi)部樣式表 -->
<style>
.two{
width:100px;
height:100px;
background:green;
}
</style>
<body>
<!-- 內(nèi)聯(lián)樣式 不要寫(xiě) 不要寫(xiě) 不要寫(xiě) -->
<div style="width:100px;height:100px;background: red"></div>
<div class="two"></div>
</body>
3.外部樣式表
<!-- 外部樣式表 -->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="test"></div>
</body>
4.路徑
<body>
<!--
路徑:
相對(duì)路徑
絕對(duì)路徑 不要使用
-->
<!-- 同級(jí)目錄 -->
<img src="down.jpg" alt="">
<!-- 下一級(jí)目錄 -->
<img src="images/location.png" alt="">
</body>
5.width,height繼承
/* 子元素絕對(duì)定位,不會(huì)繼承父元素的width */
<style>
.parent{
width:100px;
height:100px;
background: red;
position: relative;
}
.child{
height:50px;
background: green;
position:absolute;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
<style>
.parent{
width:200px;
/* height:200px; */
background: red;
}
.child{
position:absolute;
width:100px;
height:100px;
background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
6.margin的bug
<style>
/* 子元素作為父元素的第一個(gè)元素,給它margin-top,沒(méi)用
它的元素向下移動(dòng)
*/
.parent{
width:200px;
height:200px;
background:red;
}
.child{
margin-top: 50px;
width:100px;
height:100px;
background:green;
}
/*如何解決*/
.row:before{
content:"";
display: table;
}
</style>
</head>
<body>
<div class="parent row">
<div class="child"></div>
</div>
</body>
<style>
/* 浪潮之巔 */
/*
margin重合的問(wèn)題
*/
.one{
width:100px;
height:100px;
background:red;
margin-bottom: 150px;
}
.two{
margin-top: 100px;
width:100px;
height:100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
8.表單
<body>
<h4>一個(gè)簡(jiǎn)單的登錄表單</h4>
<form >
<!-- label和input結(jié)合使用 要點(diǎn):label的for的值要和input的id一樣 -->
<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>
<div>
<!-- 技術(shù)要點(diǎn):name值相同 -->
<h4>性別</h4>
<label for="male">男</label><input type="radio" id="male" name="sex">
<label for="female">女</label><input type="radio" id="female" name="sex">
</div>
<div>
<!-- type=checkbox 復(fù)合選框 -->
<input type="checkbox">足球
<input type="checkbox">籃球
<input type="checkbox">羽毛球
</div>
<div>
<!-- 下拉選框 -->
<select >
<option value="武昌區(qū)">武昌區(qū)</option>
<option value="洪山區(qū)" selected>洪山區(qū)</option>
<option value="青山區(qū)">青山區(qū)</option>
</select>
</div>
</form>
<textarea placeholder="請(qǐng)吐槽" cols="30" rows="10"></textarea>
<!-- 大于,空格,大于 的字符 -->
<div>< ></div>
</body>
9.text和btn的區(qū)別
*{margin:0;padding:0}
input{
border:1px solid #333;
width:100px;
height:40px;
}
.btn{
width:102px;
height:42px;
}
/* input是按鈕的形態(tài)下,給border,padding不會(huì)改變它的width,height */
</style>
</head>
<body>
<!-- 輸入框和按鈕的區(qū)別 -->
<input type="text"> <br>
<input type="submit" class="btn">
<!-- <button type="submit">提交</button> -->
</body>
