第五天路径 css特性 表单元素 盒模型 面试题 - 图1

绝对路径和相对路径

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

相对路径：

  • 同级目录：直接写名字 或者./
  • 下一级目录：用“/”表示 同时/也表示根目录

  • 上一级目录：”../“ 一个../ 代表回到上一级目录， 两个“../”代表回到上两级目录

    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：多选按钮

    1. <form action="">
    2.       <!-- 文本输入框  -->
    3.       <input type="text" placeholder="请输入用户名" autofocus>
    4.       <!-- 密码输入框 -->
    5.       <input type="password" placeholder="请输入密码" required>
    6.       <!-- 重置按钮 -->
    7.       <input type="reset">
    8.       <!-- 提交 -->
    9.       <input type="submit">
    10.       <!-- 按钮 -->
    11.       <input type="button" value="支付">
    12.       <button>按钮</button>
    13.       <!-- 单选按钮 -->
    14.       <input type="radio" checked>
    15.       <!-- 多选按钮 -->
    16.       <input type="checkbox" checked disabled>
    17.   </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;

  • ie盒模型：box-sizing: border-box;

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

盒模型主要包含的部分：

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

1568970859609-4ef7c59e-f720-4a0e-a2b5-6b640c10ae8a.png

盒模型计算总盒子大小：

  • 总盒子高度=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>