前端试题-CSS试题(1)
2016-03-08 12:15
411 查看
1. css属性命名区分大小写吗?
3.padding-top和padding-bottom对于inline元素都会增加元素本身的大小么?
7. translate()方法可不可以使元素在z轴上做变换?
不区分,不过一般小写,便于理解
2. margin-top和margin-bottom对于行内(内敛inline)元素效果一样么?3.padding-top和padding-bottom对于inline元素都会增加元素本身的大小么?
回答2,3,需要了解html里的替换元素和非替换元素。
替换元素是指作为其他内容点位符的一个元素。如img等。非替换元素是指内容包含在文档中的元素,例如span。
讨论margin-top和margin-bottom对行内元素是否起作用,则要对行内替换元素和行内非替换元素分别讨论。
把margin应用到行内元素是可以的,不过向非替换元素应用margin时,对行高没影响,而margin实际又是透明的,所以margin-top和margin-bottom没有任何视觉效果。把margin-left和margin-right应用到非替换元素是有影响的。
为行内替换元素设置margin-top和margin-bottom,可能会使行高增加或减少,这取决于margin-top和margin-bottom的值。margin-left和margin-right对行内替换元素和非替换元素一样也是有影响的。
对于行内元素,设置padding-left和padding-right是可见有影响的,设置padding-top和padding-bottom后,对于行内非替换元素,padding-top和padding-bottom没用,不会影响其行高,不会撑开父元素。而对于行内替换元素,padding-top和padding-bottom会撑开父元素。
inline元素(准确来说是非替换的行内元素)不能设置竖直方向上的margin和padding,这个是css标准所规定的。
总之,inline元素,宽高无效,margin,padding只有左右边距有效,上下无效。
4. 如果一个p 标签拥有font-size: 10rem,那么这个p标签会自动响应窗口布局吗?替换元素是指作为其他内容点位符的一个元素。如img等。非替换元素是指内容包含在文档中的元素,例如span。
讨论margin-top和margin-bottom对行内元素是否起作用,则要对行内替换元素和行内非替换元素分别讨论。
把margin应用到行内元素是可以的,不过向非替换元素应用margin时,对行高没影响,而margin实际又是透明的,所以margin-top和margin-bottom没有任何视觉效果。把margin-left和margin-right应用到非替换元素是有影响的。
为行内替换元素设置margin-top和margin-bottom,可能会使行高增加或减少,这取决于margin-top和margin-bottom的值。margin-left和margin-right对行内替换元素和非替换元素一样也是有影响的。
对于行内元素,设置padding-left和padding-right是可见有影响的,设置padding-top和padding-bottom后,对于行内非替换元素,padding-top和padding-bottom没用,不会影响其行高,不会撑开父元素。而对于行内替换元素,padding-top和padding-bottom会撑开父元素。
inline元素(准确来说是非替换的行内元素)不能设置竖直方向上的margin和padding,这个是css标准所规定的。
总之,inline元素,宽高无效,margin,padding只有左右边距有效,上下无效。
不会,rem是以html根元素font-size的大小为基准的相对度量单位,文本的大小不会随着窗口的大小改变而改变。一般默认根元素font-size为16px,不过可以改变它的值。
5. 伪类选择器:checked对于option标签有效果吗? 有。
伪类选择器:checked会作用于radio(<input type=”radio”>), checkbox(<input type=”checkbox”>)或者 option元素(<option> in a <select>)。
6. 伪类 :root 通常指的是标签<html>?伪类选择器:checked会作用于radio(<input type=”radio”>), checkbox(<input type=”checkbox”>)或者 option元素(<option> in a <select>)。
7. translate()方法可不可以使元素在z轴上做变换?
不能。
translate()方法包含在CSS3的2D transform函数里。它可以在x轴和y轴上移动位置。
translate()方法包含在CSS3的2D transform函数里。它可以在x轴和y轴上移动位置。
相关文章推荐
- CSS笔记2-样式选择器
- Css 学习笔记--样式引入方式及按权重判断优先级
- CSS3 animation 属性 CSS3 @keyframes 规则
- css中em,rem的解析成px的原理及混用场景
- 解决子元素用css float浮动后父级元素高度自适应高度
- CSS渲染速度改善的十个方法与建议
- 单选 多选按钮的选择
- CSS实现垂直居中
- 纯css实现close - ×
- CSS样式优先权
- 纯CSS修改浏览器的默认滚动条样式
- CSS 属性 - 伪类和伪元素
- 我的css释疑-float line-height inline-block vertical-align
- CSS样式
- CSS选择器
- (28)odoo中css可用颜色对照表
- CSS-----选择器分类、层叠、特殊性与继承
- html/css基础篇——GET和POST的区别
- html/css基础篇——link和@inport详解以及脚本执行顺序探讨
- html/css基础篇——iframe和frame的区别【转】