1.概述

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

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;/* 去掉默认样式*/

        }

        #nav{

            width: 300px;

            margin: 100px auto;/*自动居中*/

            font-size: 0;   /* 去掉导航之间的空隙*/

        }

        a{

            display: inline-block;/*修改a的定位方式*/

            width: 80px;

            height: 30px;

            font-size: 14px;

            text-align: center;

            line-height: 30px;/*行高 垂直居中*/

            text-decoration: none;/* 去掉超链接的下划线*/

            border-bottom: 1px solid #ccc;/* 设置底部边框的样式*/

        }

        a:hover{

            color: white;

            background-color: #ccc;

            border: 1px solid;

            border-top-color: orange;

            border-right-color: orange;

            border-left-color: orange;

        }

    </style>

</head>

<body>

    <div id="nav">

        <a href="#">链接1</a>

        <a href="#">链接2</a>

        <a href="#">链接3</a>

    </div>

</body>

</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. velocity 自定义工具类接入

    网上的教程几乎都是同一篇: velocity 自定义工具类 - eggtk - CSDN 博客 但是教程有不完善的地方,我就补充一下. 补充: 引入的jar包和版本要一致.我们项目中因为没有定义确切版 ...

  2. 小程序里实现 watch 和 computed

    小程序里的自定义组件里是有数据监听器的,可以监听对应数据的变化来执行callBack,但是页面Page里没有对应的api就显的很生硬,比如某个数据变了(如切换城市)需要重新刷页面,如果不做监听,每次都 ...

  3. [转帖]K8s 工程师必懂的 10 种 Ingress 控制器

    K8s 工程师必懂的 10 种 Ingress 控制器 https://www.kubernetes.org.cn/5948.html 控制器有好多啊. 2019-10-18 23:07 中文社区 分 ...

  4. 以php中的比较运算符操作整型,浮点型,字符串型,布尔型和空类型

    字符,数字,特殊符号的比较依赖ASC II表,本表原先有127个,后来又扩充了一些,里面包含了奇奇奇怪的符号. ASC II表 https://baike.baidu.com/item/ASCII/3 ...

  5. Python-19-元类

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

  6. WUSTOJ的“讨论”和“私聊”功能如何使用

    反正我是过了1年多才知道有讨论这个功能,2年多才知道有私聊功能. 不知道大家都是什么时候发现的... 讨论还好,在FAQ界面的下边有提示,但是私聊我真没看到哪儿有提示...是我不小心点进去的. 讨论功 ...

  7. Spring Cloud Alibaba学习笔记（10） - Spring消息编程模型下，使用RocketMQ收发消息

    编写生产者 集成 添加依赖 <dependency> <groupId>org.apache.rocketmq</groupId> <artifactId&g ...

  8. POJ1611(The Suspects)--简单并查集

    题目在这里 关于SARS病毒传染的问题.在同一个组的学生是接触很近的,后面也会有新的同学的加入.其中有一位同学感染SARS,那么该组的所有同学得了SARS.要计算出有多少位学生感染SARS了.编号为0 ...

  9. H5表单新特性

    1.HTML5表单新特性之——新的input type <input type=" "> HTML5之前已有的input type: text.password.rad ...

  10. js数组实现上移下移

    up(index) { if(index === 0) { return } //在上一项插入该项 this.list.splice(index - 1, 0, (this.list[index])) ...