元素分类
常用的块状元素:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素:
<img>、<input>
不同元素的特点和区别:
块级元素特点:
- 每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
- 元素的高度、宽度、行高以及顶和底边距都可设置。
- 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
内联元素特点:
- 和其他元素都在一行上;
- 元素的高度、宽度及顶部和底部边距不可设置(height/width/padding top、bottom/margin top、bottom均无效果。只能用padding left、right和margin left、right改变宽度。);
- 元素的宽度就是它包含的文字或图片的宽度,不可改变。
内联块状元素特点:
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素(css2.1新增)。
- 和其他元素都在一行上;
- 元素的高度、宽度、行高以及顶和底边距都可设置。
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)