​

html和css笔记整理:

meta标签

1. meta标签主要用于设置网页的元数据，元数据不给用户看

   • 常用语法：

     charset	指定网页的字符集
     name	指定的数据的名称	content	指定的数据的内容

   • name属性的keywords表示网站的关键字，可以同时指定多个关键字，用逗号隔开

   <meta name="keywords" content="网上购物，手机，笔记本">
   

   • name属性的description用于指定网站的描述

   <meta name="description" content="某东JD.COM-专业的……">     //这里以某东网页为例
   

2. 块元素中几乎什么什么都可以放，但是注意：p元素内不能放任何元素

语义化标签

列表

html列表共有三种：有序、无序、定义列表

1. 有序列表:

   <ul>
   	<li></li>
   <ul>
   

2. 无序列表：

   <ol>
   	<li></li>
   </ol>
   
   

3. 定义列表：

   <dl>
   	<dt></li>
   	<dd></dd>
   </dl>
   
   

• 列表之间可以互相嵌套

超链接

1. 使用a标签来定义超链接

   href	可以指定跳转的路径
   target	指定超链接打开的位置。可选值：1.self 默认值，在当前页面中打开超链接； 2.blank 在一个新的页面中打开	id	同一个页面是唯一不重复的

2. 可以直接将超链接的herf属性设置成 #，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部位置

3. 可以使用 JavaScript:; 来作为href的属性，点击后不会跳转到任何界面

图片标签

• 使用img标签来引入外部图片，img标签是自结束标签，属于替换元素（在块和行内元素之间，具有两种元素的特点）

  • 属性：

  src	指定的是外部图片的路径
  alt	对图片的描述，默认情况下不会显示，但当浏览器无法加载时显示	width	图片的宽度	height	图片的高度

  例如：

<img src-"./img/..." }>

• 内联框架，用于向当前页面中引入一个其他页面（iframe）

  属性：

  src	指定要引入的网页的路径
  frameborder	指定内联框架的边框，一般设置0

<iframe src="" frameborder="0"></iframe>

音视频播放

1. audio标签用于向页面中引入一个外部的音视频文件，引入时默认不允许用户自己控制播放停止

2. 属性：

   controls	是否允许用户控制播放
   autoplay	音频文件是否自动播放	loop	音乐是否循环播放

   <audio  controls>
   <source  src="./source/audio.mp3">
   </audio>
   

3. video标签用于向网页中引入一个视频，使用方式和audio基本一样

   <video  controls>
   	<source  src="./source/video.mp4">
   </video>
   

表格

1. 在table中使用 tr 表示表格中的一行，在 tr 中使用 td 表示一个单元格

   rowspan	表示纵向的合并单元格
   colspan	表示横向的合并单元格

   <td  rowspan=“2”></td>
   

2. 可以将一个表格分为三部分：

   头部（thead） 主体（tbody） 底部（tfoot）

3. th表示头部的单元格，td一般用于主体和底部的单元格*

表单

使用form标签来创建一个表单，action表示要提交的服务器的地址

<form action="target.html">
         <!-- 文本框，必须为元素指定name属性 -->
        <input type="text" name="username">
        <br>
        <!-- 密码框 -->
        <input type="password">
        <br>
        <!-- 
            单选按钮
                -像这种选择器,必须指定value属性,value属性最终会作为用户填写的值传递给服务器，name属性必须相同，若不同则不能设置单选
                -checked 可以将单选按钮设置为默认选中
         -->
         <input type="radio" name="hello" value="a">
         <input type="radio" name="hello" value="b" checked>
         <br>
         <!-- 多选框 -->
         <input type="checkbox" name="test" value="1">
         <input type="checkbox" name="test" value="2">
         <input type="checkbox" name="test" value="3">
         <br>
         <!-- 下拉列表  添加selected则为默认选中-->
         <select name="haha">
             <option value="i">选项一</option>
             <option selected value="ii">选项二</option>
             <option value="iii">选项三</option>
         </select>
        <!-- 提交按钮 -->
        <input type="submit" value="注册">
    </form>

