CSS 学习笔记

1. 嵌入形式

1）css 嵌入到 html 的头部的 style 标签内

<div style="background-color:lightcoral; color: #fff; width: 300px;">
    hello world
  </div>

2）css 嵌入到元素 style 属性内

长处：css 规定与 HTML 拆散；能够复用

<style>
    #one, #two{
      background-color:lightcoral; 
      color: #fff; 
      width: 300px;
      margin-bottom: 1em;
    }
  </style>

3）独自写到.css 文件，并通过 link 引入

.box {
  background-color:lightcoral; 
  color: #fff; 
  width: 300px;
  margin-bottom: 1em;
}

#one {height: 100px;}

2. 语法

正文：/* 正文内容 */

语法：

  选择器{款式规定}

3. 选择器

1）外围选择器

1. id 选择器 惟一
   #one{}
2. class 选择器 非惟一
   .box{}
3. 标签选择器
   div{}
4. 并且选择器（非官方）
   div.box{} 选中 div 元素，并且这个 div 的 class 是 box
   tip：子元素个别继承父元素的字体字号属性
5. 和选择器（重置款式规定）
   div,.box{} 选中 div 元素和 class 未 box 的元素

6. 广泛选择器（慎用）
   *{} 选中所有元素

   2）档次选择器（两个选择器配合应用）

   子选择器：通过父元素抉择子元素

   • 大于号

   后辈选择器：

   • 空格

ul.menu > li.menu_item {
      float: left;
      line-height: 3em;
      width: 100px;
      text-align: center;
      position: relative;
      cursor: pointer;
    }
    ul.menu > li.menu_item:hover ul.sub_menu {display: block;}
    /* 二级菜单容器 */
    /* 后辈选择器 */
    ul.menu ul.sub_menu {
      display: none;
      position: absolute;
      color: #666;
    }
    /* 二级菜单元素 */
    ul.menu ul.sub_menu > li {}

<div class="second_line">
        <div class="logo">logo</div>
        <!-- ul 菜单列表 -->
        <ul class="menu">
          <li class="menu_item">
            <span> 学校详情 </span>
            <ul class="sub_menu">
              <li> 学校简介 </li>
              <li> 历史沿革 </li>
            </ul>
          </li>
          <li class="menu_item">
            <span> 人才培养 </span>
            <ul class="sub_menu">
              <li> 本科生教育 </li>
              <li> 研究生教育 </li>
            </ul>
          </li>
          <li class="menu_item">
            <span> 科学研究 </span>
          </li>
        </ul>
      </div>

兄弟选择器：

• ~ 以后元素之后的所有兄弟
• + 以后元素之后的下一个兄弟

