（一）文字环绕排版

文字环绕图形
shape-outside属性

  • margin-box：外边距环绕
  • padding-box：内边距环绕
  • border-box：边框环绕
  • content-box：内容环绕
<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

  body{

   font-size: 32px;

  }

  .circle{

   width: 200px;

   height: 200px;

   border-radius: 50%;

   border:solid 20px green;

   background-color: red;

   display: inline-block;

   float: left;

   margin: 20px;

   padding: 10px;

   shape-outside: content-box;

  }

 </style>

</head>

<body>

 <span class="circle"></span>

 <p>sdssfdfdfkfjslkfsdkclksdjcsldkjcldskjds;dklcdklcmdslkcsdlkcjsdcjdoicjodislkcslkcsdlcksdmlckdsm

 clksdmcldskcmdlkcmdlckmdlckdmc

 lksdcmdlkcmsdlckmsdcklmclkscmdslkcmdslkcmdlkcmsdlkc

 lksdcmdlkcmsdlckmsdcklmclkscmdslkcmdslkcmdlkcmsdlkcm

 lksdcmdlkcmsdlckmsdcklmclkscmdslkcmdslkcmdlkcmsdlkcm

 lksdcmdlkcmsdlckmsdcklmclkscmdslkcmdslkcmdlkcmsdlkcm

 lksdcmdlkcmsdlckmsdcklmclkscmdslkcmdslkcmdlkcmsdlkcm

 lksdcmdlkcmsdlckmsdcklmclkscmdslkcmdslkcmdlkcmsdlkcmv

 lksdcmdlkcmsdlckmsdcklmclkscmdslkcmdslkcmdlkcmsdlkcm

 lksdcmdlkcmsdlckmsdcklmclkscmdslkcmdslkcmdlkcmsdlkcm

 lksdcmdlkcmsdlckmsdcklmclkscmdslkcmdslkcmdlkcmsdlkcm

 lksdcmdlkcmsdlckmsdcklmclkscmdslkcmdslkcmdlkcmsdlkcm

 </p>

 </body>

</html>

clip-path属性：

clip-path：circle（）；//标准画圆

clip-path：（50% at 0 0）；//四分之一圆

clip-path：inset（25% 0 round 0 25%）；//圆角

clip-path：polygon（0 100%，50% 0，100% 100%）；//三角形

整合使用：

clip-path：circle（）；//标准画圆

shape-outside:circle（）；

（二）position属性

position，用于指定元素的定位方式

  • static：默认值，文档流标准定位
  • relative：相对定位（相对自己原本位置） //不会脱离文档流
  • absolute：绝对定位 //脱离文档流
  • fixed：固定定位 //相对于浏览器定位
  • sticky：粘性定位

位置偏移
top，right，bottom，left：距离上、右、下、左

1.relative

相对定位（相对自己原本位置） //不会脱离文档流

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

  .A{

   width: 100%;

   height: 1000px;

   background-color: green;

  }

  .A_1{

   width: 100px;

   height: 100px;

   background-color: red;

   position: relative;

   left: 50px;

  }

  .A_2{

   width: 100px;

   height: 100px;

   background-color: yellow;

  }

 </style>

</head>

<body>

 <div class="A">

  <div class="A_1"></div>

  <div class="A_2"></div>

 </div>

</body>

</html>

2.absolute

脱离文档流，通过指定元素相对于最近的非static定位祖元素的偏移，如果没有则相对于body位置。可以设置外边距（margin），且不会于其他边距合并。

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

 .A{

   width: 100%;

   height: 300px;

   background-color: green;

   margin-top:50px;

  }

  .A_1{

   width: 100px;

   height: 100px;

   background-color: red;

   position: absolute;

   top: 0px;

  }

  </style>

</head>

<body>

 <div class="A">

  <div class="A_1"></div>

 </div>

</body>

</html>

垂直居中

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

 .A{

   width: 500px;

   height: 300px;

   border: solid 1px #000;

   position: relative;

   margin: auto;

  }

  .A_1{

  width: 100px;

   height: 100px;

   background-color: red;

   position: absolute;

   /*让左上角定位，然后在相对于自身定位*/

   left: 50%;

   top:50%;

   transform: translate(-50%,-50%);/*自身的百分比*/

   }

   </style>

</head>

<body>

 <div class="A">

  <div class="A_1"></div>

 </div>

</body>

</html>

3.sticky

相对于父元素

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

 .A{

   width: 500px;

   height: 300px;

   border: solid 1px #000;

   position: absolute；

   top:50%;

   left: 50%;

   margin: auto;

   overflow: scroll;

  }

  h2{

   position: sticky;

   top: 0;

   background-color: green;

   color: #fff;

  }

  </style>

</head>

