html盒子模型作业,CSS盒模型作业

2b9159742a45

盒模型.png

前言:本章主要讲CSS盒模型,CSS盒模型是CSS中most import 的一个概念,如果我们想学好CSS,那么CSS盒模型绝没跑在。这篇文章中,我们将深入地探讨CSS盒模型。

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

2b9159742a45

盒模型 (2).png

以上图为例,阐述盒模型属性:

content属性:规定内容区域,在标准盒模型中,宽高有width和height决定。如图内容区域为”300*300“。padding:内边距,也称”补白“,定义元素边框与元素内容之间的空白区域。

1.接受长度值或百分比值,但不允许使用负值

2.会受到框中填充的背景颜色影响

3.padding-top,padding-right,padding-bottom,padding-left

border:规定元素的边界.

常见的border的细分属性有,border-width、border-style、border-color、border-top、border-right、border-bottom和border-left,可简写为border

margin:规定元素的外边距(元素边框的空白区域)。

常见的margin的细分属性有margin-top、margin-right、margin-bottom、

margin-left

2.text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
作用:水平居中;作用在块级元素上;能够使inline元素和line-block元素水平居中。
3.如果遇到一个属性想知道兼容性,在哪查看?

caniuse

4.IE 盒模型和W3C盒模型有什么区别?
IE浏览器:ie678怪异模式(不添加 doctype)使用 ie 盒模型,”宽度=边框+padding+内容宽度“chrome, ie9+, ie678(添加 doctype) 使用标准盒模型, 宽度= 内容宽度
5.以下代码的作用?兼容性?

2b9159742a45

代码兼容性.png

含义:width 与 height 包括内边距(padding)与边框(border),不包括外边距(margin)。这是IE 怪异模式(Quirks mode)使用的 盒模型 。

作用:使width与height包括(padding)与边框(border),便于计算模型的大小。

2b9159742a45

caniuse使用.png

6.代码

代码作用

感谢观众:

2b9159742a45

苏菲玛索.jpg

本教程版权归饥人谷peter和饥人谷所有,转载须说明来源

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值