上一篇博客详细的介绍了一下盒子模型，做了一个稍微复杂一点的小例子，但是关于盒子模型还有许多小的知识点，需要不断的补充不断的总结，所以就又写了这一篇博客，建构主义学习，不断的积累，就是刚刚好的状态，哪怕每次都是一个小的知识点的总结，不能一口气吃个胖子，也不能长时间饿着。

一、盒子模型的宽度设定

上篇博客，我们讨论了盒子模型主要的四部分构成：内容、内边距、边框、外边距，但是如果我想要设置盒子的宽度，这个宽度只是内容的还是包含了其他三部分呢？于是还是要做小例子啊，这次的小例子比上一篇的要简单，因为只是想看看宽度这一个属性。

前台代码：（三个div，只用了其中的两个）

<body><form id="form1" runat="server"><div class="one">这是第一个盒子</div><div class="two">这是第二个盒子</div><div class="three">这是第三个盒子</div></form>
</body>

css样式

* {
font-size:16px;
}
/*共同属性*/
.one, .two {
padding:.5em;
width:100px;
border :5px solid  #000000;
margin:.5em;
}
/*第一个填充红色*/
.one  {
background-color :#f00;
}
/*第二个填充绿色*/
.two {box-sizing :border-box ;
background-color :#00ff21;
}

效果图：

简单讲解：

1.虽然我们两个div的宽度都设置为100px,但是为什么会出现一个宽一个窄呢？

P.S.:以后再有补充知识就接着写~~~

盒子模型补充知识汇总相关推荐

网络硬件补充知识汇总
[转]常见的路由协议(RIP.OSPF.ISIS.BGP)_qq_30852577的博客-CSDN博客_bgp isis ospf 1.图解网络硬件硬核图解,30张图带你搞懂.路由器,集线器,交换机 ...
【CSS3】一文搞懂盒子模型（知识点加案例）
看透网页布局本质行内元素比如文字类似牛奶,需要一个盒子把他们装起来,我们所学过的双标签都是一个盒子.有了盒子,我们就能任意的,自由的摆放位置了. 看透网页布局的本质:把网页元素比如文字图片等等,放入 ...
简述对css盒子模型的理解_css 盒子模型理解
盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...
三、CSS重要的盒子模型知识总结（中篇）
@Author:Runsen CSS知识总结(上) 继续上篇文章,总结css 今天一篇全讲重要的盒子模型文章目录边框属性什么边框? 边框属性的格式连写(分别设置四条边的边框) 内边距什么是内 ...
CSS基本知识之盒子模型
CSS基本知识之盒子模型首先要知道什么是盒子模型? 所谓盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器.CSS 盒子模型本质上是一个盒子,封装周围的 HT ...
超详细的css知识树状图~CSS选择器盒子模型、浮动、定位和装饰
前言学习任何新知识,最重要的永远都是搭建属于自己的知识框架,随后学习的细碎知识点往框架里面填入,最后形成一棵属于自己的知识大树.本系列的博客专注更新总结好的思维导图,希望可以帮助大家快速理清知识结构 ...
QueryDict和模型表知识补充
1.QueryDict的用法 request.GET的用法:1.在页面上输入:http://127.0.0.1:8000/index/print(request.GET,type(request.GE ...
css盒子模型输出对联,网页设计基础 CSS盒子模型第4章 CSS盒子模型_补充案例.doc...
博学谷--让IT教学更简单,让IT学习更有效 PAGE 18 第4章补充案例 [案例4-1] 顶部导航栏1 一.案例描述考核知识点边框的复合属性.背景颜色练习目标灵活运用边框的复合属性. 掌 ...
CSS基础知识（颜色、伪类、盒子模型）
6.设置颜色单位 L 普通英文单词 {color : 属性值red;} 此方法简单,便捷.但设置的颜色在不同浏览器中,可能显示的颜色出现差异 * 三原色 - 红.绿.蓝 L 颜色的八进制方式 ...
牛腩知识小结-盒子模型
一,盒子模型网页设计中常听的属性名:内容(content).内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以用日常生活中的常 ...

盒子模型补充知识汇总

一、盒子模型的宽度设定

盒子模型补充知识汇总相关推荐

最新文章

热门文章