1、文档流介绍

网页布局的核心就是利用css来摆放盒子,

把盒子摆放在合适的位置。

css的定位机制有以下3种(网页布局一般需要3种搭配使用):

a、普通流(标准流)

b、浮动

1、浮动只有左右。

2、浮动后找离他最近的父元素靠左/右对齐。

3、!!!一个父盒子里的子盒子,如果其中一个子元素有浮动的话,则其他子元素都需要浮动,这样才能一行显示。

4、浮动飘在标准流的上面,压住标准流。

5、浮动元素有哪些特性?(浮动影响盒子显示模式)

  1、块级元素浮动后会有行内块特性

  2、行内元素浮动后也具有行内块特性

6、!!!浮动的使用方式:浮动首先要用标准流父级包裹起来

!!!浮动的元素要用标准流的块级包裹

浮动的目的:就是为了让多个块级元素一行显示

7、 浮动的特性:

c、定位

  后面更新。。。

2、版心和布局流程

版心:   

布局流程:

 

注意:先看行再看列,一行一行的做。

  常见案例:

一:

二:所有列的必定有个行包裹,类似于表格(因为浮动会影响后面的别人)

css学习_css浮动的更多相关文章

  1. CSS学习之浮动

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...

  2. css学习_css清除浮动

    若元素没有设置宽高,那元素实际宽高是被内容撑起来, 若元素自己有设置宽高,那实际面积于自己的盒子模型有关 1.清除浮动的本质 清除浮动主要是为了解决父级元素因为子级浮动而引起的内部高度为0的问题. ( ...

  3. CSS学习摘要-浮动与清除浮动

    以下从浮动到BFC的段落 摘自MDN 网络开发者 float 浮动 float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.该元素从网页的正常流动中移除,尽管仍然保持部 ...

  4. css学习_css布局案例

    1.中间栏先加载  !!!(若不是这个条件的话  ,那可以用  calc 或者flex布局来实现  中间栏自适应,左右栏定宽) 2.中间栏自适应   width:100% 3.左右栏固定宽 左中右  ...

  5. css学习_css补充知识

    1.渐进增强,优雅降级 2.浏览器前缀 3.背景渐变   4.css  验证工具 2种方式:第2种支持验证本地的css(推荐) 5.css压缩  ----(节约空间,节省带宽) 6.旋转轮播图 案例: ...

  6. css学习_css BFC特性(块级格式化上下文)

    块级元素会有bfc条件------可以触发bfc--------利用bfc的特性来解决一些问题 1.什么是BFC? 就是一个封闭独立的渲染的区域 2.什么元素会有BFC的条件? ---块级元素会有,行 ...

  7. css学习_css用户界面样式

    1.css用户界面样式 a.鼠标样式(记住几个兼容性好的) cursor:default/pointer/move/text; b.轮廓 outline outline:2px solid red: ...

  8. css学习_css常见属性用法

    1.元素的显示模式 a.被动转换:浮动.绝对定位.固定定位(转换为行内块元素特性的模式---不设置宽度时,模式换行为行内块模式后宽度是内容宽度.) b.主动转换:display:block  / in ...

  9. css学习_css定位

    1.定在某个位置:简称定位 2.浮动和定位的区别 定位的分类:定位模式 a.静态定位:(标准流) b.相对定位(不脱离文档流)---以自己左上角为基准点定位 c.绝对定位absolute  (拼爹型: ...

随机推荐

  1. java写桌面程序

    一:使用java swing开发窗口程序 简述: 1.文章内容主要是使用java swing类库开发一个小的窗口程序,然后使用exe4j发布成exe可以安装的程序,让初学者对使用java来做pc软件开 ...

  2. IoC之AutoFac(一)——简单使用和组件注册

    阅读目录 一.AutoFac简单使用 二.注册 2.1 注册方式 2.2 带参数注册 回到顶部 一.AutoFac简单使用 1 namespace AutofacDemo 2 { 3 class Pr ...

  3. 12C - PDB archive file

    在unplug一个pdb的时候,如果将扩展名定义为.pdb,oracle就会创建一个.pdb归档文件.包含pdb数据文件和xml元数据文件的压缩文件.创建archive file之后,就不用分开拷贝数 ...

  4. 动态绑定事件到特定dom元素上,包含新增加的

    $('body').on('click', 'a.detail-data', function (e) { //动态事件绑定 为body元素下所有的a.detail-data元素添加一个事件 包括新增 ...

  5. CentOS 6.5 x64下查找依赖包,或用YUM安装

    查看某个命令YUM上的安装源 1)当某个命令不存时进行查询所依赖的包,如:pstree [root@localhost ~]# yum provides pstree 已加载插件:fastestmir ...

  6. [转]Redis cluster failover

    今天测试了redis cluster  failover 功能,在切换过程中很快,但在failover时有force 与takeover 之分 [RHZYTEST_10:REDIS:6237:M ~] ...

  7. 【OCR技术系列之八】端到端不定长文本识别CRNN代码实现

    CRNN是OCR领域非常经典且被广泛使用的识别算法,其理论基础可以参考我上一篇文章,本文将着重讲解CRNN代码实现过程以及识别效果. 数据处理 利用图像处理技术我们手工大批量生成文字图像,一共360万 ...

  8. python模块import具体用法

    同级目录 import 文件名 form 文件名 import * 子目录 import 目录名.文件名 form 目录名.文件名 import * 不同目录 先导入sys包,然后把对应的目录加入pa ...

  9. go语言关键字图示

    Go语言一共有25个关键字,除了select,上文基本上已经一网打尽了.为了加深印象,我们用一张结构图来说明一下: 这张图如果看不清的话,我们将其拆成两张图,再注掉分支流程那部分的局部图: 分支流程部 ...

  10. tracert traceroute

    二者都用于探测数据包从源到目的经过路由的IP,但两者探测的方法却有差别.不同点:一.应用环境不同tracert是应用在windows下.traceroute则是应用在linux/BSD/router/ ...