前端学习笔记--CSS

天空闲话  论坛元老 | 2025-3-27 05:05:14 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1738|帖子 1738|积分 5214

HTML+CSS+JavaScript ==》 结构+ 体现 + 交互
如何学习
1.CSS是什么
2.CSS怎么用？
3.CSS选择器（重点，难点）
4.美化网页（文字，阴影，超链接，列表，渐变。。。）
5.盒子模子
6.浮动，定位
7.网页动画（特效效果）
什么是CSS

Cascading Style Sheet 层叠级联样式表
CSS:体现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动
CSS发展史

CSS1.0
CSS2.0 DIV(块) +CSS HTML与CSS结构分离的头脑，网页变得简朴，SEO（搜索引擎优化）
CSS2.1 浮动，定位
CSS3.0 圆角边框 阴影，动画，问题：浏览器兼容性
CSS快速入门

规范：<style> 可以编写CSS的代码，每一个声明，最好使用分号末了，
语法
  1.  选择器{
  2.  声明1;
  3.  声明2;
  4.  声明3;
  5.  }
复制代码
CSS优势：
1.内容与体现分离
2.网页结构体现同一，可以实现复用
3.样式非常丰富
4，创建使用独立于HTML的CSS
5.利用SEO,容易被搜索引擎收录
CSS的三种导入方式

1.行内样式:行内样式，在标签元素中，编写一个style属性，编写样式即可
  1.  <h1 style="color: red;font-size: 50px;">首页</h1>
复制代码
2.内部样式
  1.  <style>
  2.      h1{
  3.          color: #00ff51;
  4.          font-size: 50px;
  5.      }
  6.  </style>
复制代码
3.外部样式
  1.      <link rel="stylesheet" href="demo.css">
  2.  /*外部样式*/
  3.  h1{
  4.      color: aquamarine;
  5.  }
复制代码
优先级比较: 就近原则，离元素最近的优先级最高，行内一定是最高，可以调动外部和内部的位置来选择哪个
拓展：外部样式两种写法


  • 链接式：CSS3.0 属于HTML标签
    1.   <link rel="stylesheet" href="demo.css">
    复制代码
  • 导入式：CSS2.1特有 不怎么使用，有弊端，网页内容过多的话，会先加载骨架，在渲染
  1.  <style>
  2.   @import "demo.css";
  3.  </style>
复制代码
选择器（重点）

作用：选择页面上的某一个或某一类元素
根本选择器


  • 标签选择器：会选择页面上的全部的这个标签的元素 无法做到两个标签相同的元素渲染不一样的效果
    1.  h1{
    2.      color: #8dca84;
    3.      border-radius: 40px;background: aqua;
    4.  }
    复制代码
  • 类选择器 class：选择全部class属性一致的标签 长处：可以多个标签归类，是同一个class，可以复用
    1.  .hello{
    2.              color: #8dca84;
    3.              border-radius: 40px;
    4.              background: #403da8
    5.          }
    6.  <h3 class="hello">你好</h3>
    复制代码
  • id选择器：不可以重复，全局唯一
  1.  #id{
  2.              color: #8dca84;
  3.   }
  4.  ​
  5.  <h1 id="id">biaoqing</h1>
复制代码
优先级比较：不遵循就近原则，id选择器的优先级最高，其次是类选择器，再其次是标签选择器
层次选择器

1.子女选择器：在某个元素的背面， 全部
  1.  body  p{
  2.    color: red;
  3.  }
复制代码
2.子选择器 只有一代
  1.  /*子元素选择器：父元素>子元素*/
  2.  body>p{
  3.    color: blue;
  4.  }
复制代码
3.相邻兄弟选择器 同辈 相邻 只有一个，且只对下一个相同标签
  1.  .active+p{
  2.    color: green;
  3.  }
  4.  <p>p1</p>
  5.  <p class="active">p2</p>
  6.  <p>p3</p>
  7.  /* 只对p3起作用
复制代码
4.通用选择器
  1.  /*所有兄弟选择器：当前选中元素的向下的所有兄弟元素*/
  2.  .active~p{
  3.    color: yellow;
  4.  }
复制代码
结构伪类选择器

伪类：CSS伪类是用来添加一些选择器的特别效果。
拓展：
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} / 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
结构伪类选择器是为了定位元素

  1.  /* 选中 ul的第一个子元素 */
  2.  ul li:first-child{
  3.      color: red;
  4.  }
  5.  /* 选中 ul的最后一个子元素 */
  6.  ul li:last-child{
  7.      color: #00ff51;
  8.  }
