2023.11.21作业（笔记）

1. a:hover+div {}  兄弟
   li:hover img {}  镶嵌

2. input {
         outline-style: none;  去除轮廓线（也有其他样式）
         outline:none;  去除轮廓线
         outline-width: thick;
         outline-color: red;  颜色
         outline: none;
         }

3. float: left;  浮动

4. 一个元素浮动起来，会不在占有原来的位置（脱离文档流），同时发生浮动的盒子会在同一行进行排列。如果说
   多个元素同时给左浮动，元素就会从左到右在一行排列。
   浮动可以让行内元素不再受设置宽高的约束

5. overflow: hidden;  防止浮动造成的高度塌陷
   clear: both;  清除所有浮动

6. 盒子组成：（从内到外）
   content  内容区
   padding: 100px;  内边距
   border  边框
   margin: 100px;  外边距
   真正大小：border+padding+content
   
7. margin-top: 20px;
   margin-bottom: 20px;
   margin-left: 20px;
   margin-right: 20px;
   margin: 20px;
   上下左右外边距全部为20px 

   margin: 20px 30px;  上下外边距为20px 左右外边距为30px

   margin: 10px 30px 20px;  上外边距10px、左右外边距30px、下外边距20px

   margin: 10px 20px 30px 40px;  顺时针

8. margin: 0px auto;  左右自适应，相当于居中，只适用于块元素

9. overflow: auto;  防止文本溢出

   padding-top: 20px;  （同上margin）
   padding-left: 20px;
   padding-bottom: 20px;
   padding-right: 100px;

   box-sizing: border-box;  避免影响盒子大小

10. 防止外边距塌陷
    .father {
             border: 1px solid black; 
             padding: 10px;            
             overflow: hidden;
             }  

11. 去除元素默认的内外边距
    * {
       padding: 0;
       margin: 0;
      }