css 宽度分离原则

编程之家收集整理的这篇文章主要介绍了css 宽度分离原则编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

我们想设计一个w=180px;h=100px的div; .demo1 { width: 180px; height: 100px; background: pink; padding: 10px; b

 我们想设计一个w=180px;h=100px的div;

 .demo1 {
    width: 180px;
    height: 100px;
    background: pink;
    padding: 10px;
    border: 1px solid #c1c1cc;
    margin: 5px;
}
<div class="demo1">
    我是div
</div>

但是现在变成了 202*122的div元素;
这并不是我们的初衷

如何解决
有两种方式:
(1) 使用怪异盒子
 .demo1 {
    width: 180px;
    height: 100px;
    background: pink;
    padding: 10px;
    border: 1px solid #c1c1cc;
    margin: 5px;
    Box-sizing: border-Box;//添加这一句变成怪异盒子
}
这样在项目中的实际运用场景:小程序中很多使用需要使用怪异盒子;
(2)使用宽度分离原则
 .demo1 {
        width: 180px;
        height: 100px;
        background: pink;
        margin: 5px;
    }

.son {
    padding: 10px;
    border: 1px solid #c1c1cc;
    /* 如果父级元素的宽度固定是100px
        子元素的width认值是auto; ( widh:auto )
        就会如同流水一般,自动填满整个父级元素
    */
}

<div class="demo1">
    <div class="son">
        我是div
    </div>
</div>

总结

以上是编程之家为你收集整理的css 宽度分离原则全部内容,希望文章能够帮你解决css 宽度分离原则所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

猜你在找的CSS相关文章

有时,你需要修改第三方组件的CSS; 然而你直接修改是不可以的, 但是我们非要去修改第三方的组件; 此时可以使用==》深层选择器 &gt;&gt;&gt; /deep/ ::v-deep 可以帮助你。
CSS使用伪类给表单添加星号 &lt;style type=&quot;text/css&quot;&gt; .form-item label::before { content: &#39;*&#3
1.display的常见现象 我们很多人都知道,display可以让元素实现隐藏或者显示。 或者让行级元素变成块级元素。 对它的认识也是比较准确的。 如果一个元素使用了display:none; 那么
1.visibility: hidden/visible与dispaly:none 有些人简单的认为display: none;和visibility: hidden; 这两个属性的区别在于前者隐藏后
在hover时,i元素变成了块级元素; 导致这两个元素各自占了一行; 最终导致样式错乱; &lt;div class=&quot;demo&quot;&gt; &lt;!-- 添加图标 和 编辑图标
``` 保存 //按钮的字体色是白色.save-btn /deep/ span{ color: #fff;}.save-btn:hover{ background: #409EFF;}.save-bt
今天大家在浏览B站,腾讯视频,等网站时,有没有发现一个现象,网站变成灰色的了。 是不是跟平常不一样了呢,这是因为今天(2020.4.4)是全国哀悼日, 所以网站这些就变成灰色的呢。 我去看了一下腾讯的
重绘:当元素的一部分属性发生改变, 如背景、颜色等不会引起布局变化, 只需要浏览器根据元素的新属性重新绘制, 使元素呈现新的外观叫做重绘。 重排(回流):当render树中的一部分或者全部因为大小边距
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注