CSS常见样式2

图片发自简书App


1- text-align:center的作用是实现元素内部文字的居中。

text-align:center的意思是块级元素中的行内内容居中。

作用在block-level元素上(包括了block和inline-block);

能让block-level的元素中的行内元素,替换元素和inline-block元素居中。

2- IE盒模型和W3C盒模型的区别:

IE盒模型:width=内容宽度+边框+内边距


图片发自简书App



W3C盒模型:width=内容宽度


图片发自简书App


W3C标准中padding、border所占的空间不在width、height范围内,大家俗称的IE的盒模型width包括content尺寸+padding+border

3-  *{box-sizing:border-sizing;}的作用是设置"IE盒模型",即设置:

宽度=边框+内边距+内容宽度

4- line-height:2 和line-height:200%有区别

line-height:2设置行高为当前字号的2倍;line-height:200%设置行高为默认字号(即html默认字体字号)的2倍。

继承性的区别:有单位时,子元素继承了父元素计算得出的行距;无单位时继承了系数,子元素会分别计算各自行距(推荐使用)。

5- line-block特性:

既呈现 inline 特性(不占据一整行,宽度由内容宽度决定)

又呈现 block 特性 (可设置宽高,内外边距)

缝隙问题

:给父元素设置font-size:0,然后行标签font-size设置为需要的值即可去除行级元素之间的缝隙。

高度不一样的inline-block元素顶端对齐可以用vertical-align:top来实现。

6- icon是页面小图标的实现方式,目前主要有以下几种方式:

①img方式②CSS sprite方式③icon font方式④css icon方式⑤SVG方式

其中,CSS sprite又称CSS精灵图,

指将不同的图片/图标合并在一张图上。

使用CSS Sprite 可以减少网络请求,提高网页加载性能

实现方法:

首先将小图片整合到一张大的图片上;

然后根据具体图标在大图上的位置,给背景定位。background-position:-8px -95px;

7- 让一个元素看不见有几种方式

①opacity:0;透明度为0,整体(opacity后代元素会随着一起具有透明性,Opacity中的字随着透明值下降越来越看不清楚)

②visibility:hidden;和opacity:0类似。

③display:none;元素消失,不占位置。

④backgroune-color:rgba(0,0,0,0.2)只是背景色透明度,对于子元素没有影响。

计算标准:line-height: 2根据自身元素的字体大小来计算,line-height: 200%根据父元素的字体大小来计算。

继承:line-height: 2继承给子元素的是2这个缩放因子,line-height: 200%继承给子元素的是200%计算后的值。

1- 使用 CSSsrpite 实现如下效果:http://js.jirengu.com/nafejopedu/1/edit?html,css,output

2-在iconfont上搜索"饥人谷"316, 使用字体图标实现代码1中的效果:

http://js.jirengu.com/paqoceriwa/2/edit

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容