赣州朝扬网络科技有限公司贯彻做广告不如做品牌，做品牌以回头为本的经营理念。一心只做为客户赚钱的网站，为客户提供营销方案，解决网络营销疑问。
建站常识
朝扬解读前沿 资讯，分享互联网时代精英智慧
CSS盒子模型的概念丨赣州网站建设
发布时间：2018-03-20 作者： 来源： http://www.jx25.com/ 浏览：
一个盒子模型由 content (内容)、border(边框)、padding(间隙)和margin(间隔) 这四个部分组成
一、border
border一般用于分离元素，border的外围一般是指元素的最外围
border的属性只要有三个 color(颜色) width(粗细) style(样式)
color的设置和文字的设置一样，有256种颜色，通常用16进制表示，比如：#cc55aa
width即为border的粗细，可以设置为thin、medium、thick和<length>，其中<length>表示具体的数值，如5px等
width默认为medium，一般浏览器解析为2px的宽度。
style属性可以设置为 none、hidden、dotted、dashed、solid、double、groove、ridge、insert、outset
其中hidden 和 none 都不显示 border 效果一样，在实际运用中用 hidden 来解决边框冲突问题。
例：<style type="text/css">
div{
border-width:6px;
border-color:#000000;
background-color:#FFFFCC;
}</style>
<body>
<div style="border-style:dashed">The border-style of dashed.</div>
<div style="border-style:dotted">The border-style of dotted.</div>
<div style="border-style:double">The border-style of double.</div>
<div style="border-style:groove">The border-style of groove.</div>
<div style="border-style:inset">The border-style of inset.</div>
<div style="border-style:outset">The border-style of outset.</div>
<div style="border-style:ridge">The border-style of ridge.</div>
<div style="border-style:solid">The border-style of solid.</div>
</body>
二、padding
padding 用于控制 content 与 border之间的距离
例：<style type="text/css">
.outside
{ padding:10px 30px 50px 100px; /* 同时设置，顺时针 */
border:1px solid #000000; /* 外边框 */
background-color:#fffcd3; /* 外背景 */
}
.inside
{ background-color:#66b2ff; /* 内背景 */
border:1px solid #005dbc; /* 内边框 */
width:100%; line-height:40px;
text-align:center;
font-family:Arial;
}
</style>
<body>
<div class="outside">
<div class="inside">padding</div>
</div>
</body>
三、margin
margin 是指元素与元素之间的距离，从直观上来看就是指用于控制块与块之间的距离。
a. 当俩个行内元素紧邻的时候，他们之间的距离为第一个元素的 margin-right 加上第二个元素 margin-left的值
b. 若不是行内元素，而产生换行效果的块级元素，则两个块级之间的距离不是 margin-bottom 和 margin-top
的和，而是俩者中取较大的值作为两个块级之间的距离。
c. 父子关系，即当一个div块包含在另一块div中间时，其中子块的 margin 将以父块的 content 为参考。
注：在上述 C 的情况下当父 div 的高度设置的值小于子 div块的高度加上 margin的值时，此时 IE 浏览器会自动扩大，
保持子元素的 margin-bottom的空间以及父元素自身的 padding-bottom ，但是 Firefox 就不会，它会保证父元素的
height 高度的完全吻合，这时子元素将超过父元素的范围。
另外:margin 也可以设置成负数，当设置成负数时，会使得设置成负数的块向相反的方向移动，甚至覆盖在其他的块上。
赣州网站建设|赣州网络公司|赣州做网站|赣州网站建设价格|赣州网页制作|赣州建网站公司|赣州微信二维码平台|赣州微信公众号|赣州百度公|赣州百度推广|赣州百度优化|赣州朝扬网络|朝扬网络
<< 上一篇：赣州企业网站建站的几种类型
下一篇：关于网站建设时选用的特效 >>