复制代码
  1.  ​
  2.      /* 只选中p1* ：定位到父元素，选择当前的第一个元素
  3.      选择当前p元素的父级元素，选中父级元素中的第一个元素并且是当前元素才生效,否则不生效
  4.      按顺序排序，不分类型
  5.       */
  6.     p:nth-child(1){
  7.         color: #cceeff;
  8.     }
  9.     /*
  10.     选中父元素下的p元素的第二个，按类型排序
  11.      */
  12.     p:nth-of-type(2){
  13.         color: #00a6ff;
  14.     }
  15.  </style>
复制代码
属性选择器（重点 常用）

  1.   /* 属性名，属性名 =属性值（正则）
  2.      = 绝对等于
  3.      *= 包含这个元素
  4.      ^= 以这个元素开头
  5.      $= 以这个元素结尾
  6.       */
  7.      /* 存在id属性的元素：
  8.       a[]{}*/
  9.      a[id]{
  10.        background: #ff0000;
  11.      }
  12.      /* a标签中class属性中包含links的元素：
  13.       */
  14.      a[class*= "links"]{
  15.        background: #ffa500;
  16.      }
  17.      /* a标签中id为 first的元素：
  18.       */
  19.      a[id = "first"]{
  20.        background: #00a6ff;
  21.      }
  22.      /* a标签中href属性中包含HTTP开头的元素：
  23.       */
  24.      a[href^="http"] {
  25.        background: #ff00ff;
  26.      }
  27.    </style>
  28.  </head>
  29.  <body>
  30.  <p class="demo">
  31.    <a href="http://www.baidu.com" class="links-item-first" id="first">1</a>
  32.    <a href=""class="footer" target="_blank" title="test">2</a>
  33.    <a href="123.html" class="link-item">3</a>
  34.    <a href="123.png" class="link-item">4</a>
  35.    <a href="123.jpg" class="link-item">5</a>
  36.    <a href="abc">6</a>
  37.    <a href="/a.pdf">7</a>
  38.    <a href="/abc.pdf">8</a>
  39.    <a href="abc.doc">9</a>
  40.    <a href="abcd.doc" class="links-item-last">10</a>
复制代码
美化网页元素

为什么美化网页


  • 有效的传递页面信息
  • 美化网页，吸引客户
  • 凸显页面的主题
  • 进步用户的体验
span：重点要突出的字，使用span标签套起来
字体样式

  1.  font-family :字体样式
  2.  font-size:字体大小
  3.  font-weight:字体粗细
  4.  color:颜色
复制代码
可以都使用 font 按照字体风格， 字体粗细，字体大小 字体样式
  1.  .p2{
  2.      font : oblique bold 20px/30px 楷体;
  3.  }
复制代码
代码展示
  1.  <!-- font-family :字体样式
  2.  font-size:字体大小
  3.  font-weight:字体粗细
  4.  color:颜色-->
  5.      <style>
  6.          #title{
  7.              color: red;
  8.          }
  9.          body{
  10.              font-family: 楷体;
  11.          }
  12.          h1{
  13.              font-size: 50px;
  14.          }
  15.          .p1{
  16.              font-weight: 800;
  17.              color: blue;
  18.          }
  19.          .p2{
  20.              font : oblique bold 20px/30px 楷体;
  21.          }
  22.      </style>
  23.  ​
  24.  </head>
  25.  <body>
  26.  欢迎学习<span id="title">Java</span>
  27.  <h1>唐诗</h1>
  28.  <p class="p1">花间一壶酒，独酌无相亲。</p>
  29.  ​
  30.  <p class="p2">举杯邀明月，对影成三人。</p>
  31.  ​
  32.  <p>月既不解饮，影徒随我身。</p>
  33.  ​
  34.  <p>暂伴月将影，行乐须及春。</p>
  35.  ​
  36.  <p>我歌月徘徊，我舞影零乱。</p>
  37.  ​
  38.  <p>醒时相交欢，醉后各分散</p>
  39.  </body>
复制代码
文本样式

1.颜色 color rgb rgba
2.文本对齐的方式 text-align = center
3.首行缩进 text-indent:2em
4.行高 line-height:
5.装饰 text-decoration: none，可以将超链接的下划线去掉
6.文本图片水平对齐：vertical-align：middle
代码展示：
  1.  <!--    颜色：
  2.  单词  RBG：如何调色，按照十六进制，
  3.  红色：#FF0000 绿色 ：#00FF00 蓝色：#0000FF
  4.  RGBA：A是透明度 0~1
  5.  文本对齐的方式：text-align
  6.  left center right
  7.  首行缩进：text-indent：2em
  8.  em:字体，px：像素
  9.  行高：line-height
  10.  行高和块的高度一致时，就可以达到上下居中的效果
  11.  中划线：  text-decoration: line-through;
  12.   下划线：           text-decoration: underline;
  13.   上划线：           text-decoration: overline;-->
  14.      <style>
  15.          #title{
  16.              color: red;
  17.              text-indent: 10em;
  18.          }
  19.          body{
  20.              font-family: 楷体;
  21.          }
  22.          h1{
  23.              font-size: 50px;
  24.              color: rgba(0,255,255,0.5);
  25.              text-align: center;
  26.          }
  27.          .p1{
  28.              font-weight: 800;
  29.              color: blue;
  30.          }
  31.          .p2{
  32.              font : oblique bold 20px/30px 楷体;
  33.          }
  34.          .p3{
  35.              line-height: 100px;
  36.          }
  37.          .p4{
  38.              text-decoration: line-through;
  39.          }
  40.      </style>
