id选择器、后代选择器、标签嵌套、圆角、外间距

id选择器

权重:100
给标签起一个id名
在开始标签中设置 id=''
​
在html结构中：
以 id=''来表示
​
在css中以#来表示
#+名字
​
注意：id名具有唯一性，一个页面同名的id只能有一个
​
id类似于身份证号，一个人有一个唯一的身份证号
​
一般一个大的模块的盒子用id选择器
与js获取元素用
​
​
起id名的一些注意点：
1.不要以汉字为id命名 id='你' 错误
2.不要以纯数字为id命名 id='1' 错误
3.不要以数字开头为id命名 id='1a' 错误
​
id='a1' 正确
​
​
在html结构中 
<div id="box">疫情什么时候才能没有</div>
<h3 id="con">h3</h3>
​
在css中以#来表示
#box {
background-color: yellowgreen;
}
​
#con {
color: tomato;
}
​
​
css选择器的总结
​
  
  1.通配符选择器 *{} 一般用于清除浏览器的默认样式  权重：0
  2.标签选择器 div{} 慎用                         权重：1
  3.class选择器 .box{} 使用频率最高，建议使用      权重：10
  4.id选择器 #con{} 一般用于一个大的模块的盒子  权重：100
​
这四个选择器叫做基础选择器，在设置样式的时候都是单一(一个选择器)的设置
.box{}
p{}
#a{}
​
​
  谁的权重越大，优先显示谁的样式
​
  id选择器的权重>class选择器的权重>标签选择器的权重>通配符选择器的权重

后代选择器

​
    后代选择器:复合选择器
    复合选择器:由两种及以上基础选择器组成
    基础选择器：通配符 标签 class  id
​
    语法： E F选择器直间用空格隔开
    E F{}
    表示：E元素后代中所有的F元素具有以下样式
​
​
    后代选择器也可以限制标签的范围
​
  <div class="wrap">
    <p>p标签</p>
    <h1>h1标签</h1>
    <span>span标签</span>
    <div class="a">a--div</div>
    <div>
      <p>div--pp</p>
    </div>
    <div class="box">wrap下的 box</div>
  </div>
​
 在.wrap元素中所有的后代元素p标签都有以下样式 
    .wrap p {
      background-color: aqua;
    }
​
使用频率高，使用后代选择器可以限定范围，这样的话不会引入页面的样式冲突

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

​
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标签还具有跳转功能
​
解决方法2： 把a标签转成行内块级标签 
此时a标签由本身的行级标签转成行内块级标签
本身行级标签的特点也没有了，转成了行内块级标签的特点
但是a标签还具有跳转功能

​
<!-- 错误语法 -->
<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>
​

圆角

语法：
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;
​
}

外间距

外间距：两个盒子之间的距离
    有四个值
    上外间距
    下外间距
    左外间距
    右外间距
​
    单位：
    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;