em

1em=16px
想要让1em=10px因为好换算，10进制
1em：1px=1:10

10px=0.526em
font-size：52.6% ->10px =1em

  1.   <style>
  2.         html{
  3.             font-size: 62.5%;
  4.         }
  5.         div{
  6.             width: 200px;
  7.             height: 200px;
  9.             /* text-indent: 2em; */
  10.             border: 1px solid #000;
  11.         }
  13.         p{
  14.             font-size: 1.6em;
  15.             text-indent: 2em;
  16.         }
  17.     </style>
  18.     <div class="box">
  19.        <p>你好,js++!你好,js++!你好,js++!你好,js++!你好,js++!你好,js++!你好,js++!你好,js++!</p>
  20.        <p>你好,js++!你好,js++!你好,js++!你好,js++!你好,js++!你好,js++!你好,js++!你好,js++!</p>
  21.        <p>你好,js++!你好,js++!你好,js++!你好,js++!你好,js++!你好,js++!你好,js++!你好,js++!</p>
  22.     </div>

text-decoration

  1.   <style>
  2.         a{
  3.             text-decoration: none;
  4.         }
  5.         .text1{
  6.             text-decoration: underline;
  7.         }
  8.         .text2{
  9.             text-decoration: line-through;
  10.         }
  11.         .text3{
  12.             text-decoration: overline;
  13.         }
  14.     </style>
  15.     <a href="">百度一下,你就知道!</a>
  16.     <br>
  17.     <span class="text1">百度一下,你就知道!</span>
  18.     <ins>百度一下,你就知道!</ins>
  19.     <br>
  20.     <span class="text2">百度一下,你就知道!</span>
  21.     <del>百度一下,你就知道!</del>
  22.     <br>
  23.     <span class="text3">百度一下,你就知道!</span>

image.png

光标cursor

  1.    <style>
  2.         span{
  3.             color: purple;
  4.             text-decoration: underline;
  5.             cursor: pointer;/*光标*/
  6.         }
  8.         button{
  9.             cursor: not-allowed;
  10.         }
  11.     </style>
  12.     <a href="">你好,蓝轨迹</a>
  13.     <br>
  14.     <span>
  15.         你好,蓝轨迹
  16.     </span>
  17.     <br>
  18.     <button disabled="disabled">提交</button>
  1.   <style>
  2.         span{
  3.             color: purple;
  4.             text-decoration: underline;
  5.             cursor: pointer;
  6.         }
  8.         button,input[type="submit"]{
  9.             cursor: not-allowed;
  10.         }
  11.     </style>
  12.     <a href="">你好,蓝轨迹</a>
  13.     <br>
  14.     <span>
  15.         你好,蓝轨迹
  16.     </span>
  17.     <br>
  18.     <button disabled="disabled">提交</button>
  19.     <input type="submit" disabled="disabled">

image.png

文本截断

  1.     <style>
  2.         div{
  3.             width: 200px;
  4.             height: 22px;
  5.             border: 1px solid #000;  
  7.             white-space: nowrap;  /*不换行*/
  8.             overflow:hidden ;
  9.             text-overflow: ellipsis;
  10.             /*隐藏部分加省略号*/
  11.         }
  12.     </style>
  13.     <p>单行文本截断和显示省略号的三大件</p>
  14.     <div>
  15.         <span>
  16.             我非常想成为一个成功的WEB前端工程师
  17.         </span>
  18.     </div>

image.png
三大件

  1.  <style>
  2.         div{
  3.             width: 200px;
  4.             height: 44px;
  5.             border: 1px solid #000;  
  7.             overflow-y: hidden;
  8.         }
  9.     </style>
  10.     <p>单行文本截断和显示省略号的三大件</p>
  11.     <div>
  12.         <span>
  13.             我非常想成为一个成功的WEB前端工程师我非常想成为一个成功的WEB前端工程师我非常想成为一个成功的WEB前端工程师
  14.         </span>
  15.     </div>
  1.    <style>
  2.         span{
  3.             display: inline-block;
  4.             width: 100px;
  5.             height: 100px;
  6.             background-color: green;
  7.         }
  8.     </style>
  9.     inline
  10.     inline-block
  11.     block
  13.     <span></span>
  14.     <span></span>