复制代码
文本阴影与超链接伪类

text-shadow:阴影颜色
值形貌h-shadow必须。水平阴影的位置。允许负值。v-shadow必须。垂直阴影的位置。允许负值。blur可选。模糊的间隔。color可选。阴影的颜色。参阅 CSS 颜色值。
  1.    /*文本阴影 阴影颜色， 水平偏移 垂直偏移，模糊半径*/
  2.          #price{
  3.              text-shadow:#403da8 2px 2px 2px  ;
  4.          }
  5.  ​
  6.  ​
复制代码
超链接伪类：常用：a:hover 悬浮状态
  1.  a{
  2.      text-decoration: none;
  3.      color: #010d13;
  4.  }
  5.  /*鼠标悬浮的颜色*/
  6.  a:hover{
  7.      color: #ff0000;
  8.      font-size: 30px;
  9.  }
  10.  /*鼠标按住未释放的颜色*/
  11.  a:active{
  12.      color: #00ff51;
  13.  }
  14.  /*鼠标选中的颜色*/
  15.  a:focus{
  16.      color: #00a6ff;
  17.  }
  18.  /*鼠标移出颜色*/
  19.  a:link{
  20.      color: #ffa500;
  21.  }
  22.  /*鼠标移入颜色*/
  23.  a:visited{
  24.      color: #ff00ff;
  25.  }
