今天学了什么
1.定位的宽高继承问题
父元素给position:relative
子元素position:absolute
2.margin的小问题
给子元素margin-top:父元素移动,子元素不移动
margin小问题.png
2.1解决方案overflow
//css
<style>
/* 如果给父元素第一个元素设置margin-top */
.parent{
width: 300px;
height: 300px;
background: red;
overflow: hidden;
}
.child{
margin-top: 100px;
width: 100px;
height: 100px;
background: green;
}
</style>
//html
<div class="parent">
<div class="child"></div>
</div>
2.1给父元素设置伪元素
//css
<style>
/* 如果给父元素第一个元素设置margin-top */
.parent{
width: 300px;
height: 300px;
background: red;
}
.parent:before{
content: "";
display: table;
}
.child{
margin-top: 100px;
width: 100px;
height: 100px;
background: green;
}
</style>
//html
<div class="parent">
<div class="child"></div>
</div>
实现效果
margin.png
3.margin重合的问题
//css
<style>
.parent {
width: 400px;
height: 400px;
background: red;
}
.first {
width: 100px;
height: 100px;
background: green;
margin-bottom: 100px;
}
.second {
margin-top: 100px;
width: 100px;
height: 100px;
background: yellow;
}
</style>
//html
<div class="parent">
<div class="first"></div>
<div class="second"></div>
</div>
影响结果.
margin重合.png
4.HTML表单相关元素
4.1一个登陆页面
<form action="">
<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.单选框
单选框需给一样的name名
<p>
<label for="male">男</label><input id="male" type="radio" name="sex" value="男">
<label for="female">女</label><input id="female" type="radio" name="sex" value="女">
</p>
4.3复选框
<p>
<label>爱好</label>
<input type="checkbox" name="爱好" value="游泳">游泳
<input type="checkbox" name="爱好" value="开车">开车
</p>
4.4下拉框
<select >
<option value="武汉市">武汉市</option>
<option value="荆州市" selected>荆州市</option>
<option value="天门市">天门市</option>
</select>
4.5多行输入框
<textarea placeholder="请吐槽"></textarea>
4.6提交按钮
<input type="submit" value="登陆">
4.6.1submit的小问题
input type="submit" 时给border,padding不会改变它的width.height
<style>
* {
margin: 0px;
padding: 0px;
}
input{
width: 100px;
height: 30px;
border: 1px solid #333;
padding:5px;
outline: none;
}
.btn{
width: 102px;
height: 32px;
box-sizing:content-box;
/**给submit加默认属性，只能解决padding的影响**/
}
</style>
//html
<div>
<input type="text">
</div>
<div>
<input type="submit" value="提交" class="btn">
</div>
5.隐藏的小知识
1.visibility: hidden; 将元素隐藏 相当于透明度给0
可以看到宽高
2.display: none;直接消失了
连宽高都没有了
6.iframe
<style>
iframe{
width: 300px;
height: 200px;
border: 1px solid #333;
}
</style>
//html
<iframe src="" frameborder="0" name="frame"></iframe>
<a href="first.html" target="frame">first</a>
<a href="second.html" target="frame">second</a>
iframe.png
7.iconfont外部网站引用小图片
<link rel="stylesheet" href="http://at.alicdn.com/t/font_720214_ohctpib2w0l.css">
<script src="http://at.alicdn.com/t/font_720214_khgv4qfragn.js"></script>
<style>
.gouwu {
font-size: 50px;
}
.icon{
width: 50px;
height: 50px;
}
</style>
//html
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xuexiao"></use>
</svg>
<i class="iconfont icon-sousuo gouwu"></i>
<i class="iconfont"></i>
icon.png
8.隐藏下拉框
//css
<style>
*{
margin: 0px;
padding: 0px;
}
a{
text-decoration: none;
color: #fff;
}
ul{
width: 1000px;
margin-left: auto;
margin-right: auto;
background: pink;
list-style: none;
line-height: 50px;
}
li{
text-align: center;
width: 100px;
float: left;
}
.row::after{
content: "";
display: table;
clear: both;
}
a{
display: block;
}
.menu{
position: relative;
}
.menuDrop{
position: absolute;
width: 100px;
background: deeppink;
display: none;
}
.menu:hover .menuDrop{
display: block;
}
a:hover{
background-color: #ff4777;
}
</style>
//html
<ul class="row">
<li class="menu">
<a href="#">收藏夹</a>
<div class="menuDrop">
<a href="#">收藏宝贝</a>
<a href="#">收藏店铺</a>
</div>
</li>
<li><a href="#">卖家中心</a></li>
<li><a href="#">联系客服</a></li>
</ul>
被隐藏的下拉框.png
下拉框.png
