您好,登录后才能下订单哦!
这篇“CSS布局之盒子模型属性有哪些”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“CSS布局之盒子模型属性有哪些”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让我们进入主题吧。
css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。
这次给大家带来CSS布局之盒子模型属性,CSS布局的盒子模型属性的注意事项有哪些
宽高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
margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪的重叠特性。
介绍外边距margin的几个重点部分,包括重叠、auto和无效情况
1.重叠
【前提】
margin重叠又叫margin合并,发生这种情况有两个前提
1、只发生在block元素上(不包括float、absolute、inline-block元素)
2、只发生在垂直方向上(不考虑writing-mode)
【分类】
margin重叠的情况
1、相邻的兄弟元素
<style> p{ line-height: 2em; margin: 2px 0; background-color : lightblue; display:inline-block; width: 100%;} </style> <p>兄弟一</p> <p>兄弟二</p>
2、父级元素和第一个或最后一个子元素,父子级的margin重叠又叫margin传递
<style> .box{ background-color: pink; height:30px;} .inner{ margin-top: 1em; background-color: lightblue;} </style> <div class="box"> <div class="inner">子级</div> </div>
在网页布局中,因为margin重叠的原因,我们常常把margin作为一个“问题样式”而尽量少地使用它。但实际上,它是在很大的作用的,
所以,我们要善用重叠,可以在列表项中同时使用margin-top和margin-bottom。这样,使页面结构更具有健壮性,最后一个元素移除或位置调换,都不会破坏原生的布局
2.auto
只有width/height和margin可以设置auto。
【为什么margin:auto无法实现垂直居中】
水平方向可以居中是因为块级元素的宽度默认是撑满父级元素的,如果给宽度设置一个固定值,而左右margin设置为auto,则可以平分剩余空间
垂直方向不可以居中是因为块级元素的高度默认是内容高度,与父级元素的高度并没有直接的关系,而上下margin设置为auto,则被重置为0
margin: 0 auto;
【为什么图片使用margin:auto不能水平居中】
图片无法水平居中,类似于块级元素无法垂直居中。因为图片的宽度width默认是自身宽度,与父元素的宽度没有直接关系。左右margin设置为auto,会被重置为0
所以,图片要水平居中,需要设置为display:block元素
3.无效情形
1、行内元素垂直margin无效
因为行内元素垂直布局主要是通过行高line-height和垂直对齐vertical-align来影响的,垂直margin并不会影响它们,所以不会影响垂直布局。而在显示方式,margin区域不会显示元素背景,所以也不会影响自身元素的显示,所以行内元素垂直margin无效。[注意]不包括inline-block
2、某些表格类元素margin无效
<thead>``<tbody>``<tfoot>``<tr>``<col>``<colgroup>``<td>``<th> 不可设置margin。
3、BFC造成的margin看似无效
左侧元素使用浮动,右侧元素使用overflow-hidden实现两栏自适应的布局时,右侧元素的margin-left值只有足够大,才能看到效果。这是因为margin-left是相对于父元素左侧,而不是图片右侧
以上是“CSS布局之盒子模型属性有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。