day2-3，外边距合并现象，塌陷问题，行内行高

day2-3，外边距合并现象

1. <title>行内元素的垂直内外边距</title>
   
2.   <style>
   
3.     span {
   
4.       /*无法改变行内行高*/
   
5.       margin: 50px;
   
6.       padding: 20px;
   
7.       /*行内元素的垂直用line-height*/
   
8.       line-height: 100px;
   
9.     }
   
10.   </style>

复制代码

1. <title>圆角-基本使用</title>
   
2.   <style>
   
3.     div {
   
4.       margin: 50px auto;
   
5.       width: 200px;
   
6.       height: 200px;
   
7.       background-color: orange;
   
8. 
   
9.       /* border-radius: 20px; */
   
10. 
    
11.       /* 记忆：从左上角顺时针赋值，没有取值的角与对角取值相同 */
    
12. 
    
13.       /* 四值：左上  右上  右下  左下 */
    
14.       /* border-radius: 10px 20px 40px 80px; */
    
15. 
    
16.       /* 三值：左上  右上+左下  右下 */
    
17.       /* border-radius: 10px 40px 80px; */
    
18. 
    
19.       /* 两值：左上+右下  右上+左下 */
    
20.       border-radius: 10px 80px;
    
21.     }
    
22.   </style>

复制代码

1. <title>圆角-特殊场景</title>
   
2.   <style>
   
3.     img {
   
4.       width: 200px;
   
5.       height: 200px;
   
6.       /* border-radius: 100px; */
   
7.       /* 最大值是50%。超过50%没有效果 */
   
8.       border-radius: 50%;
   
9.     }
   
10. 
    
11.     div {
    
12.       width: 200px;
    
13.       height: 80px;
    
14.       background-color: orange;
    
15.       border-radius: 40px;
    
16.     }
    
17.   </style>

复制代码

1. <title>盒子阴影</title>
   
2.   <style>
   
3.     div {
   
4.       margin: 50px auto;
   
5.       width: 200px;
   
6.       height: 80px;
   
7.       background-color: orange;
   
8.       box-shadow: 2px 5px 10px 1px rgba(0,0,0,0.5) inset;
   
9.     }
   
10.   </style>

复制代码