Web前端基础知识(五)

盒子模型

盒子模型是CSS中一种常用于布局的基本概念。描述了 文档中的每个元素都可以看成是一个矩形的盒子,包含了内容、内边距、文本边距、外边距。


盒子模型相关属性

内容(content)------盒子包含的实际内容,比如文本、图片等。

内边距(Padding)----围绕在内容的内部,是内容与边框之间的空间。可以使用 padding 属性来设置。

边框(Border)-----围绕在内边距的外部,是盒子的边界。可以使用 border 属性来设置。盒子的边界.

外边距(Margin)----围绕在边框的外部,是盒子与其他元素之间的空间。可以使用 margin 属性来设置。

内边距(Padding)、边框(Border)、外边距(Margin)都是复合元素。


举例:

<div class="demo">CSDN关注计算机相关知识分享</div>

<div class="demo1">CSDN关注计算机相关知识分享</div>

<div class="demo2">CSDN关注计算机相关知识分享</div>

效果:


举例:

.border-demo{

background-color: aquamarine;

width: 300px;

height: 200px;

border-style: solid;

border-width: 10px;

border-color: blue;

}

...

<div class="border-demo">这是一个边框示例</div>

效果:


举例:

<div class="border-demo">这是一个边框示例</div>

效果:


举例:

<div class="border-demo">这是一个边框示例</div>

效果:


举例:

效果:


传统网页布局方式

标准流(普通流、文档流):网页按照元素的书写顺序依次排列。

浮动。

定位。

Flexbox、grid(自适应布局):可以更轻松地实现复杂的自适应布局,比如,网页可以在手机端访问,也可以在电脑端访问。提供了更灵活的布局选项。

上述几种布局方式,本质上都是摆盒子。


浮动

最典型应用:可以让多个块级元素在同一行排列显示。

浮动的元素 相互贴靠在一起的,不会有缝隙。如果父级宽度装不下这些浮动的盒子,多出来的盒子会另起一行。

浮动,是相对于父元素进行浮动的,即,只会在父元素的内部进行移动。

语法:

选择器{

float:left/right/none;

}

使用行内块元素,彼此之间有缝隙,不如浮动那么方便。


浮动的三大特性

1.脱标:脱离标准流。

当元素设置了浮动后,这个元素就会脱离标准流的控制,移动到指定的位置,浮动的盒子就 不再保留原来所占的位置。就像漂浮在空中一样。

2.一行显示,顶部对齐。

如果多个盒子同时设置了浮动,那么它们会按照属性值一行内显示,并且顶端对齐。

3.具备行内块元素特性。


举例:


效果:


举例:

效果:


定位

定位布局可以精准定位,但缺乏灵活性。

定位方式:

1.相对定位:相对于元素在文档流中的正常位置进行定位。

2.绝对定位:相对于其最近的已定位祖先元素进行定位,不占据文档流。

3.固定定位:相对于浏览器窗口进行定位。不占据文档流,固定在屏幕上的位置,不随滚动而移动。


举例:

效果:


后续内容见《Web前端基础知识(六)》

相关推荐
whysqwhw15 小时前
Hippy 跨平台框架扩展原生自定义组件的完整实现方案对比
前端
dasseinzumtode15 小时前
nestJS 使用ExcelJS 实现数据的excel导出功能
前端·后端·node.js
子兮曰15 小时前
🔥C盘告急!WSL磁盘暴增?三招秒清20GB+空间
前端·windows·docker
Jinuss15 小时前
Vue3源码reactivity响应式篇之EffectScope
前端·vue3
stoneship15 小时前
网页截图API-Npm工具包分享
前端
Jedi Hongbin15 小时前
Three.js shader内置矩阵注入
前端·javascript·three.js
etcix15 小时前
dmenux.c: integrate dmenu project as one file
c语言·前端·算法
光影少年16 小时前
react16到react19更新及底层实现是什么以及区别
前端·react.js·前端框架
超人不会飛16 小时前
vue3 markdown组件|大模型应用专用
前端·vue.js·人工智能
じòぴé南冸じょうげん16 小时前
微信小程序如何进行分包处理?
前端·小程序