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

相关推荐
翻滚吧键盘11 分钟前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹17 分钟前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军38 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW1 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字1 小时前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘2 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出2 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的2 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解2 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端