• 属性补充：

选择器

常用选择器

1. 元素选择器
   • 语法：标签名{}
2. id选择器
   • 语法：#id的属性名{}
3. 类选择器
   • 语法：.class属性值{}
4. 通配选择器
   • *{}

复合选择器

1. 交集选择器

   • 语法：选择器1选择器2选择器3{}
   • 顺序是：标签idclass
   • 注意：中间如果有元素选择器，必须使元素选择器开头

2. 并集选择器

   • 作用：同时选择多个选择器对应的元素

   • 语法：选择器1，选择器2，选择器3，选择器n{}

   •   h1，span，div.red,p1{
       	color:red;
       }
     

关系选择器

关系元素包括：父元素、子元素、祖先元素、后代元素、兄弟元素

1. 子元素选择器：

   • 作用：选中指定父元素的指定子元素

   • 语法：父元素 > 子元素{}

2. 后代元素选择器：

   • 作用：选中指定元素内的指定后代元素

   • 语法：祖先 后代

3. 选择相邻的下一个兄弟：

   • 语法：前一个 + 下一个

4. 选择下边的所有的兄弟：

   • 语法：兄 ～ 弟

属性选择器

1. [属性名] 选择含有指定属性的元素

   p[title]{
   	color:red;
   }
   

2. [属性名=属性值] 选择含有指定属性和属性值的元素

   p[title=abc]{
   	color:red;
   }
   

3. [属性名^=属性值] 选择属性值为开头的元素

   p[title^=abc]{
   	color:red;
   }
   

4. [属性名$=属性值] 选择属性值为结尾的元素

   p[title$=abc]{
   	color:red;
   }
   

5. [属性名*=属性值] 选择属性值中含有某值的元素的元素

   p[title*=abc]{
   	color:red;
   }
   

伪类选择器

伪类（不存在的类）

• 伪类用来描述一个子元素的特殊状态，一般使用：为开头

  • ：first-child 第一个子元素

  u1>li:first-child{ 
      color:red;
  }
  

  • ：last-child 最后一个子元素

  • ：nth-child（n） 选中第n个子元素

    • 特殊值：

      n	第n个元素
      2n 或 even	选中偶数位的元素	2n+1 或 odd	选中奇数位的元素

  • :first-of-type和:last-of-type以及:nth-of-type()，这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序

  • :not（） 将符合条件的元素从选择器中去除

伪元素

伪元素，表示页面中的一些特殊的并不真实的存在的元素（特殊的位置），以：：开头

• before 和 after 必须和 content 属性结合来使用，他们的内容都是无法选中的

<style>
	p：：first-letter{
		font-size：50px；
	}
	p：：first-line{
		background-color：yellow；
	}
	p：：selection{
		background-color：greenyellow；
	}
	div：：before{
		content：‘abc’；
		color：red；
	}
</style>

超链接的伪类

1. ：link 用来表示没有访问的链接（正常的链接）

   a：link{
   	color：red；
   }
   

2. ：hover用来表示鼠标移入的状态

   a：hover{
   	color：aqua；
   }
   

3. ：active用来表示鼠标点击的状态（点击但没松手）

4. 去除超链接的下划线：

   a{text-decoration:none};
   

盒模型

CSS将页面中的所有元素都设置为了一个矩形的盒子，每个盒子由以下几个部分组成：

• 内容区（content） 边框（border） 内边距（padding） 外边距（margin）

一、边框：

1. 边框宽度：

   • border-width可以用来指定四个方向的边框的宽度

     • 值的情况：

       四个值	上 右 下 左
       三个值	上 左右 下	两个值	上下 左右	一个值	上下左右

2. 边框颜色：

   • border-color的用法和border-width一样，如果不想让某一边施加颜色，可以使用none

二、内边距的规则和边框一样

三、外边距的规则和边框一样

1. 外边距不会影响盒子可见框的大小，但会影响盒子的位置，会影响到盒子实际占用空间

2. margin也可以设置负值

四、水平布局：

