定位:定位在中间,放大缩小时也不会跑偏。

position:absolute;
top: 50%;
left: 50%;
margin: -270px 0 0 -455px;

解释:定位后,设百分比的位置,再设置外边距。

浮动:span等行内元素不能设置宽高,但在浮动后可以设置宽高。

 <style>
span {
width: 200px;
height: 200px;
background: red;
float: left;
}
</style>
<span>qqq</span>

css定位浮动总结的更多相关文章

  1. CSS定位——浮动定位

    CSS定位机制Ⅱ——浮动定位 float属性:进行浮动定位   left,right clear属性:清除浮动   left,right,both  ㈠  float属性 1.概述 ⑴div实现横向多 ...

  2. css定位 浮动 伪类 margin

    一,margin .标准文档流,margin在竖直方向的不叠加,以较大的为准 .使用margin: auto;的盒子必须有明确的width,并且只有标准文档流的盒子 才能使用margin: auto; ...

  3. 3 CSS 定位&浮动&水平对齐&组合选择符&伪类&伪元素

    CSS Position(定位):元素的定位与文档流无关 static定位: HTML元素的默认值, 没有定位,元素出现在正常的流中 静态定位的元素不会受到top,bottom,left,right影 ...

  4. 深入理解CSS定位—浮动模型

    前面我们讲到了绝对定位,在这篇文章中,我们将讲到3种定位模型中的浮动模型.主要参考 张鑫旭在慕课网的 深入理解float 那些年我们一起清过的浮动---by 一丝丝凉 精通CSS 注意:第二小节基本参 ...

  5. HTML学习笔记 css定位浮动及瀑布流案例 第十三节 (原创) 参考使用表

    #fd { width: 100px; height: 150px; background-color: forestgreen; float: left; } #sd { width: 150px; ...

  6. css清除浮动定位造成的异常

    清除浮动是为了解决高度塌陷的问题:内层有好几个div有宽有高,并且选择了浮动定位,但是外层的div却并没有设置宽高.在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动( ...

  7. CSS:CSS定位和浮动

    CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻 ...

  8. CSS定位(CSS定位概述、相对定位、绝对定位、浮动)

    CSS 定位属性 CSS 定位属性允许你对元素进行定位. 属性 描述 position 把元素放置到一个静态的.相对的.绝对的.或固定的位置中. top 定义了一个定位元素的上外边距边界与其包含块上边 ...

  9. CSS.04 -- 浮动float、overflow、定位position、CSS初始化

    标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right :  设置浮动的元素,脱离标准流 浮动的框可以向左或向右移动,直到它的外边缘碰 ...

随机推荐

  1. Ubuntu16.04安装Mono、MonoDevelop运行C#代码

    Ubuntu16.04安装MonoDevelop运行C#代码 在Ubuntu上安装Mono 运行下面代码授权注册repo源并更新软件列表: Add the Mono repository to you ...

  2. 注意@ Override不同版本的区别

    @Override注解用于方法的覆写上,它在编译期有效,也就是Java编译器在编译时会根据该注解检查是否真的是覆写,如果不是就报错,拒绝编译. 该注解很大程度解决我们的误写问题,比如子类和父类的方法名 ...

  3. LeetCode 47 Permutations II(全排列)

    题目链接: https://leetcode.com/problems/permutations-ii/?tab=Description   给出数组,数组中的元素可能有重复,求出所有的全排列   使 ...

  4. syslinux 和 grub

    syslinux是一个功能强大的引导加载程序,而且兼容各种介质.它的目的是简化首次安装Linux的时间,并建立修护或其它特殊用途的启动盘.它的安装很简单,一旦安装syslinux好之后,sysLinu ...

  5. s3接口认证说明

    S3 Authorization太绕,太头痛,下面解释说明: XS3 REST API基于HMAC(哈希消息身份验证码)密钥使用自定义HTTP方案进行身份验证.要对请求进行身份验证,您首先需要合并请求 ...

  6. 找到多个与名为“xxx”的控制器匹配的类型。如果为此请求(“{controller}/{action}/{id}”)提供服务的路由没有指定命名空间以搜索与此请求相匹配的控制器,则会发生这种情况。

    一次在建MVC 项目的进行开发的时候,因为后来想到了一个更好的项目名称,就把 Web项目的名称重命名 改了, 然后 程序集名称,默认命名空间,都改成新的了,刚建立的项目本身也不大,运行起来,总是报 & ...

  7. opengl导入obj模型

    在经过查阅各种资料以及各种bug之后,终于成功的实现了导入基本的obj模型. 首相介绍一下什么是obj模型 一.什么是OBJ模型 obj文件实际上是一个文本文档,主要有以下数据,一般可以通过blend ...

  8. Python面试网络编程和并发

    1.简述 OSI 七层协议. OSI 开放系统互联参考模型,它是理论的,参考模型 七层:物理层->数据链路层->网络层->传输层->会话层->表示层->应用层 2. ...

  9. 2018/03/19 每日一个Linux命令 之 touch

    touch 英文翻译为 触碰 很形象 touch [文件] 就像我就碰你一下,什么都不干..... 如果没有这个文件则我就新建这个文件 会修改这个文件的最后修改时间 没有的话则会产生一个0字节大小的空 ...

  10. sass的@at-root

    一.首先理解sass的嵌套中 &表示是什么? &表示整个选择器,而不单个class属性值或id属性值或tagName.例如下面一段代码: .a { .b { & { color ...