HTML学习

最新推荐文章于 2022-04-02 01:28:23 发布

追光少年羽

最新推荐文章于 2022-04-02 01:28:23 发布

阅读量330

点赞数

分类专栏： Java-Web学习文章标签： html 学习 p2p

本文链接：https://blog.csdn.net/a15608445683/article/details/123263927

版权

Java-Web学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了HTML中图像的叠加方法，只需设置Z轴属性即可实现。接着详细阐述了块级元素与行内元素的特性及常见标签，如<div>、<p>、<span>等。在页面布局方面，讲解了如何去除body边框、设置内边距、子标签与父标签间距，以及浮动属性的使用，包括浮动元素对周围元素的影响和清除浮动的方法。通过实例代码展示了浮动元素如何影响页面布局，并提供了消除浮动影响的解决方案。

摘要由CSDN通过智能技术生成

一、实现图像的叠加

只需要设置z轴的属性即可，其实我们完全可以将浏览器想象成一个三维的坐标系

二、块级元素和行内元素

1、块级元素：块级大多为结构性标记

1.总是从新的一行开始

2.高度、宽度都是可控的

3.宽度没有设置时，默认为100%

4.块级元素中可以包含块级元素和行内元素

<address>...</adderss>   
<center>...</center>  地址文字
<h1>...</h1>  标题一
<h2>...</h2>  标题二级
<h3>...</h3>  标题三级
<h4>...</h4>  标题四级
<h5>...</h5>  标题五级
<h6>...</h6>  标题六级
<hr>  水平分割线
<p>...</p>  段落
<pre>...</pre>  预格式化
<blockquote>...</blockquote>  段落缩进   前后5个字符
<marquee>...</marquee>  滚动文本
<ul>...</ul>  无序列表
<ol>...</ol>  有序列表
<dl>...</dl>  定义列表
<table>...</table>  表格
<form>...</form>  表单
<div>...</div>

2、行内元素：行内大多为描述性标记

1.和其他元素都在一行

2.高度、宽度以及内边距都是不可控的

3.宽高就是内容的高度，不可以改变

4.行内元素只能行内元素，不能包含块级元素

<span>...</span>
<a>...</a>  链接
<br>  换行
<b>...</b>  加粗
<strong>...</strong>  加粗
<img >  图片
<sup>...</sup>  上标
<sub>...</sub>  下标
<i>...</i>  斜体
<em>...</em>  斜体
<del>...</del>  删除线
<u>...</u>  下划线
<input>...</input>  文本框
<textarea>...</textarea>  多行文本
<select>...</select>  下拉列表

三、页面布局

1、去除掉body的边框

body{margin:0px;}

2、设置标签内边框距离

其实就是利用padding的属性该属性可采取 4 个值：记住采用的顺序是上左下右

如果规定四个值，比如 div {padding: 50px 10px 20px 30px} - 上内边距是 50 px，右内边距是 10 px，下内边距是 20 px，左内边距是 30 px。如果是三个值就是上左下。

<p id="p1">This is a paragraph

<h3 style="padding:50px 50px 100px ">测试好</h3>
</p>

3、设置子标签和父标签的距离

margin指的是当前控件和父控件的边距。这里注意和padding的区别，下面所示，padding对应的是60dp，而margin对应的是30dp，已经非常直观了！！！

4、浮动属性

这块不怎么好理解，但是可以这样想，浮动就是让自己漂浮起来，其实html元素就像是拼积木一样，自己浮起来了，那么后面同级别的元素是不是可以紧挨着过去呢.

注意看下面的第三个div是紧挨着第二个div的，也就是相当于第二个div其实就好像是浮在第三个div上面。

        .inside1{
            padding:10px;
            border:1px dashed black;
            background:#a9d6ff;
            /*margin-bottom:5px;*/
        }

        .inside2{
            padding:10px 20px 30px 60px;
            border:1px dashed black;
            background:#ffacd3;
            /*margin:5px;*/
            float:left;
        }
        .inside3{
            padding:10px 20px 30px 60px;
            border:1px dashed black;
            background:#a9d6ff;
            /*margin-bottom:5px;*/
        }

1、分析

HTML页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。

Float有4个值：

left ：元素向左浮动。

right ：元素向右浮动。

none ：默认值。

inherit ：从父元素继承float属性。

浮动后的div宽度会变成0，但是其内边框可能撑起它的宽和高。

代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.outside{
    font-size:12px;
    font-family: Arail;
    padding:10px;
    background-color:#fffcd3;
    border:1px solid black;
    width:50%;
}
.inside1{
    padding:10px;
    border:1px dashed black;
    background:#a9d6ff;
    margin:5px;
    float:left;
    /* 1.div1向左漂浮之后，宽度为0
       2.div1移到父元素的左边
       3.div1的原始位置被空出来，由后面的html元素来补上。
    */
}
.inside2{
    padding:10px;
    border:1px dashed black;
    background:#ffacd3;
}
</style>
</head>
<body>
<div class="outside">
    <div class="inside1">内部div</div>
    <div class="inside2">内部div</div>
</div>
</body>
</html>

2、div浮动对html元素的影响

如果浮动的div前面有同级别html元素，该浮动的div会排在html元素后面浮动，不会覆盖html元素总结：div的浮动对前面的html元素没影响，对后面的html元素有影响。

代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div浮动</title>
<style type="text/css">
.outside{
    font-size:12px;
    font-family: Arail;
    padding:10px;
    background-color:#fffcd3;
    border:1px solid black;
    width:50%;
}
.inside1{
    padding:10px;
    border:1px dashed black;
    background:#a9d6ff;
    margin-bottom:5px;
}
.inside2{
    padding:10px;
    border:1px dashed black;
    background:#ffacd3;
    margin:5px;
    float:left;
    /*
        如果浮动的div在前面有相同的div，直接排在同级的div的下面浮动，
        不会超越上面同级的div。
        总结：
          div的浮动对前面的html元素每影响，对后面的html元素有影响。
    */
}
</style>
</head>
<body>
<h1>div浮动</h1>
<div class="outside">
    <div class="inside1">内部div</div>
    <div class="inside2">内部div</div>
    <div class="inside1">内部div</div>
</div>
</body>
</html>

3、CSS中多个div浮动

多个同级块元素同时在一个方向浮动，则从该方向上水平依次排列

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div浮动</title>
<style type="text/css">
.outside{
    font-size:12px;
    font-family: Arail;
    padding:10px;
    background-color:#fffcd3;
    border:1px solid black;
    width:50%;
}
.inside1{
    padding:10px;
    border:1px dashed black;
    background:#a9d6ff;
    margin-bottom:5px;
}
.inside2{
    padding:10px;
    border:1px dashed black;
    background:#ffacd3;
    margin:5px;
    float:left;
}
</style>
</head>
<body>
<h1>div浮动</h1>
<div class="outside">
    <div class="inside1">内部div1</div>
    <!--
       如果多个同级html元素同时浮动，这几个html元素就会从左到右浮动排列
        脱离了div的自动换行
     -->
    <div class="inside2">内部div2</div>
    <div class="inside2">内部div3</div>
    <div class="inside2">内部div4</div>
    <div class="inside2">内部div5</div>
    <div class="inside1">内部div6</div>
</div>
</body>
</html>

4、CSS消除div漂浮的影响

前面div的浮动会影响后面的div的布局，如果想消除该影响可以使用clear:left | right | both

代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.outside{
    font-size:12px;
    font-family: Arail;
    padding:10px;
    background-color:#fffcd3;
    border:1px solid black
    width:50%;
}
.inside1{
    padding:10px;
    border:1px dashed black;
    background:#a9d6ff;
    margin:5px;
    float:left;
    /* 1.div1向左漂浮之后，宽度为0
       2.div1移到父元素的左边
       3.div1的原始位置被空出来，由后面的html元素来补上。
    */
}
.inside2{
    padding:10px;
    border:1px dashed black;
    background:#a9d6ff;
    margin:5px;
    float:right;
}
.inside3{
    padding:10px;
    border:1px dashed black;
    background:#ffacd3;
    clear:both;
    /* left消除左边漂浮的影响
       right消除右边漂浮的影响
       both消除两边漂浮的影响   
      */
}
</style>
</head>
<body>
<div class="outside">
    <div class="inside1">内部div1</div>
    <div class="inside2">内部div2</div>
    <div class="inside3">内部div3</div>
</div>
</body>
</html>