CSS(四)float 定位
一、文档流
网页默认的定位方式
1.行级元素: 从左到右
2.块级元素: 从上到下
文档流的流动方式 从右下 到 左上 ↖
二、浮动
1、浮动的定义 , 是元素脱离文档流 遇到父级边界 或相邻浮动元素 停止
2、特点
a)浮动元素不会超过父元素的边框
b) 浮动元素默认不会重叠
c)浮动元素只能左右浮动 不能上下
d) 浮动了 就变成了 行级块元素
3.浮动属性
none left right
4.清除浮动
clear : left right both
清除浮动的方式
1.在浮动元素下面新建一个 div 给他 添加 clear:both
讨厌啊 这个根本就不可能这么用的 但是为啥还要往上写啊 。。。谁让当时学的时候 老师也是这么讲的 循序渐进 的会更好一点吧 not worry
2.利用伪元素
.clearFloat: after {
display:block;
clear:both;
content: '';
visibility: hidden;
height:;
}
.clearFloat(zoom:1);
定位
position : absolute relatave fixed static(默认)
偏移属性 top bottom left right
相对定位 relative 相对于自身 原来的位置 并且 保留原有的位置
绝对定位 absolute 相对于 最近有定位的父级
z-index:1 (值越大权重越高) 解决 定位后 堆叠 问题
固定定位 fixed 相对于视口定位
居中的几个方法方法点我! 我们走
CSS(四)float 定位的更多相关文章
- (转)CSS+DIV float 定位
来自:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能 ...
- CSS四种定位及应用
定位(position) 如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上. PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不 ...
- 前端学习笔记--CSS布局--float定位
1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性 案例: 一列三行布局: <!DOCTYPE html> <ht ...
- css四种定位
概述:元素定位属性主要包括的模式和边偏移两部分,也就是说以后定位要和边偏移量搭配使用.边偏移加定位定位模式才能构成一个完整的定义方式. 偏移量说明: 边偏移属性 描述 top: 顶端偏移,定义元素相对 ...
- CSS浮动、定位
这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...
- HTML和CSS高级指南——定位详解
本文由大漠根据Shay Howe的<An Adavnced Guide to HTML & CSS>第二课<Detailed Positioning>所译,整个译文带有 ...
- CSS 布局Float 【0】
float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为“文本环绕”.在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图 ...
- css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...
- 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作
一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...
- CSS中的定位机制
CSS3 中有三种定位机制 : 普通文档流 (text)| 浮动(float) | 定位(position) 普通文档流 就是CSS中默认的文本文档 普通流中,元素位置由文档顺序和元素性质决定,块级元 ...
随机推荐
- Hadoop Yarn 安装
环境:Linux, 8G 内存.60G 硬盘 , Hadoop 2.2.0 为了构建基于Yarn体系的Spark集群.先要安装Hadoop集群,为了以后查阅方便记录了我本次安装的详细步骤. 事前准备 ...
- TortoiseSVN的安装和使用
TortoiseSVN是windows平台下Subversion的免费开源client. 一般我们都是先讲讲server的配置.然后再讲client的使用,可是在TortoiseSVN上.却能够反过来 ...
- mongodb 复制集
mongodb 复制集 复制集简介 Mongodb复制集由一组Mongod实例(进程)组成,包含一个Primary节点和多个Secondary节点,Mongodb Driver(客户端)的所有数据都写 ...
- Hibernate学习---基本介绍+作用+配置
从今天开始重新学习(以前学的太匆忙)Hibernate,这篇文章主要就一下几点进行讲解和说明: Hibernate的基本介绍 Hibernate的作用 Hibernate基本配置 Hibernate的 ...
- Anaconda多版本Python管理
Anaconda是一个集成python及包管理的软件,记得最早使用时在2014年,那时候网上还没有什么资料,需要同时使用py2和py3的时候,当时的做法是同时安装Anaconda2和Anaconda3 ...
- C#又能出来装个B了。一步一步微信跳一跳自动外挂
PS:语言只是载体.思维逻辑才是王道 前天看见了个python的脚本.于是装python.配置环境变量.装pip.折腾了一上午,最终装逼失败. 于是进入博客园,顶部有篇文章吸引了我 .NET开发一个微 ...
- Elasticsearch索引自动删除
简介 脚本分2部分,1部分查找符合条件的索引名,2脚本调用1脚本,进行删除操作 脚本 查找符合条件的,默认大于30天 # coding:utf-8 __author__ = 'Jipu FANG' f ...
- 5.Nginx作为web缓存服务器
Nginx作为web缓存服务器 从0.7.48版本开始,Nginx支持类似Squid的缓存功能.Nginx的web缓存服务主要由proxy_cache相关命令集合fastcgi_cache相关命令集构 ...
- 【quickhybrid】iOS端的项目实现
前言 18年元旦三天内和朋友突击了下,勉强是将雏形做出来了,后续的API慢慢完善.(当然了,主力还是那个朋友,本人只是初涉iOS,勉强能看懂,修修改改而已) 大致内容如下: JSBridge核心交互部 ...
- php使用websocket示例详解
一.php 中处理 websocket WebSocket 连接是由客户端主动发起的,所以一切要从客户端出发.第一步是要解析拿到客户端发过来的 Sec-WebSocket-Key 字符串. 复制代码代 ...