# HTML+CSS学习记录

CSS部分

选择器

属性选择器

属性选择器
[attr]：指定属性的元素；
[attr=val]：属性等于指定值的元素；
[attr*=val]：属性包含指定值的元素；
[attr^=val]：属性以指定值开头的元素；
[attr$=val]：属性以指定值结尾的元素；
[attr~=val]：属性包含指定值(完整单词)的元素(不推荐使用)；
[attr|=val]：属性以指定值(完整单词)开头的元素(不推荐使用)；

组合选择器

相邻兄弟选择器：A + B

普通兄弟选择器：A ~ B

子选择器：A > B

后代选择器：A B

伪类

条件伪类

:lang()：基于元素语言来匹配页面元素；

:dir()：匹配特定文字书写方向的元素；

:has()：匹配包含指定元素的元素；

:is()：匹配指定选择器列表里的元素；

:not()：用来匹配不符合一组选择器的元素；

行为伪类

:active：鼠标激活的元素；

:hover：鼠标悬浮的元素；

::selection：鼠标选中的元素；

状态伪类

:target：当前锚点的元素；

:link：未访问的链接元素；

:visited：已访问的链接元素；

:focus：输入聚焦的表单元素；

:required：输入必填的表单元素；

:valid：输入合法的表单元素；

:invalid：输入非法的表单元素；

:in-range：输入范围以内的表单元素；

:out-of-range：输入范围以外的表单元素；

:checked：选项选中的表单元素；

:optional：选项可选的表单元素；

:enabled：事件启用的表单元素；

:disabled：事件禁用的表单元素；

:read-only：只读的表单元素；

:read-write：可读可写的表单元素；

:blank：输入为空的表单元素；

:current()：浏览中的元素；

:past()：已浏览的元素；

:future()：未浏览的元素；

结构伪类

:root：文档的根元素；

:empty：无子元素的元素；

:first-letter：元素的首字母；

:first-line：元素的首行；

:nth-child(n)：元素中指定顺序索引的元素；

:nth-last-child(n)：元素中指定逆序索引的元素；；

:first-child ：元素中为首的元素；

:last-child：元素中为尾的元素；

:only-child：父元素仅有该元素的元素；

:nth-of-type(n) ：标签中指定顺序索引的标签；

:nth-last-of-type(n)：标签中指定逆序索引的标签；

:first-of-type：标签中为首的标签；

:last-of-type：标签中为尾标签；

:only-of-type：父元素仅有该标签的标签；

伪元素

::before：在元素前插入内容；

::after：在元素后插入内容；

优先级

10000：!important；

01000：内联样式；

00100：ID 选择器；

00010：类选择器、伪类选择器、属性选择器；

00001：元素选择器、伪元素选择器；

00000：通配选择器、后代选择器、兄弟选择器；

背景图片尺寸

 body {
    background: url(images/bg3.png) no-repeat;
    /* background-size: contain; */
    background-size: cover;
}

渐变（Gradients）

径向渐变

线性渐变 - 从上到下（默认情况下）

background-image: linear-gradient(direction[angle], color-stop1, color-stop2, ...);

线性渐变 - 从左到右

background-image: linear-gradient(to right, red , yellow);

线性渐变 - 对角

background-image: linear-gradient(to bottom right, red, yellow);

重复的线性渐变

repeating-linear-gradient() 函数

background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

径向渐变

语法–颜色节点均匀分布（默认情况下）

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

background-image: radial-gradient(red 5%, yellow 15%, green 60%);

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

background-image: radial-gradient(circle, red, yellow, green);

size 参数定义了渐变的大小。它可以是以下四个值：

• closest-side
• farthest-side
• closest-corner
• farthest-corner

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
 
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变：

background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

利用CSS怎么创建渐变色边框

1. 使用 border-image

2. 使用 background-image

   使用 background-image 绘制渐变色背景，并且把中间用纯色遮住应该是最容易想到的一种方法，思路是：使用两个盒子叠加，给下层的盒子设置渐变色背景和 padding，给上层盒子设置纯色背景。

