任务8——CSS常见样式

1.块级元素和行内元素分别有哪些？

• 区别1
  块级元素可以包含块级元素和行内元素；行内元素只能包含文本和行内元素
• 区别2
  块级元素独占一行，行内元素只占据自身宽度空间；
• 区别3
  块级元素可是设置过宽高，行内元素不能设置宽高
• 区别4
  块级元素可以设置margin，padding，行内元素只能设置水平的margin，padding，竖直方向的不生效

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

CSS继承指的是特定的CSS样式向下传递到子孙元素。

• 不可继承的特性
  不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。
• 可以继承的特性
  所有元素可继承：visibility和cursor。
  内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。
  块状元素可继承：text-indent和text-align。
  列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
  表格元素可继承：border-collapse。

引用自：css中可以和不可以继承的属性 by四眼闷

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

• 块级元素居中

.box{ 
  margin-left:auto;
  margin-right:auto;
}

• 行内元素水平居中

.box{ 
  text-align:center;
}

4.用CSS实现一个三角形

对块级元素设置宽高为0，设置上下左右border为不同颜色，或透明，可组合出不同样式三角形，调整border像素设置，可调整三角形的大小；

Paste_Image.png

5.单行文本溢出...的实现方法

white-space:nowrap ——显示不下的元素，不进行换行
overflow：hidden ——溢出的元素隐藏
text-overflow:ellipsis ——超出的部分用…代替

Paste_Image.png

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

• px
  固定单位，按照像素来设置大小
• em
  相对单位，是相对于父元素字体大小的相对值，2em为两倍
• rem
  相对单位，是相对于字体大小的相对值；

7.解释下面代码作用

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

• font-size:12px;
• line-height:1.5;
• font-family:tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
  字体样式写多个，是为避免浏览器上找不到该字体，而做的备选，如果找不到前面的字体会选择后面列的字体；
  字体的样式，同一种有多种表达方法，加引号的目的是为了把单词联系在一起，表明一个完整的字体样式；
  后面的数字字符，是直接把字体样式转换为了unicode码

8.代码任务

代码1
代码2
代码3
代码4
代码5