iframe标签的使用和css样式设置的优先级以及css选择器的使用规则理解，和盒模型的五大要素的分析——2019.9.2

上一期我们将勇者的城镇生活和人设修改做完了，现在勇者这几天在城镇里快呆腻了，他说想出去冒险，然而咱现在还没把外面的大地图做完这就有点着急了，干脆先做一个试炼塔给勇者练练级？诶！好主意！那就用<iframe>标签来做个试炼塔传送页面。

<span style="width: 30%;float:left">>
<h2>试练塔传送</h2>
<ul>
<li><a href="../0830/onegay.html" target="monster">第一层</a></li>
<li><a href="../0830/twogay.html" target="monster">第二层</a></li>
<li><a href="../0830/threegay.html" target="monster">第三层</a></li>
<li><a href="../0830/littleboss.html" target="monster">第四小boss层</a></li>
</ul>
</span>
<iframe width="69%" height="600" srcdoc="<h2>地图简略显示</h2>" name="monster" frameborder="1" style="float:left"></iframe>

用<span>标签将iframe标签前面的塔层列表包裹起来，再定义个宽度和向左对齐，这样这个列表就会被摆在页面的左边。接着后面iframe再定义个和列表宽度相加不会超出网页宽度的数值，再定义个左对齐，这俩块元素就会并排在一行，形成左右两块的结构。再利用列表中target的属性和iframe的name属性关联的特性，这样点击列表中的塔层就会在iframe中显示对应的页面信息。

不过列表就这样也有点太寒颤了，咱们给它加点花样：

首先咱们得用选择器选中列表的li属性，这里先用内部样式的方法来进行样式控制，在head标签的范围内插入一个style标签然后加个li标签选择器：

 

ul>li {
         border: 1px solid green;
   }

这样列表每一层选项都有了一条绿油油的框框，多健康啊~

啊，还得把整个列表好好打理一下，以后ul的样式先就固定一个颜色吧，就用红色！这样重复使用多次的样式还是用外部样式的方式来引用吧，咱们自己创建一个名字叫static的文件夹，因为是静态资源嘛~基本都是这个名字。然后在static文件夹下创个css文件夹因为是放css文件的，在这个css文件夹内再创建一个css文件往里面输个代码保存

 

ul {
            border: 1px solid red;
        }
ul>li {
         border: 1px solid red;
   }

再回到原来的页面加个link标签

<link rel="stylesheet" href="../../static/css/style1.css">

引入这个文件~

接下来打开康康是个啥样~

全部是红色？？

仔细一看代码，哦，原来link标签放在后面了直接覆盖掉前面的的内部样式了。

    <style>
        ul>li {
            border: 1px solid green;
        }

<link rel="stylesheet" href="../../static/css/style1.css">

更换一下位置，吼了~

<link rel="stylesheet" href="../../static/css/style1.css">
    <style>
        ul>li {
            border: 1px solid green;
        }
    </style>

 

不过boss层肯定是要特别点，咱们需要更高优先级的样式——内联样式！直接给boss的a标签加个style属性:

<a href="../0830/littleboss.html" target="monster" style="border:2px solid blue">第四小boss层</a>

嘿嘿！这样就可以无视内部样式直接改变个别元素的样式了。

但是终归还是不可能一直用内联，万一以后突然要几百层的塔，那不得修改到累死，所以咱们还是得把内部样式搞灵清，

内部样式无非就三种选择器，id选择器，类选择器，标签选择器，再有一个就是比较特殊的js选择器。这四种该怎么搞呢

不用急，咱们再加个楼层：

<li><a href="../0830/fourgay.html" target="monster">第四层</a></li>

接着分别以下面的方式加属性：

<li id="violet"><a href="../0830/onegay.html" target="monster">第一层</a></li>
                <li><a href="../0830/twogay.html" target="monster">第二层</a></li>
                <li id="violet"><a href="../0830/threegay.html" target="monster">第三层</a></li>
                <li id="violet"><a href="../0830/fourgay.html" target="monster">第四层</a></li>
                <li style="border:2px solid blue"><a href="../0830/littleboss.html" target="monster">第四小boss层</a></li>

之后在内部样式的后面加上

 

/* id选择器：一个 */
        
        #violet{
            border: 1px solid violet;
        }
        /* 类选择器：一匹  */
        
        .yellow{
            border: 1px solid yellow;
        }
/* 标签选择器 */
        
        p {
            border: 1px solid blue;
        }

再在body标签结束之后的地方插入：

<script>
    document.getElementsByTagName('li').item(3).style.color = "saddlebrown"
</script>

再来看看最终效果~

 

这样就可以分析出：

样式选择的优先级：标签《class《id《js

好了，这样咱们就先研究完了样式，那么接下来还得好好了解我们可以怎么操练这个列表块元素。块元素有五大元素：

首先width宽度咱们已经先设置了width: 30%;那就暂时不用管了。

然后height，这个高度咱们就设置成和iframe一样高就行。

height:400px;

background-color：背景（默认透明），我们给他设个background-color: skyblue;

padding：内边距，内容与边框之间的填充区域，咱们设个4px看看。

之后还有个margin：外边距，决定当前盒子与其它盒子之间的位置与关系。

接下来看看效果~：

 

哎呀，加上了padding和margin之后貌似宽度超了，那么咱们把width调小点：

width:27%;

 

这样就可以了~

蓝色区域就是padding与主体的所占区域。即：background-color所涉及到的区域。

Margin是蓝色那一块和iframe区域之间的白色区域

Padding则是蓝色区域到ul边框的那个区域，

Width则是ul所占的宽度了

Heigh则是蓝色区域的上下高度了