3. 两层元素、background-image、background-clip

   为了解决方法 2 中 border-radius 不准确的问题，可以使用一个单独的元素作为渐变色背景放在最下层，上层设置一个透明的 border 和纯色的背景（需要设置 background-clip: padding-box 以避免盖住下层元素的 border）, 上下两层设置相同的 border-radius。

   <div class="box1">
       <div class="box2"></div>
       <div class="box3">内容</div>
   </div>
   
   .box1 {
       border: 4px solid transparent;
       border-radius: 16px;
       position: relative;
       background-color: #222;
       background-clip: padding-box; /* important */
       
       .box2 {
           position: absolute;
           top: 0;
           bottom: 0;
           left: 0;
           right: 0;
           z-index: -1;
           margin: -4px;
           border-radius: inherit; /* important 继承父元素的圆角边框 */
           background-image: linear-gradient(to right, red , yellow);
       }
   }
   

4. 伪元素、方法3的简化

   我们可以使用伪元素替换 box2 以简化HTML结构。

5. 单层元素、background-clip、background-origin、background-image

   最后是我觉得最优雅的一种方法，只需要用到单层元素，为其分别设置 background-clip、background-origin、background-image 这三个属性，每个属性设置两组值，第一组用于设置border内的单色背景，第二组用于设置border上的渐变色。

   <div class="box1">
       <div class="box2">内容</div>
   </div>
   
   .box1 {
       border: 4px solid transparent;
       border-radius: 16px;
       background-clip: padding-box, border-box;
       background-origin: padding-box, border-box;
       background-image: linear-gradient(to right, red , yellow), linear-gradient(to right, red , yellow);
       .box2 {
         width: 100%;
         height: 100%;
         border-radius: inherit;
         background-color: #fff;
       }
   }
   

   padding-box(默认):指定背景图片由padding开始展示

   content-box:指定背景图片在内容区域开始展示

   border-box:指定背景图片在边框区域开始展示

内减模式

/* css3盒子,不需要手动计算盒子尺寸||内减模式 */
  box-sizing: border-box;

解决盒子塌陷问题

.father {

  width: 100px;

  height: 100px;

  background-color: pink;

  /* 方法1，给父集加border或者padding */

  /* border: 1px solid #000; */

  /* 方法2，加overflow: hidden; */

  overflow: hidden;

}

.son {

  width: 50px;

  height: 50px;

  background-color: skyblue;

  margin-top: 10px;/* 塌陷源头 */

  /* 方法3，传化行内块元素 */

  /* display: inline-block; */

  /* 方法4，加浮动 */

}

伪元素的使用

/* li:first-child {
    color: aqua;
}
li:last-child {
    color: red;
}
li:nth-child(3) {
    color: blue;
}
li:nth-last-child(2){
    color: blueviolet;
}
li:nth-child(-n+5) {
    前五个
    background-color: #3f906a;
}
li:nth-child(n+3) {
    从第三个往后
    background-color: #073d3d;
} */

图片垂直居中

行内块元素同样可以使用vertical-aglin来解决浏览器基线对齐产生的问题（浏览器默认把行内元素和行内块元素当做文字处理，也可以用

display:block;

解决）

/* 调节图片垂直方向对齐方式 */
/* 给父级添加行高 */
father {
	line-height:100px;
	text-align:center;/* 水平居中 */
}
img {
    vertical-align: middle;//重点
}

居中方式

/* 居中方式 */
.aaaaa {
    /* 直接定位 */
    margin: 0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    vertical-align: middle; // 图片
    display: flex;
    justify-content: center;
    align-items: center;
}

flex布局

.grid-item {
  width: 33.3%;
  height: 200rpx;
  display: flex;
  flex-direction: column; /* 竖向排列 */
  align-items: center; /*水平居中 */
  justify-content: center; /* 垂直居中 */
  border-right: 1rpx solid #efefef;
  border-bottom: 1rpx solid #efefef;
  box-sizing: border-box; /* 内减模式 */
}

/*
    flex-wrap: nowrap;
    flex-flow: column wrap;
    align-content: center; // 有第二行
    flex:1;
    align-self: flex-end; // 控制单个子元素的排序方式
    order //定义项目的排列顺序，和z-index不一样
*/

.img-box {
  display: flex;
  padding: 20rpx 10rpx;
  justify-content: space-around; /* 四周平均留空 */
}

