day47 选择器优先级及嵌套关系

复习

1.前端: 网页, html + css + js
2.html三个组成部分:标签,指令和转义字符
标签: <>包裹, 以字母开头, 可以结合-|数字, 能被浏览器解析的标记
3.常用的基本标签
div,a,link,img,p,i,span,b,ul>li,(br/hr),sup,sub.pre,table>thead>tbody>tfoot>tr>th|td
4.css引入
行间式:style属性中
内联式:head标签的style标签中
外联式:css文件中
选择器{
    样式块
}

今日内容

css基础选择器
长度与颜色设置
display属性样式
字体|文本相关属性样式
背景属性样式
边界圆角属性样式
盒模型及盒模型布局

基础选择器

1.(*)通配选择器:html,body,body下的可用于显示的标签
2.div(标签选择器):该标签名对用的所有该标签
3. (.) (class选择器)(eg:.div = class='div'):类名为div的所有标签,可以重名
4.(id选择器)(eg:#div => id='div'):id名为div的唯一标签

<style>
    div{
        width: 100px;
        height: 100px;
        color: red;
        background-color: green;
    }
    .div1{
        width: 200px;
        height: 200px;
        color: white;
        background-color: black ;
    }
    #div3{
        width: 20px;
        height: 20px;
        color: white;
        background-color: orange ;
    }
</style>
<div>123</div>
<div class="div1">1</div>
<div class="div2">2</div>
<div id="div3">2</div>

总结:
1.在实际开发中,尽量少用或不用标签吗作为选择器,标签名作为选择器一般是该标签处在最内层的时候(使用它的语义或功能时)
2.内联和外联,相同属性采用处在下面的覆盖上面的,不同属性进行叠加
3.在css语法选择器中,用.class名来代表class,用#id名来标识id
4.行间式属于逻辑的最下方,相同的属性一定会覆盖内联和外联
5.一般不使用行间式单独操作(可读性差),所以用起别名的方式来单独改变其颜色
6.用class起名,分类别,可以重名,给标签设置唯一标识符是使用id

选择器的优先级

理解:控制范围越精确,优先级越高,所设置的样式会覆盖优先级低的相同属性样式
结论:优先级顺序 通配<标签 < class < id < 行间式 < |important
行间式优先级要高于内联和外联所有选择器,但是不能高于!important,属性值与分号之间加!important
注意: !important书写在属性值后;前

<style>
    #div {
        background-color: yellow;
    }

    .div {
        background-color: yellowgreen;
    }

    div {
        background-color: green!important;
    }

    * {
        width: 100px;
        height: 100px;
        background-color: darkgreen;
    }
    /*!important 优先级要强于行间式, 在属性值与;之间设定*/
</style>
<div class="div" id="div" style="</div>

长度与颜色

长度单位: px mm cm em rem vw vh in

颜色设置方式:
1.颜色单词
2.#000000 ~ #FFFFFF (#abc == #AABBCC)
3.rgb(0~255, 0~255, 0~255)|rgba(0~255, 0~255, 0~255, 0~1)
rgba代表颜色和透明度,0为完全透明,1为不透明

<style>
    .div {
        /*px mm cm em rem vw vh in*/
        width: 10in;
        height: 100px;
        /*颜色:
        1.颜色单词
        2.#000000 ~ #FFFFFF (#abc == #AABBCC)
        3.rgb(0~255, 0~255, 0~255)|rgba(0~255, 0~255, 0~255, 0~1)
        */
        background-color: rgba(255, 0, 0, 0.5);
    }
</style>
<div class="div"></div>

显示方式display

1.有些标签支持宽高,有些标签不支持宽高
2.有些标签同行显示,有些标签异行显示(独占一行)
3.有些标签由结束标识,有些标签没有结束标签(省略了)

不同的标签,在页面中书写的方式不一样,显示效果也不一样,支持的css样式程度也不一样
分类:
1.单双标签的分类
单标签:br,hr,img,meta,link,特性:功能具体,不需要内容,设置为单标签,单标签结束符在标签尾部,可以省略
eg:<img />,<br />
双标签:h1,p,span,div,具有子标签,包含内容,设置为双标签,双标签首尾分离
eg:<h1>内容</h1>
结论:主内容

<style>
    span{
        width: 200px;
        height: 50px;
        }
    p{
        width: 200px;
        height: 50px;
        background-color: red;
        }
    img{
        width: 200px;
        /*height: 50px;*/
        }
</style>
<spam>123<i>456</i><b>789</b></spam>
<spam>123<i>456</i><b>789</b></spam>

<p>123<i>456</i><b>789</b></p>
<p>123<i>456</i><b>789</b></p>

<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=538916491,4234853604&fm=200&gp=0.jpg" alt="">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=538916491,4234853604&fm=200&gp=0.jpg" alt="">

