作业8

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

  • ** 块级元素 **
    div h1 h2 h3 h4 h5 h6 p hr form ul dl ol pre table li dd dt tr td th

  • ** 行内元素 **
    行内元素:span, strong, em, br, img , input, label, select, textarea, cite,

  • 1.行内元素会在一条直线上排列,都是同一行的,水平方向排列
    块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。

  • 2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

  • 3.行内元素与块级元素属性的不同,主要是盒模型属性上

  • 4.块级元素默认宽度与浏览器宽度一样,与内容无关;行内元素宽度只与内容有关;

行内元素设置width无效,height无效(可以设置line-height),margin上下无效左右有效,padding上下无效左右有效。

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

** CSS继承 **

给父元素设置样式,子元素将具有相同的样式,也就是说,子元素继承了父元素的属性和属性值。

  • ** 可以继承的属性 **

font, font-family, font-size, font-weight, font-style, text-indent, text-align, line-height, word-spacing, letter-spacing, text-transform, color, visibility, border-collapse, list-style, list-style-type, list-style-image 等等

  • ** 无法继承的属性 **

display, vertical-align, text-decoration, text-shadow, white-space, width, height, margin, margin-top, padding, padding-top, border, border-style, border-width, border-color, background, float, clear, position, top, z-index, overflow, max-width, min-width 等等

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

给块级元素设置宽度和样式margin: 0 auto可以让其在父元素中水平居中
行内元素水平居中

给行内元素的父元素(必须是块级元素)设置样式text-align: center可以让其在块级元素中水平居中

4.用 CSS 实现一个三角形

https://jsbin.com/jixeviwosu/1/edit?html,css,output

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

white-space:nowrap;使文本不折行
overflow:hidden;溢出部分隐藏
text-overflow:ellipis;溢出部分加省略号

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

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

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

字体名称为中文时,要加引号,如:"微软雅黑"
字体名称为英文但是名称有多个单词组成,中间包含空格。如:“Times New Roman”, 不加引号可能会导致浏览器无法识别字体设置。

\5b8b\4f53是汉字“宋体“的unicode编码形式,如果只写'宋体',当网页,css编码是uft8时,某些情况下会导致浏览器无法识别字体设置的问题,写成unicode编码形式不会出现这个问题
http://js.jirengu.com/vobobipoti/2/edit 实现三角形
https://jsbin.com/dakuxacuyo/1/edit?html,css,output 实现文本框
http://js.jirengu.com/pikilinune/2/edit 实现卡片
http://js.jirengu.com/haviguwuko/2/edit 实现表格
http://js.jirengu.com/wucakakeje/1/edit 实现按钮

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,158评论 1 92
  • CSS选择器常见的有几种? 1.基础选择器*通用元素选择器:匹配页面任何元素#idid选择器:匹配特定id元素.c...
    饥人谷_小霾阅读 279评论 0 0
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 714评论 0 1
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 1,593评论 1 4
  • 还不起的债 月近重阳人近中年,同学间的互动又熟络和频繁起来。 伟华是我们小学同学,在那个年代,因为妈妈是上海人,吃...
    德鲁伊_Druid阅读 143评论 0 2
  • ——Kurny 鱼块鸡块烤鸭块,块块甜嘴。 ​旧歌新歌深情歌,歌歌上心。 风声车声高呼声,声声钻耳。 ...
    Kurny91阅读 121评论 0 0