文章目录

  • 1 定位 （position）
    • 1.1 static 定位
    • 1.2 fixed 定位
    • 1.3 relative 定位
    • 1.4 absolute 定位
    • 1.5 sticky 定位
  • 2. 浮动（float:）
    • 2.1 简单使用
    • 2.2 相邻元素的浮动
    • 2.3 清除浮动 clear
    • 2.4 示例-首字浮动
    • 2.5 示例 一个网页
  • 3. 对齐
    • 3.1 各种元素居中对齐
      • 3.1.1 元素居中对齐
      • 3.1.2 图像居中对齐
      • 3.1.3 文本居中对齐
    • 3.2 左或右对齐
      • 3.2.1 position 实现
      • 3.2.2 使用 float 方式
    • 3.3 边框中内容居中对齐
      • 3.3.1 使用 padding实现
      • 3.3.2 使用 line-height
  • 4. 元素的堆叠顺序

1 定位 （position）

1.1 static 定位

  • 效果

静态定位的元素不会受到 top, bottom, left, right影响。

  • 示例
div.static {position: static;
}

1.2 fixed 定位

  • 作用
    相对于浏览器窗口是固定的，即不会因滚动条移动
  • 示例
p.pos_fixed
{position:fixed;}

1.3 relative 定位

  • 效果
    相对其正常位置移动
  • 示例
{position:relative;left:-20px;
}h2.pos_right
{position:relative;left:20px;
}

可使用： top, bottom, left, right

1.4 absolute 定位

  • 效果
    定位在页面的一个绝对位置
  • 示例
{position:absolute;left:150px;top:150px;
}

1.5 sticky 定位

  • 效果
    在一定范围（ 定义top, bottom, left, right）内正常移动，超出则不移动
  • 示例
div.sticky {position: -webkit-sticky; /* Safari */position: sticky;top: 0;
}

2. 浮动（float:）

2.1 简单使用

float:right;

说明：值可以是top, bottom, left, right

2.2 相邻元素的浮动

  • 设置 margin 后，元素会以该间距排列
{float:left;margin:5px;
}
  • 元素大小不同儿排不齐，可以定义一下元素大小
{float:left;width:110px;height:90px;margin:5px;
}

2.3 清除浮动 clear

  • 效果

如果没有足够空间，浮动的元素会变成一行相邻在一起。
使用 clear 之后，该元素左右不会出现浮动元素

  • 示例
clear:both;

2.4 示例-首字浮动

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公记事</title>
<style>
span
{float:left;width:1.2em;font-size:300%;font-family:algerian,courier;line-height:80%;
}
</style>
</head><body><h2 style="text-align:center">隆中对</h2>
<p>
<span>自</span>董卓已来，豪杰并起，跨州连郡者不可胜数。曹操比于袁绍，则名微而众寡，然操遂能克绍，以弱为强者，非惟天时，抑亦人谋也。今操已拥百万之众，挟天子而令诸侯，此诚不可与争锋。孙权据有江东，已历三世，国险而民附，贤能为之用，此可以为援而不可图也。荆州北据汉、沔，利尽南海，东连吴会，西通巴、蜀，此用武之国，而其主不能守，此殆天所以资将军，将军岂有意乎？益州险塞，沃野千里，天府之土，高祖因之以成帝业。刘璋暗弱，张鲁在北，民殷国富而不知存恤，智能之士思得明君。将军既帝室之胄，信义著于四海，总揽英雄，思贤如渴，若跨有荆、益，保其岩阻，西和诸戎，南抚夷越，外结好孙权，内修政理；天下有变，则命一上将将荆州之军以向宛、洛，将军身率益州之众出于秦川，百姓孰敢不箪食壶浆以迎将军者乎？诚如是，则霸业可成，汉室可兴矣！
</p></body>
</html>
  • 效果

2.5 示例 一个网页

说明：这个代码是教程上抄来的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜀</title>
<style>
* {box-sizing: border-box;
}
body {margin: 0;
}
.header {background-color: #2196F3;color: white;text-align: center;padding: 15px;
}
.footer {background-color: #444;color: white;padding: 15px;
}
.topmenu {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #777;
}
.topmenu li {float: left;
}
.topmenu li a {display: inline-block;color: white;text-align: center;padding: 16px;text-decoration: none;
}
.topmenu li a:hover {background-color: #222;
}
.topmenu li a.active {color: white;background-color: #4CAF50;
}
.column {float: left;padding: 15px;
}
.clearfix::after {content: "";clear: both;display: table;
}
.sidemenu {width: 25%;
}
.content {width: 75%;
}
.sidemenu ul {list-style-type: none;margin: 0;padding: 0;
}
.sidemenu li a {margin-bottom: 4px;display: block;padding: 8px;background-color: #eee;text-decoration: none;color: #666;
}
.sidemenu li a:hover {background-color: #555;color: white;
}
.sidemenu li a.active {background-color: #008CBA;color: white;
}
</style>
</head>
<body><ul class="topmenu"><li><a href="#home" class="active">主页</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系我们</a></li><li><a href="#about">关于我们</a></li>
</ul><div class="clearfix"><div class="column sidemenu"><ul><li><a href="#flight">The Flight</a></li><li><a href="#city" class="active">The City</a></li><li><a href="#island">The Island</a></li><li><a href="#food">The Food</a></li><li><a href="#people">The People</a></li><li><a href="#history">The History</a></li><li><a href="#oceans">The Oceans</a></li></ul></div><div class="column content"><div class="header"><h1>The City</h1></div><h1>Chania</h1><p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p><p>You will learn more about responsive web pages in a later chapter.</p></div>
</div><div class="footer"><p>底部文本</p>
</div></body>
</html>

