Html5学习内容-4

（一）display与visibility

这里主要控制元素是否显示

例子

visibility：文字消失空间保留

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

  .li{

   visibility:hidden;

  }

 </style>

</head>

<body>

 <ul>

  <li>香蕉</li>

  <li class="li">梨子</li>

  <li>苹果</li>

  <li>芒果</li>

  <li>杨桃</li>

 </ul>

</body>

</html>

display:文字和空间都消失

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

  .li{

   display: none;

  }

 </style>

</head>

<body>

 <ul>

  <li>香蕉</li>

  <li class="li">梨子</li>

  <li>苹果</li>

  <li>芒果</li>

  <li>杨桃</li>

 </ul>

</body>

</html>

（二）宽度与高度

min-width
max-width
min-height
max-height

(三）内容自适用

撑满

fill-available:设置宽高撑满当前可用空间，
fit-content：宽度撑满

例子

fit-content

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

  div{

   width: fit-content;

   border: solid 1px red;

   margin: auto;

  }

 </style>

</head>

<body>

 <div>hello</div>

</body>

</html>

fill-available:填充和其父类一样的高度
例子：

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

  .container{

   border: solid 1px red;

   margin: auto;

   height: 100px;

   width: 100px;

  }

  .main{

   background-color: green;

   border: solid 1px black;

   height: -webkit-fill-available;

  }

 </style>

</head>

<body>

 <div class="container">

  <div class="top">Today</div>

  <div class="main">hello</div>

 </div>

</body>

</html>

等高

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

  ul{

   height: 100px;

  }

 ul li{

  display: inline-block;

  width: 100px;

  border: solid 1px red;

  height: -webkit-fill-available;

 }

 </style>

</head>

<body>

 <ul>

  <li>www</li>

  <li>sss</li>

  <li>ccc</li>

 </ul>

</body>

</html>

（四）浮动布局

float:会脱离文档流
两个最主要使用方式：

block元素水平排列
文字与图片环绕排版

例子

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

  div {

   width: 200px;

   height: 200px;

  }

  div:nth-of-type(1){

   float: left;

   border: solid 5px red;

  }

  div:nth-of-type(2){

   float: left;

   background-color: green;

  }

 </style>

</head>

<body>

 <div>ww</div>

 <div>ss</div>

</body>

</html>

1设置了float，脱离了文档流，文档流中就没有他的位置了，于是2顶替了他的位置
1，2都设置了float，都脱离了文档流，脱离后的元素没有行的概念，只能跟在行的后面显示
1取消了float回到文档流中，当然占回了他原本的位置，2还是浮动，只是前面没有元素

左右浮动

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

.cc{

   width: 500px;

   height: 500px;

   border: solid 1px #000;

  }

.dd{

   width: 200px;

   height: 200px;

   float: left;

   border: solid 1px red;

  }

  .pp{

   width: 200px;

   height: 200px;

   float: right;

   background-color: green;

  }

  </style>

</head>

<body>

<div class="cc">

  <div class="dd">ww</div>

  <div class="pp">ss</div>

 </div>

 </body>

</html>

清除浮动

clear：对前后元素无效，只能作用于自身
none：允许两边都有浮动对象
left：不允许左边有浮动
right：不允许右边有浮动
both：左右都不允许有浮动对象

注意：

如果父元素没有宽高，他的宽高被子元素撑开
浮动元素不占文档流

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

.cc{

   width: 500px;

   height: 500px;

   border: solid 1px #000;

  }

.dd{

   width: 200px;

   height: 200px;

   float: left;

   border: solid 1px red;

  }

  .pp{

   width: 200px;

   height: 200px;

   float: right;

   background-color: green;

  }

  p{

  clear:both;

  }

  </style>

</head>

<body>

<div class="cc">

  <div class="dd">ww</div>

  <div class="pp">ss</div>

  <p></p>

 </div>

 </body>

</html>

或者是overflow：hidden;触发bfc
如何创建BFC
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

（五）背景

background-img:url("///"）；
backgroun-repeat:

repeat-x:水平重复
repeat-y:垂直重复
no-repeat：不重复

background-position：位置

center居中
百分比（水平，垂直）
像素

background-attachment: fixed;固定

背景裁切

background-clip:以盒子模型为基础，设置背景显示范围
border-box: 默认值，背景被剪裁到边框盒
padding-box:背景被剪裁到内边距框
content-box：背景被剪裁到内容框

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">

 .dd{

   width: 100px;

   height: 100px;

   border:dashed 5px #000;

   margin: 20px;

   padding: 20px;

   background-color: pink;

   background-clip: padding-box;

  }

  </style>

  </head>

  <body>

  <div class="dd"></div>

  </body>

  </html>

background-size
像素:第一值为宽，第二为高，如果只有一个就auto
百分比：相对于父元素
cover：是背景完全覆盖
contain：使宽高适用

多图背景

background-image: url(),url();
用逗号分开

渐变