复制代码
列表(ul ol)

  1.  /*list-style:列表样式
  2.  none:去掉圆点
  3.  circle：空心圆
  4.  decimal：数字
  5.  square：正放纵*/
  6.  ul{
复制代码
代码展示
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <link rel="stylesheet" href="style.css">
  7.  </head>
  8.  <body>
  9.  <div id="nav">
  10.  <h2 class="title">全部商品分类</h2>
  11.  ​
  12.  <ul>
  13.      <li>
  14.         <a href="#">图书&nbsp;&nbsp;</a>
  15.          <a href="#">音像&nbsp;&nbsp;</a>
  16.          <a href="#">数字商品</a>
  17.      </li>
  18.      <li>
  19.          <a href="#">家用电器&nbsp;&nbsp;</a>
  20.          <a href="#">手机&nbsp;&nbsp;</a>
  21.          <a href="#">数码</a>
  22.      </li>
  23.      <li>
  24.          <a href="#">电脑&nbsp;&nbsp;</a>
  25.          <a href="#">办公</a>
  26.      </li>
  27.      <li>
  28.          <a href="#">家居&nbsp;&nbsp;</a>
  29.          <a href="#">家装&nbsp;&nbsp;</a>
  30.          <a href="#">厨具</a>
  31.      </li>
  32.      <li>
  33.          <a href="#">服饰鞋帽&nbsp;&nbsp;</a>
  34.          <a href="#">个性化妆</a>
  35.      </li>
  36.      <li>
  37.          <a href="#">礼品箱包&nbsp;&nbsp;</a>
  38.          <a href="#">钟表&nbsp;&nbsp;</a>
  39.          <a href="#">珠宝</a>
  40.      </li>
  41.      <li>
  42.          <a href="#">食品饮料&nbsp;&nbsp;</a>
  43.          <a href="#">保健食品</a>
  44.      </li>
  45.      <li>
  46.          <a href="#">彩票&nbsp;&nbsp;</a>
  47.          <a href="#">旅行&nbsp;&nbsp;</a>
  48.          <a href="#">充值&nbsp;&nbsp;</a>
  49.          <a href="#">票务</a>
  50.      </li>
  51.  </ul>
  52.  </div>
  53.  </body>
  54.  </html>
复制代码
  1.  .title{     font-size: 18px;     font-weight: bolder;     line-height: 50px;     background: #a4f1bd;     text-align: center; } #nav{     width: 300px; } /*list-style:列表样式
  2.  none:去掉圆点
  3.  circle：空心圆
  4.  decimal：数字
  5.  square：正放纵*/
  6.  ul{     background: #cceeff; } ul li{     line-height: 30px;     list-style: none;     text-indent: 1em; } a{     text-decoration: none;     font-size: 14px;     color: #000; } a:hover{     color: red;     text-decoration: underline; }
复制代码
背景(background)

背景颜色 background :
背景图片
  1.  /*background-repeat:平铺方式，
  2.  repeat-x：水平平铺
  3.  repeat-y:竖直平铺
  4.  no-repeat:不平铺
  5.  默认为 repeat*/
  6.  .div1{
  7.    background-repeat: repeat-x;
  8.  }
  9.  .div2{
  10.    background-repeat: repeat-y;
  11.  }
  12.  .div3{
  13.    background-repeat: no-repeat;
  14.  }
复制代码
紧张应用：调整图片的大小与位置
  1.  background:red url("001.jpg") 100px 10px no-repeat;
复制代码
相称于
  1.      background-image: url("001.jpg");
  2.      background-repeat: no-repeat;
  3.      background-position: 100px 2px;
复制代码
渐变（linear-gradient）

  1.  background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
复制代码
可以去网上查询 直接拿来用
盒子模子

什么是盒子？

margin：外边距
padding：内边距
border：边框
外边距和内边距的区别发起自己在浏览器上通过改变值来区分
边框（border）


  • 边框的粗细 border：1px
  • 边框的样式 border-style: none(无) solid（实线） dashed（虚线）dotted（圆点）
  • 边框的颜色：border-color:
代码示例
  1.  <style>
  2.    /*默认初始化，因为div盒子默认的margin是8*/
  3.    h1,ul,li,a,body{
  4.      margin: 0;
  5.      padding: 0;
  6.      text-decoration: none;
  7.    }
  8.    /*默认顺序：边框粗细，边框样式 边框颜色，*/
  9.    .box{
  10.      width: 300px;
  11.      border: 1px solid #000;
  12.    }
  13.    h2{
  14.      background: #cceeff;
  15.      text-align: center;
  16.      margin: 0;
  17.      line-height: 30px;
  18.      font-size: 20px;
  19.    }
  20.    form{
  21.      background: #cceeff;
  22.    }
  23.    div:nth-of-type(1) >input{
  24.      border: 4px solid #00ff51;
  25.    }
  26.    div:nth-of-type(2) >input{
  27.      border: 4px dashed #ff0000;
  28.    }
  29.    div:nth-of-type(3) >input{
  30.      border: 4px dotted #ffa500;
  31.    }
复制代码
表里边距（padding margin ）

margin(外边距)属性定义元素周围的空间。
margin 扫除周围的（外边框）元素地区。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变全部的属性。
padding（内边距）定义元素到边框之间的空间，用法与margin大抵相同
值说明auto设置浏览器边距。 如许做的结果会依赖于浏览器length定义一个固定的margin（使用像素，pt，em等）%定义一个使用百分比的边距 Margin的妙用：居中元素


  • margin:25px 50px 75px 100px;

    • 上边距为25px
    • 右边距为50px
    • 下边距为75px
    • 左边距为100px

  • margin:25px 50px 75px;

    • 上边距为25px
    • 左右边距为50px
    • 下边距为75px

  • margin:25px 50px;

    • 上下边距为25px
    • 左右边距为50px

  • margin:25px;

    • 全部的4个边距都是25px

padding同上
圆角边框（border-radius）

  1.  <!--  圆角属性顺序为 左上 右上 右下 左下 顺时针方向-->
  2.  <!--  可以用来画图
  3.  圆形：高度，宽度，各个圆角都相等即可
  4.  半圆：高度为宽度的一半 左上右上俩个圆角等于宽度，剩下俩圆角为零即可
  5.  扇形：高度宽度相等，右上角也相等，其余为零-->
  6.    <style>
  7.      div{
  8.        width: 40px;
  9.        height: 40px;
  10.        border:3px solid #000;
  11.        border-radius: 0 40px 0 0;
  12.      }
  13.    </style>
复制代码
盒子阴影

  1.  ​
  2.  <style>
  3.          div{
  4.              width: 200px;
  5.              margin: 0 auto;
  6.          }
  7.          img{
  8.              border-radius: 50%;
  9.                /*阴影颜色， 水平偏移 垂直偏移，模糊半径*/
  10.              box-shadow: #ff9a9e 10px 20px 90px;
  11.          }
  12.      </style>
  13.  </head>
  14.  <body>
  15.  <div><img src="001.jpg"></div>
复制代码
浮动（float）

什么是浮动？

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新分列。
Float（浮动），每每是用于图像，但它在结构时一样非常有效。
浮动是增长了层级，是浮在父级元素上的。以是大概会导致父级元素边框塌陷
元素怎样浮动？

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边沿碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
注：行内元素可以被包含在块级元素中，反之，则不可以
属性形貌值CSSclear指定不允许元素周围有浮动元素。left right both none inherit1float指定一个盒子（元素）是否可以浮动。left right none inherit 假如我们想让元素有块元素的性质，还可以浮动，我们可以先添加浮动，在添加clear：both，扫除浮动效果就可以实现
案例：
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>浮动</title>
  6.      <link rel="stylesheet" href="float.css">
  7.  </head>
  8.  <body>
  9.  <div class="father">
  10.  <div class="layer01">
  11.  <img src="image/001.jpg" alt="">
  12.  </div>
  13.  <div class="layer02">
  14.  <img src="image/002.jpg" alt="">
  15.  </div>
  16.  <div class="layer03">
  17.  <img src="image/003.jpg" alt="">
  18.  </div>
  19.  <div class="layer04">
  20.  <img src="image/004.jpg"alt="">
  21.  </div>
  22.  <div class="layer05">
  23.      浮动的盒子可以向左浮动，也可以向右浮动，直到他的外边缘碰到包含框或另一个浮动盒子为止
  24.  </div>
  25.  </div>
  26.  </body>
  27.  </html>
复制代码
  1.  body{
  2.      margin: 0;
  3.      padding: 0;
  4.  }
  5.  div{
  6.  ​
  7.      margin: 10px;
  8.      padding: 5px;
  9.  }
  10.  .father{
  11.      border: 1px solid #e82525;
  12.  }
  13.  .layer01{
  14.      border: 1px solid #00a6ff;
  15.      display: inline-block;
  16.      float: left;
  17.  }
  18.  .layer02{
  19.      border: 1px solid #7b239e;
  20.      display: inline-block;
  21.      float: left;
  22.  }
  23.  .layer03{
  24.      border: 1px solid #f3c96e;
  25.      display: inline-block;
  26.      float: left;
  27.  }
  28.  .layer04{
  29.      border: 1px solid #a4f1bd;
  30.      display: inline-block;
  31.      float: left;
  32.  }
  33.  .layer05 {
  34.      border: 1px solid #730505;
  35.      display: inline-block;
  36.      float: left;
  37.  }
复制代码
display

属性值
值形貌none此元素不会被体现。block此元素将体现为块级元素，此元素前后会带有换行符。inline默认。此元素会被体现为内联元素，元素前后没有换行符。inline-block行内块元素。（CSS2.1 新增的值） 案例：仿QQ会员页面导航
HTML：
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>QQ会员</title>
  6.  <link rel="stylesheet" href="qq.css">
  7.  </head>
  8.  <body>
  9.  <div class="wrap">
  10.     <header class="nav-header">
  11.       <div class="head-contain">
  12.         <a href="" class="top-logo"><img src="img.png"width="145px" height="90px"></a>
  13.           <nav class="top-nav">
  14.               <ul>
  15.                   <li><a href="">游戏特权</a></li>
  16.                   <li><a href="">功能特权</a></li>
  17.                   <li><a href="">生活特权</a></li>
  18.                   <li><a href="">会员活动</a></li>
  19.                   <li><a href="">成长体系</a></li>
  20.                   <li><a href="">年费专区</a></li>
  21.                   <li><a href="">超级会员</a></li>
  22.               </ul>
  23.           </nav>
  24.           <div class="top-right">
  25.               <a href="">登录</a>
  26.               <a href="">开通超级会员</a>
  27.           </div>
  28.       </div>
  29.     </header>
  30.  </div>
  31.  </body>
  32.  </html>
复制代码
CSS：
  1.  *{
  2.      margin: 0;
  3.      padding: 0;
  4.  }
  5.  a{
  6.      text-decoration: none;
  7.      color: #000;
  8.  }
  9.  ul li{
  10.    list-style: none;
  11.  }
  12.  ​
  13.  .nav-header{
  14.      background: rgba(0,0,0,0.4);
  15.      height: 90px;
  16.      width: 100%;
  17.  }
  18.  .head-contain{
  19.      width: 1180px;
  20.      height: 90px;
  21.      margin: 0 auto;
  22.      text-align: center;
  23.  }
  24.  .top-logo,.top-nav, .top-nav li, .top-right{
  25.      height: 90px;
  26.      display: inline-block;
  27.      vertical-align: top;
  28.  }
  29.  .top-nav{
  30.      margin: 0 48px;
  31.  }
  32.  .top-nav li{
  33.      line-height: 90px;
  34.      width: 90px;
  35.  }
  36.  .top-nav li a{
  37.      display: block;
  38.      width: 90px;
  39.      height: 90px;
  40.      text-align: center;
  41.  }
  42.  .top-nav li a:hover{
  43.      color: #7b239e;
  44.  }
  45.  .top-right a{
  46.      display: inline-block;
  47.      text-align: center;
  48.      margin-top: 25px;
  49.      border-radius: 35px;
  50.  }
  51.  .top-right a:hover{
  52.      background: #f6de8e;
  53.  }
  54.  .top-right a:first-child{
  55.      width: 90px;
  56.      height: 40px;
  57.      line-height: 40px;
  58.      color: #efa72c;
  59.      border: 1px solid #efa72c;
  60.  }
  61.  .top-right a:last-child{
  62.      width: 120px;
  63.      height: 40px;
  64.      font-weight: bolder;
  65.      line-height: 40px;
  66.      background: rgb(243, 201, 110);
  67.      color: #6a4604;
  68.  }
  69.  .top-right a:last-child:hover{
  70.      background: #bd7e07;
  71.  }
复制代码
效果演示：

父级边框塌陷的问题

当父级边框里的全部子集元素都带有浮动属性时，就会导致父级边框塌陷，如图：

clear：clear属性是CSS中用于控制元素如何与之前的浮动元素相互作用的属性。当元素设置了clear属性后，它可以被逼迫移动到前面的浮动元素下方，从而制止浮动元素对其结构的影响。
clear属性紧张有以下几个值：
值概述right元素会被移动到右侧浮动元素的下方。left元素会被移动到左侧浮动元素的下方。both元素会被移动到左侧和右侧浮动元素的下方。none默认值，元素不会被移动来扫除浮动 制止方法一：增长父级元素高度，超过子级元素的最高值。（不发起使用）
  1.  .father{
  2.      border: 1px solid #e82525;
  3.      height: 800px;
  4.  }
复制代码
方法二：在全部子级元素后再加一个空盒子，让盒子的左右两侧不允许浮动，让前面的浮动元素，还在父级边框里。（标准方法）
  1.  </div>
  2.      <div class="clear"></div>
  3.  </div>
  4.  ​
  5.  .clear{
  6.      clear: both;
  7.      margin: 0;
  8.      padding: 0;
  9.  }
复制代码
方法三：overflow：在父级元素中增长一个overflow：hidden，就可以了
  1.  .father{
  2.      border: 1px solid #e82525;
  3.      overflow: hidden;
  4.  }
复制代码
overflow 是 CSS的简写属性，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的区块格式化时。
overflow属性有以下值：
值形貌visible默认值。内容不会被修剪，会出现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会体现滚动条以便查看其余的内容。auto假如内容被修剪，则浏览器会体现滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflow 属性的值。 注意:overflow 属性只工作于指定高度的块元素上。
注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时间才会体现 (设置 "overflow:scroll" 也是一样的)。
方法四：在父类中添加一个伪类 类似于第二种方案（伪类可以增长过滤条件），可以制止增长多余div的风险
  1.  .father:after{
  2.      content: "";
  3.      display: block;
  4.      clear: both;
  5.  }
复制代码
小结：1.设置父元素的高度，简朴易懂，但元素假设有了固定的高度，就会被限制
2.浮动元素背面加空div，简朴明了 缺点：代码中尽量制止空div
3.overflow 简朴 缺点：一些下拉的场景中或一些不能切除的场景中制止使用
4.父类添加伪类 after（推荐） 写法稍微复杂，但没有副作用，推荐使用
对比



  • display
    方向不可以控制
  • float
    浮动起来的话会脱离标准文档流，以是要解决父级边框塌陷的问题
定位

相对定位

  1.  #first{
  2.      background-color: #cceeff;
  3.      border: 1px dashed #7b239e;
  4.      position: relative;/* 相对定位：上下左右*/
  5.      top:-20px;/* 向下移动-20px->即向上移动20px*/
  6.      left: 20px/*向右移动20px*/
  7.  }
  8.  #second{
  9.      background-color: #d6aa1a;
  10.      border: 1px dashed #f6de8e;
  11.  }
  12.  #third{
  13.      background-color: #720fb2;
  14.      border: 1px dashed #cceeff;
  15.      position: relative;
  16.      bottom: -20px;/*向下移动20px*/
  17.      right: 20px;/*向左移动20px*/
  18.  }
