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. 1设置了float,脱离了文档流,文档流中就没有他的位置了,于是2顶替了他的位置
  2. 1,2都设置了float,都脱离了文档流,脱离后的元素没有行的概念,只能跟在行的后面显示
  3. 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();
用逗号分开

渐变

©️2020 CSDN 皮肤主题: 岁月 设计师:pinMode 返回首页