3. 对齐

3.1 各种元素居中对齐

3.1.1 元素居中对齐

  • 使用
    margin: auto; 可使元素居中对齐
  • 示例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>hello world</title><style>.center {margin: auto;width: 60%;border: 3px solid #73AD21;padding: 10px;}</style>
</head><body><div class="center"><p>margin: auto 使得元素居中对齐</p></div></body></html>
  • 结果显示

如图可见，绿色框（不是文字）在页面的中间。

3.1.2 图像居中对齐

  • 使用
    同样使用margin: auto;，
    但是image是内联元素，需要用display: block
  • 示例
img {display: block;margin: 0 auto;
}

3.1.3 文本居中对齐

之前《文本和字体》中有详细说明

text-align: center;

3.2 左或右对齐

3.2.1 position 实现

.right {position: absolute;right: 0px;
}

3.2.2 使用 float 方式

.right {float: right;
}

3.3 边框中内容居中对齐

3.3.1 使用 padding实现

说明：padding是内边距，在之前的文档 “盒子和轮廓”中可以看到详细说明。我们可以用内边距将内容“推到”居中的位置。

  • 代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>hello world</title><style>.center {padding: 70px;border: 3px solid green;width: 150px}</style>
</head><body><div class="center"><p>元素中的文字居中对齐</p></div></body></html>
  • 显示

3.3.2 使用 line-height

  • 方法

line-height 设置文本行高是200
height设置元素高200，则文本正好垂直居中。
text-align: center;使得文本水平居中

  • 示例
.center {line-height: 200px;height: 200px;border: 3px solid green;text-align: center;
}

4. 元素的堆叠顺序

  • 示例

元素定义了一个绝对位置，会与其他元素堆叠。设置z-index:-1 后，将其放到下层

img
{position:absolute;left:0px;top:0px;z-index:-1;
}

CSS基础-09-布局（定位 position、浮动float，元素对其、图像对其、文本对齐、元素内内容对齐，元素堆叠）相关推荐

  1. [19/06/07-星期五] CSS基础_布局定位背景样式

    一.固定布局(不适应设备的浏览器的变化) <!DOCTYPE html> <html><head><meta charset="UTF-8" ...

  2. 【CSS基础】盒子模型、浮动布局、ps切图、定位及一些零碎知识点

    该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍CSS基础知识,包括盒子模型.浮动布局.PS切图.定位.元素的显示与隐藏和一些零碎知识点 思维导图 ...

  3. Div+CSS教程----DivCSS布局绝对定位和浮动

    在CSS中,实现分栏布局有两种方法.第一种方法是使用四种CSS定位选项(absolute .static.relative和fixed)中的绝对定位(absolute positioning),它可以 ...

  4. CSS教程:实例讲解定位Position

    http://www.missyuan.com/thread-395406-1-1.html 1. position:static 所有元素的默认定位都是:position:static,这意味着元素 ...

  5. CSS基础知识（定位）

    CSS基础知识 CSS布局的三种机制 普通流(标准流) 浮动 定位 定位模式 静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 边偏移 定位 ...

  6. CSS基础：浅谈position

    浅谈position 定位(position)允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者始终保持在浏览器视窗内的同一位置-- MDN 一.文档流 什么是 ...

  7. CSS基础：盒子模型和浮动

    盒子模型 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用 CSS盒模型本质上是一个盒子,封装HTML元素. 它包括:外边距(marg ...

  8. css框模型、定位、浮动

    一.CSS 框模型概述 1.CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框.外边框的方式. 2.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的 ...

  9. css基础--弹性布局

    一.什么是弹性布局 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. 二.基本概念 采用Flex ...

最新文章

  1. android 贝塞尔曲线点击区域,白话经典贝塞尔曲线及其在 Android 中的应用
  2. 自定义异常时exception is never thrown in the corresponding try block和unhandled exception
  3. 在Java中如何设置一个定时任务，在每天的一个时间点自动执行一个特定的程序
  4. 项目经理如何把工作简单化
  5. datetimepicker 默认时间_Django项目中如何使用日期时间选择器DateTimePicker
  6. Spring MVC拦截器（Interceptor）的配置及使用
  7. JavaScript or JQuery 获取服务器时间
  8. 基于python 实现KNN 算法
  9. Useful SQL script
  10. java 读写mysql_Java读写MySQL数据库小实例
  11. 软件测试算是后端吗,软件测试--前后端数据交互
  12. Mysql5.7下载安装步骤详解
  13. 王家林Spark视频
  14. 幸福课第11讲_笔记
  15. 限速之令牌桶和漏桶算法
  16. nginx-GET /favicon.ico HTTP/1.1
  17. nvidia驱动版本查询
  18. Linux_ubuntu系统安装Flash插件
  19. 一键获取前程无忧招聘信息,并存储到excel中，全程只需要输入职位名称（51job 你要的自动化 这里全都有~~~）
  20. Ubuntu 22 安装go-ethereum

热门文章

  1. yd什么意思_yd是什么意思是什么
  2. 凌晨3点不回家：因为想不到的心酸！
  3. Python数据分析 | (31) 透视表和交叉表
  4. 收集的 Linux VPS 在线重装系统脚本
  5. javascriptji c z s
  6. dva的用法_dva基本用法
  7. 基础数学（八）——期末考试复习
  8. 【C语言初阶】——简易版·扫雷（9*9）【运行逻辑思维导图+细节讲解+源码】【初级】
  9. 《区块链革命》读书笔记1可信的协议 引导未来：区块链经济七大设计原则
  10. 哪些知乎收藏夹关注数超过一万？