今天学到什么
1.CSS样式的几种引入方式
<link rel="stylesheet" type="text/css" href="/css.css">
位于 <head> 标签内部(不建议使用)
eg:
<style>
p{color:pink;font-size:16px}
</style>
eg:
<p style=”color:pink;font-size:16px”>hello world</p>
2.定位的宽高继承问题
父元素给position:relative
子元素position:absolute
![如果给子元素绝对定位 它不会继承父元素的宽度]
eg:
.parent{
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.child{
width: 100px;
height: 100px;
position: absolute;
background-color: aqua;
}
3.margin
如果父元素的第一个元素设置margin-top 父元素移动 子元素不移动
解决： 1.给父元素 overflow:hidden
2.给父元素设置伪元素
parent:before{
content:"";
display:table;
}
兄弟级元素margin 重复的问题:
.first{
margin-bottom: 100px;
}
.second{
margin-top: 200px;
}
两个之间的margin取最大值 应为：200px;
4.表单
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。
不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
```单选框需给一样的name名
eg:
<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>
eg:
<p>
<label>爱好</label>
<input type="checkbox" name="爱好" value="游泳">游泳
<input type="checkbox" name="爱好" value="开车">开车
</p>
<select>
<option>洪山区</option>
<option>青山区</option>
<option>汉阳区</option>
</select>
<select>
<option>洪山区</option>
<option selected>青山区</option>
<option>汉阳区</option>
</select>
在想要的option上加selected这个属性 默认显示青山区
<textarea placeholder="请输入。。。"></textarea>
5.input输入框
input type="sumit"时给边框不会改变它的width,height
type="text" 则会改变
6.display和visibility的区别
display:none; 时元素直接从页面上消失了
visibility:hidden; 将元素隐藏 相当与透明度给0
7.iframe
eg:
<iframe> 标签规定一个内联框架。
一个内联框架用来在当前 HTML 文档中嵌入另一个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>
8.iconfont
单一颜色：
<link rel="stylesheet" href="http://at.alicdn.com/t/font_720211_i0mmb2kzvo.css">
<i class="iconfont icon-gouwuche gouwu"></i>
彩色：
<script src="http://at.alicdn.com/t/font_720211_i0mmb2kzvo.js"> </script>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shoubing"></use>
</svg>
网友评论