web前端 day12今日大纲

内容回顾:
   一.HTML
      语义化标签
      目的:
         1.认识这些标签含义
         2.根据需求来搭建网页的结构
         img src
         <p>alex</p>
      缺点:太丑

   二.CSS
      作用: 网页的样式,美化页面. 
      目的: 用户体验
      - css的引入方式
         1.行内样式
            优先级最高
         2.内嵌样式
            style标签
         3.外接样式
            link
               href属性连接css文件
            开发实战项目应用最多
      - 选择器
         1.基本选择器
            标签选择器
             div{}
            id选择器
             #box{}
            class选择器
             .box{}

         2.高级选择器
            后代选择器
               选中的是儿子,孙子....
               div p{}
            子代选择器
               只选中儿子-
               div>p
            组合选择器
               html,body,p,ul,ol,dl{
                  padding: 0;
                  margin: 0;
               }
               reset.css
            交集选择器
               div.active{
               }
            属性选择器
               input[type=text]{
               }
            伪类选择器
               a:hover{}
         3.继承性和特殊性
            继承:
               个别的属性: color,line-height,text-xxx,font-xxx
            特殊性:
               权重
               行内样式 > id > class > 标签
               1000       100   10       1

               数当前选择器的个数: id  class 标签

               谁的数值大,权重就高,优先级就高

               继承来的属性优先级接近0
         4.网页常用排版样式
            字体的设置
               字体颜色:color:单词|rgb(0~255,0~255,0~255)| 十六进制表示法 #ff6700
               字体大小: font-size: px(像素:绝对单位),rem,em(相对单位:相对于当前盒子的字体大小),vh,vw
               字体粗细:font-weight: normal | bold | 100~900
               字体样式: font-style:none | italic
            文本的设置
               文本修饰:text-decoration:none | underline
               文本对齐方式:text-align:left | center | right
               文本的行高:line-height
                  如何让一个盒子中的文本水平垂直居中
                     text-align:center;
                     line-height: 盒子模型的内容的高度
         5.盒子模型
            标准文档流:
               一个网页在不受任何布局的影响下,它内部HTML标签的默认排版样式

               从左往右,从上往下,这种布局叫流式布局
               width: 内容的宽度
               height: 内容的高度
               padding: 内边距
               margin: 外边距
               border: 边框
                  1px solid red;

               根据方向划分
               border-top: 1px solid red;

               border-color: red green blue yellow;
               border-width: 2px;
               border-style: solid;

               标准文档流下margin垂直方向会出现塌陷问题

               浮动的盒子,margin不会出现任何问题



         6.浮动
            float:left|right
            浮动的盒子:
            1.脱离标准文档流(脱标)
            2.贴边现象



今日内容:
   一. 标签分类
      默认是在标准文档流
      display:inline|block|inline-block|none;

         - 标签分类
         行内标签
            span,a,em,i,strong,b

            特点: 
               1.在一行内显示
               2.不能设置宽高,如果不设置宽 默认是字体的大小

               一个块级元素转行内 很少使用
               行内块标签: display:inline-block;
                input,img

         块级标签
            div p ul ol li dl dt form table h1~h6
            特点:
            1.独占一行
            2.可以设置宽高,如果不设置宽,默认是父元素100%的宽度

            ********一个行内转行内块和块应用最多********

   二. 浮动布局
      设计浮动布局的初衷: 文字环绕
      float:left|right
      浮动的盒子:
      现象:
            1.脱离标准文档流(脱标)
            2.贴边现象
            3.文字环绕
            4.收缩现象(一旦给元素设置浮动,可以任意设置宽高)
      好处:
         排版: 在一行上并排显示
      问题:
         一旦给子元素设置浮动,父元素不设置高度,因为浮动元素脱标了,不在页面上占位置,撑不起父元素的高度
      清除浮动的方式:
         1.给父盒子设置固定高度
            缺点:后期不易维护
         2.内墙法(理解)
            clear:both; 清除左右两边浮动带来的影响
            在最后一个浮动元素的后面加一个空的块级元素(标准文档流),并且设置该元素为
            缺点: 代码冗余
         3.伪元素清除法
            .clearfix::after{
              content:'';
              display: block;
              clear: both;
              /*display: none;*/
              /*visibility: hidden;*/
              /*height: 0;*/
            }
         3.overflow:hidden;




   三. 定位布局
      position:static;静态 默认的

      position: relative;相对定位
      参考点:以原来的位置为参考点
      现象:
         1.压盖现象(一般不用)
         2.微调元素

      布局方案:
         子绝父相

      position: absolute; 绝对定位
         参考点:
            单独设置绝对定位,以页面左上角为参考点
            有子绝父相,以最近的父辈元素的左上角为参考点
         现象:
            1.脱标
            2.压盖现象(常用)

      position: fixed; 固定定位
         参考点:浏览器的左上角
         现象:
            0.固定在网页上不变
            1.脱标
            2.压盖(一般不用)
         作用:
            固定导航栏,小广告,回到顶部
   四.z-index
      z-index只应用在定位的元素，默认z-index:auto;
      z-index取值为整数，数值越大，它的层级越高
      如果元素设置了定位，没有设置z-index，那么谁写在最后面的，表示谁的层级越高。
      从父现象。通常布局方案我们采用子绝父相，比较的是父元素的z-index值，哪个父元素的z-index值越大，表示子元素的层级越高。


   五. 背景图
      background-color:red;
      background-image:url(地址)

HTML4.01 css2.1
HTML5  CSS3(了解)


   练习:
   moment.js

   jquery.js
   下午: JS
       JS基础语法
       基本数据类型
         number string boolean null undefined
       引用数据类型

       ******流程控制****
          if
          switch
          while
          for


       常用对象:
         ********* 函数 *******
         ******* string *******
         ******* Array ********
         ****** Object *******

         字符串转数值?
            parseInt()
            parseFloat()
         数值转字符串
            小技巧: 一个数字+ ""
            toString();

转载于:https://www.cnblogs.com/lilyxiaoyy/p/11151055.html