<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. 几种改变Activity回退栈默认行为的Intent Flag

    FLAG_与LaunchMode相比最大的不同是临时性 1.FLAG_ACTIVITY_NEW_TASK: Developer.android.com的说法: (1)在新的task中启动这个Activ ...

  2. SQL Server 一些重要视图3

    1. sys.dm_tran_locks; 为每一把锁返回一行.request_session_id 可以与sys.dm_tran_session_transactions \sys.dm_exec_ ...

  3. odi增量更新策略

    增量更新策略:通过一个“update key”比较流数据记录与目标表中的记录比较进行数据整合.具有相同“update key”的记录当相关联列不同时将被更新:在目标表中不存在的记录将被插入.这种方式用 ...

  4. delphi 线程池基础 TSimplePool

    1. TSimpleThread 2. TSimpleList 3. 以1,2构成 TSimplePool 用法 先定义: TDoSomeThingThread=class(TSimpleThread ...

  5. poj2141---字符串转换

    #include <stdio.h> #include <stdlib.h> int main() { ]; char tmp; scanf("%s",ke ...

  6. UberX及以上级别车奖励政策(优步北京第二、三组)

    优步北京第二.三组: 定义为2015年6月1日至7月19日激活的司机(以优步后台数据显示为准) 滴滴快车单单2.5倍,注册地址:http://www.udache.com/如何注册Uber司机(全国版 ...

  7. 限制div高度当内容多了溢出时显示滚动条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"content= ...

  8. S3C6410嵌入式应用平台构建(三)

    构建了好久的系统,由于工作原因,没有及时写记录,目前我已经进展到构建yaffs2文件系统,启动Linux内核了.Uboot移植基本功能已经完成. 由于Uboot移植方法大致是一样的,我主要参考这位博友 ...

  9. AIDL 发生异常的原因 Android java.lang.SecurityException: Binder invocation to an incorrect interface

    我建立了两个project.一个是activity 的 ,一个是service 的. 在进行两个project通信时,应该有以下几点注意: 1.在activity project中引入service ...

  10. QT 声明全局变量

    声明 qdatabasemanager.h #include"qdatabasemanager.h" externQDatabaseManager*Database; 引用 mai ...