复制代码
相对定位：相对于自己原来的位置举行偏移 position：relative
相对于原来的位置，举行指定的偏移，相对定位，他仍然在标准文档流中，原来的位置会被保留
练习：
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.    <style>
  7.      a{
  8.        text-decoration: none;
  9.        color: #f6f0f0;
  10.          background: #ff9a9e;
  11.          width: 100px;
  12.          height: 100px;
  13.          display: block;
  14.          line-height: 100px;
  15.          text-align: center;
  16.      }
  17.  a:hover{
  18.       background: #4ca2cd;
  19.     }
  20.      #father{
  21.        border: 1px solid #e82525;
  22.        width: 300px;
  23.        height: 300px;
  24.          padding: 10px;
  25.      }
  26.  ​
  27.      #second,#fourtrh{
  28.      position: relative;
  29.          left: 200px;
  30.          top: -100px;
  31.      }
  32.      #fifth{
  33.      position: relative;
  34.          left: 100px;
  35.          top: -300px;
  36.      }
  37.  ​
  38.    </style>
  39.  </head>
  40.  <body>
  41.  <div id="father">
  42.      <a id="first" href="#">链接一</a>
  43.  <a id="second" href="#">链接二</a>
  44.  <a id="third" href="#">链接三</a>
  45.  <a id="fourtrh" href="#">链接四</a>
  46.  <a id="fifth" href="#">链接五</a>
  47.  </div>
  48.  </body>
  49.  </html>
