天理科协前端日常1

又是学习的一天，盒模型是个好东西，box-sizing=content-box是默认的，mdn有道思考题：box-sizing=border-box,怎样玩转盒模型？经过多天多夜的努力，弄明白了

*总宽度*=width+padding+border。（其中width为默认的content-box）。

*总高度*=width+padding+border。（其中width为默认的content-box）。

盒模型：content（内容）+padding（填充）+border（边框）+margin（外边框）。

margin并不计入盒子的长宽，而影响的是盒子外部的空间，盒子的范围是从content到border。

px是像素 em是相对大小 举个例子：有一个父元素6px,则3em=3*6px=18px。

margin ：auto

让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。

margin ：0 自然就是无边框了。

text-align：center 是文本居中的意思。

margin， border 和 padding感觉差不多，有很多共同之处。

overflow：hidden 是超出边框的内容就隐藏 。

overflow：visible 是超出边框的内容继续显示。

overflow：scroll 是超出边框的内容以滚轴列表的形式显示，是overflow-x+overflow-y的简写。

浮动是个好东西float，float:left,float:right,float:none;

可以让块元素均匀排满父元素，但是在只有一行的情况下，父元素的高度变为0，所以为了解决这个问题，要学会清除浮动，overflow：hidden，:after等等借助伪元素让父元素成功的与子元素的高度保持一致

这是那三个问题，我的看法。

时间好紧啊，赶紧学习去了，我才学到盒模型，浮动刚刚学完，后面还没学完，不说了，学习去喽，明天又是快乐的一天，啦啦啦啦啦......