![如何用css设置网页字体[多图]](/aiimages/%E5%A6%82%E4%BD%95%E7%94%A8css%E8%AE%BE%E7%BD%AE%E7%BD%91%E9%A1%B5%E5%AD%97%E4%BD%93%5B%E5%A4%9A%E5%9B%BE%5D.png)
因为浏览器默认情况下会为元素添加margin和padding属性，需要将这两个属性初始化为0.
1、新建html文档，在body标签中添加一个div标签，然后为这个div设置一些样式：
2、用浏览器打开编辑好的html文档，这时可以从浏览器中发现浏览器四周留有一些白色空隙：
3、在style标签中为“*”添加“margin: 0padding: 0”样式，“*”表示所有元素，“margin”和“padding”表示外边距和内边距：
4、用浏览器重新打开编辑好的html文档，这时浏览器四周的白色空隙都会被去除：
1 .width作用在内在盒子，也就是容器盒子
auto是width的默认值，尽管这样，却也是一个深藏不漏的家伙
如图，不设置white-space:nowrap的时候，宽度不会超，只会向下
如图，如果加了white-wrap:nowrap会超出容器限制
1 .在css世界中，盒子分为“内在盒子”，‘外在盒子’，显示也分为“内部显示”，‘’外部显示‘。尺寸也分为“内部尺寸”，’外部尺寸‘
2 .内部尺寸英语是'intrinsic sizing',表示尺寸由内部元素决定，外部尺寸“extrinsic sizing”,宽度由外部元素决定
1 .正常流宽度.当我们往页面中添加一个div元素，div的尺寸就像是流铺满元素一样，会铺满整个容器，但是这并不等于这个div的宽度是width:"100%".所以当把一个元素设置为display:block的时候，在加一条width:100%是不对的。这俩是互斥的，给一个元素添加宽度是会破坏他的流动性
2 .格式化宽度：在绝对定位模型中，默认是包裹性，宽度由内容决定，但是如果有以下属性，left/righ或top/bottom对立方位的属性值同时存在的时候，他的宽度表现为格式化宽度，宽度大小由最近的具有定位特性(position的值不是static)的祖先元素计算而来
1 .尺寸的大小由内部的元素决定。如果一个元素没有内容的时候他的宽度是0，那么这个元素就是由内部元素决定
3 .内部尺寸的三种表现形式
1 .元素尺寸由内部元素决定，会永远小于“包含块”容器的尺寸。对于一个元素如果display：inline-block，那么即使里面内容再多，只要是正常文本，宽度也不会超过容器
2 .Button元素，按钮就是最具代表性的inline-block元素。按钮文字越多，宽度越高，如果文字足够多，则会在容器的宽度处自动换行。
1 .也就是css不会在width:auto的时候，并且有图文的时候不会是0的。会选最小宽度的
2 .汉字的时候，最小宽度是一个汉字的宽度
3 .英语单词的时候，最小宽度有额定的英文字符单元决定
4 .使用情况，画一些图形:利用连续单词不换行的特性，可以控制什么时候换行，什么时候正常显示，所以可以非常方便实现这些凹凸的形状
1 .最大宽度就是元素可以有的最大宽度。实际上最大宽度实际等同于“包裹性”。如果设置了withe-space:nowrap。那就是最后没有换行的宽度。如果内部没有块级元素或块级元素没有设置宽度值，那么最大宽度实际上是最大的连续内联盒子的宽度
2 .连续内联盒子就是全部都是内联级别的一个或一堆元素，中间没有任何的换行标签br或其他块级元素
3 .实际用处:实现滚动
1 .上面全部都只是说了width:auto的点，别的都没说
2 .width宽度直接作用在内在盒子上，内在盒子是由content box，padding box,border box,margin box。
3 .margin的背景永远是透明的，因此不能作为background-clip,background-origin属性值出现。
4 .100px作用在了content box上，但是由于div默认的padding,border,margin都是0，因此div所呈现的宽度就是100像素.如果此时padding，border也有值的话，那么最后的表现就不是100px.一定比这个大
1 .流动性丢失，对于块状元素来说，如果是width:auto的话，元素会如水流般充满整个元素，一旦设定了width具体数值，元素的流动性就会被阻断，因为元素给定宽度就像河流中间竖起两个大闸一样，流动性丢失
2 .与现实世界表现不一致.包含padding或border会让元素宽度变大。我们设置100像素宽度，其实希望是整个元素的最终宽度是100px,而不是最后比这个大.-解决方式-宽度分离原则:和宽度有关的属性要分在两个地方写，比如父元素写width属性，子元素做padding,border这些属性
3 .解决方式2，使用box-sizing属性：他可以改变width作用的细节.box-sizing属性值
4 .注意box-sizing不持之margin,只有当元素没有水平margin的时候，box-sizing才能真正无计算，上面提到的宽度分离元素是可以真正解决这个问题的
5 .唯一离不开box-sizing的元素就是input和textarea元素,让他们实现100%自适应宽度
