浮动，层叠、定位、H5新标签

最新推荐文章于 2023-06-28 18:06:06 发布

Relaxaaa

最新推荐文章于 2023-06-28 18:06:06 发布

阅读量224

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/relaxaaa/article/details/112212344

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

浮动

float：浮动方向

1、任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
2、假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行
3、浮动元素会脱离文档流，会压住下一个块元素，但不会压住其内容。

1.浮动原理：浮动在当前行，脱离原来文本，进入到新的一层（浮动层），然后在设定的方向（左右）移动，直到遇到父级盒子的边缘，或者其他浮动块的边缘停止
2.浮动换行：当一行没有足够空间存放所有浮动块时，多出来的盒子会挤到下一行，然后按照设定的方向继续移动，直到遇到父级盒子的边缘或其他浮动块的边缘（也有特殊情况）
3.浮动坍塌：当父级盒子没有设置具体高度，并且子级浮动的情况下，父级的高度会丢失，就是浮动的坍塌。（导致与父级盒子平级的文本会向浮动的盒子下方移动）

4非浮动块特性：
Block：会向上占据浮动块所空出的区域，可以被浮动块遮盖
inline,inline-block，文字
无法出现在浮动块所覆盖的渔区，一般形成环绕效果
5.浮动换行阻挡
一般情况下出现在瀑布流布局当中如果上一行的浮动块高度不一致，就会导致当前行浮动块在浮动过程中被阻挡，margin也是浮动块停止的边缘。
6：收缩
收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。

解决由于没有设置父级块高度导致的浮动坍塌

1、为没有浮动的块清除浮动，使其出现在原本应出现的位置（清除非浮动块自动补全由于浮动而空出的位置的浮动动作）

