HTML入门04

相对路径与绝对路径

1. 绝对路径

网址：URL
文件在本地的地址

2. 相对路径

基于某个文件夹产生的路径
同级目录的时候，直接写名字
上级目录：../ (如果返回一级就是一个…/两级就是两个…/)
下级目录:/

    <img src="1.jpg" alt="">
    <img src="../11/1.jpg" alt="">

CSS三大特性

1. 继承性

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

2. 层叠性

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

3. 优先级

如果权重不同就看谁的权重大，如果权重相同就看代码顺序，谁在下面就执行谁
权重顺序：!important>行内式>id>类>标签>通配符>继承>浏览器默认

强制使用此样式!important
 
color: brown !important;

哪些属性具有继承性？
color、text、line、font开头的属性和，可见性：visibility

表单

• input表单，有多个type属性值：
  • text 文本框
  • password 密码框
  • reset 重置
    • 如果需要重置，需要在表单外包一个form
  • submit 提交
  • button 按钮
    • 也可以直接写button标签，但它自带重置属性，需要用type:button去掉
  • radio单选
    • 实现单选要给input加一个相同的name名，代表一组
    • 单选按钮实现文字关联功能：
      把文字用label标签包起来，让lable里的属性值与要关联的input内id属性值一致即可实现
  • checkbox多选
  • color颜色
  • date日历
  • textarea：文本域
    input属性：
• placeholder提示文本
• autofocus自动获取焦点
• checked默认选中(单选/多选时常用)
• disabled禁止选中
• required非空校验

    <form action="" action="" method="GET">
     <!-- text文本输入框
	        action是请求或上传地址
	        method是提交方式
            placeholder提示文本
            autofocus获取焦点
            required非空校验
    -->
    <input type="text" placeholder="文本" autofocus required>
    <!-- password密码框 -->
    <input type="password">
    <!-- reset重置 -->
    <input type="reset">    
    <!-- submit提交    -->
    <input type="submit">
    <!-- button 按钮 -->
    <input type="button" value="重置按钮">
    <button>重置</button>
    <button type="button">重置</button>
    <!-- radio单选 
         checked默认选中
         disabled禁止选中   
    -->
        <!-- 实现多选需要给input添加一个name属性，且属性名需一致 
        单选按钮实现文字关联功能：
        把文字用label标签包起来，让lable里的属性值与要关联的input内id属性值一致即可实现
    -->
    <label for="man">男</label>
    <input type="radio" checked name="a1" id="man">
    <label for="nv">女</label>
    <input type="radio" name="a1" id="nv">
    <input type="radio" disabled>
    <!-- checkbox多选 -->
    <input type="checkbox">
    <input type="date">
    <!-- textarea文本域 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>
    </form>

css
+ 禁止拖拽尺寸
+ 去掉点击边框加粗

            resize: none;
            /* 禁止拖拽尺寸 */
            outline:none;
            /* 去掉点击边框加粗 */

下拉框

多选框，select，option是选项，disable禁止选中，selected默认选中

     <select name="" id="">
         <option value="" disabled selected>请选择地址</option>
         <option value="">河南</option>
         <option value="" >云南</option>
     </select>

盒模型

盒模型的几个部分

网页中的每一个元素都可以看做盒模型

		content主体内容
        padding：内容与边框的距离
        border：边框
        margin：盒子与盒子之间的距离

计算总盒子的高：content高+padding上下+border上下

计算总盒子的宽：content宽+padding左右+border左右

padding（margin）不同的值顺序

4个值是：上右下左
3个值是：上（左右）下
2个值是：（上下）（左右）
1个值是：（上下左右）

盒模型分类

1. 标准盒模型(默认盒模型)：box-sizing:content-box

在标准盒模型下：代码中写的宽和高是content部分的宽和高

直接加padding的话盒模型会变大

2. IE盒模型:box-sizing:border-box

转换为IE盒模型后，代码中写的宽和高是总体(padding上下+border上下+content 高)的高，如果用到了padding和border，浏览器会自动的减去，计算出来的content部分

面试题

margin值穿透

现象：有一个大盒子，里面有一个小盒子，想要让小盒子离大盒子上部有一定距离，给小盒子设置了margin-top，造成了大盒子会跟着小盒子一起下掉，这种就是margin值穿透

解决方法：
方法1给大盒子设置padding-top值
方法2给大盒子设置一个透明上边框，透明是transparent
方法3给大盒子设置一个overflow:hidden

/* padding-top:20px; */

border-top:20px solid transparent;

/* overflow:hidden;溢出隐藏 */

margin值合并

现象：有两个兄弟元素，box1 box2，供给box1设置一个向下的距离，给box2设置一个向上的距离，两个盒子之间的距离并不是它们之和，而是取较大的那个距离