Html5学习内容-4

原创

mm晴朗 2023-01-30 16:56:52 博主文章分类：html ©著作权

©著作权归作者所有：来自51CTO博客作者mm晴朗的原创作品，请联系作者获取转载授权，否则将追究法律责任

（一）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>