笔记《精通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 ...
随机推荐
- iOS攻城狮修炼之路
自己总结的学习iOS的笔记,打造一个全面的知识体系,iOS攻城狮修炼之路[持续更新中] iOS学习笔记01-APP相关 iOS学习笔记02-UIScrollView iOS学习笔记03-UITable ...
- hrbust oj 1536 Leonardo's Notebook 置换群问题
题目大意: 给出一个A~Z的置换G,问能否找到一个A~Z的置换G' 能够用来表示为 G = G'*G' 由定理: 任意一个长为 L 的置换的k次幂,都会把自己的每一个循环节分裂成gcd(L, K)份, ...
- KMP超强模板贴一份
)== ) { ); next[]=; ; ;i<=n;i++) { ]!=str[i]) j=next[j]; ...
- alpha版出炉,实现win2008 service的session 0穿透
指定用户名,拿最小session,实现和用户ui交互. 这样,搞windows的自动化部署,就可以向前一大步啦. 比以前用psexec要用户名密码,指定session要先进多啦. 安全保密性也提高了. ...
- zoj——3556 How Many Sets I
How Many Sets I Time Limit: 2 Seconds Memory Limit: 65536 KB Give a set S, |S| = n, then how ma ...
- Oracle Multitenant Environment (五) Create PDB
Creating and Removing PDBs with SQL*Plus This chapter contains the following topics: About Creating ...
- MVC中动作方法三个特性以及解决同名方法冲突
一.Http请求谓词特性(解决方法同名冲突问题的一个方案) 关于Http谓词特点:经常使用,如果不加上该特性,默认动作方法接收所有谓词的请求一般开发中都会加上谓词,限定请求谓词类型 二.NonActi ...
- 关于new和malloc以及delete和free能否够混用
/* *1>当申请的空间是内置类型时,delete和free能够混用 *2>当申请的空间是自己定义类型时, * 1>若没有析构函数.delete和malloc能够混用.有 ...
- 2014年辛星starphp第一节设置入口文件以及App类
*********************本节目标**************** 1.首先是我们的框架大致布局,我们即将写成的这个框架.它的入口文件统一为star.php.它须要做的一些事,比方载入 ...
- 虚拟机ODPS初体验
大数据竞赛的第二阶段须要通过远程桌面的方式连接阿里提供的虚拟机, 全部操作都是在远程主机上进行. 在搞清楚文件回传方式之前真是各种麻烦(写博客都没有办法贴代码). 用了两个上午初步上手, 希望接下来进 ...