随笔分类 -  CSS碎片（精通CSS）

摘要：P32从文字围绕浮动框谈起。 这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段，这是第一段这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段，这是第二段。 代码显示的大致效果如下图：这时，如果想要阻止行框(这里指id="secondPar... 阅读全文

摘要：P39:如果使用像素设置背景位置，那么图像左上角到元素左上角的距离问指定的像素数。所以，如果指定垂直和水平位置都是20px，那么图像左上角出现在元素左上角下面20px，左边20px的地方。但是，使用百分数进行背景定位的工作方式不太一样。百分数定位并不对背景图像的左上角进行定位，而是使用图像上的一个对应点。所以，如果指定垂直和水平位置都是20%，那么实际上将图像上距离左上角20%的点定位到父元素上距离左上角20%的位置。 阅读全文

摘要：P24:(书中原文称盒子模型为框模型，文中框模型和盒子模型同义)在CSS中，width和height值得是内容区域的宽度和高度。增加padding、border和margin不会影响内容区域的尺寸，但是会增加元素框的总尺寸。假设一个盒子模型，margin为10px,padding为5px,内容区域宽度为70px.这个盒子在页面中的占位宽度为100px(width:70px+padding:5px*2+margin:10px*2)。如果设该盒子的边框为{border:1px solid red;}，则盒子从左边框到右边框(含边框)的长度为82px(width:70px+padding:5px*2 阅读全文