ul.rank {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    ul.rank > li:nth-child(2) + *{color: tomato;}
    ul.rank > li:nth-child(3) ~ *{color: rgb(241, 28, 170);
    }

3）属性选择器（属性过滤器），个别利用于表单元素

input[name]

具备 name 属性 input 元素

input[name=’username’]

具备 name 属性，并且 name 属性值为 username 的 input 元素

input[name^=’u’]

具备 name 属性，并且 name 属性值以 'u' 作为开始

input[name*=’u’]

具备 name 属性，并且 name 属性值蕴含 'u'

input[name$=’u’]

具备 name 属性，并且 name 属性值以 'u' 作为结尾

4）伪类选择器（伪类过滤器）

:first-child
:last-child
:nth-child(n) 第 n 个孩子节点
:visited 拜访过的
:hover 光标悬浮
:active a 标签的激活状态
:focus 聚焦（多个输入框，光标选中）

5）伪元素选择器

::after
li 标签浮动之后，ul 标签失去撑持，须要减少伪元素撑持

<style>
    ul {list-style: none;}
    ul.menu {background-color: tomato;}
    ul.menu > li{float: left;}
    ul.menu::after {
      content: "11";
      display: block;
      clear: both;
    }
  </style>

<ul class="menu">
    <li>one</li>
    <li>two</li>
  </ul>

tip: 计算选择器优先级（多个选择器的雷同规定作用于同一元素）

1）权重
 1000 style
 100  id
 10   class、伪类
 1    元素选择器、伪元素
2）程序
  当权重值雷同时，后者笼罩前者
3）特权（！important）脱离权重和程序规定

4. 款式规定

1）字体规定

可被继承

• font-family：字体、字体栈
  在浏览器所在 pc 从字体栈顶到底寻找字体，找不到应用默认字体

font-family:"Microsoft YaHei","微软雅黑",sana-serif;

• font-size：字体大小 12px
• font-weight: 字体粗细水平 100~900 bold bolder
• font-style: normal italic（斜体）
• color: 字体色彩

• line-height: 行高 用于文本垂直居中 3em（绝对单位）
  长度单位：

  px：像素
  em：为以后元素字号的 n 倍
  rem：为根元素字号的 n 倍

font（速写）:font-style font-weight font-size/line-height font-family 属性的简写
font:normal bold 24px/1 sans-serif

网络字体
阿里巴巴矢量图标库：https://www.iconfont.cn/colle…
1. 抉择单色图标（多色图标只能通过下载方式上传）
2. 退出购物车后，来到如图所示页面

查看网址中的代码，如下所示：

@font-face {
  font-family: "iconfont"; /* Project id 2736919 */
  src: url('//at.alicdn.com/t/font_2736919_pbwmmlyvs57.woff2?t=1628652186798') format('woff2'),
       url('//at.alicdn.com/t/font_2736919_pbwmmlyvs57.woff?t=1628652186798') format('woff'),
       url('//at.alicdn.com/t/font_2736919_pbwmmlyvs57.ttf?t=1628652186798') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-fuwufankui:before {content: "\e67d";}

.icon-Backward-Button:before {content: "\e82e";}

.icon-Back-button:before {content: "\e82f";}

.icon-Airplane-2:before {content: "\e830";}

在本人代码中退出如下代码：

<!-- 1. 引入 iconfont 的 css 文件 -->
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_2736919_pbwmmlyvs57.css">

<!-- 2 调用 -->
  <div class="content">
    <i class="iconfont icon-Backward-Button"></i>
    <span class="iconfont icon-Airplane-2"></span>
    <em class="iconfont icon-duanxin"></em>
  </div>

2）文本规定

• text-align:left/right/center
• text-decoration:none(勾销原有下划线) overline/underline/line-through(横线在两头)
• text-indent: 缩进
• text-transform: 管制大小写(capitalize/uppercase/lowercase/none)
• text-shadow: 暗影(x 轴，y 轴，晕染范畴，色彩)
• vertical-align: 行内元素在容器中的垂直排列形式（display:inline-block）
• text-overflow: 文本超出局部如何显示提醒(ellipsis …)
• white-space: 解决元素中的空白(nowrap 不换行)

• overflow: 容器内容超出局部如何解决(visible/hidden/scroll/auto)

  overflow 注意事项：容器的内容大小超过容器自身
  在父元素中加 overflow：hidden;
  父元素中加 overflow-x:hidden; overflow-y:scroll;（横向暗藏，纵向滚动）

.box {
      width: 300px;
      background-color: lightsalmon;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

<div class="box">
    矿业工程学院胜利举办 2021 年遥感综合实习专家报告会
  </div>

成果展现：

3）列表规定

用于设置有序列表、无序列表、自定义列表的显示方式（ul\ol\dl）
list-style:none;

4）其余规定

• cursor：光标悬浮到连贯上时光标的形态

  cursor:pointer; 小手
  cursor:crosshair; 十字
  cursor:wait;
  cursor:help; 问号

• visibility：设置内容显示与暗藏（不显示，占空间）
  hidden/visible
• display:none;(不显示，不占据空间)
  block(行内元素转为块元素)
  inline(块元素转为行内元素)
  inline-block（行内块元素：与其余行内元素共享一行空间 and 能够指定宽高）
• opacity：设置透明度，0- 1 间取值，取值为 0 的时候暗藏，占据屏幕空间
• overflow：盒子外部内容溢出局部解决
  visible/hidden/scroll/auto

• outline：设置外边框

  outline:none;
  outline-width:; 宽度
  outline-style:solid; 外边框款式
  outline-color:; 外边框色彩
  outline-offset:; 偏移量

面试题：1. 文本在盒子中程度居中？text-align:center
2. 文本在盒子中垂直居中?
  1) line-height 行高
  2) vertical-align 行内元素？3. 盒子在容器中程度居中?（盒子应该位于容器外部，容器通常状况下要比盒子大）1) margin: 0 auto;
  2) 定位 margin-left:50%; (此时左侧边框位于中线)left:-50px; position :relative;
  3)绝对定位 + 相对定位
4. 盒子在容器中垂直居中？1) 父元素 padding, box-sizing:border-box
  2) 父元素 padding + 子元素 margin, box-sizing:border-box
  3）伸缩盒布局 父元素属性：align-items（穿插轴）/justify-content（主轴）（看具体是主轴还是穿插轴）

5）盒子规定

• margin 外边距（盒子外边框间隔其余元素的间隔）

  margin: 10px; 上右下左
  margin: 10px 20px; 高低，左右
  margin: 10px 20px 30px; 上 左右 下
  margin: 10px 20px 30px 40px; 下 右 下 左
  速写模式，外边距，高低外边距会进行重叠
  margin-top
  margin-right
  margin-bottom
  margin-left

• border

  border-width
        border-top-width
        border-right-width
        border-bottom-width
        border-left-width
  border-style
        border-top-style
        border-right-style
        border-bottom-style
        border-left-style
  border-color
        border-top-color
        border-right-color
        border-bottom-color
        border-left-color
  border 速写
        border: 2px solid #ccc;

