<div class="boxa">
<div class="boxb">我是div</div>
</div>
.boxa{
width:300px;
height:300px;
background-color:green;
border:2px solid red;
}
.boxb{
<!--没有写宽度即默认宽度 为父元素的100%-->
height:300px;
background-color:orange;
border:2px solid red;
}

这段代码中 boxb 的实际宽度 不会是300px;

虽然他继承的是父元素的100%;

关于这个我是这么理解的

这里boxc的宽度是300px, boxd的宽度是296px 也就是说父元素boxc可以随意设置 盒子模型

boxd的宽只会等于你设置的这个300px宽,不会等于所有盒子模型相加的宽度

你只继承了它的宽没有继承他的其他值

boxd是把所有盒子模型加起来计算的 就是说是 296px宽度+边框的4px = boxc的300像素 boxd的盒子模型不会改变。

再来看一张图

这张图 boxd的宽度为276 276 + 20 +4=300px

等于boxc的宽度

也就是 你父元素爱怎么加盒子模型就怎么加。

我子元素也可以加盒子模型,我最后的值要等于 父元素的宽度。如果超出了 会从宽度里减去 。

如果有讲的不好和不对的地方欢迎大家指正。

关于css的默认宽度的更多相关文章

  1. css 选择器、元素默认宽度、media screen

    @media screen and (min-width:800px){ .a{  background: url('../image/banner/banner1.jpg') no-repeat l ...

  2. [转]css实现左侧宽度自适应,右侧固定宽度

    原文地址:https://segmentfault.com/a/1190000008411418 页面布局中经常用会遇到左侧宽度自适应,右侧固定宽度,或者左侧宽度固定,右侧自适应.总之就是一边固定宽度 ...

  3. HTML标签CSS属性默认值汇总

    HTML标签CSS属性默认值,在你需要还原默认值的时候比较有用. 以前一直在找这份文档,今天偶然在网上看到了.除了inline和block的定义,主要是要注意body|h1~h6|blockquote ...

  4. Source Insight小技巧:修改Symbol Window的默认宽度

    SI是个好东西,但是源代码窗口左边的符号窗口的默认宽度实在是太小,每次打开一个新的源码窗口都要重新拖放调整,很烦人.下面是一劳永逸调整Symbol Window宽度的方法. 打开一个源码窗口,将Sym ...

  5. css清除默认样式

    CSS 清除默认样式   通常有以下几句就够了: *{margin:0;padding:0} li{list-style:none} img{vertical-align:top;border:non ...

  6. 最简单的css实现页面宽度自适应

    <div class="rxs"> <div class="rxleft"> 第一段内容,可以是任何html标签 </div> ...

  7. 用纯css改变默认的radio和checkbox的样式

    利用css的label的伪类(::before)代替checkbox和radio效果: 优点:需要图片来调整选中前和选中后的样式,纯css搞定 缺点:兼容性,IE8以下不支持 在线例子: css改变默 ...

  8. Eclipse创建JSP、HTML、CSS文件默认字符集设置成UTF-8

    问题:在使用eclipse的时候总是发现新创建的JSP文件.HTML文件等默认总是ISO-8859-1,每次都要修改成自己使用的utf-8的,很是麻烦,因此在网上查看了一下发现是可以修改字符集的默认值 ...

  9. CSS 边框的宽度

    边框的宽度 您可以通过 border-width 属性为边框指定宽度. 为边框指定宽度有两种方法:可以指定长度值,比如 2px 或 0.1em:或者使用 3 个关键字之一,它们分别是 thin .me ...

随机推荐

  1. GitHub 菜鸟使用

    之前有用过一次,但是一直弄不明白怎么用,今天我又试了一下,成功了,现在我就记录下来,为了以后的使用以及帮助那些跟我原先一样不会用的同学 进入正题: Step 1: 注册GitHub账号 https:/ ...

  2. PHP学习之数据库操作

    PHP数据库操作: 一.连接数据库 mysql_connect() 例:$link=mysql_connent("localhost","root"," ...

  3. Tomcat 设置自动编译,自动发布,自动部署

    Tomcat服务器 具有一个常用的功能: 即自动编译,自动发布,自动部署功能. 问题: 当我们第一次发布程序以后,我们增删改Servelt,Java,.xml等文件,都必须重启Tomcat,如果项目巨 ...

  4. 3.21 采购订单导入MDS

    3.21.1   业务方案描述 同一企业集团内部的不同法人之间,双方间内部往来业务频繁.受集团财务各自独立核算的要求,买方和卖方间采用买卖方式进行业务运作和财务结算. 对于买方,按照内部商定的协议价格 ...

  5. oracle解锁表

    select b.owner,b.object_name,a.session_id,a.locked_mode,c.serial#,c.sid||','||c.serial# from v$locke ...

  6. JavaMail学习笔记

    适逢计算机网络课程设计,本着挑战自己的态度,选择了一个从未接触的东西:邮箱客户端代理软件的设计.由于对相关协议非常陌生,只能依靠查找资料完成,在学习过程中碰到了一个非常好的博客,故向大家推荐一下. 一 ...

  7. umount.nfs device busy day virsh extend diskSpace, attachDisk

    KVM中linux虚拟机的硬盘添加方法 最近虚拟机中运行的东西比较多,很多.而刚启动的时候虚拟机分配的磁盘比较少,随着日志还有平时的上传文件的积累,磁盘空间报警了.网上查了下资料,自己也做了下实验.总 ...

  8. swift3.0 构造器、析构方法(3)

    构造和析构是两种特殊的方法,在对象进行初始化的时候 使用构造,在对象的释放操作中,使用析构. 构造器的定义: init (){ //代码 } init(name:String){ //代码 } 在构造 ...

  9. Windows下安装storm-0.9.1

    Windows下安装storm-0.9.1的详细步骤如下: 1.确定已经正确安装JDK1.6或JDK1.7(具体安装步骤略) 2.安装Python2.7版本(测试storm-starter proje ...

  10. English - therefore,so,hence,then,accordingly,thus用法解析

    这几个词的区别大致可从以下几方面去看: 1.therefore adv.因此, 所以=for that reason=consequently常用于连接两个并列分句,其前加“and”或分号“:”.He ...