（一）文字环绕排版

文字环绕图形
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. ubuntu server安装图形化界面

    只需一个命令,然后重启即可: # apt-get install ubuntu-desktop # 查看下一次启动的设置 systemctl get-default # reboot

  2. ChatGPT插件开发实战

    1.概述 ChatGPT是一款由OpenAI推出的先进对话模型,其强大的自然语言处理能力使得它成为构建智能对话系统和人机交互应用的理想选择.为了进一步拓展ChatGPT的功能和适应不同领域的需求,Op ...

  3. 微信小程序预览时显示有图片未上传

    最近在做小程序项目,在项目里面加了几个图片.在预览调试时出现弹窗显示"文件未上传",但是在左侧的模拟器上却是能正常显示的. 解决思路: 图片在本地和模拟器上显示正常,表示图片本身没 ...

  4. python列表的增删

    list = [1, 2, 3, 4]# 打印后两位print(list[-2:])# 打印前2位print(list[:2])# 修改列表元素list[0] = 5print(list)# 添加元素 ...

  5. 数据库中limit 和 offset 使用区别

    题:查找最晚入职员工的所有信息 1,SELECT * FROM employees ORDER BY hire_date DESC LIMIT 0,1; 解:对列hire_date分组后升序,从下标( ...

  6. Mysql高阶自定义排序

    Mysql高阶自定义排序 嗨,大家好,我是远码,隔三岔五给大家分享一点工作的技术总结,花费的时间不多,几分钟就行,谢谢! Mysql对我们码农来说是在熟悉不过的日常了,就不在介绍它的基础用法了,今天我 ...

  7. Java爬虫实战系列——常用的Java网络爬虫库

    常用的Java网络爬虫库 Java 开发语言是业界使用最广泛的开发语言之一,在互联网从业者中具有广泛的使用者,Java 网络爬虫可以帮助 Java 开发人员以快速.简单但广泛的方式为各种目的抓取数据. ...

  8. React仿大众点评外卖app

    主要使用技术: react react-router4 redux: action.reducer.store管理数据 fetch: 进行数据交互 prismjs : 页面嵌入代码,高亮显示插件 bu ...

  9. HTML视频背景(动态背景)

    网页动态背景一般是用视频实现的,能增添网页的感染力,我觉得很好看,也不难,不妨学一下. 先加入下面一串代码: 1 <style> 2 video{ 3 height: 100%; 4 wi ...

  10. HTML/网站一键打包APK工具(html网页打包安卓APP应用）

    HTML一键打包APK工具使用说明 工具简介 HMTL一键打包APK工具可以把本地HTML项目或者网站打包为一个安卓应用APK文件,无需编写任何代码,也无需配置安卓开发环境,支持在最新的安卓设备上安装 ...