day10

01-表单补充
02-表单css属性
03-表单修饰类标签
04-BFC （块状格式化上下文）
05-宽度/高度自适应
06-清除浮动
07-伪元素
08-visibility
09-最大/最小宽度/高度
10-自适应布局

01-表单补充

表单
表单域
form
action
method get
post
表单控件
input
type = ‘text’
‘password’
value
placeholder 没有值的时候提示信息
name
maxlength
submit
button
reset
单选
input type =’radio’
同一组单选框name值相同
多选
input type =’checkbox’
文件上传
input type = ‘file’
隐藏表单控件
input type =’hidden’
用js绑定数据，和表单一起提交到后台
图片域提交按钮
input type=’image’
src 图片的地址
alt 图片加载失败的提示信息
按钮
button
type
submit
reset
button
type属性必须写，不同的浏览器按钮默认type不一样
下拉
select
option —- 选项
多行文本域
textarea
disabled 禁用状态
checked 单选和多选的勾选状态
selected 下拉框选中状态

02-表单css属性

鼠标指针类型
cursor:
pointer 手形
表单控件是否可以拖拽（一般用在textarea）
resize:
horizontal
vertical
both 默认
none 禁止拖拽
表单控件的外轮廓
outline:
语法和border一样
不占据空间，一般用在表单控件上
outline: none 去掉外轮廓
去掉表单控件默认样式
appearance: none
iframe 网页中嵌套网页

:checked伪类
勾选状态

03-表单修饰类标签

fieldset 表单字段集
- 必须是form里面的第一个子元素
legend 字段集标题
- 必须是fieldset第一个子元素
label 提示信息标签
- 行内元素
- label标签有一个html属性for属性， for属性和表单控件的id名字绑定，可以起到获取焦点的作用

04-BFC （块状格式化上下文）

触发BFC的条件
1. html
2. overflow: hidden/scroll/auto
3. position: absolute/fixed
4. float: left/right
5. display: inline-block/table-cell/flex/inline-flex
BFC区域的布局规则
1. 内部的块状元素会从上到下依次排列
2. 内部的块状元素的垂直方向的距离由margin控制，相邻的两个元素之间的margin会发生重叠，数值以大的为准
3. bfc区域内部的元素的margin-left和bfc区域的border-left相接触
4. bfc区域与外界毫不相干
5. bfc区域不和浮动元素相重叠
6. 计算bfc区域高度，浮动元素参与计算
bfc的应用
1. 解决margin重叠问题
2. 两栏布局
3. 解决高度塌陷

05-宽度/高度自适应

width: auto
height: auto
宽度自适应
一个元素不设置宽度的时候，宽度自适应父元素的宽
一个脱离文档流的元素，宽度由内容物决定
height: auto
高度自适应
一个元素不设置高度, 高度由内容撑开

06-清除浮动

清除浮动：清除浮动带来的负面效果——高度塌陷
- 给高度塌陷的盒子加高度
- 给高度塌陷的盒子加overflow: hidden
缺点：造成溢出部分隐藏
- 给高度塌陷的盒子里面的最后面加一个空的div，设置属性clear: both
缺点：造成代码冗（rong）余产生不必要的标签
- 万能清除法
.clearfix:after {
content:””;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
clear: both
}

clear：清除浮动带来的负面效果
none 默认
left 清除左浮动带来的效果
right 清除右浮动带来的效果
both 清除所有浮动带来的效果

07-伪元素

::before 在元素里面的最前面添加内容
::after 在元素里面的最后面添加内容
content 必须写，伪元素要添加的内容, 添加了内容之后默认为一个行内元素
::first-letter 第一个字符的样式
::first-line 第一行的样式
::selection 选中的内容的样式
只能改变文字颜色 color 背景色 background-color

08-visibility

visibility: 决定元素是否显示
visible 默认显示
hidden 隐藏
display:none opacity:0 visibility: hidden
1. display:none 不占据空间
2. opacity 不可以继承，父元素设置opacity:0, 子元素设置opacity:1, 子元素不可以被看到
3. visibility可以继承，父元素设置visibility: hidden, 子元素设置visibility: visible,子元素可以被看到（opacity visibility 都占据空间）
4. opacity有中间值

09-最大/最小宽度/高度

min-height: 最小高度元素最小高度300，如果内容物高度超出300，元素高度由内容决定
max-height: 最大高度元素最大高度300，如果内容物高度小于300，元素高度由内容决定
min-width: 最小宽度元素最小宽度300，如果内容物宽度超出300，元素宽度由内容决定
max-width: 最大宽度元素最大宽度300，如果内容物宽度小于300，元素宽度由内容决定

hack: 通过人为的方式解决浏览器的问题

min-height: 在IE6以下浏览器不识别

浏览器兼容
_属性前缀 _height表示只有ie6以下浏览器能够识别该属性
height属性在IE6以下被认为min-height
div{
min-height: 300px;
_height: 300px;