浅谈盒子模型

前言:盒子模型主要应用在页面布局。规定页面中各个元素如何显示以及元素之间相互的位置关系
一、盒子模型中的属性
边框(border)、内容(content)、外边距(margin)、内边距(padding)
二、行内元素、块级元素对于盒模型的支持
1、行内元素对盒子模型中的部分属性支持
对边框、padding都支持。对margin-left、margin-right也能支持,而对margin-top、margin-bottom、宽高都不支持
行内元素可以当成是文本,可以对它设置行高。(行高只能给文本或行内元素使用。控制是里面的文本内容。行高包括文字高度、上边空白区域)
2、块级元素都能支持
三、内容部分
1、当盒模型中的内容溢出时:
在标准文档流中, 溢出内容是不会占空间位置,会与其他块的内容重合。特殊情况长单词(没有空格)默认情况下,浏览器不会自动换行。要让长单词内部换行,需要设置white-wrap :pre-wrap;
使用overflow:hidden(溢出部分被裁剪,内容不会再显示)。设置为scroll内容隐藏,用滚动条形式显示
2、文本内容溢出 text-overflow(css3中新增标签)
前提:必须和overflow属性一起使用才有效果
a: text-overflow:clip; 溢出部分被裁剪
b:text-overflow:ellipsis; 溢出部分用省略号显示 。这里要多加一个设置:white-wrap:nowrap;不换行

四、盒模型的外边距—— margin
注意:margin可以是负值进行微调,但是在实际应用上尽量少用负值。
不同情况取值情况:
1. 两个块级元素垂直分布时,它们之间的距离取决于第一块的margin-bottom值和第二个块级元素的margin-top值,谁的margin值大就取谁的margin值作为距离。
2、两个块级元素(或行内块元素或行内元素)横向浮动(不浮动)排列时,它们之间的距离是左右margin之和
3、 两个行内块级元素纵向排列时,上面元素 的margin-bottom与下面元素的margin-top之和

五、盒模型的内边距(元素边框与元素内容之间的区域)——padding
用法:用来调整内容在容器中的位置关系;调整子元素在父元素中的位置关系(padding属性必须添加到父元素上);padding值是额外添加在元素原有的大小之上,想保证元素大小不变,徐聪元素宽高上减去添加到padding属性值

六、盒模型尺寸的计算
宽= 左右margin+左右border+左右padding+内容宽
高 =上下margin+上下border+上下padding+内容高

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值