1.0 元素的显示模式

1.1 块元素

div独占一行，不与任意元素共使用一行

默认宽度：跟父容器一样宽

默认高度：由内容撑开

常见的块元素：div, p, ul, li, section, h1, table, form, ol, dl

div {
            width: 200px; 
            height: 200px;
            background-color: orange;
        }
<!-- 需求：给div设置一个宽高和背景颜色 -->
<div>this is the first div</div>
<div>this is the second div</div>

1.2 行内元素

宽高没有生效

不独占一行, 允许其他元素和自己在一行

宽高由内容撑开

常见的行内元素： span，a， lable

span {
      width: 200px;
      height: 200px;
      background-color: pink;
        }
<!-- 需求：给span设置一个宽高和背景颜色 -->
    <span>this is span</span>
    <span>this is span</span>

1.3 行内块元素

可以设置宽高，可以在一行显示，默认宽高和内容一样

常见的行内块元素：img, input ,textarea, select,button

img {
            width: 200px;
            height: 200px;
            border: 1px solid red;
 }
 <!-- 需求：给img设置一个宽高 -->
<img src="../03-背景属性/腾讯会议图片_20230324094140.png" alt="">

2.0 元素转换

行内元素 => 块元素 display:block ;
行内元素 => 行内块元素 display:inline-block;

span {
   display: inline-block;
   width: 200px;
   height: 200px;
   border: 1px solid #ccc;
 }
 <!-- 需求：将span进行元素类型转换 -->
    <span>我是span标签</span>
    <span>woshispan</span>

块 => 行内块 display:inline-block
块 => 行内元素 display: inline
display:none 可以隐藏元素，且隐藏后，该元素不再占有原来的位置

<style>
  div {
            display: inline;
            display: none;
            width: 100px;
            height: 100px;
            border: 1px solid rgb(0, 255, 0);
        }
</style>
<!-- 需求：将div进行元素类型转换 -->
    <div>我是div</div>
    <div>woshidiv</div>

行内块 => 行内 宽高依然生效
行内块 => 块 display:block

<style>
  input {
            /* display: none; */
            display: inline;
            width: 100px;
            height: 100px;
        }
</style>
<!-- 需求：将input进行元素类型转换 -->
    <input type="text">
    <input type="text">

3.0 控制元素的显示

需求： 鼠标移入p标签时，鼠标变为手型，且将section展示出来

4.0 列表属性

在开发中，经常用到list-style：none来取消ul, li的默认样式

5.0 边框属性

宽度 width: 200px;
高度 height：200px;
背景颜色 background-color: red;
边框宽度 border-width: 10px;
边框颜色 border-color: blue;
边框样式： solid(实线) dashed(虚线) dotted(点线) double(双实线) border-style:solid;
复合属性：对顺序无要求，但是开发中大家几乎已经默认：尺寸，样式，颜色 border: 5px solid red;

6.0 背景属性

背景色的默认值是transparent

 background-color: transparent;

设置背景图片

background-image：url('此处放入照片的相对路径');

设置背景图片的尺寸，对于小图来讲，我们可以使用cover, 让图片撑满整个父容器，对于大图来讲，我们可以使用contain，让图片自适应父容器。

background-size: contain;

设置图片是否重复：repeat:重复 no-repeat：不重复

 background-repeat: no-repeat;

设置背景图片的位置：接收两个值：分别是x坐标和y坐标，记住要加上px单位，也可以使用方位词：left center => x和y的方向。

background-position: right;

注意点： 开发中，尽量不要直接去设置img的尺寸，而是给它外面套一个盒子，给盒子设置尺寸之后，让img去继承父元素的尺寸。

背景图片和img标签中的图片差异：

背景图片尺寸如果大于父容器的尺寸，不会溢出显示。而img会溢出
背景图片上面可以直接展示文本内容，而img不行

7.0 鼠标属性

鼠标移入产生效果： cursor

手型： pointer
移动：move
文本：text
等待：wait

<div contenteditable></div>

8.0 css变量

变量的使用步骤;

使用 :root 来声明全局变量
变量是由key 和 value组成 --bgColor的意思是声明了一个key，skyblue是对应的值
哪个元素需要使用，就使用var(--bgColor)

什么是盒模型？ 全攻略（中）