精通css笔记（第二章）

最新推荐文章于 2022-12-12 21:39:42 发布
最新推荐文章于 2022-12-12 21:39:42 发布
阅读量192 收藏
点赞数
分类专栏： 笔记 文章标签： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zouying8721651/article/details/52983200
版权

1.框模型
填充，边框，空白边可选，默认为0
这里写图片描述
这里写图片描述
这里写图片描述

2.定位概述
（1）视觉格式化模型（块元素〈div〉，行内元素〈span，strong〉
用display属性改变框模型，block可以把行内元素表现像块 none则生成元素没有框，框机器内容不显示，不占用文档中的空间
css三种定位机制：普通流，浮动，绝对定位
（2）相对定位、
相对于起点进行移动
这里写图片描述
（3）绝对定位
这里写图片描述
Z-index控制框的堆放次序
（4）固定定位
（5）浮动模型（float）
这里写图片描述
这里写图片描述
对于clear不是很清楚，有空可以再看看

zouying8721651
关注
专栏目录
精通CSS：高级web标准解决方案之读书笔记（一）
huangxiaohu_coder的专栏
05-16 1386
第一章 1、ID名和类名的区别？         区别：一个ID名只能应用于页面上的一个元素，而同一个类名能够用于页面上的任意多个元素；类非常适合标示内容的类型和其他相似的条目；类应用于概念上相似的元素，而ID名用于不同的唯一的元素。 2、为元素命名的一些规则？         原则：在分配ID名和类名的时候，一定要尽可能表示名称与表现形式无关，应该根据他们是什么来命名，而不是他们的变现形
DIV+CSS学习笔记总结篇
qianduan666a的博客
07-29 912
DIV+CSS学习笔记总结篇 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位： web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望： 未来IT行业企业需求最多的人才 结合最新的html5抢占移动端的市场 自己创业做老板 随着互联网的普及web开发成为企业的宠儿和核心 web职业发展目标： 第一、梳理知识架构 负责内容的HTML 负责外观的css（层叠样式表） 负责行为
CSS核心：框模型与视觉格式化模型[总览]
猫沙盆
07-16 3998
视觉类型的媒体 根据CSS的视觉格式化模型（Visual formatting model）的规则来处理文档树中的元素，从而将(X)HTML转化成制作者设计的样子。我曾在《别具光芒：CSS属性、浏览器兼容与网页布局》一书中，讲解过这些概念，但是很多读者反映内容比较晦涩难懂，所以，我再次重新尝试，把这部分内容重新来编排一下，看看是否能把这些重要的内容讲得更易懂一些。
精通CSS高级Web标准解决方案（2-2 可视化格式模型之定位概述）
weixin_33924220的博客
06-08 99
视觉格式化模型 块级元素（块框）、行内元素（行内框），可以使用display改变生成的框的类型，display:block让行内元素（比如<a>）表现的跟块级元素一样，display：none让生成的元素没有框，框及其里面的内容不再显示，不占用文档中的空间。 CSS的三种基本定位机制：普通流、浮动、绝对定位。除非指定，默认使用普通流，元素框的位置由元素在(X)html中的位置决定。...
css_07 | CSS——CSS 基本视觉格式化：① “块盒子”格式化
weixin_33896069的博客
04-19 146
本文推荐 PC 端阅读~ 本文版权归 “公众号 | 前端一万小时” 所有，未经授权，请勿转载！ 复制代码 css_07 复制代码 1. 块级元素和行内元素分别有哪些？ 空（void）元素有那些？块级元素和行内元素有什么区别？ 2. IE 盒模型和 W3C 盒模型有什么区别? 3. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例？ 4. 关于 .ite...
基本概念
08-03 100
1.基本概念 视觉格式化模型（visual formatting model）：CSS的一种机制，它规定了页面中的多个盒子如何布局。 包含块：每个元素都有一个包含块，它是指元素在页面中摆放的区域 通常情况下，元素的包含块是它父元素的内容盒（content-box） 根元素的包含块是初始化包含块（initial containing block）。 2.定位体系概述 ...
7.基本视觉格式化
趁着年轻，多学学
12-15 241
正常流：大多数元素都在正常流中，浮动或定位元素就不在正常流中了。 完整盒模型图，见P179 记住height width是不包含padding更别说说border了  水平格式化 水平格式化：width影响的是内容区的宽度，而不是整个可见的元素框。 可见元素框的宽度是220px，整个元素框的宽度为260px 水平属性 margin-left、border-left、padding-
尚硅谷 Vue 2.0 + Vue 3.0 入门到精通教程学习笔记 （二）
最新发布
weixin_44566194的博客
12-12 389
本文主要记录尚硅谷Vue学习教程笔记的第二章部分——Vue 组件化编程：包括模块与组件、模块化与组件化、非单文件组件和单文件组件的知识。
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记 （一）
weixin_44566194的博客
12-08 3145
本文为总结尚硅谷Vue2.0+Vue3.0 的学习笔记系列的第一章——Vue的核心，包含Vue简介、模板语法、数据绑定、MVVM模型、事件处理，计算属性与监视、class与style绑定、列表渲染、过滤器、内置指定和自定义指令以及Vue生命周期等知识点
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Only-CYY的博客
07-05 3864
【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
CSS学习笔记——视觉格式化模型 visual formatting model
weixin_34227447的博客
11-01 164
CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制。他有一套既定的规则（也就是W3C规范），规定了浏览器该怎么处理每一个盒子。以下内容翻译自W3C官方文档，其中加上了自己的一些理解。相关链接：https://www.w3.org/TR/CSS2/visuren.html#block-boxes。 1、可替换元素（Replaced e...
CSS——可视化格式模型
weixin_33724659的博客
05-16 150
CSS的可视化格式模型 CSS中规定每一个元素都有自己的盒子模型（相当一规定了这个元素如何显示）； 然后可视化格式模型则是把这些盒子模型按照规则摆放到页面上，也就是如何布局； 换句话说，盒子模型规定了怎么在页面上摆放盒子，盒子的相互作用等等； CSS的可视化格式模型就是规定了浏览器在页面中如何处理文档树 1、关键字： 包含块（Con...
CSS视觉格式化模型
aiguke3395的博客
04-04 140
CSS视觉格式化模型（visual formatting model）是用来处理文档并将它显示在视觉媒体上的机制。这是CSS 2.1的一个基础概念。视觉格式化模型根据CSS盒模型为文档的每个元素生成0，1或多个盒。每个盒的布局由如下内容组成： 盒尺寸：明确指定，受限或没有指定 盒类型：块级盒（block-level box），行内级别盒（inline-level box），...
CSS学习笔记——包含块 containing block
weixin_34283445的博客
10-31 87
以下内容翻译自CSS 2.1官方文档。网址：https://www.w3.org/TR/CSS2/visudet.html#strut 有时，一个元素的盒子的位置和尺寸根据一个确定的矩形计算，这个确定的矩形叫这个元素的包含块。一个元素的包含块根据以下规则确定： 1、根元素所在的包含块叫初始包含块 initial containing block。对于连续媒体设备（continuous medi...
深入理解盒子模型
哎
03-12 762
css盒子模型具备的属性：内容(content)、填充(padding)、边框(border)、边界(margin) 每个盒子都有：边界、边框、填充、内容四个属性； 每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，当然也可以分别设置~ 记忆时可以将此想象为一个表，从12开始逆时钟旋转，所以属性设置的顺序便为上、右、下、左~ 并且当某一方向缺失时，会去对面找他
CSS—BFC&视觉格式化模型
雷雨天的雷胖子
01-15 196
目录 一、BFC 二、视觉格式化模型 一、BFC BFC全称Block Formatting Context，翻译为块格式化上下文，是由CSS2.1规范定义的一个关于CSS渲染定位的概念。BFC是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。 如下所示为，触发一个盒子的bfc，将其转化为bfc元素的方法。 方法一: position:absolute/fix...
HTMl
weixin_30399055的博客
06-10 92
※视觉格式化模型 1．视觉格式化模型（visual formatting model）：CSS的一种机制，它规定了页面中的多个盒子如何布局。 2．视觉格式化模型是一套非常复杂的机制，包含错综复杂的CSS规范。 ※视口 1．视口（viewport）：可视窗口，通常指浏览器的可视区域 2．视口的尺寸仅受到浏览器可视窗口大小的影响，和内容无关 3．当网页内容的尺寸超过视口尺寸时，浏览器会...
视觉格式化模型（visual formatting model） CSS布局
Abudula__的博客
08-23 442
前面我们已经学习了盒模型（box model），知道了元素会被渲染成一个个盒子。那么这些盒子在屏幕上的位置又是怎么放置的呢？这就是我们现在要学习的——CSS 视觉格式化模型(visual formatting model)。视觉格式化模型是 CSS 布局的一个基础理论体系，需要你有一定的 CSS 功底，所以一时半会是很难掌握的，但是只要你一掌握，对于 CSS 布局就会豁然开朗。（建议整个 CSS ...
精通CSS：高级Web标准解决方案第二版
在《精通CSS·高级Web标准解决方案》第二版中，作者们深入浅出地讲解了CSS这一关键的网页设计元素，不仅涵盖基础，更强调实践应用和最新技术。CSS3的引入为网页设计师提供了更多创新的可能性，如边框半径、渐变、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值