<干货>5分钟快速回顾HTML CSS

一.html

(一)标签类型

• 1.块元素(独占一行!即使通过css设置宽度width,也会占一行的位置)

  • div(无语义)

  • 列表 ur/ol/li

  • 段落 p

  • 标题 h1-h6

  • 自定义列表 dl/dt/dd

  • 其它常见问题

    • 块元素的居中问题

      • 块级元素左右居中:先设置自身width;然后,margin: 0 auto;

• 2.内联元素(行内)[不支持width, height, margin上下,padding上下]

  • 常用内联元素

    • span(无语义)

    • 超链接标签 a

      • src可以为空,但一定要写

  • 其它常见问题

    • 子级内联元素之间有间隙,可以把父级元素font-size设置为0,子级单独设置font-size

    • 内联元素居中:由于内联元素自身不支持width,使用在父级元素设置text-alian : center 的解决方案

• 3.内联块元素(支持全部样式的内联元素)

  • 转换为内联块

    • 设置样式 display: inline-block;

  • 其它常见问题

    • 可以把内联块元素看做内联元素的进化版,

    • 通过设置float属性也会将元素转换为内联块

    • 通过定位属性fix, absolute都可以将元素转换为内联块

(二)盒子模型

• 1.盒子图

盒子图

• 2.样式重置(reset.css)

      h1,h2,h3,h4,h5,h6,p,body,ul,ol,dl,dd,dt,input{  
          /*去掉默认样式*/  
          margin: 0;  
          padding: 0;  
      }  
      ul,ol{  
          /*去掉左边的点或者数字*/  
          list-style: none;  
      }  
      a{  
          /*去掉下划线*/  
          text-decoration: none;  
      }  
      em,i{  
          /*去掉斜体*/  
          font-style: normal;  
      }  
      b,strong{  
          /*去掉加粗*/  
          font-weight: normal;  
      }  
      /*清除浮动影响 和清除margintop塌陷 合在一起的写法*/  
      .clearfix:before,.clearfix:after{  
          content: "";  
          display: table;  
      }  
      .clearfix:after{  
          clear: both;  
      }  
      .clearfix{  
          /*兼容ie*/  
          zoom:1;  
      }  
  

(三)表单<form></form>

• action

  • 提交表单到对应的视图函数

    • <form action="localhost:8000/index5" method="get"></form>

• label(注意拼写)[关联对应的id]

  • for="某input的id"

    • <label for="user_name">用户名</label>

• input

  • type

    • 文本(用户名)

      • <input type="text" id="user_name">

    • 密码

      • <input type="password" id="passwd" name="user_passwd">

    • 单选框(性别)[相同的name实现互斥选择]

        <input type="radio" name="sex" value="1">男
        
        <input type="radio" name= "sex" value="0">女  
      

    • 多选框(爱好)
      html <input type="checkbox" name= "hobby" value= "work">工作 <input type="checkbox" name= "hobby" value = "learn">学习 <input type="checkbox" name= "hobby" value="play">娱乐

    • 上传文件

      • <input type="file">

    • 提交

      • <input type="submit" value="注册">

    • 重置

      • <input type="reset" value="重置">

• textarea(多行输入框)

  • <textarea name="" id="" cols="30" rows="5">个人介绍</textarea>

• select

     <select name="loc">  
       <option value="1">北京<option>  
       <option value="2">上海<option>  
       <option value="3">广州<option>  
     </select>  

一点体会:

提交表单时,只会识别到标签以内的内容,所以,多选框 多选框,下拉框一定要添加value,且值必须唯一

(四)列表

• 1.有序<ol>

      <ol>  
        <li>第一季</li>  
        <li>第二季</li>  
        <li>第三季</li>  
      </ol>  

• 2.无序<ul>

     <ul>  
       <li>百度</li>  
       <li>腾讯</li>  
       <li>阿里</li>  
     </ul>  

• 3.清除样式

  • list-style:none;

二.css

(一)定位的所有套路:

• 1.相对定位(相对自己定位):

  • css属性

          position: relative;  
          left: 50px;  
          top: 50px;  

说明:

针对自身设置相对定位
有上左,上右,下左,下右,四种定位方式
元素自身未脱离文档流,依然占据了原位置

• 2.绝对定位(相对于父元素定位)

  • 父元素设置

    • position: relative;

  • 子元素设置

    position: absolute;  
    left: 20px;  
    top: 20px;  
    

  • 说明:

    • 子元素会针对父元素进行定位

    • 子元素已经脱离了文档流

    • 定位的四种方式同相对定位

    • 如果子元素找不到父元素,则会一直向上找,直到找到最外层标签页面

• 3.固定定位(相对于浏览器定位)

  • 元素css设置

    position: fix;  
    right: 20px;  
    bottom:20px  
    

  • 说明:

    • 位置会固定住,不随滚动条滚动

    • 脱离文档流

• 4.层级关系:

  • z-index属性相当于Photoshop中的图层属性,数值越大越靠上,实际开发过程中,取值从1000开始,每次增加一百,如果意外增加了需求,预留的100个层级可插入新的需求层

• 5.一些细节:

  • absolute,fix能把元素变成内联块

  • position还有一个默认值为static

(二)浮动注意点:

• 浮动元素有左浮动(float:left)和右浮动(float:right)两种

• 浮动元素碰到父元素边界或其他元素才会停下来

• 父元素必须清除浮动,才能被子元素撑开

• 相邻浮动的块元素可以并在一行,超出父级元素会自动换行

• 元素设置浮动后,会自动转为"行内块元素"(元素之间也不会有间隙)

• 浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动元素内的文字会避开浮动的元素,形成文字绕图效果

• 常见需求: 一组子元素,同时左浮动;同时右浮动;最后一个右浮动,其它左浮动

(三)引入方式

• 1.内联式(新手模式)

  <div style="color:red;width:100px;"></div>

• 2.嵌入式(练习模式)

   <style>  
     div{  
     color:red;  
     width:100px;
     }  
   <style>
  

• 3.外链式(项目模式)

  • <link rel="stylesheet" href="..css/index.css">

(四)选择器

• 层级选择器div p{}

• 标签选择器
  p{}

• 多标签同时选
  p,span{}

• 直接子类选择器
  .bilibili > p{}

• 类选择器
  .bilibili{}

• 伪类选择器
  .bilibili:hover{}

• 选择器权重

  • 权重10000:!important

  • 权重1000:内联样式 style

  • 权重100:ID选择器

  • 权重10:伪类, :hover

  • 权重为1:div.p

(五)容易忘的属性

• 字体

  color: red;

• 清除下划线

  text-decoration:none;

• 行高

  line-height: 24px;

• 字体类型

  font-family:"Microsoft Yahei";

  font-size: 20px;

  font-weight: bold;

• 字符间距(强迫症福音)

  letter-spacing:10px;

• 边框

  border: 1px solid red;

(六)display选项

• 内联元素:

  display: inline;

• 内联块元素

  display: inline-block;

• 块元素

  display: block;

• 隐藏元素

  display: none;

HTML CSS导图