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

相关推荐
sunbyte2 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊2 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林3 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
IT瘾君4 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库5 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端5 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED5 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪6 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程6 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常6 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程