青椒炒蛋

摘要： 当你设置了元素的宽度，实际展现的元素却能够超出你的设置：因为元素的边框和内边距会撑开元素。.div{ width: 500px; margin: 20px auto; padding: 50px; border-width: 10px;}上面的元素所展示出来的效果，宽度会不止500px。这可能不是我们想要的。通常或许我们会去计算宽度来实现想要的效果。但是如果计算的地方太多的话，事件很烦人的事。此时我们可以通过设置box-sizing：border-box来实现。.div{ width: 500px; margin: 20px auto; padding: 50px; borde... 阅读全文

摘要： 设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。div{ width: 600px; margin: 0 auto; }唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。div { max-width: 600px; margin: 0 auto; }这个知识点很简单，但是我觉得它很重要，于是也记录下来吧~ 阅读全文

摘要： position属性用于定位元素，它的几个值分别如下：1，static static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。2，relative relative 相对于自己在文档流中本来的位置进行定位，设置top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。不脱离文档流，其他的元素则不会调整位置来弥补它偏离后剩下的空隙。3，fixed 一个固定定位（position属性的值为... 阅读全文