复制代码
效果展示：

绝对定位

定位：基于XXX的定位 上下左右
1.在没有父级元素定位的前提下，相对于浏览器定位
2.假设父级元素存在定位，我们通常相对于父级元素举行偏移
3.在父级元素范围内有移动，绝对定位的起始位置由他的父级元素决定
相对于父级或浏览器的位置，举行指定的偏移，绝对定位，他不在在标准文档流中，原来的位置不会被保留
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.    <meta charset="UTF-8">
  5.    <title>相对定位</title>
  6.    <style>
  7.      div{
  8.        margin: 10px;
  9.        padding: 5px;
  10.        font-size: 12px;
  11.        line-height: 25px;
  12.      }
  13.      #father{
  14.        border: 1px solid #e82525;
  15.        padding: 0;
  16.        position: relative;
  17.      }
  18.      #first{
  19.        background-color: #cceeff;
  20.        border: 1px dashed #7b239e;
  21.      }
  22.      #second{
  23.        background-color: #d6aa1a;
  24.        border: 1px dashed #f6de8e;
  25.      }
  26.      #third{
  27.        background-color: #720fb2;
  28.        border: 1px dashed #cceeff;
  29.        position: absolute;
  30.        top:30px;
  31.      }
  32.    </style>
  33.  </head>
  34.  <body>
  35.  <div id="father">
  36.    <div id="first">第一个盒子</div>
  37.    <div id="second">第二个盒子</div>
  38.    <div id="third">第三个盒子</div>
  39.  </div>
  40.  </body>
  41.  </html>
