htML+CSS3-》第4阶段:HTML5之CSS3进阶

4阶段:HTML5CSS3进阶

89前端开发基础视频-CSS盒模型的综述

盒子模型的概念

    所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。

 Pasted Graphic.tiff

    网页中所有的元素都是矩形的,所以可以看成一个个盒子。  网页由多个盒子组成。

    盒子:外边距+边框+内边距+内容区域组成。width属性与height属性指的是内容的宽和高,而不是值整个的宽高。


90前端开发基础视频-CSS盒模的总结

    使用盒子模型时一定要<!DOCTYPE html>指定使用html5标准,否则浏览器可能使用非标准的盒子模型造成误差。 例如 ,若不指定<!DOCTYPE html>使用ie6打开就和火狐打开的不同。 


91前端开发基础视频-CSS盒模的边框border设置详解

    设置边框属性时别忘记设置style,如,只设置颜色和width则不能正常显示(style默认为none)。


92前端开发基础视频-CSS边框的妙用案例

93前端开发基础视频-CSS内边距Padding的使用

    margin: 0 auto;自动居中

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值