背景属性复合写法、块级标签总结、行级标签总结、行内块标签总结、标签转换、显示隐藏、表单元素

背景属性复合写法

 background: 背景颜色 背景图片 背景平铺方式 背景定位;
             各个值之间以空格隔开
             建议遵循这个顺序，如果没有某个属性，直接不写 
             注意：复合写法里没有背景图片大小，需要单独设置，且在背景复合写法后设置
​
​background-size会被   background覆盖
​
​
背景属性的复合写法里的属性可以换位置，但是建议遵循背景颜色 背景图片 背景平铺方式 背景定位 这个顺序 
      background: repeat-x purple url(./image/1.png) center;
      background-size: 300px 320px;

块级标签总结

块级标签：
    本身具有display：block;属性称为块级标签
    常见的块级标签：div p h1-h6 ul li ol 
​
      特点：
      1.在没有设置宽度和高度的情况下，宽度跟父元素的宽度一样，高度由内容撑开
      2.垂直布局，独立成行（一个标签占一行）
      3.可以设置宽高、内间距、外间距、边框

​例如：
div {
      width: 100px;
      height: 100px;
      background-color: tomato;
      /* 上下左右的内间距 */
      padding: 20px;
      /* 上下左右的外间距 */
      margin: 20px;
      /* 上下左右的边框 */
      border: 20px dotted yellow;
    }

行级标签总结

行级标签：
  本身具有display：inline;属性称为行级标签
  常见的行级标签：span a b strong em i del sup sub 
​
  行级标签共有的特点：
​
  特点：
  1.宽度和高度由内容撑开
  2.水平布局，在一行显示，一行放不下会自动折行
  3.可以设置 边框、内间距
  4.不能设置宽高
  5.不能设置上下外间距，只能设置左右的外间距 
​
​例：
  a {
      background-color: yellowgreen;
      margin-left: 30px;
      margin-right: 30px;
      /* 不能设置上下外间距 */
      margin-top: 100px;
      margin-bottom: 100px;
    }
​
 /* 不能设置宽高 */
    span {
      width: 100px;
      height: 100px;
      background-color: aqua;
      border: 10px solid tomato;
      padding: 20px;
    }
​

行内块标签总结

 行内块标签：
  本身具有display：inline-block;属性称为行内块标签
  常见的行级标签：img  input(表单)
​
  行内块标签共有的特点：
​
  特点：
  1.可以设置宽高的
  2.水平布局，在一行显示，一行放不下会自动折行
  3.可以设置 边框、内间距、外间距
​
 img {
      width: 300px;
      height: 300px;
      /* 上下左右的边框 */
      border: 10px double tomato;
      /* 上下左右的内间距 */
      padding: 10px;
      /* 上下左右的外间距 */
      margin: 10px;
    }

标签转换

 1.转块级标签（用的频率还可以）
    display:block；
​
  2.转行级标签(用的频率几乎不用)
   display:inline；
​
  3.转行内块标签（用的频率比较多）
   display:inline-block；
   转成那个标签就具有那个标签的特点，原来的特点就不能用了
​
   例如：块级标签转成行内块标签，原来的块级特点就没有了，转变成了行内块标签的特点了
 比如行级标签不能设置宽高，那么我可以转成块级标签或者行内块标签

显示隐藏

 显示：display:block；
 隐藏：display:none；
    注意：元素隐藏后就相当于消失了
          display属性不能使用过渡动画
​
​
 <div class="wrap">
    <div class="son"></div>
  </div>
​
    .wrap .son {
      width: 200px;
      height: 200px;
      background-color: tomato;
      margin: 0 auto;
​
      /* 先隐藏 */
      display: none;
​
      /* 过渡动画 此时display属性的过渡动画无效 */
      transition: 2s;
    }
​
    /* 滑入父盒子的时候子盒子显示 */
    .wrap:hover .son {
      /* 显示 */
      display: block;
    }

表单元素

​
行内块标签
 特点：
  1.可以设置宽高的
  2.水平布局，在一行显示，一行放不下会自动折行
  3.可以设置 边框、内间距、外间距
​
  表单控件是通过inputd的type属性来表示不同的表单
​
  input标签自带边框和内间距
​
​
 <!-- 单行文本框  type="text"-->
  账号： <input type="text">
  <!-- 密码框， type="password" 里面的内容默认掩码处理 -->
  密码：<input type="password">
​
 input {
      width: 200px;
      height: 200px;
      border: 10px dashed tomato;
      padding: 10px;
​
      margin: 20px;
    }
​
placeholder：提示信息
     在输入内容的时候，提示信息就没有了
​
 <input type="text" class="inp" placeholder="请输入你的账号">
​
​
.inp {
      /* 改边框的颜色 */
      border-color: tomato;
​
      /* 把input边框去掉 */
      border: none;
    }
​
    .inp1 {
      /* 可以直接设置border覆盖自带边框 */
      border: 1px solid red;
    }