美文网首页
web前端-css小记(3)

web前端-css小记(3)

作者: 抚年华轻过 | 来源:发表于2017-06-13 14:08 被阅读0次

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)

相关文章

  • web前端-css小记(3)

    1. 块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 特征区别: 2. 什么是 CSS 继承? 哪...

  • Web扫雷开发小记(1)

    目录Web扫雷开发小记(2)Web扫雷开发小记(3)Web扫雷开发小记(4) 刚好今天做阿里前端笔试问到扫雷了,那...

  • 小猿圈web前端讲解CSS3阴影

    学习前端首先需要学习的就是css、html、css3,而其中css3又是运用做多的了,今天小猿圈web前端讲师就总...

  • 好程序员web前端培训技术之CSS3过渡

    好程序员web前端培训技术之CSS3过渡 transition css3的transition允许css的属性值在...

  • 前端学习资料

    前端 Html+CSS+JS Web前端开发之HTML+CSS精英课堂【渡一教育】 Web前端开发之JavaScr...

  • web前端-css小记(2)

    1. class 和 id 的使用场景? class:类选择器,不限于只针对单个元素使用,若有若干个元素要使用相同...

  • web前端-css小记(1)

    1.css全称是什么? css全称:Cascading Style Sheets,意思为层叠样式表 2.CSS有几...

  • web前端-css小记(4)

    1. text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中? text-ali...

  • web前端-css小记(5)

    1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 特征:浮动元素会脱离文档流,浮动...

  • Web版扫雷开发小记(3)

    前篇: web版扫雷开发小记(1)web版扫雷开发小记(2)web版扫雷开发小记(3)web版扫雷开发小记(4) ...

网友评论

      本文标题:web前端-css小记(3)

      本文链接:https://www.haomeiwen.com/subject/gxzlqxtx.html