<body>

 <div class="A">

 <h2>sssssss1</h2>

 <p>eeeee</p>

 <h2>sssssss2</h2>

 <p>eeeee</p>

<h2>sssssss3</h2>

 <p>eeeee</p>

<h2>sssssss4</h2>

 <p>eeeee</p>

<h2>sssssss5</h2>

 <p>eeeee</p>

<h2>sssssss6</h2>

 <p>eeeee</p>

<h2>sssssss7</h2>

 <p>eeeee</p>

<h2>sssssss8</h2>

 <p>eeeee</p>

 </div>

<body>

</html>

（三）层次z-index

仅对非z-index的元素生效
值越大优先级越高，父元素不能超越子元素

html5学习内容-5的更多相关文章

  1. HTML5 学习总结（一）——HTML5概要与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...

  2. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  3. HTML5 学习笔记（一）——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  4. HTML5 学习笔记--------》HTML5概要与新增标签！

      一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...

  5. HTML5学习笔记（一）：HTML简介

    Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...

  6. HTML5学习总结——HTML5入门与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 概念: HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本, 旨在消除富 Internet 程序( ...

  7. [html5] 学习笔记-表单新增的元素与属性（续）

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

  8. HTML5学习之语义化标签（一）

    一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...

  9. HTML5学习指导路线

    HTML5是现在热门的技术,经过8年的艰苦努力,该标准规范终于制定完成,在这里为想要学习HTML5初级程序员详细划分一下学习内容和步骤,让大家清楚的知道HTML5需要学什么?能够快速掌握HTML5开发 ...

  10. HTML5学习笔记（四）：H5中表单新增元素及改良

    方便布局 表单内容可以放在表单标签之外,这样做的好处是方便设计时不用考虑一定要将表单元素放在指定的form标签之下,只要指定元素适用于哪个表单即可,如下: <form id="test ...

随机推荐

  1. Redis Stack：基于Redis的搜索、文档、图形和时间序列功能

    基于Redis的搜索.文档.图和时间序列功能整合到一个扩展Redis Stack中,以使开发人员能够轻松构建实时应用程序. Redis Stack 于 3 月 23 日发布,由三个组件组成: Redi ...

  2. PerfView专题 (第十四篇)： 洞察那些 C# 代码中的短命线程

    一:背景 1. 讲故事 这篇文章源自于分析一些疑难dump的思考而产生的灵感,在dump分析中经常要寻找的一个答案就是如何找到死亡线程的生前都做了一些什么?参考如下输出: 0:001> !t T ...

  3. docker安装8版本elasticsearch遇到的问题FileSystemException

    docker安装8版本elasticsearch遇到的问题 Exception in thread "main" java.nio.file.FileSystemException ...

  4. 一步一图带你构建 Linux 页表体系 —— 详解虚拟内存如何与物理内存进行映射

    笔者之前在自己的专栏<聊聊 Linux 内核> 里通过大量的篇幅写了一个系列关于内存管理相关的文章,在这个系列文章中,笔者分别通过虚拟内存管理和物理内存管理两个角度算是把 Linux 内存 ...

  5. 【译】如何在 Visual Studio 中调试异步代码

    虽然异步代码可以提高程序的整体吞吐量,但异步代码仍然无法免除错误!当潜在的死锁.模糊的错误消息以及查找导致 Bug 的 Task 时,编写异步代码会使调试更加困难.幸运的是,Visual Studio ...

  6. LiveCD 与 救援模式、紧急模式

    LiveCD 参考:live CD LiveCD 能够使你在不安装到硬盘的前提下,体验操作系统.大多数 Linux 桌面发行版都提供 LiveCD,这是宣传自己的一种很有效的方式. 救援模式 救援模式 ...

  7. Cilium系列-6-从地址伪装从IPtables切换为eBPF

    系列文章 Cilium 系列文章 前言 将 Kubernetes 的 CNI 从其他组件切换为 Cilium, 已经可以有效地提升网络的性能. 但是通过对 Cilium 不同模式的切换/功能的启用, ...

  8. linux基础：编译

    程序编译 在linux中,gnu项目提供了gcc编译器.g++编译器和gdb调试器. C和C++语言正在不断发展,为了保持兼容程序语言的最新特性,开发者通常选择GCC来编译C语言编写的源代码,选择G+ ...

  9. [ABC126F] XOR Matching

    2023-01-07 题目 题目传送门 翻译 翻译 难度&重要性(1~10):1 题目来源 AtCoder 题目算法 位运算 解题思路 因为两个相同数异或为 \(0\),所以中间放一个 \(k ...

  10. Midjourney 创建私人画图机器人（保姆级教程）

    本教程收集于:AIGC从入门到精通教程汇总 之前给大家介绍过了Midjourney 的注册教程:AI绘画:Midjourney 注册(保姆级教程) 也有Stable Diffusion(开源)的本地搭 ...