grid 布局

网格引入了 fr 单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。

.grid-container {
  display: grid; /* inline-grid */
  grid-template-columns: auto auto auto auto; /* 使用grid-template-columns 属性定义网格布局中的列数量。 */
  /* grid-template-columns: 1fr 1fr 1fr 1fr; */
  grid-template-rows: 100px 300px; /* 使用grid-template-rows 属性定义第一行高度为 100px，第二行高度为 300px。 */
  /*  
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  */
  /* grid-gap: 10px 10px; */
  grid-gap: 10px;  /* 行列间距简写 */
}

/* 改变某个元素的大小，即边框开始结束位置 */
/* span 表示要跨越的行数 */
/* 负数表示倒数的位置 */
.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-column: 1 / 3; /* 简写 */
  grid-column: 1 / span 2; /* 简写 */ 
}
.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-row: 1 / 3; /* 简写 */
  grid-row: 1 / span 2; /* 简写 */ 
}
/* 也可以简写为 */
.item {
  grid-area: 1 / 1 / 3 / 3;
}
/* 或者 */
.item {
  grid-area: 1 / 1 / span 2 / span 2;
}

属性	描述
column-gap	指定列之间的间隙
gap	row-gap 和 column-gap 的简写属性
grid	grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 以及 grid-auto-flow 的简写属性
grid-area	指定网格元素的名称，或者也可以是 grid-row-start, grid-column-start, grid-row-end, 和 grid-column-end 的简写属性
grid-auto-columns	指的默认的列尺寸
grid-auto-flow	指定自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。
grid-auto-rows	指的默认的行尺寸
grid-column	grid-column-start 和 grid-column-end 的简写属性
grid-column-end	指定网格元素列的结束位置
grid-column-gap	指定网格元素的间距大小
grid-column-start	指定网格元素列的开始位置
grid-gap	grid-row-gap 和 grid-column-gap 的简写属性
grid-row	grid-row-start 和 grid-row-end 的简写属性
grid-row-end	指定网格元素行的结束位置
grid-row-gap	指定网格元素的行间距
grid-row-start	指定网格元素行的开始位置
grid-template	grid-template-rows, grid-template-columns 和 grid-areas 的简写属性
grid-template-areas	指定如何显示行和列，使用命名的网格元素
grid-template-columns	指定列的大小，以及网格布局中设置列的数量
grid-template-rows	指定网格布局中行的大小
row-gap	指定两个行之间的间距

也可使用 justify、align、wrap 等等

/* 对齐方式 */
justify-content: center;     /* 居中排列 */
justify-content: start;      /* 从行首开始排列 */
justify-content: end;        /* 从行尾开始排列 */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end;   /* 从行尾位置开始排列 */
justify-content: left;       /* 一个挨一个在对齐容器得左边缘 */
justify-content: right;      /* 元素以容器右边缘为基准，一个挨着一个对齐, */

/* 基线对齐 */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* 分配弹性元素方式 */
justify-content: space-between;  /* 均匀排列每个元素
                                   首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-around;  /* 均匀排列每个元素
                                   每个元素周围分配相同的空间 */
justify-content: space-evenly;  /* 均匀排列每个元素
                                   每个元素之间的间隔相等 */
justify-content: stretch;       /* 均匀排列每个元素
                                   'auto'-sized 的元素会被拉伸以适应容器的大小 */

/* 溢出对齐方式 */
justify-content: safe center;
justify-content: unsafe center;

/* 全局值 */
justify-content: inherit;
justify-content: initial;
justify-content: unset;

清除float影响

/* 清除float影响
    1.尾部额外标签，添加块元素的css样式clear:both

    2.单伪元素清除法
    .clearfix::after{
        content:'';
        display:blok;
        clear:both;
        //低版本浏览器添加
        height:0;
        visibility:hidden;
    }

    3.双伪元素解决塌陷法
    .clearfix::before,
    .clearfix::after{
        content:'';
        display:table;
    }
    //真正清除浮动部分
     .clearfix::after{
        clear:both;
    }

    4.父元素添加overflow:hidden;
*/

定位