为指定标签添加 clear: both;

    <style type="text/css">
        .d1 {
            height: 200px;
            width: 200px;
            background-color: red;
            float: left;
        }
        .d2 {

            height: 200px;
            width: 200px;
            background-color: yellow;
            float: left;
        }
        .d3 {

            height: 200px;
            width: 200px;
            background-color: blue;
            /* 设置之后就不会进行浮动而是占用原本的位置 撑开父级块 */
            clear: both;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>

2、为父标签设置层级以及溢出样式（一般设置一个即可，但不同浏览器可能不同）

    <style type="text/css">
        .d1 {
            height: 200px;
            width: 200px;
            background-color: red;
            float: left;
        }

        .d2 {

            height: 200px;
            width: 200px;
            background-color: yellow;
            float: left;
        }

        /* .d3 {

            height: 200px;
            width: 200px;
            background-color: blue;
            /* 设置之后就不会进行浮动而是占用原本的位置 撑开父级块
            clear: both;
        } */
        .box{
            /* 为存放浮动的盒子设置 */
            overflow: hidden;
            zoom: 1;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="d1"></div>
        <div class="d2"></div>
        <!-- <div class="d3"></div> -->
    </div>
</body>

3、为父标签使用伪元素进行设置添加

    <style type="text/css">
        .d1 {
            height: 200px;
            width: 200px;
            background-color: red;
            float: left;
        }

        .d2 {

            height: 200px;
            width: 200px;
            background-color: yellow;
            float: left;
        }

       .d3 {

            height: 200px;
            width: 200px;
            background-color: blue;
            /* 设置之后就不会进行浮动而是占用原本的位置 撑开父级块*/
            clear: both;
        } 
        /* .box {
            /* 为存放浮动的盒子设置  
            overflow: hidden;
            zoom: 1;
        } */

        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="d1"></div>
        <div class="d2"></div>
    </div>
</body>

清除浮动的本意：

不是将已经设置浮动的元素变为原来的样式，而是解决由于浮动导致的其他元素位置的修改，本质原因是因为浮动导致的父级元素的高度坍塌。

overflow溢出

如果设置了元素的大小，当进行内容书写时，内容过多可能导致溢出，可以通过溢出属性设置溢出的样式

属性	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

    <style type="text/css">
        div {
            height: 140px;
            width: 150px;
            border: 1px solid black;
            /* 默认：溢出内容不隐藏直接显示 */
            overflow:visible;
            /*溢出内容隐藏不显示 */
            overflow: hidden;
            /* 溢出内容以滚动条形式展示  */
            overflow:scroll;
            /* 存在溢出内容则以滚动条形式展示 否则无样式 */
            overflow: auto;
        }
    </style>
</head>
<body>
    <div>hello world！</div>
</body>

position定位

通过盒子模型可以将页面进行大概的搭建，但是在每个盒子内可能存在多个元素且位置不固定，这时候就需要使用定位来为指定元素定位至指定位置，定位的规则与方式称之为定位方式

通过设置定位样式之后通过位置设置将元素放置指定位置

1、static：
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2、absolute:
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
3、relative
生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
4、fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

绝对定位

相对于第一个被定位的父标签进行定位，本质父标签继续向上最终根据body进行定位

    <style type="text/css">
        div {
            height: 200px;
            width: 200px;
            /* 将div块设置为绝对定位 */
            /* 根据当前父级元素左上角进行绝对定位 */
            position: absolute;
        }

        .d1 {
            background-color: royalblue;

        }

        .d2 {
            background-color: yellowgreen;

        }

        .d3 {
            background-color: blueviolet;

        }

        .d4 {
            background-color: red;

        }

        .box{
            left: 20px;
        }

        body{
            margin: 0px;
        }

    </style>
</head>

<body>
    <div class="box">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
        <div class="d4"></div>
    </div>
</body>

相对定位

定位会使当前元素产生类似于浮动样式的脱离当前文本的位置，相对定位指的是元素的位置相较于没有进行定位时原位置进行定位

 <style type="text/css">
        div {
            height: 200px;
            width: 200px;
            /* 相对定位 */
            /* 相对于元素原位置进行定位 */
            position: relative;
          
        }
        .d1 {
            background-color: royalblue;
            height: 500px;
            width: 500px;
            left: 10px;
        }

        .d2 {
            background-color: yellowgreen;
            height: 400px;
            width: 400px;
            bottom: 20px;

        }

        .d3 {
            background-color: blueviolet;
            height: 300px;
            width: 300px;
            

        }

        .d4 {
            background-color: red;
        }
        body {
            margin: 0px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
        <div class="d4"></div>
    </div>
</body>

H5新标签

选项列表

根据事先定义的数据列表，根据文本框输入的数据进行提升

    <!-- 在原本文本框中 添加list属性  指向已经定义的数据列表id  -->
    <input type="text" list="mydata" placeholder="请输入姓名">选项列表<br>

    <!-- 创建数据列表 指定id 会自动将数据加入使用的输入框中 展示效果类似于下拉框 -->
    <datalist id="mydata">
        <option value="Mister">
        <option value="Mistress">
        <option value="Miss">
        <option value="Biss">
        <option value="Brown">
    </datalist>

提示框

进行输入提示的属性，当用户输入后自动情况，如果输入框中没有内容则自动添加指定的提示

      提示框：<br>
        <input type="text" placeholder="提示内容"><br>

必填框

通过指定的属性进行标识，在进行form标题提交时，如果指定标签没有数据则不会提交

   必填框：<br>
        <input type="text" required>

正则校验框

使用属性并填入正则表达式，在进form表单提交时，如果指定标签数据不符合正则表达式则不会提交

 正则校验框：<br>
        <input type="text" pattern="[0-9 a-z A-Z]{1,5}">

邮箱输入框

修改type样式使其进行邮件格式的验证，在进form表单提交时，如果指定标签数据不符合正则表达式则不会提交

      邮箱输入框:<br>
        <input type="email"><br>

url输入框

修改type样式使其进行url格式的验证，在进form表单提交时，如果指定标签数据不符合正则表达式则不会提交

  地址输入框:<br>
        <input type="url"><br>

数字输入框

进行数字选择与输入，可以设置选择的最小值min 最大值max 每次选择增长量step

        数字输入框:<br>
        <input type="number" min="1" max="10" value="1" step="2" name="number"><br>

滑动输入框

以滑动的形式在设置的指定数值区间内min~max进行数值的滑动选择

        滑动输入框:<br>
        <input type="range" min="1" max="10" value="1" name="range"><br>

日期输入框

可以动态选择日期输入

        日期输入框:<br>
        <input type="date" min="2010-12-16" name="date"/><br>
        <hr>
        时间输入框:<br>
        <input type="time" step="180" name="time"/><br>
        <hr>
        时间选择框：<br>
        <input type="datetime-local"   name="date"/><br>
        <hr>
        星期选择框：<br>
        <input type="week"   /><br>
        <hr>
        月选择框：<br>
        <input type="month"   /><br>
        <hr>

拾色器

根据选择返回相应的16进制的颜色代码

   拾色器:<br>
        <input type="color" value="#ed1c24" name="color"><br>

进度条标签

进度条：
    <progress value="22" max="100"></progress>

目录标签

可以自动进行隐藏展示（一般使用js实现）

    <details>
        <summary>Discussion</summary>
        <p> 方案 </p>
        <p> 方案 </p>
    </details>
    <details>
        <summary>Discussion</summary>
        <p> 方案 </p>
        <p> 方案 </p>
    </details>

video视频标签

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	规定视频的音频输出应该被静音。
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

audio音频标签

autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的音频的 URL。