任务8   CSS的常见样式

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

  • 块级元素:div h1 h2 h3 h4 h5 h6 p hr form ul dl ol pre table li dd dt tr td th
  • 行内元素: em strong span a br img button iput label select textarea code script

区别:

  1. 块级元素会独占一行,其宽度自动填满其父元素宽度
    行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的 内容变化而变化
  2. 块级元素可以设置 width, height属性,行内元素设置width, height无效
    【注意:块级元素即使设置了宽度,仍然是独占一行的】
  3. 块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)
  4. 块级元素可以包含块级元素和行内元素,行内元素只能放行内元素

2. 什么是css继承?哪些属性能继承?哪些不能?

  • css继承:给父级元素设定好样式后,其子元素的样式和父级元素样式一样。

能继承:
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、list-style、list-style-type、list-style-position、list-style-image、text-indent和text-align

不能继承:
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。

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

  • 块级元素居中:设置 margin: 0 auto;
  • 行内元素居中:text-align: center;

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

设置

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

5. px em rem有什么区别?

  • px :固定单位
  • em:相对单位 相对父级元素的字体大小
  • rem: 相对单位 相对根元素(html)的字体大小

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

  • 中间有空格,不加引号会被识别成两个元素。
  • \5b8b\4f53表示的是字体的编号。

代码

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,806评论 1 92
  • 块级元素和行内元素分别有哪些? block-level div h1 h2 h3 h4 h5 h6 p hrfor...
    我要认真学前端阅读 1,147评论 0 1
  • 1块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 块级元素:div p hr table form...
    怎么昵称阅读 367评论 0 0
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,048评论 1 4
  • 想到我们两兄妹,我忍不住眼泪掉下来了,为什么老天爷要这么对我们,我自认是个好人,一个不错的好人。 我安慰自己这是对...
    人生漫步阅读 4,183评论 0 0