任务8.CSS常见属性

1.块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别

• 块级元素：独占一行,默认情况下,其宽度自动填满其父元素宽度。

以下都是块级元素

块级元素	含义
address	地址
blockquote	块引用
center	举中对齐块
dir	目录列表
div	常用块级容易，也是css layout的主要标签
dl	定义列表
fieldset	form控制组
form	交互表单
h1	大标题
h2	副标题
h3	3级标题
h4	4级标题
h5	5级标题
h6	6级标题
hr	水平分隔线
isindex	input prompt
menu	菜单列表
noframes	frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript	可选脚本内容（对于不支持script的浏览器显示此内容）
ol	排序表单
p	段落
pre	格式化文本
table	表格
ul	非排序列表

• 行内元素（内联元素）：仅占据自己行内的位置

下列为常见行内元素

行内元素	含义
a	锚点
abbr	缩写
acronym	首字
b	粗体(不推荐)
bdo	bidi override
big	大字体
br	换行
cite	引用
code	计算机代码(在引用源码的时候需要)
dfn	定义字段
em	强调
font	字体设定(不推荐)
i	斜体
img	图片
input	输入框
kbd	定义键盘文本
label	表格标签
q	短引用
s	中划线(不推荐)
samp	定义范例计算机代码
select	项目选择
small	小字体文本
span	常用内联容器，定义文本内区块
strike	中划线
strong	粗体强调
sub	下标
sup	上标
textarea	多行文本输入框
tt	电传文本
u	下划线
var	定义变量

• 块级元素和行内元素的区别
  （1）块级元素占据一行的空间，行内元素仅占据行内自己的一小部分
  （2）块级元素可包含块级元素和行内元素，行内元素仅包含文本和行内元素
  （3）设置宽高（width height）对块级元素有效，对行内元素不生效，行内元素高度可通过inline-height设置

  
  
  

  举例
  
  

  （4）对块级元素设置margin和padding上下左右都有效，对行内元素设置margin和padding只对左右生效

  
  
  

  举例
  
  （5）块级元素display=block，行内元素display=inline

2.什么是 CSS 继承? 哪些属性能继承，哪些不能？

• CSS继承
  子元素没有指定值的情况继承父元素的属性。

• CSS中可继承的属性

1、字体系列属性

font：组合字体

font-family：规定元素的字体系列

font-weight：设置字体的粗细

font-size：设置字体的尺寸

font-style：定义字体的风格

font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

2、文本系列属性

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：增加或减少单词间的空白（即字间隔）

letter-spacing：增加或减少字符间的空白（字符间距）

text-transform：控制文本大小写

direction：规定文本的书写方向

color：文本颜色

3、元素可见性：visibility

4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style

6、生成内容属性：quotes

7、光标属性：cursor

8、页面样式属性：page、page-break-inside、windows、orphans

9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

• CSS中不可继承的属性

1、display：规定元素应该生成的框的类型

2、文本属性：

vertical-align：垂直文本对齐

text-decoration：规定添加到文本的装饰

text-shadow：文本阴影效果

white-space：空白符的处理

unicode-bidi：设置文本的方向

3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

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

6、生成内容属性：content、counter-reset、counter-increment

7、轮廓样式属性：outline-style、outline-width、outline-color、outline

8、页面样式属性：size、page-break-before、page-break-after

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

• 所有元素可以继承的属性

1、元素可见性：visibility

2、光标属性：cursor

• 内联元素可以继承的属性

1、字体系列属性

2、除text-indent、text-align之外的文本系列属性

• 块级元素可以继承的属性

1、text-indent、text-align

3.如何让块级元素水平居中？如何让行内元素水平居中?

• 块级元素居中：设置margin= 0 auto可完成
• 行内元素居中：设置text-align= center可完成

4.用 CSS 实现一个三角形

三角形

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

选中相应的文字后，输入以下代码可以实现：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

图例

折行显示省略号

6.px, em, rem 有什么区别

px： 固定单位，输入多少px就是多少像素的大小
em: 相对单位，相对于父元素字体大小，例如，输入1em，就是父元素的一倍
rem: 相对单位，相对于根元素(html)字体大小

举例

7.解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?

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

• 代码从左到右设置字体大小为12px，行高为字体大小的1.5倍，右边按优先级排列选用的字体样式
• 字体加引号是表示这几个单词在一起表示一个字体，如果没有引号，会认为是三个不同的字体
• \5b8b\4f53是将汉字变为Unicode码，因为直接打中文字体名会让一些计算机无法识别，这里指的是宋体