第五天路径 css特性表单元素盒模型

第五天思维导图.png

绝对路径和相对路径

绝对路径：在主页上的文件或目录在硬盘上真正的路径(URL和物理路径)

C:\xyz\test.txt 代表了test.txt文件的绝对路径。
www.sun.com/index.htm代表…

相对路径：

同级目录：直接写名字或者./
下一级目录：用“/”表示同时/也表示根目录
上一级目录：”../” 一个../ 代表回到上一级目录，两个“../”代表回到上两级目录

css的三大特性

继承性：给某个元素设置了一个样式，它后代的元素也能继承这些样式

可继承的属性：以color/font/text/line开头的属性
元素可见性：visibility
普通文档流的宽度

层叠性：对同一个元素，同一个属性设置了不同的值，css处理这种冲突的能力

1.如果权重相同，就看css的编码顺序，后面的代码会覆盖前面的
2.如果权重不同，谁的权重大，听谁的

优先级（权重）

权重顺序：！important>内联样式>id>类>标签>通配符>继承>浏览器默认

！important：强制执行
注意：尽量少用！important 和内联样式

常用的表单元素

input的常用属性

placeholder：提示文本（占位符）
autofocus:自动获取焦点
value：显示的文字内容
checked：默认选中
disabled ：禁止选中
required:必填项，不填的话会提示

input type的常用值

text：文本输入框
password：密码输入框
reset：重置按钮
submit：提交
button：按钮
radio：单选
checkbox：多选按钮

<form action="">
        <!-- 文本输入框  -->
        <input type="text" placeholder="请输入用户名" autofocus>
        <!-- 密码输入框 -->
        <input type="password" placeholder="请输入密码" required>
        <!-- 重置按钮 -->
        <input type="reset">
        <!-- 提交 -->
        <input type="submit">
        <!-- 按钮 -->
        <input type="button" value="支付">
        <button>按钮</button>
        <!-- 单选按钮 -->
        <input type="radio" checked>
        <!-- 多选按钮 -->
        <input type="checkbox" checked disabled>
</form>
复制代码

单选功能的实现

给一组单选input框设置一个相同的name名

<body>
    <!-- 实现单选功能：
    给一组单选input框设置一个相同的name名 -->
    <h5>请选择你的性别</h5>
    男<input type="radio" name="sex">
    女<input type="radio" name="sex">
</body>
复制代码

单选按钮实现文字关联功能

1.把文字用一个label标签包起来
2.让label标签中的for属性对应的属性值=要关联的input框的id的名字

<body>
    <!-- 单选按钮实现文字关联功能：
    1.把文字用一个label标签包起来
    2.让label标签中的for属性对应的属性值=要关联的input框的id的名字 -->
    <h5>请选择你的性别</h5>
    <label for="man">男<input id="man" type="radio" name="sex"></label>
    <label for="woman"> 女<input id="woman" type="radio" name="sex">  </label>   
</body
复制代码

多选按钮实现文字关联功能

<body>
    <h3>请选择你的爱好</h3>
    <input type="checkbox" name="" id="reading">
    <label for="reading">读书</label>
    <input type="checkbox" name="" id="run">
    <label for="run">跑步</label>
    <input type="checkbox" name="" id="sleep">
    <label for="sleep">睡觉</label>
    <input type="checkbox" name="" id="hiking">
    <label for="hiking">远足</label>
    <input type="checkbox" name="" id="draw">
    <label for="draw">画画</label>
</body>
复制代码

文本域：textarea

cols：列 rows：行
禁止重置尺寸：resize: none
去除点击时候出现的蓝色基线：outline: none;

<textarea name="" id="" cols="50" rows="10"> </textarea>
复制代码

下拉框：select

option：代表里面的每一项
selected:默认选中
disabled:禁止选中

<select name="" id="">
            <option value="" disabled>请选择你来自哪</option>
            <option value="">上海</option>
            <option value="" selected>北京</option>
            <option value="">河南</option>
 </select>
复制代码

盒模型

盒模型是一种写网页的思维模式，每一个元素都可以看成一个盒子。可以把它想象成手机盒子。手机就是content 部分，白色填充物就是padding部分，手机盒子的边框就是border，多个手机盒子之间距离就是margin。

盒模型的分类

盒模型可以分为两种：

标准盒模型（默认的）：box-sizing: content-box;
- 在标准盒模型下：代码中所写的width 和高度指的是盒模型中content部分的宽和高

标准盒模型.png

ie盒模型：box-sizing: border-box;
- 在ie盒模型下：代码中所写的width和高指的是总盒子的宽和高，如果用到了padding和border，浏览器会自动的减去，计算出来content部分

IE盒模型.png

盒模型主要包含的部分：

content：主要内容区
padding：内填充
border：边框线
margin：盒子与盒子的距离

盒模型计算总盒子大小：

总盒子高度=content的高度+padding（上下）+border（上下）
总盒子宽度=content的宽度+padding（左右）+border（左右）

padding的规律顺序

padding的方向

上padding：padding-top
下padding：padding-bottom
左padding：padding-left
右padding：padding-right

padding的顺序顺序

<style>
      span{
          background:green;
          /*  上、右、下、左 顺时针方向 */
          /* padding:10px 50px 100px 200px; */
          /* 上、左右、下 */
          /* padding:10px 50px 100px; */
          /* 上下、左右 */
          /* padding:10px 50px; */
          /* 四个方向都是一样的padding：50px */
          padding:50px;
          display:inline-block;
          border:5px solid gold;
      }
</style>
复制代码

面试题

margin值穿透：有一个大盒子里面套了一个小盒子，想要让小盒子离大盒子上部有一定的距离，给小盒子设置了一个margin-top，造成了小盒子和大盒子一起往下掉

解决方法一：给大盒子设置一个padding-top，同时删除小盒子里的margin-top设置
解决方法二：给大盒子设置一个border-top
解决办法三：给大盒子设置一个overflow:hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 面试题margin值穿透：有一个大盒子里面套了一个小盒子，想要让小盒子离大盒子上部有一定的距离，给小盒子设置了一个margin-top，造成了小盒子和大盒子一起往下掉 
       解决的第一种办法：给大盒子设置一个padding-top，同时删除小盒子里的margin-top设置
            第二个办法：给大盒子设置一个border-top
            第三个办法：给大盒子设置一个overflow:hidden;*/
        * {
            margin: 0;
            padding: 0;
        }
        .main {
            width: 300px;
            height: 300px;
            background-color: chartreuse;
            /* 第二种解决方法：（transparent:透明线）
            border-top: 1px solid transparent; */
            /* 第三种解决办法：
            overflow: hidden; */
        }
        .box {
            width: 50px;
            height: 50px;
            background-color: crimson;
            margin-top: 20px;
        }
        /* 第一种解决办法：
        .main {
            padding-top: 20px;
        } */
    </style>
</head>
<body>
    <div class="main">
        <div class="box"></div>
    </div>
</body>
</html>
复制代码

margin值合并
margin值合并：有两个兄弟元素：box1、box2、给box1设置一个向下的距离 margin-bottom :100px; ，给box2设置一个向上的距离margin-top: 50px ;，两个盒子的距离并不是margin之和150px，而是取最大的margin值100px

<style>
        *{
            margin:0;padding:0;
        }
      div{
          width:200px;
          height:200px;
      }
      .box1{
          background:green;
          margin-bottom:30px;
      }
      .box2{
          background:gold;
          margin-top:100px;
      }
</style>
<div class="box1"></div>
<div class="box2"></div>
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端