image.png

先把a标签变成，行内块元素，行内块才能设置宽高
居中代码
设置字体等颜色
先设置宽高，再设置别的

  1.    <style>
  2.         a{
  3.             display: inline-block;
  4.             width: 200px;
  5.             height: 40px;
  8.             line-height: 40px;
  9.             text-align: center;
  11.             color: #fff;
  13.             text-decoration: none;
  14.             /* border: 1px solid #000; */
  15.             background-color: #5bc0de;
  16.         }
  17.     </style>
  18.     <a href="http://www.baidu.com" target="_blank">百度一下,你就知道</a>

a变成像按钮的样式，
image.png

  1.    <style>
  2.         a{
  3.             /*宽高颜色 背景颜色 一套的东西 宽高与背景颜色有关系 有关联 组合可以达到效果*/
  4.             display: inline-block;
  5.             width: 200px;
  6.             height: 40px;
  7.             background-color:aqua;
  9.             /* 居中 */
  10.             text-align: center;
  11.             line-height: 40px;
  13.             /* 字体 */
  14.             color: #fff;
  15.             text-decoration: none;
  18.         }
  19.     </style>
  21.     <a href="http://www.baidu.com" >百度一下,你就知道</a>

吧
封装button .class

伪类

  1.     <style>
  2.         .link-btn {
  3.             display: inline-block;
  4.             width: 200px;
  5.             height: 40px;
  7.             line-height: 40px;
  8.             color: #fff;
  9.             text-align: center;
  10.             text-decoration: none;
  11.             border-width: 1px;
  12.             border-style: solid;
  14.         }
  16.         .link-btn.btn-secondary {
  17.             background-color: #5bc0de;
  19.             border-color: #46b8da;
  20.         }
  22.         .link-btn.btn-secondary:hover{
  23.             background-color: #31b0d5;
  24.             border-color: #269abc;
  25.        }
  26.     </style>
  27.     <a href="http://www.baidu.com" target="_blank" class="link-btn btn-secondary">
  28.         百度一下,你就知道</a>

鼠标移动变色

  1.        <style>
  2.             button:disabled{
  3.                 background-color: #333;
  4.                 color: #fff;
  5.             }
  6.         </style>
  7.         <button disabled="disabled">按钮</button>

image.png

美化CheckBox

  1.        <style>
  2.             .box1{
  3.                 width: 100px;
  4.                 height: 100px;
  5.                 background-color: green;
  7.                 /* visibility: hidden; */
  8.                 display: none;
  9.             }
  11.             .box2{
  12.                 width: 150px;
  13.                 height: 150px;
  14.                 background-color: purple;
  15.             }
  17.         </style>
  18.         <div class="box1"></div>
  19.         <div class="box2"></div>
  1.      <style>
  2.             .checkbox{
  3.                 width: 40px;
  4.                 height: 40px;
  5.                 border: 2px solid #000;
  7.                 border-radius: 50%;
  8.             }
  9.             .checkbox label{
  10.                 display: block;
  11.                 width: 20px;
  12.                 height: 20px;
  13.                 margin: 10px;
  14.                 background-color: #000;
  16.                 opacity: 0;
  17.                 filter: alpha(opacity=0);
  18.                 /*opacity 值越大透明度越低，值越小透明度越高 */
  19.                 border-radius: 50%;
  20.             }
  22.             .checkbox input[type="checkbox"]{
  23.                 display: none;
  24.             }
  26.             /* 兄弟选择器+： 1同父级 2相邻 3在其之后 */
  27.             .checkbox input[type="checkbox"]:checked + label{
  28.                 opacity: 1;
  29.                 filter: alpha(opacity=100);
  30.             }
  32.         </style>
  33.         <div class="checkbox">
  34.             <input type="checkbox" id="checkbox">
  35.             <label for="checkbox"></label>
  36.         </div>

label是中间的圆形
image.png