1. 元素在父元素中水平方向的位置有如下等式：

   margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素内容区宽度

   • 七个值中有三个值width、margin-leift、margin-right的情况

     某个值为auto	自动调整auto那个值
     将一个宽度和一个外边距设置成auto	宽度会调整到最大	将三个值都设置为auto	外边距都是0，宽度最大	将两个外边距设置为auto，宽度固定值	两个外边距取平均值

五、垂直布局

2. 如果子元素的大小超过了父元素，则子元素会从父元素中溢出，使用overflow属性来设置父元素如何处理

   • 可选值：

     visible 默认值	子元素会从父元素中溢出，在父元素外部显示
     hidden	溢出的内容将会被裁剪	scrool	生成两个滚动条，通过滚动条查看内容	auto	根据需要生成滚动条

六、display用来设置元素显示的类型

visibility 用来设置元素的显示状态

轮廓、阴影、圆角

1. 轮廓

   outline用来设置元素的轮廓线，用法和border一样

   轮廓和边框类似，但不同点是，轮廓不会影响可见框的大小

   .box1{
   	outline:10px red solid;
   }
   

2. 阴影(box-shadow)

   .box1{
   	box-shadow:20px 20px 20px red;
   }
   

   第一个值	水平偏移量，正值向右偏移
   第二个值	垂直偏移量，正值向下偏移	第三个值	阴影的模糊半径	第四个值	阴影的颜色

3. 圆角（border-radius，单位：px）

   四个值	左上 右上 右下 左下
   三个值	左上 右上左下 右下	两个值	左上右下 右上左下

浮动（float）

1. 通过浮动可以使一个元素向其父元素的左侧或右侧移动

   • 可选值：

     none	默认值，元素不浮动
     left	元素向左浮动	right	元素向右浮动

   • 元素浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动

2. 脱离文档流的特点：

   块元素	不再独占页面一行，宽度和高度都默认被内容撑开
   行内元素	变成块元素，特点和块元素一样

高度塌陷问题以及解决方法

利用clearfix样式可以同时解决高度塌陷问题和外边距重叠问题：

.clearfix::before,
.clearfix::after{
	content:'';
	display:table;
	clear:both;
}

定位（position）

可选值：

1. 相对定位（参照物是相对于没开启定位的自身）：

   • 特点：

     • 相对定位是参照元素在文档流中的位置进行定位的
     • 相对定位会提升元素的层次
     • 相对定位不会使元素脱离文档流
     • 相对定位不会改变元素的性质（块还是块，行内还是行内）
     • 其他没有设置定位的元素不会随设置定位的元素位置的改变而改变

   • 设置偏移量

     • 元素开启相对定位后必须设置偏移量（元素开始位置设置为（0,0），向右向下为正）：

       top	定位元素和定位位置上边的距离
       bottom	定位元素和定位位置下边的距离	left	定位元素和定位位置左侧的距离	right	定位元素和定位位置右侧的距离

   •   .box1{
           position:relative;
           left:200px;
           top:-200px;
       }               //向右向下方向为正
     

2. 绝对定位：

   • 特点：

     • 开启后，元素会从文档流中脱离，这样就不会占用页面内容
     • 绝对定位会改变元素的性质（行内变成块，块的宽高被内容撑开）
     • 使元素提升一个层次
     • 它是相对于其包含块定位的

   • 包含块的理解：

     • 通常情况下，包含块就是离当前元素最近的祖先块元素
     • 开启以后，如果设置 left：0 top：0 则定位元素默认在包含块左上角处
     • 如果所有祖先元素都没有开启定位，则 html（根元素）就是它的包含块（即浏览器页面的左上角）

   • 当开启以后，

     • 水平方向的布局等式就需要添加left和right两个值，此时规则和之前内容只是多添加了left和right
     • 当发生过度约束时，如果9个值中没有auto则自动调整right值以使等式满足
     • 可设置auto的值： margin width left right
     • 垂直方向的布局的等式也必须满足

3. 固定定位：

   • 固定定位的大部分特点和绝对定位一样
   • 唯一不同的是固定定位永远参照语浏览器的视口（可视区域）来定位,即固定定位的元素不会随着网页的滚动条的滚动而变化

