CSS的box-sizing与overflow属性使用

CSS，层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS样式引入的方式，有行内样式，在html标签中使用style属性引入；内部样式表，将css样式规则写在style标签；外部样式表，使用link标签引入外部css文件；也可以在style标签中,使用“@import”规则引入外部css文件。

一.box-sizing 

CSS中的 box-sizing 属性定义了浏览器应该如何计算一个元素的总宽度和总高度。

总元素的宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距

总元素的高度=上边距+顶部填充+上边框+内容高度+底部填充+下边框+下边距

在CSS 盒子模型的默认定义里，对一个元素所设置的width与height只会应用到这个元素的内容区。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内外边距。因为绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值，而box-sizing 属性可以被用来调整这些表现。

box-sizing 属性值：

content-box	默认值	使设置元素的宽度和高度应用到元素的内容区
border-box		使设置元素的宽度和高度应用到边框区
inherit		从父元素继承 box-sizing 属性的值

二.overflow

该overflow属性控制超出其边界的内容会发生什么，比如显示，比如隐藏，例指定大小200像素的div，有一个300像素的图片，渲染图片将突出 div并显示，等效于visible属性，默认不裁剪。

overflow的属性

visible	默认值	内容在其框外进行时不会被剪裁
hidden		溢出的内容将被隐藏
scroll		内容在其框外进行时被剪裁，显示滚动条
auto		如果内容在其框外，该内容将被隐藏，显示滚动条，如果内容不在框外，则浏览器不会显示滚动条
initial		使用默认值，即visible
inherit		从父元素继承值

Finish！