1.概述

2.文档流定位：从上到下，从左到右

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         *{
  8.             margin: 0;
  9.             padding: 0;/* 去掉默认样式*/
  10.         }
  11.         #nav{
  12.             width: 300px;
  13.             margin: 100px auto;/*自动居中*/
  14.             font-size: 0;   /* 去掉导航之间的空隙*/
  15.         }
  16.         a{
  17.             display: inline-block;/*修改a的定位方式*/
  18.             width: 80px;
  19.             height: 30px;
  20.             font-size: 14px;
  21.             text-align: center;
  22.             line-height: 30px;/*行高 垂直居中*/
  23.             text-decoration: none;/* 去掉超链接的下划线*/
  24.             border-bottom: 1px solid #ccc;/* 设置底部边框的样式*/
  25.         }
  26.         a:hover{
  27.             color: white;
  28.             background-color: #ccc;
  29.             border: 1px solid;
  30.             border-top-color: orange;
  31.             border-right-color: orange;
  32.             border-left-color: orange;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37.     <div id="nav">
  38.         <a href="#">链接1</a>
  39.         <a href="#">链接2</a>
  40.         <a href="#">链接3</a>
  41.     </div>
  42. </body>
  43. </html>

前端学习笔记--CSS布局--文件流定位的更多相关文章

  1. 前端学习笔记--CSS布局--float定位

    1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性 案例: 一列三行布局: <!DOCTYPE html> <ht ...

  2. 前端学习笔记--CSS布局--层定位

    1.层定位概述: z-index:前后叠加顺序 2.position属性: 3.fixed: 2.relative: 移动后: static没有往上移动占据box1的位置. 3.absolute: 移 ...

  3. 前端学习笔记--CSS布局--盒子模型

    1.概述: 2.盒子模型 overflow属性: border属性: 1.padding属性: margin:

  4. web前端学习笔记(CSS变化宽度布局)

    一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按 ...

  5. web前端学习笔记(CSS固定宽度布局)

    一.单列布局: 这是最简单的一种布局方式,之所以给出该示例,还是为了保证本篇博客的完整性. <html xmlns="http://www.w3.org/1999/xhtml" ...

  6. web前端学习笔记(CSS盒子的定位)

    相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它.      使用relat ...

  7. 前端学习(20)~css布局(十三)

    常见的布局属性 (1)display 确定元素的显示类型: block:块级元素. inline:行内元素. inline-block:对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以 ...

  8. web前端学习笔记(CSS盒子的浮动)

    在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同.      CSS中有一个float属性 ...

  9. 前端学习 -- Html&Css -- 相对定位 绝对定位 固定定位

    相对定位 - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素. - 通过position属性来设置元素的定位. -可选值: static:默认值,元素没有开启定位: rela ...

随机推荐

  1. NLP | 算法 学习资料整理

    UPDATE TIME: 2019-12-12 17:06:32 NLP: 对话系统: [ ] https://www.cnblogs.com/jiangxinyang/p/10789512.html ...

  2. [转帖]TPC-C解析系列01_TPC-C benchmark测试介绍

    TPC-C解析系列01_TPC-C benchmark测试介绍 http://www.itpub.net/2019/10/08/3334/ 学习一下. 自从蚂蚁金服自研数据库OceanBase获得TP ...

  3. SpringBoot中使用@Scheduled创建定时任务

    SpringBoot中使用@Scheduled创建定时任务 定时任务一般会在很多项目中都会用到,我们往往会间隔性的的去完成某些特定任务来减少服务器和数据库的压力.比较常见的就是金融服务系统推送回调,一 ...

  4. 别再裸奔了，你的项目代码安全吗，再不加密就out了

    在工作中,有时候我们需要部署自己的Python代码 或进行私有化部署时,尤其现在都是通过docker镜像部署,我们并不希望别人能够看到自己的Python源程序. 加密Python源代码的方式,是将.p ...

  5. 批量删除c文件和h文件中的注释

    不知道大家有没有批量删除c文件和h文件中注释的需要,说起来搞笑,偶然翻出来早先写的一份,首先楼猪不是闲的蛋疼写这东西,工作需要,哪里要砖就要搬.冷门的东西大家需要的时候也不一定好找,分享给大家,省的自 ...

  6. python — 线程

    目录 1.线程基础知识 2 Thread 类 3 锁 4 队列 1.线程基础知识 1.1 进程与线程的区别 进程: 创建进程 时间开销大 销毁进程 时间开销大 进程之间切换 时间开销大 线程: 线程是 ...

  7. Python进阶: Decorator 装饰器你太美

    函数 -> 装饰器 函数的4个核心概念 1.函数可以赋与变量 def func(message): print('Got a message: {}'.format(message)) send ...

  8. docker 实践四：数据管理

    这篇是关于 docker 的数据管理. 注:环境为 CentOS7,docker 19.03. 一般容器中管理数据主要有两种方式: 数据卷(Data Volumes):容器内数据直接映射到本地主机环境 ...

  9. 简单添加自己的驱动程序到Linux内核树中

    背景: 移植4g模块的时候,看到文档中有添加驱动到内核的步骤,于是趁着这个机会,展开有关的学习. 了解更多可以访问:<Kconfig语法简介> Target :hi3531d Linux ...

  10. mybatis执行DDL语句

    对MyBatis一直停留在仅仅会用的阶段,常用的场景就是通过MyBatis对表数据进行DML(insert, delete, update等)操作,从来没有想过通过MyBatis对数据库进行DDL(c ...