CSS核心内容:标准流、盒子模型、浮动、定位

简介: CSS核心内容:标准流、盒子模型、浮动、定位

一、标准流

标准流指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。


块级元素

霸占一行,不能与其他任何元素并列

能设置宽与高

行内元素

与其他元素并列、

不能是指宽与高,默认的宽度就是文字的宽度

与HTML元素之间的区别

image.png


标准流里面的限制特别多。标准流做不出网页:因为能并排的不能改宽高。所以,要脱离标准流。


css中有三种手段可以使一个元素脱离标准文档流,分别为浮动和绝对定位,固定定位。


二、盒子模型

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。


盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。


一张图解释一下:

image.png

Margin(外边距) - 清除边框外的区域,外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域,内边距是透明的。

Content(内容) - 盒子的内容,显示文本和图像


三、浮动(Float)

CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列


img{
    float:right;  //左浮动
    float:left;  //右浮动
    clear:boty;  //清除浮动
}

四、定位(Position)

position 属性指定了元素的定位类型。


position 属性的五个值:


static:默认值,即没有定位,遵循正常的标准流对象

relative:相对定位、相对于某元素

fixed:元素的位置相对于浏览器窗口是固定位置。

absolute:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:

sticky:基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。

博文至此,关于div+css的核心内容就写完了,如果本篇博客对您有一定的帮助,大家记得留言+点赞哦。

相关文章
|
10月前
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性,包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流,向左或右排列,周围元素随之调整。文章还详细讲解了清除浮动的方法,如使用clear属性、设置父元素高度、利用overflow属性、伪元素等,以解决因浮动导致的布局问题。最后,强调了浮动在创建复杂布局时的作用,并预告后续内容。
259 2
|
12月前
|
前端开发
|
11月前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
79 0
|
12月前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`&lt;div&gt;`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。
121 6
|
前端开发 容器
最新CSS3定位元素
【8月更文挑战第28天】
105 5
|
前端开发 容器
解锁CSS定位奥秘,从迷茫到精通,让你的网页布局“稳如老狗”,引领前端新潮流!
【8月更文挑战第23天】本文深入探讨了Web前端开发中CSS定位的三大基石:相对定位、绝对定位与固定定位。通过具体示例,展示了各种定位方式的特点及应用场景。相对定位可在不影响布局的情况下微调元素位置;绝对定位使元素完全脱离文档流,适用于精确控制位置的需求;固定定位则确保元素始终固定于浏览器窗口特定位置,不受页面滚动影响。这些技巧对于实现复杂网页布局至关重要。
181 0
|
3月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
3月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
3月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
3月前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习

热门文章

最新文章