input onfocus

  1.        <style>
  2.             input{
  3.                 outline: none;
  4.             }
  5.             input:focus{
  6.                 border: 1px solid green;
  7.             }
  8.         </style>
  9.         <input type="text">
  10.         <br>
  11.         <br>
  12.         <br>
  14.         <textarea name="" id="" cols="30" rows="10"></textarea>

image.png

  1.         <!-- /*不愿意给做笔记，给现成的笔记，为了让大家重新看视频，如果把详细笔记给了，就不愿意看视频了，
  2.         视频要反反复复的看*/ -->
  3.         <style>
  4.             div span:first-child{
  5.                 color: red;
  6.             }
  7.             div span:last-child{
  8.                 color:blue;
  9.             }
  10.         </style>
  11.         <div>
  12.             <span>123</span>
  13.             <span>123</span>
  14.             <span>123</span>
  15.             <span>123</span>
  16.             <span>123</span>
  17.         </div>

image.png

nth-child

  1.         <style>
  2.             table{
  3.                 width: 300px;
  4.             }
  5.             table tr td{
  6.                 border-bottom: 1px solid #ccc;
  7.             }
  9.             table tr:nth-child(4){
  10.                 background-color: #ddd;
  11.             }
  13.             /* nth 
  14.             n th 比如sixth 
  15.                  nth-child(odd) 奇数
  16.               even偶数
  17.               nth-child(odd|even|number)   
  18.           */
  19.         </style>
  20.         <table>
  21.             <tr>
  22.                 <td>1</td>
  23.                 <td>2</td>
  24.                 <td>3</td>
  25.             </tr>
  26.             <tr>
  27.                 <td>1</td>
  28.                 <td>2</td>
  29.                 <td>3</td>
  30.             </tr>
  31.             <tr>
  32.                 <td>1</td>
  33.                 <td>2</td>
  34.                 <td>3</td>
  35.             </tr>
  36.             <tr>
  37.                 <td>1</td>
  38.                 <td>2</td>
  39.                 <td>3</td>
  40.             </tr>
  41.             <tr>
  42.                 <td>1</td>
  43.                 <td>2</td>
  44.                 <td>3</td>
  45.             </tr>
  46.         </table>

image.png

文本对齐

  1.     <style>
  2.         img{
  3.             width: 150px;
  4.             border: 1px solid #000;
  5.             vertical-align: -30px;
  6.         }
  7.     </style>
  8.     <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
  9.     <span>123</span>

image.png
行内块和行内元素文本对齐的问题
vertical-align：top|middle|bottom|像素

容器内文本居中的方法：

1、将容器的display设置成table
2、将容器内的文本的dispaly设置成table-cell（表格单元格属性）
3、将容器内的文本的vertical-align设置成middle
因为table标签中可以居中显示多行文本

  1.    <style>
  2.         div{
  3.             display: table;
  4.             width: 100px;
  5.             height: 100px;
  6.             font-size: 12px;
  7.             border: 1px solid #000;
  8.         }
  10.         span{
  11.             display: table-cell;
  12.             vertical-align: middle;
  13.         }
  14.         table{
  15.             width: 100px;
  16.             height: 100px;
  17.         }
  18.     </style>
  19.     <div>
  20.         <span>你好,js++!你好,js++!你好,js++!</span>
  21.     </div>
  1. <style>
  2.     div{
  3.         display: table;
  4.         width: 100px;
  5.         height: 100px;
  6.         font-size: 12px;
  7.         border: 1px solid #000;
  8.     }
  10.     span{
  11.         display: table-cell;
  12.         vertical-align: middle;
  13.         text-align: center;
  14.     }
  15.     table{
  16.         width: 100px;
  17.         height: 100px;
  18.     }
  19. </style>
  20. <div>
  21.     <span>你好,js++!你好,js++!你好,js++!</span>
  22. </div>

image.png

初始化

注释

css块注释

  1.         /*单行注释*/
  3.         /*
  4.          * 多行注释 多个星号 星号空一个格 最好每行写一个星号 虽然不写也行
  5.          * hhh
  6.          */
  8.         /* 多行注释 多个星号 星号空一个格
  9.          hhh */

html

  1. <!--
  2. -->

可以成片注释掉寻找bug