任务9-1

1.盒模型包括哪些属性?

盒模型包括:边距、边框、填充和实际内容;

  • margin:清除边框区域,无背景颜色,是完全透明。
  • border:边框周围的填充和内容,边框受到盒子的背景颜色影响。
  • padding:清除内容周围的区域,会受到框中填充颜色的背景色影响。
  • content:盒子内容、显示文本和图像。

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

span是行内元素,定义span的样式为居中,但是浏览后的页面如下图所示:

但是如果我在行内元素span的样式里加一个display:bolok;块级元素,如下所示:



浏览后的页面:


我们发现样式居中生效了。

由此可以得出结论如下:
text-align:center

  • 作用:使元素水平居中。
  • 作用在块级元素上。
  • 能块级元素内部的行内元素居中。

3.如果遇到一个属性想知道兼容性,在哪查看?

caniuse

4.IE 盒模型和W3C盒模型有什么区别?

IE 盒模型:



W3C盒模型


  • IE 盒模型: 宽度=边框+padding+内容宽度。
  • W3C盒模型: 宽度= 内容宽度。

5.以下代码的作用?兼容性?


在样式里设置 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度。

兼容性:


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,816评论 1 92
  • 一、盒模型包括哪些属性 **1、盒模型是css中元素大小的呈现方式,每个元素都有盒模型。它包括元素内容(eleme...
    鸿鹄飞天阅读 358评论 0 0
  • 回答 盒模型包括哪些属性?1 content:内容区域; padding:内边距; border:边框; marg...
    墨灯阅读 229评论 0 0
  • 1 . 盒模型包括的属性 margin:外边距:包含margin-top、margin-right、margin-...
    osborne阅读 614评论 0 0
  • 不知不觉,二月份都过去了,今天是三月份的第一天,也是我农历的生日。从去年毕业到现在,起初在公司也学到了一些东西,但...
    cobs阅读 190评论 2 0