2.通过display属性值进行划分
dispaly
    what: 控制标签在页面中的显示方式的属性
    why: 通过设置该属性的不同属性值,使其在页面中的显示方式达到设定的效果,且对于css的样式支持程度也不一样
    1.同行显示inline:只支持部分css样式(不支持宽高),宽高由文本内容撑开
    .o1 {
    display: inline;
    /*
    1.同行显示
    2.只支持部分css样式(不支持宽高)
    3.宽高由文本内容撑开
    */}

    2.block:异行显示,支持所有css样式,设置了宽高就采用设置的值,宽高也具有默认的特性(后面讲)
    .o2 {
    display: block;
    /*
    1.异行显示
    2.支持所有css样式
    3.设置了宽高就采用设置的值, 宽高也就有默认的特性(后面讲)
    */}

    3.inline-block:同行显示,支持所有css样式,设置了宽高就采用设置的值,宽高也具有默认的特性(后面讲)

    .o3 {
    display: inline-block;
    /*
    1.同行显示
    2.支持所有css样式
    3.设置了宽高就采用设置的值
    */}
    <owen class="o1">123</owen>
    <owen class="o1">123</owen>
    <hr>
    <owen class="o2">123</owen>
    <owen class="o2">123</owen>
    <hr>
    <owen class="o3">123</owen>
    <owen class="o3">123</owen>

结论:
1.带有inline的就会同行显示,带有block的就会支持所有css样式
2.带有inline的都是与内容相关的标签,带有block的主要用来搭建架构的

嵌套关系

<style>
    .list {
        display: inline-block;
        vertical-align: middle;
    }
    /*总结: vertical-align
    baseline: 文本底端对齐(默认值)
    top: 标签顶端对齐
    middle: 标签中线对齐
    bottom: 标签底端对齐
    */
    .box {
        width: 80px;
        height: 35px;
        background-color: #333;
    }
</style>
<div class="list">
    <div class="box">呵呵呵呵呵呵呵呵呵呵呵呵</div>
</div>
<div class="list">
    <div class="box" style="height: 60px">呵呵</div>
</div>

why:页面架构就是由一层层嵌套关系形成的
嵌套关系有一定的规则:
1.inline-block类型不建议嵌套任意标签,所以系统的inline-block都设计成了单标签
2.inline类型只嵌套inline类型的便签
3.block类型可以嵌套任意类型标签(注:h1-h6和p,只建议嵌套inline类型)
标签的显示方式就是由display属性

结论:
1.inline嵌套block和inline-block,不起任何作用,所以只能嵌套inline
2.inline-block可以嵌套其他类型标签,但一定要结合vertical-asign属性操作,左右还有一空格间距
3.block嵌套该如何显示?

盒模型

margin,border,padding,content
.d${$}*7
总结:
盒模型由四部分组成: margin + border + padding + content
1.margin: 外边距, 控制盒子的位置(布局), 通过左和上控制自身位置, 通过右和下影响兄弟盒子位置(划区域)
/*margin: 100px 50px;*/
/*起始为上, 顺时针依次赋值, 不足边取对边*/  

2.border: 边框, 样式/宽度/颜色 (solid实线 dashed虚线 dotted点状线)
/*border-style: solid;*/
/*border-width: 10px;*/
/*border-color: red;*/
/*transparent透明色*/
border: blue dashed 20px;

3.padding: 内边距, 从显示角度控制文本的显示区域
/*padding: 10px 10px 10px 10px;*/
/*padding: 20px 30px;*/
/*起始为上边, 顺时针依次赋值, 不足边取对边*/

4.content: 内容区域, 由宽 x 高组成
width: 190px;
height: 190px;
<div class="box">123</div>
<div>456</div>
注意:
1.margin,padding: 起始为上, 顺时针依次赋值, 不足边取对边
2.要做到文本内移,设置padding, 如果又想显示区域不变, 相应减少content

盒模型布局

1.上下两个盒子的margin-bottom和margin-top功能相同, 同时出现, 取大值.左右正常叠加

<style>
    .b1 {
        margin-bottom: 50px;
    }
    .b2 {
        margin-top: 50px;
    }
</style>
<div class="b1"></div>
<div class="b2"></div>

2.第一个有显示区域的子级会和父级联动(margin-top重叠), 取大值

解决2:
1.父级设置border-top
2.父级设置padding-top
<style>
    .sup {
        width: 200px;
        height: 200px;
        background-color: orange;
        /*margin-top: 40px;*/
        /*border-top: 1px solid black;*/
        padding-top: 10px;
    }
    .sub1 {
        /*border: 1px solid red;*/
        width: 50px;
        height: 50px;
        background-color: red;
        margin-top: 50px;
    }
    .sub2 {
        width: 50px;
        height: 50px;
        background-color: pink;
        margin-top: 50px;
    }
</style>
<section class="sup">
    <section class="sub1"></section>
    <section class="sub2"></section>
</section>