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

相关推荐
hj5914_前端新手3 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法3 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku3 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode3 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu3 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu3 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu3 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu3 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu3 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在3 小时前
6个值得收藏的.NET ORM 框架
前端·后端·.net