首页 / CSS / CSS——盒模型

CSS——盒模型

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS——盒模型，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含786字，纯文字阅读大概需要2分钟。

内容图文

1.基本概念：

内容：（content）盒子里面的东西；
填充：(padding)怕盒子里面的东西损坏而添加的泡沫元素活抗震材料；
边框：(border)盒子本身
边界：(margin)则说明盒子的摆放不能堆在一起，要留一定空隙，保持通风，同时方便取出；
在网页上内容常指文字、图片等元素，但也可以是小盒子（div嵌套）。

2.边框：围绕着内容及补白的线，可以设置粗细、样式和颜色。

（1）

div{

boder:1px soild red;

}

等于：

div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}
（2）boder-style(边框样式)：
dashed--虚线，dotted--点线，soild--实线
（3）
border-color:#色号（设置边框颜色）
（4）
border-width(边框宽度)
thin
medium
thick
px才是常用的
3.当只想为下边框单独设置样式时，CSS样式中允许只为一个方向的边框设置样式：
div{border-bottom:1px solid red;}
        4.宽度和高度
（1）一张图解释盒模型宽度和高度：
技术分享

（2）例子：

div{
    width:200px;
    padding:20px;
    border:1px solid red;
    margin:10px;    
}
        5.填充：内容与边框之间设置的距离，标签顺序：上、右、下、左（顺时针）。
如：
    
div{padding:20px 10px 15px 30px;}
也可分开写。
5.边界
        边界也是分为上、右、下、左顺序设置，如：

    
div{margin:20px 10px 15px 30px;}

 

原文：http://www.cnblogs.com/carrier-sisi/p/7600993.html

内容总结

以上是互联网集市为您收集整理的CSS——盒模型全部内容，希望文章能够帮你解决CSS——盒模型所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1205963.html

来源：【匿名】