宽高width/height
在CSS中,可以对任何块级元素设置显式高度。
如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样;
如果指定高度小于显示内容所需高度,取决于overflow属性,需要滚动条需要设置为overflow:auto。
auto
宽高和margin可以设置auto。对于块级元素来说,宽度设置为auto,则会尽可能的宽。详细来说,元素宽度=包含块宽度—元素水平外边距-元素水平边距宽度-元素水平内边距;
高度设置为auto,则会尽可能的窄。详细来说,元素高度=恰好足以包含其内联内容的高度
[注意]如果没有显式声明包含块的height,则元素的百分数高度会重置为auto
【最大最小宽高】
min-width | min-height
初始值: 0
应用于: 块级元素和替换元素
百分数: 相对于包含块的宽度(高度)
max-width | max-heightt
初始值: none
应用于: 块级元素和替换元素
百分数: 相对于包含块的宽度(高度)
[注意]当最小宽度(高度)大于最大宽度(高度)时,以最小宽高的值为准
内边距padding
相比于盒模型的其他属性(如在定位中经常使用负值的margin),padding显得中规中矩了很多,没有什么兼容性,也没有一些特殊的问题
对于行内元素,左内边距应用到元素的开始处,右内边距应用到元素的结尾处,垂直内边距不影响行高,但会影响自身尺寸,加背景颜色可以看出
[注意]内边距不能是负值
padding
初始值: 未定义
百分数: 相对于包含块的width
【50%】
块级元素通过padding:50%可以实现正方形的效果,因为水平和垂直padding的百分比值都是相对于包含块的宽度决定的,常常用于移动端头图
外边距margin
设置外边距margin会在元素外创建额外的空白,空白通常指不能放其他元素的区域,而且在这个区域中可以看到父元素的背景
margin
初始值: 未定义
应用于: 所有元素
百分数: 相对于包含块的width
[注意]对于普通元素来说,包含块就是块级父级元素,对于定位元素来说,包含块是定位父级。所以,普通元素的margin百分比相对于块级父级元素的width,定位元素的margin百分比相对于定位父级的width
计算尺寸
盒子的尺寸一般包括:
content网页内容+padding+边框border+margin
我们看到的是content网页内容+padding+边框border
box-sizing:content-box默认值(盒子总尺度:加了跟没加一样
border-box(原来盒子的宽度或高度等于内容width+padding+padding+border+border。现在盒子的宽度等于width。)
inherit:元素继承父元素的box-sizing
————————————————
版权声明:本文为CSDN博主「chihuomiao」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/chihuomiao/article/details/123816744