CSS - 盒子模型

简介: CSS - 盒子模型

1.png


.box{ width:524px; } /* 262*2==524 */
.box1{  
    width:200px;  
    padding:20px;  
    border:1px solid red;  
    margin:10px;     
} 
.float{ float:left; }
<div class="box"> <!-- 效果1 -->
  <div class="box1 float">文本内容1</div>
  <div class="box1 float">文本内容2</div>
</div>
<div style="width:523px"> <!-- 效果2 -->
  <div class="box1 float">文本内容1</div>
  <div class="box1 float">文本内容2</div>
</div>

image.png


元素的实际长度为:10px+1px+20px+200px+20px+1px+10px==262px。

元素的实际高度同理可得。


image.png


image.png



CSS盒子模型:浏览器,F12 (开发人员工具),在样式最底部里。

扩展知识:box-sizing


image.png



image.png

目录
相关文章
|
11月前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
11月前
|
前端开发 开发者
css两种盒子模型
在CSS中,有两种盒子模型:标准盒子模型和IE盒子模型(怪异盒子模型)。标准盒子模型中,`width`和`height`仅指内容区的尺寸,总宽度和高度还包括内边距、边框和外边距。IE盒子模型中,`width`和`height`包括内容区、内边距和边框,总宽度和高度仅加外边距。通过`box-sizing`属性可以切换这两种模型,`box-sizing: content-box;`表示标准盒子模型,`box-sizing: border-box;`表示IE盒子模型。
|
11月前
|
前端开发 容器
给 CSS 盒子模型添加边框时,需要注意什么?
在给CSS盒子模型添加边框时,需要注意边框的宽度、样式和颜色,以及它如何影响盒子的总尺寸和布局。边框会增加盒子的总宽度和高度,可能需要调整其他属性以保持布局的完整性。
|
12月前
|
前端开发
CSS属性:盒子模型
CSS属性:盒子模型
92 0
|
10月前
|
前端开发
CSS 盒子模型
CSS 盒子模型
65 4
|
11月前
|
前端开发
彻底搞懂css盒子模型
【10月更文挑战第1天】
193 9
|
前端开发 开发者
【前端大揭秘】CSS盒子模型的爱恨情仇:一场关于标准与IE模型的精彩对决!
【8月更文挑战第26天】本文深入探讨CSS中的两大盒子模型——标准盒模型与IE盒模型。通过理论解析与实例代码,清晰展示了两种模型下元素尺寸的构成方式及其应用场景。标准盒模型适合精确控制内容区尺寸,而IE盒模型在处理固定宽度元素时更为直观。掌握这些知识将帮助前端开发者在实际项目中做出更优的设计决策,提升网页布局的质量与美观性。
194 1
|
前端开发
HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用
该博客文章详细介绍了HTML和CSS的基础知识,包括CSS样式的应用方式、语法规则、选择器的使用、盒子模型、内边距、外边距、元素的显示类型以及overflow属性处理溢出内容的方法,并通过代码示例和测试结果截图展示了这些知识点在网页设计中的应用。
HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用
|
前端开发 开发者
CSS盒子模型(如果想知道CSS有关盒子模型的知识点,那么只看这一篇就足够了!)
CSS盒子模型(如果想知道CSS有关盒子模型的知识点,那么只看这一篇就足够了!)
|
前端开发
CSS盒子模型
CSS盒子模型。
55 1

热门文章

最新文章