发表于： 2018-07-13 21:13:37
1 724
今天完成的事情：完成了任务6的一部分 理解了雪碧图。
明天计划的事情：复习任务1到任务6中所学的知识；
遇到的问题：屏幕过窄时，左边的文字不出现”…”省略号（设置字间距，使它边长）
收获：
盒子模型：盒子模型分为标准盒子模型和IE盒子模型
在 CSS的标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
padding padding区域也有颜色 padding就是内边距。padding的区域有背景颜色，且背景颜色一定和内容区域的相同。也就是说，background-color将填充所有boder以内的区域。
<body>标签也有margin。很多人以为<body>标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是<document>，即浏览器。而<body>是<document>的儿子。浏览器给<body>默认的margin大小是8个像素，此时<body>占据了整个页面的一大部分区域，而不是全部区域。
盒子真实占有宽度 = 左border + 左padding + width + 右padding + 右border
border边框。边框有三个要素：像素（粗细）、线型、颜色。
border属性是能够被拆开的，有两大种拆开的方式： （1）按三要素拆开：border-width、border-style、border-color。（一个border属性是由三个小属性综合而成的） （2）按方向拆开：border-top、border-right、border-bottom、border-left。
切换两种盒模型：在IE8及以下的浏览器中只支持IE盒模型，在IE8+及其他主流浏览器中，通过CSS新增的box-sizing属性可以设置浏览器的盒模型。box-sizing属性的默认值是content-box，即W3C标准盒模型；而将box-sizing值设置为border-box时，则会更改为IE盒模型。
返回列表
评论