行级标签不能嵌套块级标签和图片标签、圆角、外间距

1、行级标签不能嵌套块级标签和图片标签

​
a标签不能嵌套块级标签和图片（行内块）标签 
不仅是a标签不能嵌套块级标签和图片标签 
​
行级标签不能嵌套块级标签和图片标签
原因：
行级标签嵌套块级标签和行内块标签后，宽高是不对的，因为行级标签撑不起块级标签和行内块标签
​
行级标签：span em i b strong a del
块级标签:div p h1-h6 hr
行内块标签:img
不参与标签分类：br
​
解决方法:
把行级标签转成块级标签或者行内块标签
设置块级标签：display：block;
设置行内块标签：display：inline-block;
​
​
解决方法1： 把a标签转成块级标签 
此时a标签由本身的行级标签转成块级标签
本身行级标签的特点也没有了，转成了块级标签的特点
但是a标签还具有跳转功能
​
.box {
display: block;
}
​
​
​
解决方法2： 把a标签转成行内块级标签 
此时a标签由本身的行级标签转成行内块级标签
本身行级标签的特点也没有了，转成了行内块级标签的特点
但是a标签还具有跳转功能
​
​
.box1 {
display: inline-block;
}
​
​
​
​
<!-- 错误语法 -->
<a href="#">
    <div style="width:200px;height:200px;background-color:red;">div</div>
</a>
<!-- 现在a标签：width 700px; height:21px  错误 -->
<a href="#">
    <img src="./image/1.jpg" alt="">
</a>
​
​
<!-- 解决 -->
<a href="#" class="box">
    <img src="./image/花瓣.png" alt="">
</a>
<a href="https://www.baidu.com/" class="box1">
    <img src="./image/花瓣.png" alt="">
</a>
​

2、圆角

语法：
border-radius:;
单位：px  百分比
四个圆角
左上角  右上角 右下角 左下角
四个值用空格隔开
数值越大，弧度越大
​
当宽度高度一样的情况下，圆角设置50%,此时是一个正圆
​
如果某个圆角不需要的话，直接写0px或者0
​
​
​
/* 一个值： 四个角 */
border-radius: 30px;
/* 两个个值： 左上角和右下角 30px    右上角和左下角是60px */
border-radius: 30px 60px;
/* 三个值： 左上角30px   右上角和左下角60px  右下角90px */
border-radius: 30px 60px 90px;
/* 四个值 左上角30px  右上角60px  右下角90px 左下角120px  顺时针 */
border-radius: 30px 60px 90px 120px;
​
​
/* 正圆 */
.box6 {
width: 100px;
height: 100px;
background-color: blueviolet;
border-radius: 50%;
}
​
​
/* 只想要左上角圆角 */
.box8 {
background-color: orangered;
/* 只写你要的设置的圆角即可，其余设置为0 */
border-radius: 30px 0 0 0;
​
}
​
/* 只想要左上角和右上角圆角 */
.box9 {
background-color: orchid;
/* 四个值 左上角 右上角  右下角 左下角  */
/* 只写你要的设置的圆角即可，其余设置为0 */
border-radius: 30px 10px 0px 0px;
​
}

3、外间距

外间距：两个盒子之间的距离
    有四个值
    上外间距
    下外间距
    左外间距
    右外间距

    单位：
    px
    百分比
    auto(浏览器自动计算，自动，一般用于居中)
    可以为负值

    语法:
    单独取值：
    上外间距 margin-top:
    下外间距margin-bottom
    左外间距margin-left
    右外间距margin-right

    复合写法：
    margin: ;
    每个值直接用空格隔开

    如果某个间距不需要的话，直接写0px或者0

 /* 一个值：四个外间距都是50px */
      margin: 50px;
      /* 两个值：上外间和下外间距 20px  左外间和右外间距 40px    */
      margin: 20px 40px;
      /* 三个值：上外间20px    左外间和右外间距 40px 下外间距   60px */
      margin: 20px 40px 60px;
      /* 四个值：上外间20px  右外间距40px   下外间距60px  左外间80px  */
      margin: 20px 40px 60px 80px;

 /* 左外间距 */
      /* margin-left: 40px; */
      margin: 0px 0 0 40px;