关于css的默认宽度
<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的默认宽度的更多相关文章
- css 选择器、元素默认宽度、media screen
@media screen and (min-width:800px){ .a{ background: url('../image/banner/banner1.jpg') no-repeat l ...
- [转]css实现左侧宽度自适应,右侧固定宽度
原文地址:https://segmentfault.com/a/1190000008411418 页面布局中经常用会遇到左侧宽度自适应,右侧固定宽度,或者左侧宽度固定,右侧自适应.总之就是一边固定宽度 ...
- HTML标签CSS属性默认值汇总
HTML标签CSS属性默认值,在你需要还原默认值的时候比较有用. 以前一直在找这份文档,今天偶然在网上看到了.除了inline和block的定义,主要是要注意body|h1~h6|blockquote ...
- Source Insight小技巧:修改Symbol Window的默认宽度
SI是个好东西,但是源代码窗口左边的符号窗口的默认宽度实在是太小,每次打开一个新的源码窗口都要重新拖放调整,很烦人.下面是一劳永逸调整Symbol Window宽度的方法. 打开一个源码窗口,将Sym ...
- css清除默认样式
CSS 清除默认样式 通常有以下几句就够了: *{margin:0;padding:0} li{list-style:none} img{vertical-align:top;border:non ...
- 最简单的css实现页面宽度自适应
<div class="rxs"> <div class="rxleft"> 第一段内容,可以是任何html标签 </div> ...
- 用纯css改变默认的radio和checkbox的样式
利用css的label的伪类(::before)代替checkbox和radio效果: 优点:需要图片来调整选中前和选中后的样式,纯css搞定 缺点:兼容性,IE8以下不支持 在线例子: css改变默 ...
- Eclipse创建JSP、HTML、CSS文件默认字符集设置成UTF-8
问题:在使用eclipse的时候总是发现新创建的JSP文件.HTML文件等默认总是ISO-8859-1,每次都要修改成自己使用的utf-8的,很是麻烦,因此在网上查看了一下发现是可以修改字符集的默认值 ...
- CSS 边框的宽度
边框的宽度 您可以通过 border-width 属性为边框指定宽度. 为边框指定宽度有两种方法:可以指定长度值,比如 2px 或 0.1em:或者使用 3 个关键字之一,它们分别是 thin .me ...
随机推荐
- Python中进行Base64编码和解码
Base64编码 广泛应用于MIME协议,作为电子邮件的传输编码,生成的编码可逆,后一两位可能有“=”,生成的编码都是ascii字符.优点:速度快,ascii字符,肉眼不可理解缺点:编码比较长,非常容 ...
- 15.java.lang.InstantiationException
java.lang.InstantiationException 实例化异常 当试图通过Class的newInstance()方法创建某个类的实例,但程序无法通过该构造器来创建该对象时引发 Class ...
- J2SE知识点摘记(十七)
1. Applet Applet的生命周期分为四个阶段,各阶段分别由init,start,stop和destroy四种方法来具体体现. public void init() 此方法通知A ...
- TelephonyManager
每台手机有一个唯一的设备ID
- uestc 10 In Galgame We Trust
题意:求最长的合法括号序列 解:栈+分类讨论 now表示已经算出的序列,且此序列与现在扫描的序列可能能够连接,tmp表示现在扫描到的序列长度 左括号入栈 右括号:1.栈空时:统计当前总长 并且将栈,n ...
- Oracle - index (索引)
索引: 一种独立于表的模式对象, 可以存储在与表不同的磁盘或表空间中 @ 索引被删除或损坏, 不会对表产生影响, 其影响的只是查询的速度 @ 索引一旦建立, Oracle 管理系统会对其进行自 ...
- JQuery打造下拉框联动效果
做联动效果,若是用纯JavaScript来做,往往须要辅助页面保存须要刷新的结果集,然后渲染到原页面.考虑将须要动态刷新的内容自己主动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后 ...
- ACdream群赛1112(Alice and Bob)
题意:http://acdream.info/problem?pid=1112 Problem Description Here is Alice and Bob again ! Alice and ...
- 使用Swift的代理,闭包来封装一个公用协议减少垃圾代码
iOS开发中,如果不进行适当的封装,使用协议或者继承类来进行开发,你就会遇到传说中的ViewController(以后简称VC) Hell的问题…… 比如说,我们先声网App中为了调用接口,做简单的判 ...
- Android getReadableDatabase() 和 getWritableDatabase()
Android使用getWritableDatabase()和getReadableDatabase()方法都可以获取一个用于操作数据库的SQLiteDatabase实例.(getReadableDa ...