text-align: center的作用,作用哪些元素,让哪些元素水平居中。
- text-align作为HTML元素属性其主要是用来文本水平居中的,该属性能让块级元素内的inline元素和inline-block元素水平居中。
IE 盒模型和W3C盒模型的区别。
<pre>面板式界面设计:
页面上包含几个面板,比如一个登录面板,一个最新新闻面板,一个投票面板,这类设计典型的做法是,用背景图的方式,首先逐个设计出这些面板的外观图,将需要用具体内容替换的地方空着,这些面板,无非就是一些使用面板外观图片做背景图的盒子,然后,在这些盒子里面,放上具体的内容,使用 padding 控制内容的摆放位置,使用 margin 调整面板本身的摆放位置,由于面板的尺寸是固定的,我们依此确立了盒子的尺寸之后,就无需再关心尺寸问题,然后,不论你怎样调整 padding 和 margin,都不会影响面板本身的结构。这是 IE6 盒子模型。
而在 W3C 的盒子模型中,调整 padding 和 margin ,都会影响盒子的尺寸,你在调整内容摆放位置的同时,极有可能打乱面板本身的结构。</pre>
<pre>
百分比级尺寸 + 像素级边界问题:
W3C 盒子模型在设计中最让人头疼的是,假如你有一个不确定宽度的容器,想在里面放置两个同样大小的盒子,最合理的的做法当时是设置每个盒子的宽度为 50%,这样,不管你的容器宽度为多大,这两个盒子总能自动适应这个宽度,然而,前提是你不要设置任何 padding 或 border,而,现实中,为了防止两个盒子中的内容互相挨得太近,你肯定要设置 padding,一旦设置了 padding,就会发现你的容器被撑破了。
当然你会说,每个盒子的宽度不要设为 50%,可以设为 45%,然后为每个盒子再加一个 5% 的 padding,这是一个解决办法,但我们在设计中经常有这样的习惯,虽然一段内容的宽度可能不确定,但我们总喜欢它拥有固定 padding,我们并不希望 padding 自动适应,况且,在很多时候,我们希望为一个自适应宽度的盒子,设置一个 1 像素的 border,在这种情形,W3C 盒子模型将陷入困境。
而遇到这种情形,IE6 盒子模型不需要任何周折,你只管将每个盒子的宽度设置为 50%,它们会自动适应容器的宽度,然后,不管你你怎样设置 padding 和 border,都不会撑破你的容器。
</pre>
- 在 CSS3 中,我们看到了下面这2个属性:
box-sizing
:有两个可选值,一个是默认的 content-box 一个是 border-box,选用后者,盒子模型将按 IE6 的方式进行处理。
*{ box-sizing: border-box;}的作用
- 设置所有 CSS 的盒模型遵从 IE 盒模型的标准,此时在 CSS 设置的属性中,width 将包括内容宽度 + 内边距宽度 + 边框宽度,不再遵循默认 W3C 盒模型的标准。
【好处:无论如何改动 border 与 padding 的值,都不会导致 box 总尺寸发生变化,也就不会打乱页面整体布局。】
line-height: 2和line-height: 200%的区别。
- line-height: 2 :设置行高为本身文字高度的两倍(推荐)。
- line-height: 200% :设置行高为父元素文字高度的两倍。
inline-block的特性?去除缝隙方法?高度不一样的inline-block元素如何顶端对齐?
dispiay: inline-block; 拥有inline的特性,不占据一整行,宽度由内容宽度决定,又可设置宽高,内外边距来呈现block的特性。
达到顶端对齐,可以给inline-block元素添加:
vertical-align:top
CSS sprite 是什么?
正名:CSS 精灵图
外号:Css 雪碧 🍺
- 为了减少网络请求(积少成多,可省钱...啧啧),提高网页加载性能,可以将不同的图片/图标合并在一张图片上,再配合 Css 的 background-position : x y; 来获取图片..
让一个元素"看不见"有几种方式?有什么区别?
<pre>
<pre>display: none;
</pre><pre>opacity: 0;
</pre><pre>visibility: hidden;
</pre><pre>text-indent;
</pre><pre>z-index: