0703作业：1.实例演示a标签和iframe标签组合使用，理解a标签target属性和iframe标签name属性的关系。2.实例演示css的三种使用方式，css按使用方式分类：内联样式、内部样式、外部样式，理解syele属性、style标签、外部样式的使用方式。3.盒模型三要素：内边距、边框、外边距设置上有什么不同？4.盒模型每个要素的样式排列方式是什么？

一、实例演示a标签和iframe标签组合使用，理解a标签target属性和iframe标签name属性的关系。

实例

<div>
    <h3>请选择您所需的搜索引擎：</h3>
    <a href="https://baidu.com" target="search-engine">百度</a> 
    <a href="https://sogou.com" target="search-engine">搜狗</a> 
    <a href="https://so.com" target="search-engine">360</a>
</div>
<br>
<div>
    <iframe src="" width="1200" height="600" frameborder="1" name="search-engine"></iframe>
</div>

总结：a标签的target属性设置当前a标签中的地址在什么窗口打开，值有：_self / _blank / _parent / _top / 自定义值，当target为自定义值时，a标签一般和iframe标签组合使用，这时a标签的target属性值和iframe标签的name属性值必须是一致，表示a标签中的地址要在iframe标签中打开。

 

二、实例演示css的三种使用方式，css按使用方式分类：内联样式、内部样式、外部样式，理解syele属性、style标签、外部样式的使用方式。

1.内联样式：内联样式就是在标签的style属性中编写样式。

实例

<div style="width: 100px; height: 100px; margin-bottom: 10px; background-color: red;"></div>

 

2.内部样式：内部样式就是在style标签中编写样式。style标签可在头部和主体的任何部位，但一般是用在头部。

 

实例

<style>#styletag { width: 100px; height: 100px; margin-bottom: 10px; background-color: yellow; }</style>
<div id="styletag"></div>

3.外部样式：外部样式就是把样式直接写在文件名后缀为css的文件中（不需要写style标签），然后通过link标签把这个样式文件引入需要的html文档中。

引入示例：<link rel="stylesheet" href="example.css">

 

三、盒模型三要素：内边距、边框、外边距设置上有什么不同？

1.内外边距只能设置大小，可单独每一边设置，也可四边一起设置，内边距的颜色与内容的颜色保持一致，外边距无法设置颜色。

2.边框可以设置宽度、样式、颜色（可分开设置，也可一起设置），和内外边距一样，可单独每一边设置，也可四边一起设置，每一边的宽度，样式，颜色都可以单独设置。

实例

<style>
    #padding-border-margin {
        width: 100px;
        height: 100px;
    
        padding-top: 50px;
        padding-right: 50px;
        padding-bottom: 50px;
        padding-left: 50px;
        /* padding: 50px; */ /* 四边的值是一样的可简写成这样的形式 */
        
        border-width: 20px;
        border-style: solid;
        border-color: #333;
        /* border: 20px solid #333; */
        border-top: 10px solid #444;
        border-right: 20px double #666;
        border-bottom: 30px dashed #888;
        border-left: 40px dotted #aaa;
        /* border-top-color: red; */

        margin-top: 50px;
        margin-right: 50px;
        margin-bottom: 50px;
        margin-left: 50px;
        /* margin: 50px 50px 50px 50px; */ /* 四边的值是一样的可简写，如：margin: 50px; */
        
        background-color: blue;
    }
</style>
<div id="padding-border-margin"></div>

 

四、盒模型每个要素的样式排列方式是什么？

盒模型的内外边距和边框都有四个边：上下左右，给内外边距的四个边添加样式时要按照上、右、下、左顺时针的顺序来添加，每边单独设置时可以不按这个顺序写，但简写时必须严格按这个顺序写。

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left:10px;
padding: 10px 20px 30px 40px; /* padding: 上 右 下 左; */
padding: 10px; /* 表示4边的值都一样。 */
padding: 10px 20px; /* 表示上下边是10px，左右边的值是 20px。 */
padding: 10px 20px 30px; /* 表示上边是10px，下边是30px，左右边的值是 20px。 */

border-top: 20px solid #666;
border-right: 20px solid #666;
border-bottom: 20px solid #666;
border-left: 20px solid #666;
border: 20px solid #666; /* 若每条边框的属性都完全一样可简写成这样的形式。 */
border-top-width: 30px; /* 单独设置某一边框的宽度。 */
border-top-style: dashed; /* 单独设置某一边框的样式。 */
border-top-color: red; /* 单独设置某一边框的颜色。 */

margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left:10px;
margin: 10px 20px 30px 40px; /* margin: 上 右 下 左; */
margin: 10px; /* 表示4边的值都一样。 */
margin: 10px 20px; /* 表示上下边是10px，左右边的值是 20px。 */
margin: 10px 20px 30px; /* 表示上边是10px，下边是30px，左右边的值是 20px。 */