本文介绍: css盒模型
元素宽度的问题
当给一个元素设置宽或高的时候,指定的是内容的宽或高,所有内边距、边框、外边距都是追加到该宽度上的。这种行为会让一个宽 300px、内边距 10px、边框 1px 的元素渲染出来宽 322px(宽度加左右内边距再加左右边框)。如果这些值使用不同的单位,情况就会更复杂。
调整盒模型
box-sizing 的默认值为 content-box,这意味任何指定的宽或高都只会设置内容盒子的
大小。将 box-sizing 设置为 border-box 后, height 和 width 属性会设置内容、内边距以
及边框的大小总和,这刚好符合示例的要求。
全局设置box-sizing,给页面上所有元素和伪元素设置 border-box
:root {
box-sizing: border-box;
}
*,
::before,
::after {
box-sizing: inherit;
}
盒模型通常不会被继承,但是使用 inherit 关键字可以强制继承。如下述代码所示,可以在必要时选中第三方组件的顶级容器,将其恢复为 content-box。这样组件的内部元素会继承该盒模型。
.third-party-component {
box-sizing: content-box;
}
元素高度问题
等高列用display: table或Flexbox
原文地址:https://blog.csdn.net/xiaobai_cpp/article/details/135598116
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_57950.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。