- 盒模型包括哪些属性
- margin 外边距
- padding 内边距
- border 边框
上面每一都可以修改上下左右的四种属性
margin 赋值顺序是逆时针
margin:10px 20px 10px 20px = margin: 10px 20px
border:30px solid #fff
-
text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align: center 的作用是文本上下左右居中放置,作用在文本容器中，能让文本或者img和行内元素居中
- 如果遇到一个属性想知道兼容性，在哪查看?
查caniuse - IE 盒模型和W3C盒模型有什么区别?
IE6 盒子模型中，盒子的尺寸包含了 内容区，padding， border 和 margin 这四个部分，而 W3C 的盒子模型中，盒子的尺寸只包含内容区，padding，border 和 margin 被排除在盒子尺寸之外
1. 面板式界面设计
页面上包含几个面板，比如一个登录面板，一个最新新闻面板，一个投票面板，这类设计典型的做法是，用背景图的方式，首先逐个设计出这些面板的外观图，将需要用具体内容替换的地方空着，这些面板，无非就是一些使用面板外观图片做背景图的盒子，然后，在这些盒子里面，放上具体的内容，使用 padding 控制内容的摆放位置，使用 margin 调整面板本身的摆放位置，由于面板的尺寸是固定的，我们依此确立了盒子的尺寸之后，就无需再关心尺寸问题，然后，不论你怎样调整 padding 和 margin，都不会影响面板本身的结构。这是 IE6 盒子模型。
而在 W3C 的盒子模型中，调整 padding 和 margin ，都会影响盒子的尺寸，你在调整内容摆放位置的同时，极有可能打乱面板本身的结构。
2. 百分比级尺寸 + 像素级边界问题
W3C 盒子模型在设计中最让人头疼的是，假如你有一个不确定宽度的容器，想在里面放置两个同样大小的盒子，最合理的的做法当时是设置每个盒子的宽度为 50%，这样，不管你的容器宽度为多大，这两个盒子总能自动适应这个宽度，然而，前提是你不要设置任何 padding 或 border，而，现实中，为了防止两个盒子中的内容互相挨得太近，你肯定要设置 padding，一旦设置了 padding，就会发现你的容器被撑破了。
当然你会说，每个盒子的宽度不要设为 50%，可以设为 45%，然后为每个盒子再加一个 5% 的 padding，这是一个解决办法，但我们在设计中经常有这样的习惯，虽然一段内容的宽度可能不确定，但我们总喜欢它拥有固定 padding，我们并不希望 padding 自动适应，况且，在很多时候，我们希望为一个自适应宽度的盒子，设置一个 1 像素的 border，在这种情形，W3C 盒子模型将陷入困境。
而遇到这种情形，IE6 盒子模型不需要任何周折，你只管将每个盒子的宽度设置为 50%，它们会自动适应容器的宽度，然后，不管你你怎样设置 padding 和 border，都不会撑破你的容器。
- 以下代码的作用？兼容性？
*{
box-sizing: border-box;
}
在 CSS3 中，我们看到了下面这个属性：
box-sizing
box-sizing 有两个可选值，一个是默认的 content-box 一个是 border-box，选用后者，盒子模型将按 IE6 的方式进行处理。
网友评论