Day04 CSS补充
2018-06-25 本文已影响0人
小章鱼Milo
1.CSS引用
有三种引用方式，分别为：
- 1.内部样式
- 2.内联样式
- 3.外部样式
1.1内部样式
CSS和HTML分开
/*内部样式*/
div{
width: 100px;
height: 100px;
background: red;
}
<div>hello world</div>
1.2内联样式
<!--内联样式
不要这样写-->
<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>
/*如果给父元素的第一个元素设置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重复问题
<style>
.parent{
width: 400px;
height: 400px;
background: red;
}
/*兄弟级元素margin重复的问题
first 和second 会共用一个margin 取两者最大值
没有解决方法，以后设计时注意*/
.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对应后面元素的id
实现效果位点击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.单选框 复选框
<!--单选框 注意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>
<!--复选框-->
<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输入框补充
<div>
<!--这两个相等-->
<input class="btn" type="submit" value="提交">
<button type="submit">提交</button>
</div>
/*当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标签的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设置margin-top，span会随着一起动 没有解决办法 设计时注意*/
<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" href="//at.alicdn.com/t/font_720210_7hpimz4vgb7.css">
<script src="//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>
