（一）文字环绕排版

文字环绕图形
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. 【活动回顾】WebRTC服务端工程实践和优化探索

    11月7日,即构和上海GDG技术社区联合举办了实时音视频技术云上技术分享专场,来自即构科技和Bilibili的资深技术专家进行了深度分享.大会吸引了众多开发人员交流.观看,并在活动过程中与分享嘉宾进行 ...

  2. 巧用 bc 命令测试 Linux 主机的 CPU 性能

    今天向公司申请了一台 Linux 主机,作为平时的开发环境.由于自己并不依赖远程开发(大多数情况下项目都可以本地开发.调试),于是只申请了 4C/8G 的低配机器. 突然好奇的是,这台机器的性能怎么样 ...

  3. 三个编程思想：面向对象编程、面向接口编程、面向过程编程【概念解析系列_1】【C# 基础】

    〇.前言 对于 .Net 中的编程思想还是十分重要的,也是编码出高效的程序的基础! 在使用之前了解其本质,那么用起来就游刃有余.下面来简单对比下三个编程思想,看下它们都是什么,它们之间又有什么关系. ...

  4. 3D相册 复仇者联盟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. VBA与VB的区别

    从语言结构上讲,VBA是VB的一个子集,它们的语法结构是一样的.两者的开发环境也几乎相同.但是,VB是独立的开发工具,它不需要依附于任何其他应用程序,它有自己完全独立的工作环境和编译.链接系统.VBA ...

  6. （转） [Android测试] AS+Appium+Java+Win自动化测试之三: 基础知识和Appium界面

    一.把上一章的demo先看懂 AndroidContactsTest.Java public class AndroidContactsTest { //Driver private AppiumDr ...

  7. 11、Mybatis之逆向工程

    11.1.正向与逆向工程概述 正向工程:先创建Java实体类,由框架负责根据实体类生成数据库表:例如Hibernate是支持正向工程的. 逆向工程:先创建数据库表,由框架负责根据数据库表,反向生成Ja ...

  8. ETL之apache hop系列4-hop开发数据增量同步功能

    ETL增量数据抽取CDC 概念:Change Data Capture,变化的数据捕获,也称:[增量数据抽取](名词解释) CDC是一种实现数据的增量抽取解决方案,是实现[ETL整体解决方案]中的一项 ...

  9. 2023-08-30：用go语言编写。两个魔法卷轴问题。 给定一个数组arr，其中可能有正、负、0， 一个魔法卷轴可以把arr中连续的一段全变成0，你希望数组整体的累加和尽可能大。 你有两个魔法卷轴，

    2023-08-30:用go语言编写.两个魔法卷轴问题. 给定一个数组arr,其中可能有正.负.0, 一个魔法卷轴可以把arr中连续的一段全变成0,你希望数组整体的累加和尽可能大. 你有两个魔法卷轴, ...

  10. 虚拟机问题：VMware Workstation 与 Device/Credential Guard 不兼容。在禁用 Device/Credential Guard 后，可以运行

    解决办法:关闭Hyper-V功能. windows10使用VMware Workstation打开虚拟机时显示 VMware Workstation 与 Hyper-V 不兼容.请先从系统中移除 Hy ...