css之盒子模型
2018-06-24 01:32:06来源：未知 阅读 ()
什么是盒子模型？
网页中的任何一个标签都相当于是一个盒子模型，而所有的盒子模型都存在五个必要的属性：width,height,padding,border,margin.
那么在一个网页中如何计算一个盒子模型实际所占的宽度呢？？？？
例如：<style>div {width:300px;padding:20px;border:1px}</style>
<body><div></div></body>
对于上面div所占宽度应该是：width+2*padding+2border=300+2*20+2*1=342px;
padding:内边距：内容和边框之间的距离。
padding的四个属性：padding-top,padding-bottom,padding-left,padding-right.
width:宽.
height:高.
border:边框.
常见的边框写法：border:1px solid #ccc;分别表示边框的宽度，线型，颜色。
常见线型有：solid(实线)，dashed(虚线),dotted(点线)。
边框的三个基本属性:border-width(边框的宽度),border-style(边框的线型),border-color(边框的颜色);
maigin:外边距.
margin的四个基本属性：margin-top,margin-bottom,margin-left,margin-right.
在使用margin时需要注意的点:
1.塌陷:margin塌陷存在于块级元素之间。如果元素变成了行内元素或者行内块元素，则不会塌陷。如果元素脱离了标准文档流也不会塌陷。
2.通过margin让盒子居中：margin:0 auto;
使用margin:0 auto 让盒子居中需注意：盒子必须要有明确的width。盒子必须处于标准文档流中。margin:0 auto是让盒子居中，而不是让盒子里面的内容居中。
让盒子里面的文字居中可以使用：text-align:center;(向左向右：text-align:left/right;)
Tips:如果想要移动子元素的位置，非必要情况下推荐使用父元素的padding，而不是子元素的margin，如果必须使用margin，父元素就必须要有border
使用准则：在使用CSS的时候，尽可能的简写。
padding:10px 20px; 表示上下的padding为10px，左右的padding为20px。
padding:10px 20px 30px; 表示上的padding为10，下的padding为30px，左右的padding为20px.
padding：10px 20px 30px 40px;分别表示上，右，下，左的padding。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
下一篇：grid栅格布局
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点，学前端，基础不好一切白费！ 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
