2019/7/21学习内容

目标
1.表单语义化（熟悉）
2.盒子模型的使用
3.盒子坍塌和合并
4.box-sizing的使用
5.案例
1.form>input,select,textarea
form:method,action，onsubmit
type:submit 触发
2.type=text,password,hidden,checkbox,radio,submmit,reset,button,file,image
checked,value,placeholder,readonly

一.盒子：内容+padding+border+margin

内容：花瓶
padding:花瓶和盒子之间的缝隙（上下左右）内边距
border:盒子的厚度 边框
margin:盒子距离外部距离（上下左右）外边距

元素的实际宽=（margin+border+padding）x2+width
元素的实际高度=（margin+border+padding）x2+height

margin,padding,border合写：

• border:50px solid red;
• padding: 20px;
• margin: 100px;

边框color分开写：

• border-left-color: #000;

• border-top-color: transparent;

• border-right-color: transparent;

• border-bottom-color: transparent;

• border-color: pink;

边框style分开写：

• border-top-style:dashed;

• border-right-style:double;

• border-bottom-style:dotted;

• border-left-style:dotted;

• border-style: dashed;

• none：无边框,solid：实线边框,dashed：虚线边框
  dotted：点状边框,double：双线边框,hidden：与none相同，应用于表解决边框冲突

边框粗细分开写：

• border-top-width: 5px;

• border-left-width: 35px;

• border-bottom-width: 25px;

• border-right-width: 15px;

• /border-width: 50px;/

• List item

• 圆角:border-radius: 20px;

小结：
border,
border-top-color,border-color,
border-top-style,border-style,
border-top-width,border-width,
border-radiu

margin分开写：

• margin:20px 30px

• margin-left:10px

• margin-bottom:20px

• margin-right:30px;

• margin-top:60px

padding分开写：

• padding:10px 20px

• padding-left:20px

问题1：父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,
他们两个的margin会取其中最大的值.
正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位.
解决：
1. 给父级元素添加border
2. 触发BFC属性（独立的容器，让他不受别的元素的影响） 浮动元素 float属性值 left/right 绝对定位元素 position 为 absolute、fixed display 为inline-block overflow 为 hidden,auto,scroll*

问题2: 两个兄弟结构的元素在垂直方向上的margin是合并的
解决：
1. 给box2加上一层父级元素并加上overflow:hidden;
2. 只设置上面的元素的margin-bottom来解决距离的问题

小结： margin,padding,border,margin垂直方向的问题

pc:1000-1200px 居中 margin:0 auto

box-sizing:
content-box
盒子的实际宽度(css width值)和高度(css height值)仅应用于元素内容，不包括内边距和边框
border-box
盒子的实际宽度(css width值)和高度(css height值)包括元素内容、边框和内边距