问题一:块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别?
常见块级元素:<p>,<h123456>,<ul>,<ol>,<li>,<table>,<td>,<tr>,<th>,<form>
。
常见行内元素:<img>,<a>,<textarea>,<em>,<input>,<button>,<code>,<script>,<label>.
块级元素和行内元素的区别:
1.块级元素占据一整行空间,行内元素并排排列。只占据本身内容的空间
2.块级可以包含块级和行内,行内只能包含文本和行内
3.宽高,只对块级元素设置生效,对行内元素无法设置,设置也不生效
4.块级元素正常设置margin和padding,行内元素不能通过margin-top和padding-top设置行高.如果设置背景浏览器承认存在,但是周围元素会覆盖掉所设置的上下间距。
问题二:什么是 CSS 继承? 哪些属性能继承,哪些不能?
继承性:特定的CSS属性向下传递到子孙元素。
可以继承的属性:
文本相关的:font开头的 text开头的,
列表相关的:list开头
color也能继承,但是对于a标签来说,color和text-decoration是无法继承的,只能单独设置。
对于h1标签,text-size是不能继承的。
无继承性的属性:
1、display:规定元素应该生成的框的类型
2、文本属性:
vertical-align:垂直文本对齐
text-decoration:规定添加到文本的装饰
text-shadow:文本阴影效果
white-space:空白符的处理
unicode-bidi:设置文本的方向
3、盒子模型的属性:width,height,margin ,border,padding。
4、背景属性:background,background-color,background-imag,background-repeat.
5、定位属性:float,clear,position,top,right,bottom,left,overflow,clip,z-index。
问题三:CSS 实现一个三角形
先设计一个盒模型,画一个矩形,然后height和width设置为0.border根据需求均分数值,最后把不必要的边框设置为透明。
问题四:单行文本溢出。。。如何实现
问题四:px, em, rem 有什么区别
px:像素值(chrome里面最小12px,小于12px没有效果)。
em:相对父元素的倍数大小,若父元素未声明,则追溯到上一级父元素。
ps:(任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。)
rem:相对html根节点(默认16px)倍数大小,若根节点未声明,则使用默认值16px。
该例子中,div子元素2em追溯到上一级2em也就是4倍根节点,40px。2rem,相对于根节点2倍大小,并且根节点声明为10px,所以2em表现为20px
问题五解释下面代码的作用?为什么要加引号? 字体里的数字符号代表什么?
1.代码作用:
font:12px/1.5 意思是body的字体设置为12px。行号是12x1.5的像素值。
tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif
代表浏览器从tahoma开始以依次识别,用户电脑存在即采用,不存在会查找第二种arial,以此类推。
2.因为单词之间存在空格,避免浏览器解析成多个词汇。所以用引号括起来表示单一的名词。
3.数字符号代表Unicode.\5b8b
是宋的code码,\4f53
代表体。