1 浮动定位
    1、普通流定位
        普通流,由称为文档流
        块级元素:从上到下一个一个的排列
        行内元素:一行内从左到右的排列
    2、浮动定位
        2.1、什么是浮动定位
        将元素排列在普通流之外,即脱离文档流
        浮动元素不会占据页面空间
        浮动元素会放置在“包含框”的左边或右边
        浮动元素依旧位于包含框之内
        浮动元素可以向左或向右浮动,知道碰见包含框的边缘或另一个已浮动的元素框为止
        2.2、特点
            1、浮动元素边缘不会超过器父元素的边缘
            2、浮动元素不会重叠
            3、浮动知道左右浮动,不会上下浮动
            注意:非块级元素浮动的话, 将会变成块级元素,允许修改width和height
        2.3、处理问题
            1、让块级元素在同一行内显示
            2、修改行内元素的width和height
        2.4、浮动属性
            属性:float
                取值:
                none
                left
                right
            清除浮动所带来的影响:
            属性:clear
            取值:left
                right
                both
        2.5、子级元素的浮动,伪复层元素所带来的影响
            如果一个元素的所有子级内容都是浮动的,那么他的高度就会变成0
            解决方案
            1、设置父容器高度
            2、设置父元素的overflow:hidden;
            3、在父元素中,增加一个空元素,添加clear:both;
2、显示方式
    2.1、display
        none:生成元素没有框,不占据页面空间,隐藏
        block:按块级显示
        inline:按行内方式显示
        inline-block:行内快,所有的元素在一行内显示,允许修改width和height
    使用场合:
        1、控制元素的显示与隐藏
            隐藏:display:none
            显示:
                块级:display:block;
                行内:display:inline;
        2、将行内元素变成块级或行内块
        目的:修改行内元素的宽和高
    2、显示效果
        2.1、visibility
        可见性
        取值:
        visible:默认的,可见的
        hidden:元素不可见,占据页面空间

问题:visibility:hidden 占据页面空间与display:none的区别 不占据页面空间
        2.2、opacity
            透明度
            取值:0-1
            opacity:0.5;
        3、vertical-align
        垂直方向对齐
        td
        img
            取值:
            baseline:默认,基线对齐
            top:顶部对齐
            bottom:底部对齐
            middle:居中对齐
            放在img上,控制的是img左右两端文本的垂直对齐方式
        4、光标
            改变鼠标的显示效果
            属性:cursor
            取值:
            default
            pointer:小手
            crosshair:+
            text:I
            wait:等待
3、相对定位
    3.1、什么是相对定位
    元素框会相对与他原来的位置偏移某个距离
    3.2、如何用
     position:relative
    left:尺寸
    right:尺寸
    3.3、什么时候用
    元素本身位置的微调
    配合绝对定位使用
4、绝对定位
    4.1、定义:脱离文档流 不占据页面空间
    4.2、初始位置
    相对与最近的已经定位的元素 那么参考位置相对于body进行定位
    4.3、如何使用
    position:absolute;
    4.4、使用场合
    弹出菜单

float浮动,定位的更多相关文章

  1. 归纳篇(一)CSS的position定位和float浮动

    近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...

  2. CSS| position定位和float浮动

    对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...

  3. HTML定位和布局----float浮动

    1.定位体系一共有三种 (1)常规流: (2)浮动定位 (3)绝对定位 2.float属性常用的语法: (1)float:left:左浮动 (2)float:right:右浮动 (3)float:no ...

  4. CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动

    分组和嵌套  分组选择器 ——————>   嵌套选择器 能适用于选择器内部的选择器的样式 p{ }: 为所有 p 元素指定一个样式. .marked{ }: 为所有 class="m ...

  5. CSS定位机制之浮动定位float

    一.浮动定位实现的效果 二.使用float实现浮动定位 三.使用clear属性清除浮动定位 四.浮动定位的应用(布局) 一.浮动定位实现的效果   (一).块元素(div)在文档流中默认垂直排列,如果 ...

  6. float、定位、inline-block、兼容性需注意的特性总结

    inline-block 特性: 1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题)[相当字体大小的一半] 5.ie6 ie7不支持块属性标签的inline ...

  7. css定位之浮动定位

    浮动定位可以是原本垂直排列的块级元素,变成水平排列 1浮动元素 float:left 或者float:right  这些浮动会直接碰到父容器的边界为止. 2设置了浮动的元素,元素会脱离标准文档流中,但 ...

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

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

  9. 对css float 浮动的学习心得

    css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...

随机推荐

  1. linux指令统计日志出现的次数

    cat  XXX.log|grep ''|grep '条件'| wc -l   单个条件统计 cat  XXX.log|grep ''|grep '条件1'|grep '条件2'|grep '条件3' ...

  2. 函数使用九:CAT_CHECK_RFC_DESTINATION

    此函数是用来检查RFC DESTINATION是否存在,RFC是否通 Import RFCDESTINATION          RFC目标  类型:RSCAT-RFCDEST Export MSG ...

  3. ASP.NET 后台页面无法识别服务器控件ID

    在学习asp.net 的时候 发现有个页面服务器控件无法识别,提示未知元素 解决方法 将不能识别服务器控件ID 的后台文件 类名改写,重新生成一次. 然后再改回来就可以了.

  4. [转载]Python正则表达式匹配反斜杠'\'问题

    转载自csdnblog:Python正则表达式匹配反斜杠'\'问题 在学习Python正则式的过程中,有一个问题一直困扰我,如何去匹配一个反斜杠(即“\”)? 一.引入 在学习了Python特殊字符和 ...

  5. “su: cannot set user id: Resource temporarily unavailable”处理及limits.conf说明

    一.背景介绍及问题处理 应用报账号不能ssh到主机,首先怀疑是防火墙或hosts.deny限制但查看之下并没有:接着使用其提供的账号密码确实不能登录,怀疑是密码被修改(有个和平时不太一样现像是输入密码 ...

  6. Tomcat和JDK版本的对应关系

    当我们在谈论Tomcat与JDK版本的对应关系的时候,我们实际上在讨论两个问题. 第一个是,我们想安装了某个版本的Tomcat(比如Tomcat7),需要安装哪个版本的JDK,才能把Tomcat运行起 ...

  7. git找回本地误删的文件

    不小心把本地的文件删除了一个? 想从仓库git pull 下拉? 对不起,这是不行的,虽然不知道为什么,但是我告诉你怎么回复这个文件. 首先,我们先用git status 看看工作区的变化 $ git ...

  8. 使用Java实现面向对象编程

    使用Java实现面向对象编程 源码展示: package cdjj.s2t075.com; import java.util.Scanner; public class Door { /* * Doo ...

  9. VMware 安装 centos,自定义分区

    具体查看:https://jingyan.baidu.com/album/6525d4b1799149ac7d2e9483.html?picindex=11

  10. Spring boot返回JSON类型响应及Content-Type设置

    一.背景 服务器软件用Spring boot开发,API调用的响应消息格式为JSON. 对端调用接口后无法解析响应. 抓包看Response的Body部分确实是正确的JSON格式字符串. 二.问题分析 ...