CSS标准流与盒子模型

简介: CSS标准流与盒子模型

标签:

①块级元素

<div class="menu">栏目一</div>

②行内元素

<samp class="ttt">栏目二</samp>

在样式表中可以转换

.ttt{
    display:block;      /*转化成块级元素了*/
}

标准流:

  按标签的排列顺序实现样式的排列。

盒子模型

  • 每个画框之间有外边距margin,外边距有上下左右四面,可设置不同的值。
  • 画框与画之间还有内边距padding,内边距同外边距。
  • 画框border也有宽度,也有上下左右,同内外边距。
  • 画content本身有宽、高。


实例:

#sss
{
    font-weight :bold ;
    border-bottom-width :1px;  /*p画框宽度为1个像素*/
    border-color:#0ff;  /*画框颜色*/
    border-style :solid;  /*实线边框*/
    padding-left :3px;    /*内左边距为3个像素*/
    line-height:60px;    /*让文本垂直居中(高为120px)*/
}

**浮动:**能让块级元素跑到一行,脱离标准流

#sss
{
    float:left;    /*向左浮动*/
}

定位:

absolute:绝对定位

relative:相对定位,没有脱离标准流

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