你懂吗？CSS盒子模型就像是网购时的快递盒，告诉我们每个网页组件多大、多高、多宽，还有它们之间隔得有多开。学会CSS，你需要会这几个独门秘籍，其中盒模型就是其中之一。手握此招，排版难题都能解决！
1.盒子模型（CSS重点）
讲到CSS，那盒模型实在是太实用！HTML元素就像个正方形小箱子，里面有文字或图片等等，再加上内外边距跟边框，最后还牵扯到外边距。只要弄明白并运用得当，网页就能显示得清楚好看了，甚至还可以独立调整它的形状！
2.盒子大小与内外边距及边框的关系
border : border-width || border-style || border-color
border: 1px solid red; 没有顺序
想要调整元素尺寸？首先弄明白元素跟那个啥内容块啦、内边距啊、边框和外侧边缘有什么关系！学好这些，就能随心情随喜好设计各种布局比如说，把握好内外两侧边缘和边框的大小，就能轻松控制元素之间的间距和美观程度。
3.盒子边框（border）
table {
width: 500px;
height: 300px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}
table, td {
border-collapse: collapse; /*合并相邻边框*/
}
边框，就跟炒菜时加的调料一样，给网页增添点趣味性。我们随心所欲地调整它的宽窄、形状，还有颜色，让每页都有自己的个性。再说说，CSS里边框效果多到数不清，有实心线啊、虚线呀、双线条呀等等，应该有你特别钟爱的那款。
4.内边距（padding）
搞定内边距，就可以搞定内容和边框间的空隙。顺便把页面搞得亮堂些~
5.边框综合设置
加点框当摘出来设计要用的，而且要每一格子大小一致。这招在设计上挺管用的，搞生产的朋友们也常使。
6.内盒尺寸计算（元素实际大小）
div {
width: 200px;
height: 200px;
border: 1px solid #000000;
border-top: 5px solid blue;
padding: 50px;
padding-left: 100px;
}
搞定了盒身的宽、内边距还有边界值后，现在我们来算下实际占有大小。其实特别容易懂，就是把盒身宽度加上两边的内边距，然后再加上界框宽度就行了。这么一搞，网页上哪些元素用了多少空间明明白白的就能看出来了！
7.外边距（margin）
外边距，就是两个东西之间留个适当的距离，这样子可以让布局更合适，也能让页面显得大气美观点儿。不过，咱们可得注意，别把它们弄得重叠到一块儿去啦～
.header{ width:960px; margin:0 auto;}
8.盒子模型布局稳定性
text-align: center; /* 文字 行内元素 行内块元素水平居中 */margin: 10px auto; /* 块级盒子水平居中 左右margin 改为 auto 就阔以了 上下margin都可以 */
做网页设计时可别忘，要给宽度和内外留点空间呐！这样子页面才稳当，不乱跑。别乱搞样式，否则页面可能出问题甚至跑偏了。这可是大事！所以，处理好这些小细节可不容易！
img {
width: 200px;/* 插入图片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入当图片也是一个盒子 */
}
div {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */
}
9. CSS3新属性-盒子阴影
别忘了CSS3还有新玩具！能让你家网页变得更酷炫！比如，在元素上加点淡淡的阴影，立刻就有3D效果！各位设计大神们，快去玩儿起来！
搞定这个，学好盒模和相关CSS，网页设计上去个台阶不是问题。试试，保准儿帮到你！
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */}
。
评论0