• padding 内边距（内容间隔盒子内边框的间隔）

  padding: 10px; 上右下左
  padding: 10px 20px; 高低，左右
  padding: 10px 20px 30px; 上 左右 下
  padding: 10px 20px 30px 40px; 下 右 下 左
  速写模式，外边距，高低外边距会进行重叠
  padding-top
  padding-right
  padding-bottom
  padding-left

• width/height

• background

  background-color
  background-image:url()
  background-repeat
  background-size（contain 蕴含、cover 笼罩、百分比）
  background-positon
  background-clip
  background-orign
  background-attachment
  background(速写)

  border: 10px dashed #ccc;
  background-image: url('./images/carousel2.jpg');
  background-repeat: no-repeat;
  background-clip: border-box;/* 边框依然有图 */
  background-origin: content-box;/* 起源点从哪里开始 */

• border-radius: 圆角半径(罕用于画⚪)

• box-sizing（盒子模式）

  1. 内容盒子（一般盒子，默认盒子）
  content-box;
  盒子理论占据的宽度：2borderWidth + 2padding + width
  盒子理论占据的高度：2borderHeight + 2padding + height
  2. 边框盒子（怪异盒子）————利用实例：呼吸灯
  border-box;
  盒子理论占据宽度：width
  width=2borderWidth+2padding+ 内容宽
  盒子理论占据高度：height

/* 呼吸灯实例 */
<style>
    .outer , .inner {
      box-sizing: border-box; /* width : padding + border + 内容 */
      border-radius: 50%;/* 变成圆形 */
    }
    .outer {
      width: 300px;
      height: 300px;
      border: 3px solid #ccc;
      margin: 0 auto;
      padding: 50px;
      /* 突变 */
      transition: padding 2s;
    }
    .outer:hover {padding: 10px;}
    .outer .inner {
      width: 100%;
      height: 100%;
      border: 5px solid #ccc;
    }
  </style>

<div class="outer">
    <div class="inner">
    </div>
  </div>

5. 布局

1）默认文档流（y 轴）

块元素，独占一行空间，高度由内容决定。块元素默认从上往下排列

2）浮动布局（x 轴）

• float

  浮动元素：1) 脱离文档流
    2) 块元素的宽度不再是 100%，由内容决定
    3) 块元素不再撑持其父元素
    4) 同一档次（兄弟关系）浮动元素会在一行排列，当浮动元素宽度总和大于父元素的时候会产生换行。

• clear

  清理浮动
    left  不与左浮动元素在同一水平线上
    right 不与右浮动元素在同一水平线上
  

3）伸缩盒布局（x 轴、y 轴）

div.container>div
ul.container>li
1）概念

伸缩盒容器 div.container、ul.container
伸缩盒元素 div、li
主轴    默认主轴 x 轴，伸缩盒中，伸缩盒子元素沿着主轴来进行排列
穿插轴  与主轴垂直的轴

2）规定
伸缩盒容器

display:flex;
强制让它的子元素沿着主轴方向中显示，并且子元素不会脱离文档流，穿插轴上元素的高度如果没有指定，应该和父元素保持一致。
flex-direction:row;
定义主轴方向，row 示意主轴是 x 轴，column 示意主轴为 y 轴
flex-wrap:nowrap;
当子元素的长度加起来超过主轴上的父元素的宽度，默认不换行，wrap 为换行
align-items: stretch;（拉伸）
定义伸缩盒容器中的子元素在穿插轴上的排列形式
justify-content:space-around;
定义伸缩盒容器中的子元素在主轴上的排列形式

伸缩盒元素

flex-basic: 主轴上的根底长度（基本工资）
flex-grow: 主轴上残余空间调配的份数（分成）
flex-shrink: 主轴上亏损空间的摊派份数（亏损）

4）定位布局（z 轴）

（1）position:

• static 动态（默认、非定位元素）
• relative 绝对（定位元素）
• absolute 相对（定位元素）
• fixed 固定（定位元素）
• sticky 粘滞（定位元素）
  定位元素的特点: 能够应用定位规定。top right bottom left

1) 绝对定位

1. 不脱离文档流
2. 绝对于它原来所在位置挪动

2) 相对定位

1. 脱离文档流
2. 绝对于间隔它最近的父定位元素地位挪动！如果所有的父元素都不是定位元素，绝对于浏览器视口地位挪动
3. 个别状况下，相对定位元素应该嵌套在绝对定位元素内容来应用

3) 固定定位

1. 脱离文档流
2. 绝对于浏览器视口进行定位

4) 粘滞定位

1. 在没有达到阈值的时候是不脱离文档流（绝对），达到阈值脱离文档流（固定）
2. 通过 left、top、right、bottom 来设定阈值

（2）定位布局的利用：

1. 二级栏目
2. 模态框
3. 非凡布局