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