Day5-6 前端实操课程笔记0823/24

布局的三个常用属性：

display:inline-block 

vertical-align: top; 《深入理解CSS：line-height、vertical-align》

float:left

元素脱离正常流，但是文字依环绕它，浮动元素没有脱离文字流。

清楚浮动的方法：1、clear：both/left/right/,另外一类是创建BFC

position:absolute 、relative、fixed   用完定位后马上要接位置间距

top：

left：

right：

bottom：

display

另一个常用的display值是 none 。一些特殊元素的默认 display 值是它，例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。

它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。

display:none ，通过F12可以看到，元素不可见且元素不占据空间。

visibility：hidden；通过F12可以看到，元素不可见，单元素依然占据空间。

常见的例子是：把 li 元素修改成 inline，制作成水平菜单。

BFC ( Block Formatting Context)  也就是块级格式化上下文，创建BFC有以下情况：

float的值不为none。

overflow的值不为visible。

display的值为table-cell, table-caption, inline-block中的任何一个。

position的值不为relative和static。

BFC的特性就是包裹浮动的元素。按照我的理解，当你创建BFC之后元素就会把里面的东西视为自己的东西，包括浮动元素，然后创建一个私有领域给包裹进来

width/max-width

设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。

box-sizing

响应式设计

“响应式设计（Responsive Design” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！