看书《DIV+CSS商业案例与网页布局开发精讲》_盒子模型、制作logo和banner_随手笔记_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了看书《DIV+CSS商业案例与网页布局开发精讲》_盒子模型、制作logo和banner_随手笔记_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2142字，纯文字阅读大概需要4分钟。
内容图文
一、盒子模型（box model）
一个盒子又4部分组成：content（内容）、padding（填充）、border（边框）和margin（外边界）
盒子模型有两种：
（1）标准W3C盒子模型
（2）IE盒子模型（content包含padding和border）
为了统一标准，让网页能兼容各个浏览器，必须使用标准W3C盒子模型
如何才算使用？答：在网页的顶部加上DOCTYPE声明
二、盒子模型结构详解
1、CSS边框（border）属性
border有3个属性：border-width（宽度）、border-style（样式）、border-color（颜色）
（1）width：
(1) 单位数值（1px）或关键词（thin、medium、thick）
(2) 如果不设置，默认是medium，一般浏览器解析为2px
(3) 建议用单位数值来绝对定义
（2）style：
none、solid、hidden、dotted、dashed、double、groove、ridge、inset、outset等
3种写法：
（1）border：width style color（4边相同）
例如：border：1px solid #000000
（2）border-left：width style color（4边不同）
例如：border-left：1px solid #000000
（3）border-left-width：【（2）的另一种写法】
border-left-style：
border-left-color：
例如：
border-left-width：1px;
border-left-style：solid;
border-left-color：#000000;
注：
在页面应用中，设置的border也会占据页面空间。所以，当精确计算版面时，
即使在border为1px的情况下，也一定要把border对宽度和高度的影响因素考虑进去。
2、CSS填充（padding）属性
属性：padding（padding-top、padding-right、padding-bottom、padding-left）
属性值：单位数值或百分比
2种写法：
（1）padding：top right bottom left（上右下左??按顺时针方向）
例如：padding：10px 20px 30px 40px;
（2）padding-top：
padding-right：
padding-bottom：
padding-left：
例如：
padding-top：10px;
padding-right：20px;
padding-bottom：30px;
padding-left：40px;
3、CSS外边界（margin）属性
属性：margin（margin-top、margin-right、margin-bottom、margin-left）
属性值：单位数值或百分比
2种写法：
（1）margin：top right bottom left（上右下左??按顺时针方向）
例如：margin：10px 20px 30px 40px;
（2）margin-top：
margin-right：
margin-bottom：
margin-left：
例如：
margin-top：10px;
margin-right：20px;
margin-bottom：30px;
margin-left：40px;
注：
margin是一个非常有用的CSS属性，在实际应用中，还可以将它的值设为负数，以达到页面版面的要求。
内容总结
以上是互联网集市为您收集整理的看书《DIV+CSS商业案例与网页布局开发精讲》_盒子模型、制作logo和banner_随手笔记_html/css_WEB-ITnose全部内容，希望文章能够帮你解决看书《DIV+CSS商业案例与网页布局开发精讲》_盒子模型、制作logo和banner_随手笔记_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。