.box1 {
    /* 相对定位，参考之前位置 
    （具备之前块特点）
    */
	/* 固定定位，永远参考浏览器进行定位
    1.脱标-不占位置
    2.参考浏览器窗口改变位置
    3.具备行内块元素特点
    */

    /* 绝对定位(1.脱标，不占位置 2.改变之前标签显示模式，具备行内块的特点)：
    先找到已定位（有position）的父级(广义父级，就近原则)，如果有就以这个父级为参考移动
    如果没有，就以浏览器窗口为参考移动 
    */
    position: absolute;
    left: 0;

    width: 50px;
    height: 50px;
    background-color: #450d9f;
}

.box2 {
    /* 绝对定位的盒子不能使用margin:0 auto;居中 */
    position: absolute;
    /* margin: 0 auto; */

    /* 居中方法1 */
    /* left: 50%;
    margin-left: -150px;
    top: 50%;
    margin-top: -150px;
    */

    /* 居中方法2 */
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);

    width: 300px;
    height: 300px;
    background-color: #450d9f;
}

默认情况，定位的盒子，后来者居上

z-index:整数;取值越大，显示顺序越在上；默认为0,必须配合定位。

鼠标样式

.box {
    width: 500px;
    height: 500px;
    background-color: #705c91;

    /* 鼠标小手,默认箭头default */
    /* cursor: pointer; */

    /* 鼠标I形状 */
    /* cursor: text; */

    /* 鼠标十字形，可移动 */
    cursor: move;
}

正圆

.box {
    /* 圆形 */
    border-radius: 50%;
    width: 500px;
    height: 500px;
}

三角形

  <style>
    .box1 {
      width: 0;
      height: 0;
      border-top: 100px solid red;
      border-left: 100px solid blue;
      border-right: 100px solid green;
      border-bottom: 100px solid yellow;
    }

    .box2 {
      width: 0;
      height: 0;
      /* transparent 透明色 */
      border-top: 200px solid transparent;
      border-left: 0px solid blue;
      border-right: 100px solid green;
      border-bottom: 0 solid yellow;
    }

    .box3 {
      width: 0;
      height: 0;
      border-color: transparent green transparent transparent;
      border-style: solid;
      border-width: 200px 100px 0 0;
    }

    span {
      text-decoration: line-through;
    }
  </style>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <span>删除线</span>
</body>

overflow溢出

.box6 {
    width: 200px;
    height: 200px;
    background-color: #71c4a7;
    /* 溢出部分隐藏 */
    /* overflow: hidden; */

    /* 是否溢出都显示滚动条 */
    /* overflow: scroll; */

    /* 溢出部分可见 */
    /* overflow: visible; */

    /* 根据溢出判断是否显示滚动条 */
    overflow: auto;
}

元素隐藏

1、visibility:hidden;占位隐藏

2、display:none;不占位隐藏，常用

精灵图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵图</title>
    <style>
        span {
            display: inline-block;
            /* 精灵图中具体小图片大小 */
            width: 18px;
            height: 24px;
            /* 精灵图 */
            background-image: url(images/bg3.png);
            /* 背景图位置属性 
            水平，垂直方向；向左向下取负数
            */
            background-position: -3px 0;
        }
        
        b {
            display: inline-block;
            /* 精灵图中具体小图片大小 */
            width: 25px;
            height: 21px;
            /* 精灵图 */
            background-image: url(images/bg3.png);
            /* 背景图位置属性 
            水平，垂直方向；向左向下取负数
            */
            background-position: 0 -90px;
        }
    </style>
</head>
<body>
    <!-- 精灵图不能用img标签 -->
    <!-- 精灵图的标签只能用行内标签 span b i... -->
    <span></span>
    <b></b>
</body>
</html>

过渡

 /* 过渡配合hover属性，谁变化谁加transition */
        .box {
            width: 200px;
            height: 400px;
            background-color: #de1f1f;

            /* 宽度200px，鼠标悬停时候变成400px，花费1秒 */
            /* transition: width 1s,background-color 1s; */
            /* all表示所有 */
            transition: all 1s;
        }
        .box:hover {
            width: 400px;
            background-color: #12cb34;
        }

盒子阴影

box-shadow属性是一个组合属性，语法为: box-shadow: h-shadow v-shadow blur spread color inset。