复制代码
固定定位 fixed

固定定位和绝对定位相同点：都可以拿父级元素或浏览器的位置举行定位
差别点：绝对定位会随着父级元素的移动而移动，但固定定位始终不动
案例：
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.    <style>
  7.      body{
  8.        height: 1000px;
  9.      }
  10.      div:nth-of-type(1){/*绝对定位：相对于浏览器*/
  11.        width: 100px;
  12.        height: 100px;
  13.        background: red;
  14.        position: absolute;
  15.        right: 0;
  16.        bottom: 0;
  17.      }
  18.      div:nth-of-type(2){/*固定定位：相对于自身*/
  19.        width: 50px;
  20.        height: 50px;
  21.        background: blue;
  22.        position: fixed;
  23.        right: 0;
  24.        bottom: 0;
  25.      }
  26.    </style>
  27.  </head>
  28.  <body>
  29.  <div>div1</div>
  30.  <div>div2</div>
  31.  </body>
  32.  </html>
复制代码
效果：


z-index

属性定义及使用说明
z-index 属性指定一个元素的堆叠次序。
拥有更高堆叠次序的元素总是会处于堆叠次序较低的元素的前面。
注意： z-index 举行定位元素(position:absolute, position:relative, or position:fixed)。
默认值：auto继承：no版本：CSS2JavaScript 语法：object.style.zIndex="1" opacity：0.5 /背景透明度
深度解析：

  • 层叠上下文（stacking context） 看到上下文这个关键词，我想各人应该会有一点概念，没错就是context。和你们认识的谁人BFC、IFC里面的上下文是一个意思，其实我想说css世界里面看到context大概XXX上下文其实都是同一个意思，完全可以明白为自成一派，在自己的小世界里面恣意折腾，不受其他的context影响。当然，这个context是可以被其他context包含同时也可以包含其他context
  • 层叠水平（stacking level） 层叠水平决定了在同一个层叠上下文中元素在Z轴上的体现次序。 页面中的全部元素（普通元素和层叠上下文元素）都有层叠水平。然而对普通元素的层叠水平探讨只局限在层叠上下文元素中。 注：各人千万不要把层叠水平和z-index等量齐观，尽管某些环境下z-index确实可以影响层叠水平，但是也只局限于具有层叠上下文的元素，而层叠水平是全部元素都存在的
  • 层叠次序（stacking order） 层叠次序表示发生层叠时有着特定的垂直体现次序（规则）。 即：网上这张很盛行的规则
    关于这张图有一些补充： 位于最下面的background/border特指层叠上下文元素的边框和背景致。每一个层叠次序规则仅适用当前层叠上下文元素的小世界 inline水平盒子指的是包括inline/inline-block/inline-table元素的层叠次序，他们都是同级别的 单纯从层叠水平上看，现实上z-index：0和auto是可以当作一样的，但是在层叠上下文范畴有着根天性的差异
