笔记《精通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 ...
随机推荐
- [luoguP3146] [USACO16OPEN]248(区间DP)
传送门 f[i][j]表示区间 i-j 合并的最大值 转移: 若f[i][k] && f[k+1][j] && f[i][k] == f[k+1][j] --> ...
- 关于${ctx}拿不到值的问题
当项目开发时我们喜欢用 <c:set var="ctx" value="${pageContext.request.contextPath}"/>来 ...
- 控制公司(codevs 2051)
题目描述 Description 有些公司是其他公司的部分拥有者,因为他们获得了其他公司发行的股票的一部分.例如,福特公司拥有马自达公司12%的股票.据说,如果至少满足了以下三个条件之一,公司A就可以 ...
- tyvj1271 零式求和
描述 请考虑一个由1到N(N=3, 4, 5 ... 9)的数字组成的递增数列:1 2 3 ... N.现在请在数列中插入“+”表示加,或者“-”表示减,抑或是“ ”表示空白(例如1-2 3就等于1- ...
- 微信小程序初探(二):阅读官方demo源码
阅读demo有助于理解逻辑,而且demo源码中应该包含了框架开发人员想要表达的意思的精华,先从app.js着手来阅读. 附带贴下说明: https://mp.weixin.qq.com/debug/w ...
- T1683 车厢重组 codevs
http://codevs.cn/problem/1683/ 时间限制: 1 s 空间限制: 1000 KB 题目等级 : 白银 Silver 题目描述 Description 在一个旧式的火车 ...
- RMAN RECOVERY
Data Recovery Advisor The health monitor and the ADR The capabilities and limitations of DRA using t ...
- Javascript: 动态显示进度条
{% if not config.exec_id == '' %} <br /> <div class="progress"> <div class= ...
- nodejs 安装express
在命令行中执行 "npm install -g express"等待下载并且自动完成安装.测试express完成安装的一个方法就是查看其版本号,执行命令 “express -V”正 ...
- 【CV论文阅读】Dynamic image networks for action recognition
论文的重点在于后面approximation部分. 在<Rank Pooling>的论文中提到,可以通过训练RankSVM获得参数向量d,来作为视频帧序列的representation.而 ...