其中，

h-shadow表示水平方向上的阴影偏移量，

v-shadow表示垂直方向上的阴影偏移量，

blur表示阴影的模糊程度，

spread表示阴影的扩张程度，

color表示阴影的颜色，

inset表示是否要将阴影设置为内阴影。

特殊字符

css3超出部分省略

适用于input标签和普通标签文本内容超出部分省略号显示。

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

overflow属性的使用：
特点：必须给块级容器指定高度，或者使用不换行属性让内容变宽
属性值：

• visible：默认值。
• hidden：内容会被修剪，浏览器会显示滚动条。
• scroll：由浏览器定夺，如果内容被修剪，会显示滚动条。
• auto：规定从父元素集成overflow属性的值。

white-space属性的使用 ：处理元素中的空白
属性值：常用

• normal：文字换行。
• nowrap：文字不换行。

text-overflow属性的使用：

特点：该属性不会强制发生溢出，要是文本溢出其容器，必须设置overflow和white-space
属性值：

• clip：默认值，换行。
• ellipsis：显示一个‘…’来表示剪切文本

多行截断

.text {
    /* 
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
     */
    
    /* 用行高设置也可以 */
    line-height: 1.5;
    max-height: 4.5rem;
    
    overflow: hidden;
}


/* 通常用属性选择器来设置 */
/* 3行文字 */
<div class="text" line-clamp="3">
...
</div>

[line-clamp="3"] {
    max-height: 4.5rem;
}

两端对齐、首行缩进2字符、多行超出部分隐藏并显示省略号

div {
    line-height: 1.5;
    text-indent: 2em;
    text-align: justify;
    /* 超出部分隐藏并显示... */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

var() 函数

插入自定义属性

/* :root是一个伪类选择器，用于选择文档的根元素。在HTML文档中，根元素通常是标签。*/
:root {
  --main-bg-color: coral;
}
 
#div1 {
  background-color: var(--main-bg-color);
}

calc（）

计算

div {
    width: calc(100% - 100px);
}

filter()

滤镜(曝光度)

用法：

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

多属性组合使用

// 用空格分隔每个属性
filter: blur(5px) opacity(0.8)  brightness(0.8);

CSS3 Filter 如此简单! - 知乎 (zhihu.com)

3D透视 perspective

div
{
    perspective: 500px;
    -webkit-perspective: 500px; /* Safari and Chrome */
}

zoom属性

CSS的zoom属性用于缩放元素的内容。该属性可以应用于块级元素和替换元素。

• 当应用于块级元素时，zoom属性会缩放元素的内容和内边距，但不会影响元素的边框大小或外边距。该属性的取值可以是一个百分比（例如zoom: 200%），表示按照指定的百分比缩放元素的内容。

• 当应用于替换元素（例如img、canvas、video）时，zoom属性会缩放元素的替换内容（例如图片、视频等），但不会影响元素的布局尺寸。

• 需要注意的是，zoom属性是非标准的CSS属性，只在部分浏览器中得到支持（主要是旧版的IE浏览器）。在现代的Web开发中，推荐使用transform属性来实现元素的缩放效果。

取消a标签在移动端点击高亮

a {
  /* 取消a标签在移动端点击时的蓝色 */
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-user-select: none;
  -moz-user-focus: none;
  -moz-user-select: none;
}

SEO搜索引擎优化

1、竞价排名

2、将网页制作成html后缀

3、标签语义化（在合适的地方使用合适的标签）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="SEO-SEO-SEO-SEO-SEO-SEO-SEO-SEO-SEO-SEO-SEO">
    <meta name="keywords" content="SEO,SEO,SEO,SEO,SEO,SEO,SEO,SEO,SEO,SEO,SEO,SEO">
    <title>SEO</title>
    <* 浏览器标题栏图片 *>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
</head>
<body>
    SEO
</body>
</html>

4、…

项目目录准备

面试问题

1、搭建网页都需要用到哪些布局方式

①标准流（标签自带布局）

②浮动（float）

③定位（position）

层级关系

标准流<浮动<定位(默认情况，定位的盒子，后来者居上；z-index:整数;取值越大，显示顺序越在上；默认为0,必须配合定位。)