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的核心内容就写完了,如果本篇博客对您有一定的帮助,大家记得留言+点赞哦。

相关文章
|
3天前
|
前端开发
CSS的盒子模型:掌握网页设计的基石!
CSS的盒子模型:掌握网页设计的基石!
|
4天前
|
前端开发
CSS盒子模型
【5月更文挑战第4天】CSS盒子模型。
23 7
|
4天前
|
前端开发 开发者 容器
【专栏:CSS基础篇】CSS定位与布局:从静态到浮动、定位
【4月更文挑战第30天】本文介绍了CSS定位与布局的基础,包括静态、相对、绝对、固定定位以及浮动。静态定位遵循HTML顺序,相对定位可在正常位置基础上偏移,不占用额外空间。绝对定位基于最近已定位祖先元素定位,脱离文档流。固定定位相对于浏览器窗口定位,无视页面滚动。浮动用于文字环绕图片等,可能导致父元素高度塌陷。Flexbox布局提供更灵活的元素排列和对齐方式,适配各种复杂布局需求。理解并掌握这些布局技术能提升网页设计的灵活性和响应性。
|
4天前
|
前端开发 开发者
【专栏:CSS基础篇】CSS选择器详解:精准定位网页元素
【4月更文挑战第30天】本文介绍了CSS选择器在Web开发中的重要性,详细阐述了基础选择器(元素、类、ID、属性和伪类/伪元素)及复杂选择器(后代、子元素、相邻兄弟和一般兄弟)的用法。通过理解并巧妙运用这些选择器,开发者能更高效地控制页面样式,提高代码的可维护性。CSS预处理器如Sass、LESS进一步增强了选择器的功能,助力创建优雅且强大的样式表,实现精准的网页设计。
|
4天前
|
XML 前端开发 JavaScript
CSS中动画、过渡、定位、浮动的作用
CSS中动画、过渡、定位、浮动的作用
|
4天前
|
前端开发 容器
css样式元素的相对定位,绝对定位,固定定位等元素定位运用技巧详解
css样式元素的相对定位,绝对定位,固定定位等元素定位运用技巧详解
|
4天前
|
前端开发
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
|
4天前
|
前端开发 UED
【Web 前端】css盒子模型有几种类型?它们区别是什么?
【4月更文挑战第22天】【Web 前端】css盒子模型有几种类型?它们区别是什么?
|
前端开发 容器
CSS 弹性浮动布局应用
CSS 弹性浮动布局应用
CSS 弹性浮动布局应用