<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. Cloning Java objects using serialization

    Sometimes you need to clone objects, and sometimes you can't use their clone method, and sometimes s ...

  2. poj2656---求一列数中最大数的序数而且在前面输入的更优先

    #include<stdio.h> #include<stdlib.h> int main() { int n,i; while(scanf("%d",&a ...

  3. NET-A-PORTER为何难以模仿?_全文显示_生活福布斯中文网

    NET-A-PORTER为何难以模仿?_全文显示_生活福布斯中文网 NET-A-PORTER为何难以模仿?

  4. Saiku如何固定查询结果table的表头和首列

    在使用saiku查询的时候,当“行”和“列”的维度内容过多时,在查看时只看到数据,不知道是什么数据,维度不清楚,得来回拖动滚动条才行,所以同事提出想要固定“表头”和“首列”. 在网上找了一些现成的插件 ...

  5. 什么时候css会见less

    在一定程度上,css不能被视为一个节目.虽然和其他语言,它有自己的规范.编码,但它的笨拙实在让我失望. 不喜欢css是由于不管怎么优化代码.项目大到一定程序后.都会看上去一团乱.并且有时候一个bug的 ...

  6. OpenGL绘制简单场景,实现旋转缩放平移和灯光效果

    本项目实现了用OpenGL绘制一个简单场景,包括正方体.球体和网格,实现了物体的旋转.缩放.平移和灯光效果.附有项目完整代码.有具体凝视.适合刚開始学习的人熟悉opengl使用. 开发情况 开发环境V ...

  7. 利用aspose.cell把数据导出到excel

    /// <summary> /// 导出数据到本地 /// </summary> /// <param name="dt">要导出的数据< ...

  8. 按模板打印word防止并发操作

    /// <summary> /// /// <summary> /// 打印人员备案表 /// </summary> /// <param name=&quo ...

  9. sql server 2000 对应 sql server 2005的row_number()、rank()、DENSE_RANK( )、ntile( )等用法

    转自CSDN:http://blog.csdn.net/htl258/article/details/4006717 SQL server 2005新增的几个函数,分别是row_number( ).r ...

  10. Problem F: Exponentiation大数求幂

    DescriptionProblems involving the computation of exact values of very large magnitude and precision ...