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

使用定位可以将元素摆放到任意位置
分类
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. 数据可视化之DAX篇(十九)值得你深入了解的函数:SUMMARIZE

    https://zhuanlan.zhihu.com/p/66424209 SUMMARIZE函数非常强大,掌握以后表面上看也非常好用,所以我专门写篇文章介绍一下这个函数,至于是否一定要使用该函数,请 ...

  2. Java匿名对象介绍

    Java匿名对象介绍 什么是匿名对象? 顾名思义就是没有变量名的对象,即创建对象时,只有创建对象的语句,却没有把对象地址值赋值给某个变量. 匿名对象命名格式:以Scanner类举例 new Scann ...

  3. Ethical Hacking - NETWORK PENETRATION TESTING(7)

    Gaining Access to encrypted networks Three main encryption types: 1. WEP 2.WPA 3.WPA2 WEP Cracking W ...

  4. IDEA命令行缩短器助你解决此问题:Command line is too long. Shorten command line...

    生命太短暂,不要去做一些根本没有人想要的东西.本文已被 https://www.yourbatman.cn 收录,里面一并有Spring技术栈.MyBatis.JVM.中间件等小而美的专栏供以免费学习 ...

  5. Spring RestTemplate 的介绍和使用-入门

    RestTemplate是什么? 传统情况下在java代码里访问restful服务,一般使用Apache的HttpClient.不过此种方法使用起来太过繁琐.spring提供了一种简单便捷的模板类来进 ...

  6. 设计模式:chain of responsibility模式

    目的:弱化发出请求的对象和处理请求对象的之间的关系 理解:每个处理请求的对象仅仅只关注自己能处理的请求,不关系其他请求 优点: 无需一个管理类来匹配所有的请求,更灵活 责任链可以动态的调整 Andor ...

  7. 怎么训练出一个NB的Prophet模型

    上篇<神器の争>主要是介绍Prophet的特点以及prophet入门的一些注意事项,但离真正的实际运用还有段距离.本篇主要讲解实际运用中Prophet调参的主要步骤以及一些本人实际经验. ...

  8. 循序渐进nginx(三):日志管理、http限流、https配置,http_rewrite模块,第三方模块安装,结语

    目录 日志管理 access_log error_log 日志文件切割 自定义错误页 http访问限流 限制请求数 语法 使用 限制连接数 语法 测试 补充: https配置 使用 生成证书 配置ng ...

  9. O、Θ、Ω、o、ω,别再傻傻分不清了!

    前言 本篇文章收录于专辑:http://dwz.win/HjK,点击解锁更多数据结构与算法的知识. 你好,我是彤哥,一个每天爬二十六层楼还不忘读源码的硬核男人. 前面几节,我们一起学习了算法的复杂度如 ...

  10. Ross Girshick讲解如何writing good research papers

    ICCV 2019上,Facebook AI 的 Ross Girshick 做了一个关于目标检测和实例分割的 tutorial,最后用19页PPT讲解了如何 writing good researc ...