4月2日BFC布局

BFC布局规定：
一、内部的Box会在垂直方向，一个接一个地放置。
二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
三、每个元素的margin box的左边， 与包含块border box的左边相接触
四、BFC的区域不会与float box重叠。
五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
六、计算BFC的高度时，浮动元素也参与计算
BFC触发条件：
1：html 就是一个BFC
2: float属性不为none
3: position为absolute或fixed
4: display为inline-block, table-cell, table-caption, flex, inline-flex
5: overflow不为visible
1）表单字段集
语法：
说明：相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。disabled定义空间禁制可用；
2）字段级标题：
语法：
说明：legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的唯一个元素。
3)提示信息标签：
语法：
说明：label元素用来定义标签，为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。
表单补充：
1）单选按钮组
男
(默认选中)女
2）复选框组


* disabled=“disabled” (禁用)
* checked=“checked” (默认选中)
3）下拉列表（菜单）：

下拉选项1
下拉选项2
…………

表示下拉列表，name属性不是必须的
默认选择项用selected属性；
4）表单域多行文本定义：
语法:
多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。
阻止浏览器对窗口的拖动设置:{resize:none;}（css属性）
5)上传文件：
语法：
表格属性
1、单元格间距：border-spacing:value;
​ 说明：单元格间距(该属性必须给table添加) 表示单元格边框之间的距离， 不可取负值
2、合并相邻单元格边框：border-collapse:separate/collapse;
​ 说明：合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并)
3、无内容时单元格的设置：empty-cells:show/hide;
​ 说明：定义当单元格无内容时，是否显示该单元格的边框区域；show：显示 ；hide：隐藏；
4、显示单元格行和列的算法(加快运行的速度)： table-layout:auto/fixed;
组分格线：
rules=“groups/rows/cols/all/none” 添加分隔线
说明：
rows:位于行之间的线条
cols:位于列之间的线条
all：位于行和列之间的线条
none:没有线条
groups:位于行组和列组之间的线条
用padding 把center的子元素挤到中间
bfc区域不会与浮动盒子重叠
bfc 实现左右两侧固定中间自适应（双飞布局）
规划起名：
外围结构：
驼峰式命名法 || 语义化 eg : news
版心：
连字符起名： news-con banner-con
内容样式：
下划线： news_left news_right
今天老师带领我们学习新课程，BFC的布局与触发，然后领导我们写案例，教我们如何在PS中使用蓝湖，其中学习了引用封装好类名，单行文本溢出省略号显示，各种居中，在浏览器窗口左右居中， 让子元素在父元素里面左右上下居中， 万能清除法 ，以及用bfc 实现左右两侧固定中间自适应（双飞布局）。感觉老师讲的太快了，基础太差有些跟不上，装个软件都费劲，我真的有点怀疑人生了，心态快炸了。希望能从头再学一遍多给些练习的时间。老师的期望太高了，我现在只停留在能听懂的阶段，只能比着老师的案例写，问题也归纳不出来，只感觉脑子里一团浆糊。虽然也能听得懂， 但是思维逻辑跟不上，案例方面还有数学运算减行高减间距不太明白等等。到自己单独作的时候，却是有一种无从下手的感觉。也不知道能不能学会这一行，心理也是有一点担忧。只能硬着头皮学下去实在不行的话就留级，好想线下上课主要是家里有琐事打扰，想要全身心投入学习中！因为我想要改变以后的生活，不得不砥砺前行。