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

一、标准流

块级元素

行内元素

与HTML元素之间的区别

二、盒子模型

三、浮动(Float)

四、定位(Position)

一、标准流

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

块级元素

霸占一行，不能与其他任何元素并列
能设置宽与高

行内元素

与其他元素并列、
不能是指宽与高，默认的宽度就是文字的宽度

与HTML元素之间的区别

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

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

二、盒子模型

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

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

一张图解释一下：

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

CSS核心内容：标准流、盒子模型、浮动、定位相关推荐

CSS核心内容-标准流、盒子模型、浮动、定位
CSS核心内容-标准流.盒子模型.浮动.定位,了解了核心内容才能用CSS设计出一个简单的页面一.基础在了解核心内容之前需要先了解HTML中的两种标签:块级元素,行内元素: 块级元素:一个块级元素占 ...
前端学习 day4 : 盒子模型,浮动,定位
1.居中问题 text-align是让块元素中的内容在块元素的范围内水平居中如果设置块元素中的内容的属性line-height的高度等于块元素高度的话,那么该内容垂直居中 2.盒子边框的设置 2.1 ...
css标准流/非标准流盒子模型
流:网页设计中就是指元素(标签)排列的方式标准流:元素在网页中就像流水,排在前面的先出现,排在后面的后出现,默认布局方式 <!DOCTYPE html> <html>< ...
定位会完全压住标准流盒子里面的内容（HTML、CSS）
定位会完全压住标准流盒子里面的内容(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><me ...
css 标签显示模型盒子模型浮动背景属性
标签显示模式(display) 块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建. 常见的块元素有< ...
【CSS学习（三）盒子模型、边距重叠浮动、清除浮动】
盒子模型盒子模型在CSS学习中尤为重要,对盒子模型的深刻理解有利于 CSS开发水平的提示,在开发中遇到难以理解的现象,往往是因为对模型的理解不够. 盒子模型这个名词来自英文里面的Box modelm ...
牛腩之CSS核心内容
根据牛老师的讲解,CSS的核心内容大致为四个部分:标准流.盒子模型.浮动和定位. 在学习核心内容之前,先来了解两个基本概念:块级元素和行内元素. 根据CSS规范的规定,每一个网页元素都有一个displ ...
CSS核心内容整理 - (中)
2019独角兽企业重金招聘Python工程师标准>>> 本文是CSS核心内容整理的第二篇,承接上一篇的内容继续对CSS的一些重要内容进行整理,推荐先看完这个系列的上一篇. 四. 页 ...
CSS三大模块(一)：盒子模型
目录前言: 一.盒子模型 1.盒子模型的内容 2. 盒子模型的总宽度和总高度二.盒子模型的相关属性 1.边框属性(border) (1). 边框线样式: border-style: 属性值; (2 ...

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

一、标准流

块级元素

行内元素

与HTML元素之间的区别

二、盒子模型

三、浮动(Float)

四、定位(Position)

CSS核心内容：标准流、盒子模型、浮动、定位相关推荐

最新文章

热门文章