加载中…
个人资料
大千世界
大千世界
  • 博客等级:
  • 博客积分:0
  • 博客访问:54,020
  • 关注人气:10
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

【CSS基础NO.2】盒子模型

(2017-11-10 16:19:53)
标签:

html5

css3

css

盒子

分类: html5
一、盒子模型的内容范围
 margin外边距、border边框、padding内边距、content内容

二、内边距
内边距在content外,边框内

属性                              描述
padding                  设置所有边距
padding-bottom    设置底边距
padding-left           设置左边距
padding-right         设置右边距
padding-top           设置上边距

三、边框
边框的样式:
border-style:定义了10个不同的非继承样式,包括none
边框的单边样式:
border-top-style
border-left-style
border-right-style
border-bottom-style
边框的宽度:
border-width
边框单边的宽度:
border-top-width
border-left-width
border-right-width
border-bottom-width
边框的颜色和单边颜色
border-color
border-top-color
border-left-color
border-right-color
border-bottom-color

四、CSS3边框
border-radius:圆角边框
border-shadow:边框阴影
border-image:边框图片

五、外边距
围绕在内容边框的区域,默认为透明区域,外边距接受任何长度单位、百分数值。

属性                             描述
margin                  设置所有边距
margin-bottom    设置底边距
margin-left           设置左边距
margin-right         设置右边距
margin-top           设置上边距

六、外边距合并
外边距合并就是一个叠加的概念。(两个盒子外边距不一样,则遵循最大的)

七、盒子模型应用

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有