day 026 HTML，CSS进阶2-CSDN博客

本文链接：https://blog.csdn.net/Michael_Cool/article/details/79177969

今天继续学习HTML，CSS相关知识，今天的主要内容有表单，块元素，内联元素，内联块元素及类型转换，浮动，定位。

表单

是什么？

报名某个协会要填写申请表，申请表是一张表单；申请一个github账号要填写申请信息，填写个人信息的网页也是一张表单，在网页中，这种表单内容该怎么展现出来呢?就用到了表单这个标签–用来生成一张表单的标签。

有哪些内容？

<form>标签，用来定义表单的整体区域
<label>标签，为表单元素定义文字标注
<input>标签，定义通用的输入项
<textarea>标签，定义多行文本输入框
<select>标签，定义下拉表单元素
<option>标签，与<select>标签配合，定义下拉表单元素中的选项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .form1 div {
            margin: 20px;
        }

        .info {
            /*去除改变大小的功能*/
            resize: none;
        }
    </style>
</head>
<body>
   <form class=“form1” action="www.itheima.cn" method="get">
       <!-- action 属性表示需要连接的服务器的地址（域名） -->
       <!-- method 属性表示连接的方式 -->
        <!-- get:1.请求的内容以name:value的形式显示在网页的url中
                 2.可以向服务器发送一些内容量小的请求   -->
        <!-- post:1.请求内容不显示在url中，起到保护信息的作用
                  2.一般用于向服务器发送一些内容量较大的请求 -->
       <div>
           <!-- 姓名 -->
            <label for="name">姓名：</label>
            <!-- for属性，指定label标签的id -->
            <input type="text" id="name" name="username">
            <!-- type属性，表示输入内容的种类，"text"表示单行文本输入 
                id表示该标签的id，name,指定在url里显示的name值 -->
       </div>
       <div>
           <!-- 密码 -->
           <label for="pwd">密码：</label>
           <input type="password" id="psw" name="psw">
           <!-- type属性“password”表示密码输入框，输入时会隐藏输入内容-->
       </div>
       <div>
           <!-- 性别 -->
           <label for="gender"></label>性别：</label>
           <input type="radio"  id="nan" name="gender" value="0"><label for="nan">男</label>
           <input type="radio" id="女" name="gender" value="1"><label for="nv">女</label>
           <!-- type="radio"属性，表示定义单选框 -->
       </div>
       <div>
           <!-- 爱好 -->
           <label for="hobby">爱好：</label>
            <input type="checkbox" id="sing" name="sing" value="sing"><label for="sing">唱歌</label>
            <input type="checkbox" id="dance" name="dance" value="dance"><label for="dance">跳舞</label>
            <input type="checkbox" id="run" name="run" value="run"><label for="run">跑步</label>
            <input type="checkbox" id="study" name="study" value="study"><label for="study">学习</label>
            <!-- type="checkbox"属性表示复选框 -->
       </div>
       <div>
           <!-- 照片 -->
           <label for="photo">照片：</label>
           <input type="file" id="file" name="file">
           <!-- type="file"属性表示需要选择文件 -->
       </div>
       <div>
           <!-- 个人描述 -->
           <label for="info">个人描述：</label>
           <textarea id="info" name="info" cols="30" rows="10"></textarea>
           <!-- <textarea>标签表示内容框，可输入多行内容，cols属性表示每一行可输入的字符数，rows表示显示多少行字符 -->
       </div>
       <div>
           <!-- 籍贯 -->
           <label for="local">籍贯：</label>
           <select name="local" id="local">
               <option value="1">北京</option>
               <option value="2">上海</option>
               <option value="3">广州</option>
               <option value="4">深圳</option>
               <option value="5">苏州</option>
           </select>
           <!-- <select>标签定义下拉表单元素 -->
               <!-- <select>标签内的<option>标签表示表元素的选项 -->

       </div>
       <div>
           <!-- 注册，重置 -->
           <input type="submit" id=“submit” value="注册">
           <input type="reset" id=“reset” >
            <!-- type="submit"定义的是提交按钮 -->
            <!-- type="reset"定义的是重置按钮 -->
        </div>

   </form>
</body>
</html>

界面展示
这里写图片描述

能干什么？

可以用来设置表单类的界面

块元素

是什么？

块元素是自己占了一行的标签，也叫行元素。

有哪些内容？

常见的块元素为:<div>,<p>,<ul>,<ol>,<h1--h6>
它们的性质有：
1. 支持所有样式
2. 如果不设置宽度，则宽度为父级宽度的100%
3. 即使设置了宽度，也是占据一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        div{
            background-color:red;
            /* 如果不设置宽度，则默认宽度为父级宽度 */
        }
        p{
            width: 200px;
            /* 即使设置了宽度，依然占据一行的空间 */
            height: 200px;
            background-color: blue;
        }
        h1{
            background-color: blueviolet;
        }
        ul{
            background-color:yellow;
        }
    </style>
