`

css盒模型

    博客分类：
  • Css
css 
阅读更多
1. css盒模型

1) 盒模型基本概念 

盒模型：
相框边框 -> border
画和相框边框的距离 -> padding
相框之间的距离 -> margin


2) 边框 

border-width 边框宽度(粗细)
border-color 边框颜色
border-style 边框样式

<style type="text/css">
    #outerBox1{
        border-width: 2px;
        border-color: red;
        border-style:solid;
    }
    #outerBox2{ border: thick blue dashed; }
    #outerBox3{
        border-top: thick blue dashed;
        border-right: 2px red solid;
        border-bottom: thin yellow dotted;
        border-left: 2px red solid;
    }
</style>
</head>
<body>
<div id="outerBox1">内容1</div>
<div id="outerBox2">内容2</div>
<div id="outerBox3">内容3</div>
</body>


3) 内边距 padding 

<style type="text/css">
    #outerBox1{
        border-width: 2px;
        border-color: red;
        border-style:solid;
        padding: 40px;
    }
    #outerBox2{
        border: thick blue dashed;
        padding-top: 20px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-left: 2px;
    }
    #outerBox3{
        border-top: thick blue dashed;
        border-right: 2px red solid;
        border-bottom: thin yellow dotted;
        border-left: 2px red solid;
        padding: 20px 10px 5px 2px;
    }
</style>
</head>
<body>
<div id="outerBox1">内容1</div>
<div id="outerBox2">内容2</div>
<div id="outerBox3">内容3</div>
</body>


4) 外边距 margin 

<style type="text/css">
    #outerBox1{
        border-width: 2px;
        border-color: red;
        border-style:solid;
        padding: 40px;
        margin: 10px;
    }
    #outerBox2{
        border: thick blue dashed;
        padding-top: 20px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-left: 2px;
        margin-top: 20px;
        margin-right: 10px;
        margin-bottom: 5px;
        margin-left: 2px;
    }
    #outerBox3{
        border-top: thick blue dashed;
        border-right: 2px red solid;
        border-bottom: thin yellow dotted;
        border-left: 2px red solid;
        padding: 20px 10px 5px 2px;
        margin: 20px 10px 5px 2px;
    }
</style>
</head>
<body>
<div id="outerBox1">内容1</div>
<div id="outerBox2">内容2</div>
<div id="outerBox3">内容3</div>
</body>


5) 网页布局与盒模型 

5.1 标准文档流
标准文档流：指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则；
5.2 块级元素 VS 行内元素
块级元素：以一个块的形式展现，跟同级的兄弟块依次竖直排列，左右撑满，比如<div>；
行内元素：以普通的一个 DOM 节点展现，跟同级的兄弟元素横向排列，排满后，自动换行，比如<span>；

<h1>块级元素</h1>
<div>块1</div>
<div>块2</div>
<div>块3</div>
<h1>行内元素</h1>
<span>块1</span>
<span>块2</span>
<span>块3</span>
</body>


6) 盒子在标准流中的定位 

6.1 行内元素之间的水平margin
marin-right + margin-left

<span style="margin-right: 10px;">块1</span>
<span style="margin-left: 10px;">块2</span>

6.2 块级元素之间的竖直margin
margin-bottom margin-top 以大的为标准

<div style="margin-bottom: 10px;">块1</div>
<div style="margin-top: 5px;">块2</div>

6.3 嵌套盒子之间的margin
子块的margin将以父块的内容为参考

<div style="margin: 10px;">块1
<div style="margin-top: 20px;">块2</div></div>

6.4 margin属性可以设置成负值

<span style="margin-right: 10px;">块1</span>
<span style="margin-left: -30px;">块2</span>
分享到：
| css背景颜色、图像
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS+盒模型,css盒模型面试题,HTML源码.zip

    **CSS盒模型** 在网页设计中，CSS（层叠样式表）盒模型是理解布局的基础。它描述了HTML或XML元素如何占据空间并相互影响。盒模型由元素的内容区域、内边距（padding）、边框（border）以及外边距（margin）组成，...

    css 盒模型整理

    **CSS盒模型详解** 在网页设计中，CSS（Cascading Style Sheets）盒模型是理解元素布局的关键。盒模型描述了HTML或CSS元素如何占据空间并与其他元素交互。这个概念对于精确控制页面布局至关重要，特别是在响应式...

    css盒子模型

    CSS盒子模型有两种类型：W3C标准盒子模型和IE盒子模型（也称为怪异盒模型）。在标准模型中，元素的总宽度和高度等于内容区域加上内边距和边框；而在IE模型中，总尺寸仅包含内容区域，内边距和边框被加到了总宽度和...

    CSS盒模型PPT

    这是一个CSS的PPT CSS 盒模型，主要介绍CSS中的盒模型

    CSS+盒模型,css盒模型面试题,HTML

    **CSS盒模型详解** 在网页设计与开发中，CSS（层叠样式表）盒模型是理解元素布局和尺寸计算的关键概念。盒模型定义了元素如何占据空间，包括内容区域、内边距、边框和外边距。了解CSS盒模型对于优化页面布局和解决...

    CSS盒模型的应用知识介绍，基础的CSS盒模型教学

    ### CSS盒模型的应用知识介绍与基础教学 #### CSS盒模型概念 CSS盒模型（CSS Box Model）是一个核心的概念，它定义了元素如何在网页中呈现以及元素之间如何相互作用。简单来说，每个HTML元素都可以被视为一个矩形...

    css盒模型.docx

    CSS 盒模型详解 CSS 盒模型是 HTML+CSS 中最核心的基础知识之一，它规定了网页元素如何显示以及元素间相互关系。CSS 盒模型是由 content（内容区）、padding（填充区）、border（边框区）和 margin（外边距区）四个...

    CSS盒子模型.rar

    虽然W3C标准定义了盒子模型，但早期的IE浏览器（尤其是IE6和IE7）采用了一种不同的实现，称为“怪异盒模型”。这导致了跨浏览器的布局问题。为解决这个问题，可以使用`*{box-sizing:border-box}`进行全局设置，使...

    CSS盒子模型的应用

    - **盒模型在流体布局中的应用**：通过调整元素的盒子模型属性，我们可以实现响应式设计，使页面在不同屏幕尺寸下仍能保持良好的布局。 - **盒模型与浮动元素**：在使用float属性时，盒子模型可以帮助我们控制元素间...

    CSS盒子模型结构

    总结：深刻理解盒模型是学习 div+css 的基础，是网页布局的前提。只有牢固掌握盒子模型的结构和原理，才能在网页布局中游刃有余。 因此，在学习 div+css 时，一定要重视盒子模型的学习，掌握盒子模型的组成部分、...

    CSS盒子模型 图片演示

    在CSS3中，还引入了盒模型的两种模式：W3C标准盒模型和IE盒模型（也称为怪异盒模型）。W3C标准盒模型中，元素的width和height只包括内容区，而IE盒模型则包括内容区、内边距和边框。为了避免浏览器之间的兼容性问题...

    彻底弄懂CSS盒模型

    【彻底弄懂CSS盒模型】 CSS盒模型是前端开发中至关重要的概念，它定义了网页元素如何占据空间和相互布局。CSS盒模型由四个部分组成：内容(content)、内边距(padding)、边框(border)和外边距(margin)。理解盒模型...

    21.4 CSS 盒子模型

    CSS盒子模型有两种不同的解析方式：标准盒模型（W3C Box Model）和IE盒模型（IE Quirk Mode）。在标准盒模型中，元素的总宽度和高度计算公式为：内容宽度/高度 + 内边距左右/上下 + 边框左右/上下 + 外边距左右/上下...

    css 盒子模型彻底解析

    W3C标准盒模型中，元素的宽度和高度仅包含内容区域，不包括内边距和边框，而在IE盒模型中，元素的宽度和高度包含了内容、内边距和边框。 理解CSS盒子模型有助于实现更加灵活和响应式的网页设计。例如，通过调整内...

    彻底弄懂CSS盒模型 Box Model

    【彻底弄懂CSS盒模型 Box Model】 在网页设计中，CSS盒模型是理解网页布局的基础。这个模型描述了网页元素如何占用空间并与其他元素交互。盒模型包括四个关键部分：内容（content）、内填充（padding）、边框...

    css盒模型css盒模型

    CSS盒模型是网页布局的基础，它定义了网页元素如何占据空间和相互影响。在CSS中，每个元素都被视为一个矩形框，这个框由四个部分组成：内容(content)、内填充(padding)、边框(border)和外边界(margin)。 1. 内容...

    CSS盒模型详细解析

    详细分析了css盒模型 希望对大家有帮助

    CSS盒子模型详解与实操技巧

    适用人群：适合希望深入了解和熟练掌握 CSS 盒模型细节的设计新手与有一定经验的 Web 开发人员。 使用场景及目标：① 使学习者能够理解和灵活运用各个 CSS 盒子组件进行页面布局的设计和美化；② 能解决网页构建中...

    CSS盒子模型详析与实践教程

    内容概要：全面讲解了CSS盒模型的各项属性及其应用方法，从外边距(margin)，内边距(padding)，宽度和高度(width/height), 内容(content), 边框(border), 圆角(border-radius), 盒子阴影(box-shadow), 到外边距合并...

Magicbox
Global site tag (gtag.js) - Google Analytics