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
目录
相关文章
|
3月前
|
前端开发
CSS实现闪亮效果
CSS实现闪亮效果
35 2
|
安全 前端开发
CSS——“旋转木马”’效果
“旋转木马”’效果
157 0
|
前端开发
前端知识大全之CSS(中)
CSS是前端的一个重要的组成部分,可以给HTML这个进行化妆起到美化的作用。
84 0
前端知识大全之CSS(中)
|
前端开发
前端知识大全之CSS(下)
CSS是前端的一个重要的组成部分,可以给HTML这个进行化妆起到美化的作用。
122 0
前端知识大全之CSS(下)
|
前端开发
前端知识大全之CSS(上)
CSS是前端的一个重要的组成部分,可以给HTML这个进行化妆起到美化的作用。
81 0
前端知识大全之CSS(上)
|
存储 自然语言处理 前端开发
看了涡流大佬的面试文章的总结(js, css篇)
看了涡流大佬的面试文章的总结(js, css篇)
|
前端开发 JavaScript
💖CSS + JS 送学妹满屏幕小爱心
💖CSS + JS 送学妹满屏幕小爱心
150 0
|
前端开发 JavaScript 容器
【青训营】CSS(三)
【青训营】CSS(三)
131 0
【青训营】CSS(三)
|
前端开发 开发者 C++
【青训营】CSS(四)
【青训营】CSS(四)
115 0
【青训营】CSS(四)
|
前端开发 JavaScript
【青训营】CSS(一)
【青训营】CSS(一)
154 0
【青训营】CSS(一)

热门文章

最新文章