web前端-css小记(3)

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

块元素 行内元素
div span
p i em strong b
h1-h6 img
form a
ul ol dl li dd dt button input label
table tr td th select textarea

特征区别:

块级元素 行内元素
可以包含块级元素和行内元素 只能包含行内元素
占据一整行 只占本身宽度
能自定义宽高 不能定义宽高
有内外边距 只有左右边距

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

  1. 继承,它是依赖于祖先-后代的关系的,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。就是没有特别设置时,儿子会继承父级的一些属性样式。
继承属性 无继承属性
visibility 盒子模型属性:width,height,margin,padding,border
文本属性:text-indent,text-align,line-height,word-spacing,letter-spacing,color 定位属性:float,position,clear,top,right,left,bottom,overflow,z-index
文本属性:font-size,font-weight,font-style,font-family 文本属性:vertical-align,text-decoration,text-shadow,white-space
cursor display,background

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

  1. 块级元素:margin: 0 auto;
  2. 行内元素:text-align:center;

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

  1. overflow:hidden;超出部分隐藏
  2. text-overflow:ellipsis;显示省略符号来代表被修剪的文本。
  3. white-space:nowrap;不折行

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

  1. px:像素,相对于显示器屏幕分辨率而言
  2. em:相对长度单位,相对于当前对象文本字体尺寸而言,若未设置,则相对于浏览器默认文本尺寸,默认尺寸为16px
  3. rem:rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素(html)

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

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

body元素里的子元素设置字体大小为12px,行高为字体大小的1.5倍,后面都是字体,依次查询浏览器和本地的字体库里有没有相关字体,没有的话就查询下一个字体。加引号表示引号里面的是一个字体,是一个整体,'\5b8b\4f53是Unicode码,代表字体转换为Unicode码

8.代码

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

(mission8)

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,843评论 1 92
  • 块级元素和行内元素分别有哪些? block-level div h1 h2 h3 h4 h5 h6 p hrfor...
    我要认真学前端阅读 1,156评论 0 1
  • 1. 块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 答: (1)块级元素含义:block ele...
    黄同学2019阅读 780评论 0 1
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,067评论 1 4
  • 看最新一期的《奇葩说》,里面马薇薇说的一番话让我印象非常深刻,就是我们总觉得我们的生活迷茫,于是去相信某些所谓的...
    悬空的植物阅读 469评论 0 1