码迷,mamicode.com
首页 > Web开发 > 详细

继承盒模型以及CSS常用样式

时间:2017-11-12 20:14:16      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:css   through   sprite   chm   属性   over   word   under   强制   

serif 衬线字体 serif

sans-serif 非衬线字体 sans serif

line-through 删除线 line-through
text-shadow : x y 模糊度 颜色 shadow

background-size:

background复合样式:#fff url() no-repeat scroll x,y

outline

sprite sprite

继承

继承(inherit)子元素会自动拥有父元素的某些CSS属性。

可被继承:文本类属性会被继承
不可被继承:外内边距,背景颜色
传递性

继承发生要满足两个条件:
该属性是可继承的属性
该属性在样式表中没有声明


强制继承

也叫显示继承,是指将css设置为inherit。
两个原因:为了继承不能继承的元素
为了继承已被声明过的属性

获得值的计算过程:无属性值—确定声明值—层叠冲突—使用继承—使用默认值—每个层都有值

background-color的默认值:transparent(透明)


盒模型

 

display:bolck/none/inline/inline-block

block:
占据所有可用的宽度
通常用于较大的内容块,比如标题或结构元素
独占一行
可设置高宽

inline:

只占据内容所需的宽度,在同行显示
通常用于较小的内容块
由内容撑开高宽

ps:行内元素不能嵌套块元素

inline-block:

input、img


盒模型

 

content—padding—border—margin


padding值不能为负

自动换行又叫断词

overflow:scroll/hidden

ps:父级尽量不设置高宽

顺时针方向显示像素值缩写

垂直方向外边距会合并,两值不同时取大值。
外边距可取值为负。


字体


font-family:“a”,“b”,serif/sans-serif; 衬线字体和非衬线字体

ps:非衬线为主,衬线一般用于比较大的字上

font-style:obique/italic/normal 默认强行切斜/设置为倾斜/正常


文本


text-indent:2em/px 值可为负
text-decoration:none/underline/overline/line-through
没有/下划线/上划线/删除线
letter-spacing 字距
word-spacing 词距

顶线、中线、基线、底线

text-shadow:x y 模糊度 颜色 背景偏移量

 

背景/background

以视口为基准显示内容

background-attchment:fixed/scroll

background-size: px/%

background复合样式:#F00 url() no-repeat scroll x y;


边框/border

border:常用样式
outline:1、辅助用,不产生像素 2、去掉文本框蓝色线条

拼合图/雪碧图

sprite

定了视口再插入图片

继承盒模型以及CSS常用样式

标签:css   through   sprite   chm   属性   over   word   under   强制   

原文地址:http://www.cnblogs.com/opacity-m/p/7822613.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!