#前端学习笔记#day6 浮动 圆角 BFC
盒子的大小
默认情况下 盒子可见框大小由内容区、内边距、边框共同决定
box-sizing 用来设置盒子尺寸的计算方式
可选值：content-box 默认值，宽度和高度用来设置内容区的大小
·· border-box 宽度和高度用来设置整个盒子可见框的大小
width和height指的是内容区 内边距和边框的总大小
box-sizing: content-box;
轮廓和圆角
boder会改变元素的大小，下面的文字会被挤下去，页面布局有影响
outline不会影响页面布局，用法和border一样
用来设置元素的阴影效果，不会影响页面的布局，10像素表示偏移量，第一个是，水平偏移量，正值左侧偏移量。第二个值表示垂直偏移量，正值向下。第三个值是阴影的模糊半径。第四个值是阴影的颜色
box-shadow:10px 10px 10px rgba(0, 0, 0, 0.3) ;
圆角
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
像素表示圆角的半径
border-radius: 10px 10px 10px 20px
四个值表示左上 右上 右下左下
三个值 左上 右上/左下 右下
两个值 左上/右下 右上/左下
border-radius:50% 表示一个圆
浮动：
通过浮动可以使一个元素向其父元素的左侧或者右侧移动
使用float属性来设置元素的浮动
可选值：none 默认值，元素不浮动
left 元素向左浮动
right 元素向右浮动
元素设置浮动之后，水平布局等式不需要强制成立
元素设置浮动之后，会完全从文档流中脱离，不再占用文档流的位置，所以下面元素会自动向上移动
如果希望两个元素并排，则设置两个元素都浮动。
浮动的特点：
浮动元素会完全脱离文档流，不再占用文档流的位置
设置浮动后，元素会向父元素的左侧或者右侧移动
元素移动时的特点
浮动元素默认不会从父元素中移出
浮动元素向左或者向右移动时不会盖住其他的浮动元素
如果浮动元素上面是一个没有浮动的块元素，则浮动元素无法上移
简单总结：
浮动目前来讲他的主要作用就是让页面中的元素可以水平排列
浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果。
元素设置浮动之后，将会从文档流中脱离，从文档流中脱离之后，元素的一些特点也会发生一些变化。
脱离文档流的特点：
块元素： 块元素不再独占页面一行
脱离文档流之后，块元素的宽度和高度都会被内容撑开
行内元素：行内元素脱离文档流以后会变成块元素，特点和块元素一样
脱离文档流以后，不需要区分块元素和行内元素。
-浮动练习
line-hight 行高和父元素一样，将文字在父元素中垂直居中。（先设置height）
.nav a{
display: block;
text-decoration: none;
color: #777;
font-size: 18px;
}
将a转换为块元素
高度塌陷和BFC
高度塌陷：在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失。