笔记《精通css》第3章 盒模型,定位,浮动,清理
第3章 盒模型,定位,浮动,清理
1.盒模型用到的属性width,height,padding,border,margin
普通文档流的上下垂直margin会叠加
2.块级框 与 行内框, 利用display属性来改变特性,display:block,display:inlne-block
3. 3种基本的定位机制:普通流,绝对定位,浮动
4.相对定位
是普通流定位的一部分,与文档流相关,根据自身原先的位置进行移动
无论是否移动都占据原来空间position:relative
设置top,right,bottom,left的属性值进行移动
5.绝对定位
不占空间与文档流无关,
根据距离最近的已定位的祖先元素进行定位position:absolute
text-align:top / right / bottom / left
固定定位
是绝对定位的一种position:fixed
差异是包含块是视口
6.浮动float
清理(p51)
float:left
float:riagt
clear:both / left /right / none(不允许两边/不允许左边/不允许右边/允许两边)
<br class="clear"/>
笔记《精通css》第3章 盒模型,定位,浮动,清理的更多相关文章
- 前端开发:css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- 2019.4.4 盒模型&定位&浮动
盒模型 盒模型 除了图片表单元素之外,基本所有标签都可以看做一个盒子 盒模型的要素 父子关系之间用padding 兄弟关系之间用margin margin padding border 后面跟的值的顺 ...
- css文档之盒模型阅读笔记
前段时间抽空仔细阅读了w3c的css文档关于盒模型方面的一些基础知识.边读边记录了一些要点,在此做些整理,与大家分享,如有理解有误之处,请不吝指教. 1.综述 文档中的每个元素被描绘为矩形盒子.渲染引 ...
- Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- 深入css布局篇(1) — 盒模型 & 元素分类
深入css布局(1)-- 盒模型 & 元素分类 " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...
- HTML和CSS前端教程05-CSS盒模型
目录 1. CSS盒模型 1.1 元素的尺寸 1.2. 元素内边距 padding 1.3. 元素外边距 margin 1.4. 处理溢出overflow 1.5. 元素的可见性Visibility ...
- css和css3弹性盒模型实现元素宽度(高度)自适应
一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...
- [浅谈CSS核心概念] CSS元素类型和盒模型
元素类型 在CSS中,HTML标签元素分为三种类型: 块状元素 内联元素(也叫行内元素) 内联块状元素 它们之间的区别在于: 块级元素会独占一行,内联元素和内联块状元素则都会在一行内显示 块状元素和内 ...
- CSS 常用语法与盒模型分析
CSS基础知识 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明 selector { property: value; property: value; ... property: va ...
随机推荐
- vue.js 利用组件之间通讯,写一个弹出框例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vim下多行注释与解注释
1.多行注释 (1)按esc进入命令行模式 (2)按下Ctrl+v,进入区块模式,并使用上下键选择需要注释的多行 (3)按下“I”(大写)键,进入插入模式 (4)输入注释符(“//”或“#”等) (5 ...
- objective-c 通告
1. 通告和委托的区别 通告也能传递与事件相关的数据.通告不同于委托的地方在于,通告是在对象执行完成动作之后产生,而不是之前.受到通告的对象没有机会建议是否要执行动作,而且对象的通告可以有多个监听者( ...
- [bzoj 1042][HAOI2008]硬币购物(用容斥原理弄背包)
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1042 分析: 解法很巧妙,用f[i]表示四种硬币A.B.C.D的数量不考虑的情况下弄成 ...
- Abstract factory抽象工厂--对象创建型
意图: 提供一个创建一系列相关或者相互依赖对象的接口,而无需指定它们具体的类. 别名:Kit 补充: 抽象产品A : (产品A1 和产品 A2) 抽象产品B : ( 产品B1 和 产品B2) 一般情况 ...
- android 视频开发2分之1(仿美拍,糗百)
近期比較忙,非常久没更新博客,今天我们仿一个美拍或者糗事百科的录像功能. 首先确认步奏: 1.打开摄像头: 2.開始录制: 3.支持分段录制,并支持分段删除: 4.把分段录制的视频进行合并: 不说废话 ...
- iOS推断当前控制器是否在显示
当点击一个cell或者button的事件,处理比較耗时,在异步线程中执行中.当子线程得到执行结果时可能不在当前控制器上了.此时我们须要取消子线程后边的事情. 此刻,当得到结果时须要推断是否在当前控制器 ...
- UML中类图的四种关系及其代码实现
在uml图中 最复杂的也就是泛化,实现.依赖,关联.这四种关系了,假设弄清了这几种关系那么在理解UML图的时候就会变得轻车熟路了! 假设你对着几种关系一点都不熟悉的话能够看一下uml中的四种关系.这篇 ...
- jenkins对接gitlab和git
1 需要的插件 jenkins的git插件和jenkins的gitlab插件. 2 对接gitlab 在系统配置中,随便起一个连接的名字,设置url,可以直接用ip地址,端口号默认是80,不需要写明. ...
- 2017iOS开发最新的打包测试步骤(亲测)
最近也是忙着修改项目,今天把最近遇到的问题和知识给大家分享一下. 有时候我们需要将我们的项目发给测试组进行bug测试,这时候我们就需要把自己的项目打包,生成一个二维码或者链接的形式,给测试组,接下来就 ...