今天学到了什么？
1.内联样式，内部样式表，外联样式
A.内联样式 一般不要这样写
如：<div style="width: 100px;height:100px;background:red;" >
hello world
</div>
B.内部样式表 不推荐
div{
width:100px;
height:100px;
background:red;
}
C.外联样式
<link rel="stylesheet" href="[css/common.css`](css/common.css`)">
把css写入common.css文件中
body里面写结构
2.关于margin的一些问题
1给子元素margin-top:父元素移动,子元素不移动
2.如果有两个块标签，上面的元素的margin-bottom和下面元素的margin-top会重合
解决方案1:
A.给父元素overflow:hidden;
B.给父元素设置伪元素parent:before{content:'‘”;display:table}
第二种没有解决方案；
3定位宽高的继承问题
如果给子元素绝对定位,它不会继承父元素的宽度
代码演示：
<style>
.parent{
width:300px;
height:300px;
background: red;
position: relative;
}
/* 如果给子元素绝对定位,它不会继承父元素的宽度 */
.child{
/* width:200px; */
position:absolute;
height:50px;
background: pink;
}
</style>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
4.HTML表单相关元素
1一个登陆页面:
A：关键词:form表格 label标签
B:<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
c:<label> 标签的 for 属性应当与相关元素的 id 属性相同。
实例
<form >
<p><label for="text">文本</label><input id="text" type="text"/></p>
<p><label for="password">密码</label><input id="password" type="password"/></p>
<p><input type="submit" value="登录"/></p>
</form>
2.单选框
A;单选框需给一样的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>
3.复合选框
<p>
<label>爱好</label>
<input type="checkbox" name="爱好" value="游泳">游泳
<input type="checkbox" name="爱好" value="开车">开车
</p>
5下拉选框
关键字：select 选择 option选项
<select>
<option>洪山区</option>
<option>青山区</option>
<option>汉阳区</option>
</select>
6.预选的下拉选框
//在想要的option上加selected这个属性
<form action="">
<select>
<option>洪山区</option>
<option selected>青山区</option>
<option>汉阳区</option>
</select>
</form>
7.文本域
<textarea placeholder="看点槽点！"></textarea>
8.input type=”text”与 type=”submit”之间的区别
input type="sumit"时给边框不会改变它的width,height
两者的区别是submit按钮能提交表单。而button只是一个纯粹的按钮，在没有加什么[js代码]的情况下，它只是个装饰。不过，如果加了[js代码]后，button按钮就可以实现submit按钮的一切效果。
type 的取值一般有text,button,submit,reset,file,radio,checkbox。这几个都是在网页中比较见的元素。
9display和visibility的区别
visibility:hidden；
display:none ；
visibility: hidden----将元素隐藏 相当与透明度给0，将元素隐藏，但是在网页中该占的位置还是占着。
display: none----时元素直接从页面上消失了，将元素的显示设为无，即在网页中不占任何的位置。
10.
iframe> 标签规定一个内联框架。
一个内联框架用来在当前 HTML 文档中嵌入另一个HTML文档
<iframe src="我的.html" frameborder="0"name="frame"></iframe>
<a href="test01.html" target="frame">test</a>
11
1.当遇到一个非文本的元素，想让其垂直居中用定位
2.内联元素一些奇怪的现象
:给button设置margin-top,span也跟着移动
<div>
<button>btn</button>
<span>深圳</span>
<span>广州</span>
<div>
3.overflow:hidden;
网友评论