CSS 自测题

简介: CSS 自测题

盒模型的宽度计算

默认为标准盒模型 box-sizing:content-box;

offsetWidth =(内容宽度+内边距 +边框),无外边距

答案 122px

通过 box-sizing: border-box; 可切换为 IE盒模型

offsetWidth = width 即 100px

margin 纵向重叠

  • 相邻元素的 margin-top 和 margin-bottom 会发生重叠
  • 空白内容的 <p></p>也会重叠,相当于不存在
答案 15px

margin 设置负值

  • margin-top 负值,元素向上移动
  • margin-left 负值,元素向左移动
  • margin-right 负值,右侧元素左移,自身不受影响
  • margin-bottom 负值,下方元素上移,自身不受影响

line-height 的继承

答案 40px
 
  • 值为具体数值,如 30px,则继承该值,子元素的 line-height 也是 30px
  • 值为比例,如2或1.5,则继承该比例,子元素的 line-height 也是 2或1.5
  • 【考点】值为百分比,如 200%,则继承父元素计算后的值,此题中 body 的 line-height 计算后的值是 40px,所以子元素的 line-height 应该是 40px
目录
相关文章
|
6天前
|
前端开发 UED
css3的禁忌
在使用 CSS3 时,需遵循最佳实践以确保代码的可维护性和跨浏览器兼容性。避免过度使用复杂选择器,确保添加 `-webkit-`、`-moz-` 等前缀;优先采用相对单位 `%`、`em`、`rem`;关注视觉辅助工具的可及性;利用 CSS 类减少重复样式;合理使用媒体查询实现响应式设计;优化动画效果,避免性能下降;谨慎混合使用布局模型,如 Flexbox 和 Grid;持续测试不同浏览器以确保兼容性。
|
17天前
|
设计模式 移动开发 前端开发
CSS内联样式的使用,吐血整理
CSS内联样式的使用,吐血整理
31 6
|
3月前
|
前端开发
CSS基础之伪类选择器(如果想知道CSS的伪类选择器知识点,那么只看这一篇就足够了!)
CSS基础之伪类选择器(如果想知道CSS的伪类选择器知识点,那么只看这一篇就足够了!)
|
编解码 前端开发 JavaScript
学习css,这一篇足矣(三)
学习css,这一篇足矣
129 0
学习css,这一篇足矣(三)
|
前端开发 索引 容器
学习css,这一篇足矣(二)
学习css,这一篇足矣
105 0
学习css,这一篇足矣(二)
|
Web App开发 前端开发 Java
学习css,这一篇足矣(一)
学习css,这一篇足矣
121 0
学习css,这一篇足矣(一)
|
前端开发
常用css样式大全以及css属性代码大全
常用css样式大全以及css属性代码大全
296 0
|
Web App开发 前端开发 算法
|
前端开发 JavaScript
CSS-Next : CSS预处理器简单写法的替代者, 想了解下么?
借助相关的插件我们可以把新的特性降级主流浏览器可以识别的状态(比如CSS3模拟) 但里面的一些特性,折腾了下发现基本可以满足开发了(代替CSS预处理器SASS,LESS); 因为大多数人用预处理器最多的几个特性无非如下: 继承,嵌套写法, 全局变量,计算颜色 当然,这不是说sass/less 不够好,相反它们可以做更多复杂的工作,逻辑运算和条件判断这些;
215 0