</head>
<body>
    <div>这是一行测试块元素&lt;div&gt;的文本</div>
    <p>这是一行测试块元素&lt;p&gt;的文本</p>
    <h1>这是h1</h1>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
    </ul>  
</body>
</html>

页面效果：
这里写图片描述

能干什么？

完成需要单独一行处理的任务

内联元素

是什么？

内联元素是可以在一行上显示多个的标签

有哪些内容？

内联元素主要有<span>,<a>,<i>,<b>,<em>,<strong>
内联元素的性质：
1. 不支持宽，高，margin上下，padding上下
2. 宽高由内容确定
3. 所有内联元素并在一行
4. 代码换行，盒子之间会产生间距
5. 子元素是内联元素，父元素可以用text-align属性设置子元素的的水平对齐方式

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .con{
            width: 300px;
            height: 100px;
            background-color: aqua;
            font-size: 0;
            /* 解决内联元素之间的空隙问题：先在父元素把字体大小设为0，然后子元素分别重新设置 */
        }
        .con a, .con span{
            font-size: 16px;
            /* 子元素文字重新设置大小，可以解决内联元素空隙问题 */

            margin: 10px 10px;
            padding:20px;
            /* 内联元素不支持margin上下，padding上下 */
        }
        .con1{
            width: 300px;
            height: 200px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="con">
        <a href="">这是第一个链接</a>
        <a href="">这是第二个链接</a>
        <a href="">这是第三个链接</a>
        <span>这是span1标签里的内容</span>
        <span>这是span2标签里的内容</span>-->
        <span>这是span3标签里的内容</span> 
    </div>
    <div class="con1">
           <em>工资</em>是发给日常工作的人，
           <!-- <em>标签表示语气中的强调词 默认斜体-->
            高薪是发给<i>承担责任</i>的人，
            <!-- <i>表示专业词汇 默认斜体-->
            奖金是发给<b>做出成绩</b>的人，
            <!-- <b>表示关键字/产品名 默认加粗-->
            股权是分给能干<strong>忠诚</strong>的人，
            <!-- <strong>表示非常重要的内容 默认加粗 -->
            荣誉是颁给有理想抱负的人，
            辞退信将送给没结果还耍个性的人。
            市场没有四季，只有两季——努力就是旺季!不努力就是淡季！
    </div>
</body>
</html>

内联元素之间的空隙
这里写图片描述

通过设置父元素font-size:o;,子类重设置字体大小，可解决元素之间的空隙问题
这里写图片描述

能干什么?

可以处理需要在一行上布局多个块的情况，如表单结构。

dislay属性

dislay属性是用来设置元素的类型及隐藏的
常用的属性有：
1. none 元素隐藏且不占位置
2. block 元素以块元素显示
3. inline 元素以内联元素显示
4. inline-block 元素以内联块元素显示

内联块元素

是什么？

内联块，拥有块元素表现样式的内联元素，它们单独的本身是块元素
是使用display属性转化的
性质有：
1. 支持全部样式
2. 如果没有设置宽高，宽高有内容决定
3. 盒子可以并在一行上
4. 代码换行，盒子之间会产生间距
5. 子元素是内联块元素，父元素可以使用text-align属性设置元素的水平对齐方式

有什么内容？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div div{
            width: 50px;
            height: 50px;
            background-color: red;
            display: inline-block;
            /* 使用display：inline-block 可将块元素转换为内联块元素 */

        }
        div a{
            width: 50px;
            height: 50px;
            background-color: blue
        }
    </style>
</head>
<body>
    <div>
        <div>div1</div>
        <div>div2</div>
        <div>div3</div>
        <a href="">链接1</a>
        <a href="">链接2</a>
        <a href="">链接3</a>
    </div>
</body>
</html>

块元素
这里写图片描述

将块元素转换成内联块元素
这里写图片描述

能干什么？

是布局中最常用的方式，可以使块元素合并在一行上，像内联元素一样，而且可以设置自己的宽高，margin上下，padding上下值

浮动

是什么？

浮动是选择器的一种属性，可以将块元素，内联元素以内联块的格式按顺序排列起来

有什么？

有float:left; 和 float:right；两种
性质有：
1. 浮动的元素会向左或者向右浮动，碰到父元素边界，其他元素才停下来
2. 相邻浮动元素可以并在一起，超出父级宽度就换行
3. 浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的文字会避开浮动的元素，形成文自绕图的效果
4. 父元素如果没有设置尺寸（一般是高度不设置），父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动
5. 浮动元素之间没有垂直margin的合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .con{
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        .box1{
            width: 50px;
            height: 50px;
            background-color: red;
            float: left;
            /* 先float的在前面 */
        }
        .box2{
            width: 50px;
            height: 50px;
            background-color: aqua;
            float: left;
            /* 后float的在后面 */
        }
        .box3{
            width: 50px;
            height: 50px;
            background-color: blue;
            float:left;
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        这一段文字是用来测试文字绕图的：
        工资是发给日常工作的人，
        高薪是发给承担责任的人，
        奖金是发给做出成绩的人，
        股权是分给能干忠诚的人，
        荣誉是颁给有理想抱负的人，
        辞退信将送给没结果还耍个性的人。
        市场没有四季，只有两季——努力就是旺季!不努力就是淡季！
    </div>
</body>
</html>

浮动前
这里写图片描述

浮动后
这里写图片描述

文字绕图
这里写图片描述

子元素撑不开没有定义宽高的父元素的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 链接reset.css文件中的clearfix选择器，完美解决子元素撑不开没有定义宽高的父元素 -->
    <style>
        .con{
            border: 1px solid red;
            /* 当父类里没有设置尺寸时，浮动的子类无法撑开父类，需要解决这个问题 */
            /* overflow: hidden; */
            /* 解决办法1：使用overflow:hidden；但是当真有内容溢出时，仍然会隐藏，不推荐 */
        }
        /* .con .last{
            clear: both;
        } */

        .box1{
            width: 50px;
            height: 50px;
            background-color: red;
            float: left;
            /* 先float的在前面 */
        }
        .box2{
            width: 50px;
            height: 50px;
            background-color: aqua;
            float: left;
            /* 后float的在后面 */
        }
        .box3{
            width: 50px;
            height: 50px;
            background-color: blue;
            float:left;
        }
    </style>
</head>
<body>
    <div class="con clearfix">
        <!-- 解决办法3：使用固定格式 clearfix -->
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <div class="last"></div>
        <!-- 解决办法2：在子元素中加一个空的块，然后在这个块的选择器中使用clear:both；但是增加了一个新的块
                      会影响原布局，不好 -->
    </div>
</body>
</html>`

解决前
这里写图片描述

解决后
这里写图片描述

能干什么？

可以将任何类型的子类元素都当做内联块来使用，还具有文字绕图的功能

定位

是什么？

概念准备
- 文档流：文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的排在前面，后写的排在后面，每个盒子都占据自己的位置。
定位是指将块规定到某个位置，或遵循文档流原则，或脱离文档流的状态。

有什么？

定位分为三种：
1. relative：相对定位，元素所占据的文档流保留位置，元素本身相对于原位置进行偏移
2. absolute：绝对定位，脱离文档流，可以理解为漂浮在文档流之上，相对于上一个设置了定位属性的父级元素来进行定位，如果上一级没有设置定位，就继续向上一层找，都没有的话，相对于浏览器窗口进行定位
3. fixed:固定定位，脱离文档流，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位
4. static：默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。
定位的性质：
1. 定位元素的偏移：定位元素需要用top,right,bottom,left 来设置相对于参照元素的偏移值
2. 定位元素的层级：定位元素是浮动在正常的文档流之上的，可以用z-index属性来设置元素的偏移值

相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
        .con{
          width: 300px;
          height: 200px;
          border: 1px solid red; 
        }
        .box1{
            width: 50px;
            height: 50px;
            background-color: red;
            position: relative;
            /* 相对定位，相对于自己进行定位，原位置保留，在文档流中*/
            left: 10px;
            /* 相对于原位置的左边向右移动10px */
            top: 10px;
            /*相对于原位置的上边向下移动10px */
            z-index: 1;
            /* z-index属性表示定位元素的层级，数字越大层级越高，即越在上层*/

        }
        .box2{
            width: 50px;
            height: 50px;
            background-color: aqua;
            position: relative;
            bottom: 10px;
            z-index: 2;
        }
        .box3{
            width: 50px;
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
    </div>
</body>
</html>

这里写图片描述

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
        .con{
          width: 300px;
          height: 200px;
          border: 1px solid red; 
          position: relative;
          /* 在父级元素中设置定位属性 */
        }
        .box1{
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            /* 绝对定位，相对于上一级设置定位属性的元素，进行定位，脱离文档流*/
            left: 10px;
            /* 相对于父级元素的左边向右移动10px */
            bottom: 15px;
            /*相对于父级元素的上边向下移动10px */
            z-index: 1;
            /* z-index属性表示定位元素的层级，数字越大层级越高，即越在上层*/

        }
        .box2{
            width: 50px;
            height: 50px;
            background-color: aqua;
            position: absolute;
            bottom: 10px;
            z-index: 2;
        }
        .box3{
            width: 50px;
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
    </div>
</body>
</html>

页面展示
这里写图片描述

固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
        .con{
          width: 300px;
          height: 200px;
          border: 1px solid red; 
        }
        .box1{
            width: 50px;
            height: 50px;
            background-color: red;
            position: fixed;
            /* 固定定位，相对浏览器窗口设置定位属性，脱离文档流，位置不会随着拖动条的拖动而变化*/
            left: 10px;
            /* 相对于浏览器窗口的左边向右移动10px */
            top: 15px;
            /*相对于浏览器窗口的的上边向下移动15px */

        }
        .box2{
            width: 50px;
            height: 50px;
            background-color: aqua;
        }
        .box3{
            width: 50px;
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="con">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <p>1</p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <p>2</p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>

    </div>
</body>
</html>