6. CSS常见样式1

元素分类

常用的块状元素:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素:

<img>、<input>

不同元素的特点和区别:

块级元素特点:
  1. 每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
  2. 元素的高度、宽度、行高以及顶和底边距都可设置。
  3. 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
内联元素特点:
  1. 和其他元素都在一行上;
  2. 元素的高度、宽度及顶部和底部边距不可设置(height/width/padding top、bottom/margin top、bottom均无效果。只能用padding left、right和margin left、right改变宽度。);
  3. 元素的宽度就是它包含的文字或图片的宽度,不可改变。
内联块状元素特点:

内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素(css2.1新增)。

  1. 和其他元素都在一行上;
  2. 元素的高度、宽度、行高以及顶和底边距都可设置。

CSS继承

  • CSS继承就是子元素继承了父元素的CSS样式的属性。
  • 可以继承属性:

字体属性:
font、font-family:规定元素的字体系列、font-weight、font-size、font-style:定义字体的风格

文本系列属性:
text-indent:文本缩进、text-align:文本水平对齐、line-height:行高、
word-spacing、letter-spacing、text-transform:控制文本大小写、
direction:规定文本的书写方向
color:文本颜色

元素可见性:visibility
表格布局属性:caption-side、border-collapse、border-spacing、empty-cells、 table-layout
列表布局属性:list-style-type、list-style-image、list-style-position、list-style
生成内容属性:quotes
光标属性:cursor

-  不可继承属性:

display

文本类:
vertical-align:垂直文本对齐
text-decoration:规定添加到文本的装饰
text-shadow:文本阴影效果
white-space:空白符的处理
unicode-bidi:设置文本的方向

盒子模型的属性:width、height、margin 、margin-XXX、border、border-XXX、。。。基本都不行

背景属性:background、background-color、background-image、
background-repeat、background-position、background-attachment都不行

定位属性:float、clear、position、top、right、bottom、left、
min-width、min-height、max-width、max-height、overflow、clip、z-index

声音样式属性:pause-before、pause-after、pause、cue-before、cue-after、cue、play-during


## 水平居中的方法:
-  块级元素水平居中,`margin: 0 auto`;
-  行内元素水平居中,`text-align: center`;.

## 单行文本溢出加 ...如何实现?

white-space: nowrap; /先设置文本不换行/
overflow: hidden; /设置溢出隐藏/
text-overflow: ellipsis; /设置隐藏部分为.../


## px, em, rem的区别:
- px (Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的
- em 相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸
- rem 为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素

## 代码解析:

body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}

- 代码作用:
 该段代码设置了body的font样式,字体大小为12px,行高是字体1.5倍的像素值,后面则是第一到第五字体,用逗号隔开,如果用户浏览第一字体没有,则查询第二字体有没有,以此类推,如果都没有则采用系统默认字体;
- 字体为什么要加引号?
因为采用中文或者英文字体有空格时,不加引号可能导致用户浏览器不能识别字体,产生乱码;
- 字体里的数字符号代表什么?
代表字体的Unicod码。Unicode码全球通用,用该码表示字体是最保险的,获得该码的方式可以在网上查找,或者在开发者工具中输入escape指令,如下图:
![](http://upload-images.jianshu.io/upload_images/154598-48cc9489118c758f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,876评论 1 86
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 611评论 0 2
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 148评论 0 1
  • CSS格式化排版 1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例...
    张文靖同学阅读 350评论 0 3
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 1,297评论 0 5