4. 粘滞定位：

   • 粘滞定位和相对定位的特点基本一样
   • 不同的是粘滞定位可以在元素到达某个位置时将其固定

5. 元素的层级

   • 对于开启了定位元素，可以通过z-index属性来指定元素的层级
     • z-index需要一个整数作为参数,值越大元素的层级越高
     • 如果元素的层级一样，则优先显示靠下的元素
     • 祖先元素的层级再高也不会盖住后代元素

字体、行高

1. 字体相关的样式：

• font-family 字体族（字体的格式）

  可选值：

  serif	衬线字体
  sans-serif	非衬线字体	monospace	等宽字体

• font-face 可以指定字体的名字

  @font-face {
    font-family:'myfont';
    src: url('路径');
   }
  

• font-weight 字重，字体的加粗

  可选值：

  normal	默认值 不加粗的字符
  bold	加粗的字符	bolder	更粗的字符	lighter	更细的字符

2. 引入图标字体的几个方法：

   • 第一种：使用图标，我们可以通过 font-face 的形式来对字体进行引入

   <i class="fab/fas 图标样式" style="…"></i>
   

   • 第二种：利用伪类：

   li::before{
       content:'\f1b0';
       font-family:(在css中找到字体的格式)
   }
   

   • 第三种：通过实体： &#x图标编码；
     • 例如： class = "fas">&#xfof3;
     • 如果是从阿里云里面找的图标，则将 fas 替换成 iconfont

3. 水平和垂直对齐：

   • text-align 文本的水平对齐

     left	左对齐
     right	右对齐	center	居中	justify	两端对齐

   • vertical-align 文本的垂直对齐

     baseline	默认值 基线对齐
     top	顶部对齐	bottom	底部对齐	middle	居中对齐

4. 其他文本样式：

   • text-decoration 设置文本修饰

     可选值：

     none	默认值，无
     underline	下划线	line-through	删除线	overline	删除线

   • white-space 设置网页如何处理空白

     normal	正常
     mowrap	不换行	pre	保留空白

5. 行高：指的是文字占有的实际高度 （line-height）

   • 行高可以直接指定一个大小（px em）

     也可以直接为行高设置一个整数（行高是字体的指定的倍数）

     行间距 = 行高 - 字体大小

   • 设置行高是为了使字体居中

图片闪烁问题（雪碧图）

解决图片闪烁问题：

• 可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示
• 这个技术被称为CSS-Sprite，我们称之为雪碧图

雪碧图的使用步骤：

1. 先确定使用的图标
2. 测量图标的大小
3. 根据测量的结果创建一个元素
4. 将雪碧图设置为元素背景图片
5. 设置一个偏移量（background-position）来显示正确的图片

背景、渐变

1. background-image 设置背景图片

• 如果背景图片小于元素，则背景图片会自动在元素中铺满

• 如果背景图片大于元素，则一部分图片无法显示

  background-image ： url（“./img/1.png”）;
  

2. background-repeat 用来设置背景的重复方式

• 可选值：

  repeat	默认值，背景沿x轴，y轴双向重复
  repeat-x	只沿x轴方向重复	repeat-y	只沿y轴方向重复	no-repeat	不重复

3. background-position 用来设置背景图片的位置

• 设置方式：

  • 通过top left right bottom center来设置
  • 使用时必须同时设置两个值，如果只写一个值则表示第二个值默认是center

• 也可以通过偏移量来设置位置

  background-position：50px 50px；   //分别表示水平和垂直方向的偏移量（向右、向下为正）
  

4. 设置背景范围

• backround-clip

  可选值：

  border-box	默认值，背景会出现在边框的下边
  padding-box	背景不会出现在边框，只会出现在内容区和内边距	content-box	背景只会出现在内容区

• background-origin 背景图片的偏移量计算的原点

  可选值：

  • padding-box 默认值，background-position 从内边距处开始计算

  • content-box 背景图片的偏移量从内容区处计算

  • border-box 背景图片的变量从边框处开始计算

    padding-box	默认值，background-position 从内边距处开始计算
    content-box	背景图片的偏移量从内容区处计算	border-box	背景图片的变量从边框处开始计算

