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前端基础知识(六)》

相关推荐
范文杰2 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪2 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪2 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy3 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom3 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom3 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom3 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom4 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom4 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI5 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端