1.浮动的特性：

　　1.浮动的元素脱标

　　2.浮动的元素互相贴靠

　　3.浮动的元素有“字围”效果

　　4.收缩的效果

　　前提是标准文档流，margin的垂直方向会出现塌陷问题。

　　如果盒子居中：margin：0 auto；如果盒子浮动了，margin：0 auto；就不起作用了

　　需求：让浮动的盒子居中

　　　　　　给浮动的盒子，加一个父盒子，设置宽度和浮动盒子一样，并且overflow：hidden；设置该盒子margin：0 auto；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            padding:;

            margin:;

        }

        .box{

            width: 400px;

            height: 300px;

            background-color: red;

        }

        .main{

            width: 100px;

            overflow: hidden;

            margin: 0 auto;

        }

        .child{

            width: 100px;

            height: 100px;

            background-color: green;

            margin: 0 auto;

            float: left;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="main">

            <div class="child">

            </div>

        </div>

    </div>

</body>

</html>

文本水平居text-align：center；

文本垂直居中：行高=盒子的高度

text-indent:2em; 首行缩进两个字符

font-weight:800;字体粗细（100-900）

font-family：“华文行楷”

font：12px/240px "华文行楷"

盒子如果浮动了，那么垂直方向上不会出现塌陷问题

css中有三种方式让盒子“脱标”

　　1.浮动float

　　2.绝对定位

　　3.固定定位

一些知识点

backkground-image：精灵图技术

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .box{

            width: 24px;

            height: 35px;

            background: url(https://img.alicdn.com/tfs/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png);

            /*图片默认水平平铺，垂直平铺，这样就不平铺了*/

            background-repeat: no-repeat;

            background-attachment: fixed;

            background-position-x:;

            background-position-y: -162px;

            /*固定定位*/

            /*background-attachment: fixed;*/

            background: url(https://img.alicdn.com/tfs/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png) no-repeat 0 -162px;

        }

    </style>

</head>

<body>

    <div class="box">

    </div>

</body>

</html>

2.定位

默认：position:static; 静态定位

                position: relative; 相对定位

                          absolute;绝对定位

                          fixed;固定定位

            - ralative:

                如果仅仅设置标准文档流的盒子为相对定位，那么跟普通的盒子没有任何区别

                不脱标

                参考点：

                    相对于原来的位置

                形影分离

                作用：

                    1.层级提高，做压盖（不建议）

                    2.布局方案 "子绝父相"的参考

            - absolute

                1.脱标：不占位置

                2.层级提高

            参考点：

                单个盒子

                如果以top描述，是以页面的左上角为参考点（跟浏览器的左上角区分）

                如果以bottom描述，是以浏览器的左下角为参考点

                父子盒子之间

                如果父辈盒子设置相对定位。子盒子设置绝对定位，以父辈盒子的0,0为参考点

懒得打字

css定位篇的更多相关文章

  1. html+css定位篇

    position absolute相对于父元素移动,不在父元素范围内时,可能和其他元素重叠 relative相对于初始位置来进行移动 fixed相对于浏览器进行定位,无论滑轮如何滚动,始终出现在浏览器 ...

  2. 深入css布局篇(2) — 定位与浮动

    深入css布局(2) - 定位与浮动      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...

  3. 第八篇 CSS定位

    CSS定位 CSS除了内外边距控制元素,还有定位,看到“定位”两个字,同学们应该就能清楚,它能够做什么.   在刚学习的时候,我也经常使用定位,来控制元素的位置,但是初学的同学可能会注意不到定位的一些 ...

  4. CSS定位:几种类型的position定位的元素

    当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来 ...

  5. 深入css布局篇(3)完结 — margin问题与格式化上下文

    深入css布局(3) - margin问题与格式化上下文      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...

  6. selenium之css定位小结

    前言 大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求.css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁.这一篇css ...

  7. Selenium CSS定位语法

    大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求.css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁.这一篇css的定位 ...

  8. 自动化测试-6.selenium的css定位

    前言 大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求.css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁.这一篇css ...

  9. 2.4 CSS定位

    前言 大部分人在使用selenium定位元素时,用的是xpath定位,因为xpath基本能解决定位的需求.css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁.这一篇css ...

随机推荐

  1. 浅谈PHP随机数安全的分析

    之前在身边有很多学PHP的朋友写一些小程序的时候,很多时候会使用PHP随机数函数rand()和mt_rand()函数去生成随机数 可是,随机数真的随机吗?这篇文章讲从多个实例中探讨随机数,当然,有写作 ...

  2. 关于Hive中的join和left join的理解

    一.join与left join的全称 JOIN是INNER JOIN的简写,LEFT JOIN是LEFT OUTER JOIN的简写. 二.join与left join的应用场景 JOIN一般用于A ...

  3. 《ucore lab3》实验报告

    资源 ucore在线实验指导书 我的ucore实验代码 练习1:给未被映射的地址映射上物理页 题目 完成do_pgfault(mm/vmm.c)函数,给未被映射的地址映射上物理页.设置访问权限的时候需 ...

  4. vim 常用命令总结（排版精良，内容优质）

    1. 格式说明 <xxx>:尖括号的含义表示这是一个占位参数,也就是必须有的参数,实际输入的内容是 xxx [xxx]:方括号的含义表示这是一个可选参数,也就是可有可无,实际输入的内容是 ...

  5. 以环形角度理解php数组索引

    array_slice ( array $array , int $offset [, int $length = NULL [, bool $preserve_keys = false ]] ) : ...

  6. Python-19-元类

    一.定义 元类就是类的类 type是python的一个内建元类 类的两种定义方式 # 定义类的两种方式 class Foo(object): def __init__(self, name, age) ...

  7. Mysql的多机配置（主从、主主等）

    前言: 最近这几天给弄了2台机器,部署centlos7.5,除了公司的一些模块外,给2台机器做了下主主备份. 其实网上资料一大堆,但是感觉按照别人的思路不如自己的舒服,虽然这玩意思路差不多,但是还是在 ...

  8. Python 编程入门

    我喜欢直接了当, 这次主要是推荐蟒营大妈的 Python 入门课(https://py.101.camp), 还有不到一周就要开课了, 欢迎转发推荐~ 点击"夏日大作战:从小白到小能手的 P ...

  9. Java基础IO类之字节数组流

    package IODemo; //字节数组流 :内部维护这着一个字节数组,我们可以利用流的读取机制来处理字符串 无需关闭,不会报IO异常 // ByteArrayInputstream ByteAr ...

  10. Linux追加磁盘扩展

    一:查看磁盘空间信息: fdisk -l 查看当前的系统的磁盘空间的情况: 二:增加分区: fdisk /dev/sda 键入n,增加一个分区,得到: 键入 p,主分区,并键入3(编号): 默认起始扇 ...