深入了解层叠上下文

  • 特性
    层叠上下文的层叠水平要比普通元素高 层叠上下文可以阻断元素的混合模式 层叠上下文可以嵌套，内部层叠上下文及其全部子元素均受制于外部的层叠上下文 每个层叠上下文和兄弟元素独立，也就是说，当举行层叠变化大概渲染的时间，只必要考虑子女元素 每个层叠上下文是自成体系的，当元素发生层叠的时间，整个元素被认为是在父层叠上下文的层叠次序中
  • 如何创建
    根元素 (HTML) z-index 值不为 "auto"的 绝对/相对定位（在firefox/ie浏览器下position: fixed也是可以的） 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex opacity 属性值小于 1 的元素（参考 the specification for opacity） transform 属性值不为 "none"的元素 mix-blend-mode 属性值不为 "normal"的元素 filter值不为“none”的元素 perspective值不为“none”的元素 isolation 属性被设置为 "isolate"的元素 position: fixed 在 will-change 中指定了恣意 CSS 属性，即便你没有直接指定这些属性的值 -webkit-overflow-scrolling 属性被设置 "touch"的元素
  • 层叠上下文与层叠次序
    文章中多次提到普通元素具备层叠上下文后层叠水平就会变高，那么他究竟在层叠次序谁人规则图的哪个位置呢 把目光向上锁定，第二条枚举了12个可以创建层叠上下文的方法，我们把他分为两类：第二三条和其他。 依赖z-index取值的：位置取决于z-index的值 不依赖z-index取值的：在图中第二高的位置，即：z-index = auto 大概 0
    用一个例子来说明：
    1.  <div class="container">
    2.      <div class="div1">111</div>
    3.      <div class="div2">222</div>
    4.  </div>
    复制代码
    1.  .container {
    2.    width: 500px;
    3.    height: 500px;
    4.    background-color: #000;
    5.    color: #fff;
    6.    transform: scale(1);
    7.    /* 给container创建层叠上下文 */
    8.  }
    9.  .div1 {
    10.    padding: 50px;
    11.    background-color: aqua;
    12.    z-index: 0;
    13.    position: relative;
    14.    /* 给div1创建层叠上下文，层叠水平依赖z-index的取值 */
    15.  }
    16.  .div2 {
    17.    padding: 50px;
    18.    background-color: red;
    19.    opacity: 0.8;
    20.    /* 给div2创建层叠上下文，层叠水平依赖z-index的取值 */
    21.    /* margin-top: -40px; */
    22.  }
    复制代码
    这个例子中一览无余，div1和div2的层叠水平一样，都是在规则那张图的第二高的位置，不过div2在div1的dom节点背面，以是div2要比div1的层叠水平高，我们把margin-top的注释去掉看下：
    要想使得div1在上面只必要把div1的z-index改成大于0的值就好了。
    还是上面的htl结构，接下来我们再来看一个有意思的例子：
    1.  .container {
    2.    width: 500px;
    3.    height: 500px;
    4.    background-color: #000;
    5.    color: #fff;
    6.    transform: scale(1);
    7.    /* 给container创建层叠上下文 */
    8.  }
    9.  .div1 {
    10.    padding: 50px;
    11.    background-color: aqua;
    12.    opacity: 0.8;
    13.    /* 给div1创建层叠上下文，层叠水平在z-index：0 */
    14.  }
    15.  .div2 {
    16.    padding: 50px;
    17.    background-color: red;
    18.    position: relative;
    19.    margin-top: -40px;
    20.  }
    复制代码
    各人肯定会说，div1明显盖过div2啊，但是我们来看下现实环境：
    现实环境下面的div2盖过了div1，原因是当html元素设置定位属性的时间（absolute/relative），其z-index属性主动生效变成 z-index： auto，以是这时间div1和div2的层叠水平是一致的，而div2在div1的dom节点背面，以是盖过了div1（注意这里div2并没有变成层叠上下文元素，这是有本质区别的）
常见错误认知解析
现在我们在一起看下文章开头提到的几个常见的错误认知：


  • z-index值越大越“靠近我们” -- 并不一定，起首要成为层叠上下文。大概假如比较的元素的父元素也是层叠上下文，那就完全取决于父元素了
  • 要搭配position: absolute | relative | fixed 使用才有效呢 -- 对了一部分，还有其他的条件也可以使元素称为层叠上下文元素
  • 比较两个兄弟节点谁更“靠近我们”，要看他们的同级父元素的比较呢。-- 假犹如级父元素不是层叠上下文元素就不必要看“父元素的眼色”了
小结

结构图


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

天空闲话

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

集成商 AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表