5. background-size 设置背景图片的大小

• 第一个值表示宽度，第二个值表示高度，如果只写第一个，则第二个值默认为auto

  cover	图片的比例不变，将元素铺满
  contain	图片比例不变，将图片在元素中完整显示

6. background-attachment

• 背景图片是否跟随元素移动

  scroll	默认值，背景图片会跟随元素移动
  fixed	景会固定在页面中，不会随元素移动

7. background背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置，并且该样式没有顺序要求，也没有必须写的属性

   • 注意：
     • background-size 必须写在background-position的后边，并且使用 / 隔开
     • background-origin background-clip 两个样式，orgin要在clip的前

8. 线性渐变

• 通过线性渐变可以设置一些复杂的背景颜色

• inear-gradient（red yellow）红色在开头，黄色结尾，中间是过渡，也可以指定方向

  45deg	表示45度角渐变
  to ……（例：左）	向...渐变（例：左）

• 重复渐变： repeating-linear-gradient

过渡（transition）

• transition-timing-function的可选值：

  ease	默认值，慢速开始，先加速，再减速
  linear	匀速运动	ease-in	加速运动	ease-out	减速运动	ease-in-out	先加速，后减速	cubic-bezier()	指定时序函数	steps	分步执行过渡效果，参数end 在时间结束时执行过渡（默认值），参数start 在时间开始时执行过渡

动画

动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发

设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤

@keyframes test{
     from{
		margin-left：0；
	}
     to{
		margin-left：700px；
       }
}

设置动画：

• animation-fill-mode 的可选值：

  none	默认值，动画执行完毕元素回到原来位置
  forwards	动画执行完毕元素会停止在动画结束的位置	backwards	动画延时等待时，元素就会处于开始位置	both	结合了forwards和backwards

• animation-direction 的可选值：

  normal	默认值，从 from 向 to 运行
  reverse	从 to 向 from 运行	alternate	从 from 向 to 运行，重复执行时反向	alternate-reserve	从 to 向 from 运行，重复执行时反向

变形、平移、旋转

1. 变形不会影响到页面的布局

   • transform： 用来设置元素的变形效果

     • 平移：

       translateX()	沿着x轴平移
       translateY()	沿着y轴平移	translateZ()	沿着z轴平移

2. Z轴平移：

   • 正常情况就是调整元素和人眼的距离，距离越大，距离人越近

   • Z轴平移属于立体效果，默认情况网页不支持透视，如果需要看到效果必须设置网页（html）的视距

     html{
     	perspective：××px；
     }
     .box1{
     	transform:translateZ(××px)；
     }
     

3. 旋转：通过旋转可以使元素沿着x y或z旋转指定的角度

   rotateX()	沿x轴旋转指定的角度
   rotateY()	沿y轴旋转指定的角度	rotateZ()	沿z轴旋转指定的角度

   • 例如：沿y轴旋转180度：

   transform：rotateY（180deg）；
   backface-visibility：hidden；      //设置是否显示元素的背面
   

4. 缩放：

   • 对元素进行缩放的函数：

     scaleX()	水平方向缩放
     scaleY()	垂直方向缩放	scaleZ()	双方向的缩放

less用法

1. less是一门css的预处理语言

   • 它是css的增强版，通过less可以编写更少的代码实现更强大的样式
   • 在less中添加了许多新特性，像对变量的支持，对mixin的支持……
   • less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，所以浏览器无法直接执行less代码，要执行必须先将less转换为css，然后由浏览器执行

2. 例如：

   html{
   	--color:#bfa;
   }
   .box1{
   	color:var(--color);
   }         //设置一个关于颜色的函数，方便使用
   
   calc（100px/2）     //设置一个计算函数
   
   div{
   	width：200px；
   	height：$width；
   }        		 //使height和width的值相同
   

3. less中的单行注释 // 不会被解析到css中

