1 margin的一点小问题
<style>
/*当子元素作为父元素的第一个元素,给它margin-top,它的父级margin-top也会改变*/
.one{
/*/!*overflow: hidden;*!/ 第一种解决方法*/
width: 600px;
height: 600px;
background-color: gray;
}
.two{
width: 100px;
height: 100px;
background-color: red;
margin-top: 100px;
}
/*第二种解决方法 给父元素前面加伪元素*/
.one:before{
content: "";
display: table;
}
</style>
2 上面的元素的margin-bottom和下面元素的margin-top会重合
<style>
.one{
width: 800px;
height: 800px;
background-color: gray;
}
.two,.three{
width: 200px;
height: 200px;
}
/*上面的元素的margin-bottom和下面元素的margin-top会重合 取大值 100px*/
.two{
margin-bottom: 50px;
background-color: blue;
}
.three{
margin-top: 100px;
background-color: yellow;
}
</style>
3 绝对路径和相对路径
绝对路径：从盘符开始的路径
相对路径：相对当前文件所在的路径
同级目录 src='down.jpg'
下一级目录 src='images/down.jpg'
上一级目录 src='../down.jpg'
4 HTML表单相关元素
4.1一个登陆页面 label
<form >
<!-- 登录界面-->
<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 >
/*<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。
不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件
<label> 标签的 for 属性应当与相关元素的 id 属性相同。*/
4.2单选框
<form >
<!--单选框name名要相同-->
<div>
<label for="cc">男</label><input type="radio" id="cc" name="aa" />
<label for="bb">女</label><input type="radio" id="bb" name="aa" />
</div>
</form >
4.3复选框
<form >
<div>
<label>爱好:</label>
<input type="checkbox" name="bb" id="t1" value="游泳"> <label for="t1">游泳</label>
<input type="checkbox" name="bb" id="t2" value="开车"> <label for="t2">开车</label>
<input type="checkbox" name="bb" id="t3" value="游泳"> <label for="t3">撩妹</label>
</div>
</form>
4.4下拉选框
<select >
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="武汉" selected>武汉</option>
<option value="南京">南京</option>
</select>
预选的下拉选框
//在想要的option上加selected这个属性
4.5文本域
<style>
textarea{
width: 500px;
height: 500px;
}
</style>
<body>
<textarea placeholder="请吐槽" ></textarea> /*写在一行不出现问题*/
</body>
4.6特殊字符的显示 &
<p> < > </p> /*可显示符号 >*/
<p>hello world </p> /*可显示空格 >*/
更多符号 可见 &下拉选项
5 标签之间的相互转换
display:inline|block|inline-block
6 display和visibility的区别
display: none; 去除元素
visibility: hidden; 隐藏元素
7 输入框和按钮的区别
<style>
*{margin: 0;padding: 0; }
input{
width: 300px;
height: 150px;
border: 1px solid #eeeeee;
/*padding: 10px;*/
}
.two{
width: 302px;
height: 152px;
}
</style>
//输入框可以填充,按钮不行,要使输入框和按钮一样大需要考虑输入框的边框
8 中间文字两边线效果
.line>fieldset{
border-top: 1px solid #E0E0E0;
width: 332px;
margin-top: 100px
}
fieldset{border: none;}
<div class="line">
<fieldset class="center">
<legend>其他登录方式</legend>
</fieldset>
</div>
