关于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 ...
随机推荐
- GitHub 菜鸟使用
之前有用过一次,但是一直弄不明白怎么用,今天我又试了一下,成功了,现在我就记录下来,为了以后的使用以及帮助那些跟我原先一样不会用的同学 进入正题: Step 1: 注册GitHub账号 https:/ ...
- PHP学习之数据库操作
PHP数据库操作: 一.连接数据库 mysql_connect() 例:$link=mysql_connent("localhost","root"," ...
- Tomcat 设置自动编译,自动发布,自动部署
Tomcat服务器 具有一个常用的功能: 即自动编译,自动发布,自动部署功能. 问题: 当我们第一次发布程序以后,我们增删改Servelt,Java,.xml等文件,都必须重启Tomcat,如果项目巨 ...
- 3.21 采购订单导入MDS
3.21.1 业务方案描述 同一企业集团内部的不同法人之间,双方间内部往来业务频繁.受集团财务各自独立核算的要求,买方和卖方间采用买卖方式进行业务运作和财务结算. 对于买方,按照内部商定的协议价格 ...
- oracle解锁表
select b.owner,b.object_name,a.session_id,a.locked_mode,c.serial#,c.sid||','||c.serial# from v$locke ...
- JavaMail学习笔记
适逢计算机网络课程设计,本着挑战自己的态度,选择了一个从未接触的东西:邮箱客户端代理软件的设计.由于对相关协议非常陌生,只能依靠查找资料完成,在学习过程中碰到了一个非常好的博客,故向大家推荐一下. 一 ...
- umount.nfs device busy day virsh extend diskSpace, attachDisk
KVM中linux虚拟机的硬盘添加方法 最近虚拟机中运行的东西比较多,很多.而刚启动的时候虚拟机分配的磁盘比较少,随着日志还有平时的上传文件的积累,磁盘空间报警了.网上查了下资料,自己也做了下实验.总 ...
- swift3.0 构造器、析构方法(3)
构造和析构是两种特殊的方法,在对象进行初始化的时候 使用构造,在对象的释放操作中,使用析构. 构造器的定义: init (){ //代码 } init(name:String){ //代码 } 在构造 ...
- Windows下安装storm-0.9.1
Windows下安装storm-0.9.1的详细步骤如下: 1.确定已经正确安装JDK1.6或JDK1.7(具体安装步骤略) 2.安装Python2.7版本(测试storm-starter proje ...
- English - therefore,so,hence,then,accordingly,thus用法解析
这几个词的区别大致可从以下几方面去看: 1.therefore adv.因此, 所以=for that reason=consequently常用于连接两个并列分句,其前加“and”或分号“:”.He ...