4. 变量：

   • 在变量中可以存储任意的值，并且我们可以在需要时，任意修改变量中的值
   • 语法： @变量名
   • 例如： @a：200px；
   • 若变量是类名，或者一部分值使用时必须以@{变量名}的形式使用
   • 变量发生重名时，会优先使用比较近的变量（就近原则）

5. 常用的变量使用：

   • & 表示外层的父元素

   .box1{
   	&:hover{}
   }                 //表示box1的hover属性
   

   • extend（） 对当前的选择器扩展指定选择器的样式（选择器分组）

   p2:extend(.p1){
   	color:red;
   }                 //表示p2不仅有p1的所有样式，而且还有color属性
   

   • 复制样式：

   .p3{
   	.p1();
   }                     //表示p3复制了p1的所有样式
                         // mixin 混合
   

   • 使用类选择器是可以在选择器后边添加一个括号，这是我们实际上就创建了一个mixins

   .p4(){
        width:100px;
        height:100px;
   }
   .p5{
   	.p4;
   }
   

   • average函数可以将两个color参数取平均值：

   span{
   	color：average（red，blue）；
   }
   

   • darken可以将已有颜色加深：

   background-color：darken（#bfa，10%）；
   

   • 在less中所有的数据可以直接进行运算：

   width：100px + 100px；
   

   • 可以通过 @import来 将其他的less文件引入到当前的less文件中：

   @import“××.less”;
   

弹性盒

1. flex（弹性盒）

   • 是css中的有一种布局手段，它主要用来代替浮动来完成页面的布局

• flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变

2. 弹性容器：

   • 要使用弹性盒，必须先将一个元素设置为弹性容器

   • 我们通过 display 来设置弹性容器

     display：flex	设置为块级弹性容器
     display：inline-flex	设置为行内的弹性容器

3. 弹性元素：

   • 弹性容器的子元素是弹性元素

   • 一个元素可以同时是弹性容器和弹性元素

4. flex-direction 指定容器中弹性元素的排列方式

   • 可选值：

     row	默认值，弹性元素在容器中水平排列
     row-reverse	弹性元素在容器中反向水平排列	column	弹性元素纵向排列	column-reverse	弹性元素反向纵向排列

5. 主轴：弹性元素的排列方向称为主轴

   侧轴：与主轴垂直方向的称为侧轴

6. 弹性元素的属性：

   flex-grow	指定弹性元素伸展系数，父元素的剩余空间会按照比例进行分配
   flex-shrink	指定弹性元素的收缩系数，当父元素中的空间不足以容纳所有的子元素时，会对子元素进行收缩

   例如：

   flex-grow：1；
   flex-shrink：0；
   

7. flex-wrap：

   设置弹性元素是否在子元素溢出时弹性容器自动换行

   • 可选值：

     nowrap	默认值，元素不会自动换行
     wrap	元素沿着辅轴方向自动换行	wrap-reverse	元素沿着辅轴反向换行

8. justify-content 设置主轴上的元素如何排列（如何分配主轴上的空白空间）

   • 可选值：

     flex-start	元素沿着主轴起边排列
     flex-end	元素沿着主轴终边排列	center	元素居中排列	space-around	空白分布到元素两侧	space-between	空白均匀分布到元素间	space-evenly	空白分布到元素的单侧

9. align-items 元素在辅轴上如何对齐

   • 可选值：

     stretch	默认值，将元素的长度设置为相同的值
     flex-start	元素不会拉伸，沿着辅轴起边对齐	flex-end	沿着辅轴的终边对齐	center	居中对齐	baseline	基线对齐

10. align-self 用来覆盖当前弹性元素上的align-items

    align-self：stretch；
    

11. flex 可以设置弹性元素所有的三个样式：增长 缩减 基础

    • 可选值：

      initial	增长
      auto	缩减	none	基础

12. order 样式可以设置几个相同的元素的排列顺序：

    li:nth-child(1){
    	order:2;
    }
    li:nth-child(2){
    	order:1;
    }
    li:nth-child(3){
    	order:3;
    }                   // 则顺序为第二个、第一个、第三个