定位:解决元素摆放的问题

使用定位可以将元素摆放到任意位置
分类
1、默认的定位
块元素垂直排列,行内元素左右排列,称之为流
流:元素有序排列而形成的队伍
特殊的定位
浮动定位:可以让块元素左右排列
分类:左浮动,右浮动
步骤:浮动的目标离队,目标的弟弟会跟上,目标达到指定位置
规则:目标会脱离流(队伍)
右浮动:可以让块倒序左右排列。
相对定位:可以让元素以自己为目标产生微小的漂移
绝对定位:可以让元素以父亲为目标产生很大的漂移
固定定位:可以让元素以窗口为目标产生巨大的漂移
后三种定位都是以某元素为目标产生漂移
 
下划线:text-decoration: underline;
首行缩进:text-indent: 2em;
行高:line-height: 1.6em;
边框合并:border-collapse:collapse;
/*奖鼠标形状设置为手形*/
.data input:hover{
cursor: pointer;
}

css笔记 定位的分类的更多相关文章

  1. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  2. CSS笔记集合

    CSS CSS 认识 CSS全称为层叠样式表,主要是用于定义HTML内容在浏览器内的显示样式. CSS样式由选择符和声明组成,而声明又由属性和值组成. CSS中注释语句:/*注释语句*/.Html中使 ...

  3. CSS:定位概述

    background-position 背景定位 如果,说浮动, 关键在一个 "浮" 字上面, 那么 我们的定位,关键在于一个 "位" 上. PS: 定位是我们 ...

  4. 【WEB自动化】【第一节】【Xpath和CSS元素定位】

    目前自动化测试开始投入WEB测试,使用RF及其selenium库,模拟对WEB页面进行操作,此过程中首先面对的问题就是对WEB页面元素的定位,几乎所有的关键字都需要传入特定的WEB页面元素,因此掌握常 ...

  5. CSS 的定位方式和含义

    CSS 的定位方式和含义 总结一下 CSS 的定位方式.CSS 的定位 position 是处理页面布局时非常重要的属性. CSS 中有 3 种基本的定位机制:普通流.浮动和绝对定位. 在没有指定的情 ...

  6. CSS中定位机制的想法

    对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制. position:static | relative | absolute | ...

  7. 转:Selenium之CSS Selector定位详解

    CSS selector定位 CSS(Cascading Style Sheets)是一种语言,它被用来描述 HTML 和 XML 文档的样式.  百度输入框: <input name=&quo ...

  8. CSS 中定位的使用

    position relative 设置区块基准点为左上角(相对定位 以区块的左上角为基准点 仍然会暂居原来的位置) a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元 ...

  9. css的定位机制

    牛腩新闻发不系统中遇到了CSS(Cascading style sheets),第一次接触,比较陌生还!因为CSS很多关于元素定位的问题,并且很多情况下元素的位置以像素精度计.一个不小心就很头疼,为此 ...

随机推荐

  1. python 面向对象专题(九):特殊方法 (二)__get__、__set__、__delete__ 描述符(二)覆盖型与非覆盖型描述符对比

    前言 根据是否定义__set__ 方法,描述符可分为两大类. 实现 __set__ 方法的描述符属于覆盖型描述符,因为虽然描述符是类属性,但是实现 __set__ 方法的话,会覆盖对实例属性的赋值操作 ...

  2. python 面向对象专题(四):封装、多态、鸭子类型、类的约束、super

    https://www.cnblogs.com/liubing8/p/11321099.html 目录 Python面向对象04 /封装.多态.鸭子类型.类的约束.super 1. 封装 2. 多态 ...

  3. SpringBoot2 整合JTA组件,多数据源事务管理

    本文源码:GitHub·点这里 || GitEE·点这里 一.JTA组件简介 1.JTA基本概念 JTA即Java-Transaction-API,JTA允许应用程序执行分布式事务处理,即在两个或多个 ...

  4. bzoj3383[Usaco2004 Open]Cave Cows 4 洞穴里的牛之四*

    bzoj3383[Usaco2004 Open]Cave Cows 4 洞穴里的牛之四 题意: 平面直角坐标系有n个点,从(0,0)出发,从一个点上可以跳到所有与它横纵坐标距离都≤2的点上,求最少步数 ...

  5. 绘图和可视化知识图谱-《利用Python进行数据分析》

    所有内容整理自<利用Python进行数据分析>,使用MindMaster Pro 7.3制作,emmx格式,源文件已经上传Github,需要的同学转左上角自行下载或者右击保存图片. 其他章 ...

  6. 少儿编程:python趣味编程第一课

    本文仅针对8-16岁的青少年,所以流程是按如何去教好中小学生走的,并不适合成人找工作学习,因为进度也是按照青少年走的 大家好,我是C大叔,从事少儿编程行业三年有余(2016年从事少儿编程行业,少儿编程 ...

  7. X-Tag实战:给博客加一个隐藏侧栏的功能

    X-Tag是什么? X-Tag是一个库,这个库可以让你用面向对象的方式定义自定义标签并给与其功能,很适合用来写一些网页小组件. xtag.create('x-clock', class extends ...

  8. Selenium自动化:有代码测试与无代码测试。这些你都懂了吗?

    大多数测试人员认为 Selenium是满足其测试自动化需求的自动化框架.作为全球测试人员使用的开放源框架, Selenium 无疑是测试人员适应日趋敏捷的公司的一种好方法.实际上, Selenium仍 ...

  9. 5.pandas新增数据列

    有的时候,表格自带的数据根本没有办法满足我们,我们经常会新加一列数据或者对原有的数据进行修改 还是接着上篇文章的数据进行操作 直接赋值 我想算一下每一天的温差 df.loc[:, 'wencha'] ...

  10. springboot 基于JS-SDK实现微信分享(一)

    本文主要介绍了SpringBoot 基于JS-SDK实现自定义微信分享,并通过本地测试的方式进行调试,文中通过微信实现分享流程及示例代码进行非常详细的介绍,希望本文对开发爱好者学习或者工作具有一定的参 ...