任务八

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

块级元素div h p hr,form ul dl ol pre table,li dd dt tr td th(块级占据一整行空间)

行内元素em strong span a br img,button input label select textarea,code script(行内元素占据自身宽度空间)(里面包含行内元素和文本)

                     1宽高只对块级元素生效

2.块元素,总是在新行上开始;内联元素,和其他元素在一行;


3块元素,能容纳其他块元素或者内联元素;内联元素,只能容纳文本或其他内联元素;


4.块级宽度默认是它容器的100%,除非设定一个宽度。行内元素宽度就是它的文字和图片的宽度,不可改变。


2、什么是 CSS 继承? 哪些属性能继承,哪些不能?

什么是css继承?

继承就是子标签继承了上级标签的CSS样式的属性

哪些属性能继承?

1、字体font-family

2、文字大小css font-size

3、文本粗细font-weight

4、文字颜色css color

哪些不能?

高度宽度,padding,margin border样式不能继承

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

块级元素水平居中

左右margin相等

div{background:yellow;height:100px;width:100px;margin:0 auto;}

行内元素水平居中:

span{padding:0 50%;}

或者父元素width100%,子元素text-align:center,块级元素也可如此实现;

4、用 CSS 实现一个三角形

如图

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

实现如图

white-space参考资料

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

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素

如图:rem相对于根部span发生 变化,em相对于父容器变化。px则是相对于屏幕


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

body{

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

}

设置body内字体样式

有空格,不加引号会被识别成两个元素。

数字是Unicode码,宋体、微软雅黑

二、代码实现

1、代码实现1


2、代码实现2


3、代码实现3

github地址

4、代码实现4

github地址

5、代码实现5

github地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 1. 块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 答: (1)块级元素含义:block ele...
    黄同学2019阅读 4,079评论 0 1
  • 一 块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别? 行内元素:span, strong, em,...
    饥人谷_迪阅读 1,098评论 0 0
  • 块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 块级元素有div hi p hr form ul ...
    饥人谷_我已经是一条咸鱼了阅读 1,631评论 0 0
  • http://www.jianshu.com/p/afa14125f66b
    Mrxiaowang阅读 760评论 0 0