CSS用法

CSS引入方式

• 内部样式表：将CSS代码写在style标签当中
• 外部样式表：单独出CSS文件，通过link标签引入

<link rel="stylesheet" href="./my.css">

• 行内样式：CSS写在标签的style属性值当中

<div style="color: red; font-size: 20px;">这是行内样式<div>

CSS选择器

基础选择器

• 标签选择器：使用标签名作为选择器，同名标签设置相同的样式
• 类选择器：定义类名，标签添加.类名，差异化设置标签显示效果

<style>
	.banner{
	}
</style>

<div class="banner">类选择器</div>

• id选择器：与类类似，定义#id名，一般配合JavaScript使用，同一个id选择器在一个页面只能使用一次
• 通配符选择器：所有标签设置相同样式，*不需要调用

复合选择器

有多个基础选择器组合

/*后代选择器*/
.banner p{  
	font-size: 20px;
}
/*子代选择器，只选中最近的子级*/
.banner > span{  
	font-size: 20px;
}
/*并集选择器，多组标签设置相同样式*/
div, p, span{  
	font-size: 20px;
}
/*伪类选择器，设置元素在某个状态的样式，link为访问前，visited为访问后，hover为鼠标悬停，active为点击时*/
a:hover{ 
	color: red;
}

优先级：

1. 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
2. 如果是复合选择器，从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较

结构伪类选择器： 根据元素的结构关系查找元素

选择器	说明
E:first-child	查找第一个E元素
E:last-child	查找最后一个E元素
E:nth-child(N)	查找第N个E元素（第一个元素N值为1）

li:first-child {
	background-color: green;
}

功能	公式
偶数	2n
奇数	2n-1；2n+1
5的倍数	5n
第5个以后	n+5
第5个以前	-n+5

伪元素选择器： 创建虚拟元素（伪元素），用来摆放装饰性的内容。

选择器	说明
E::before	在E元素里面最前面添加一个伪元素
E::after	在E元素里面最后面添加一个伪元素

div::before {
	content: "before 伪元素"
}

说明：必须设置content: ""属性，为伪元素内容，没有则留空。默认是行内显示模式，权重和标签选择器相同

文字属性

p{
	font-size: 30px;  /*字体大小，谷歌浏览器默认字体大小16px*/
	font-weight: 400;  /*字体粗细，正常：normal400，加粗：bold700*/
	font-style: normal; /*字体样式，italic为倾斜*/
	line-height: 30px; /*行高，如果直接用数组表示当前font-size的倍数*/
	/*字体族，从左到右依次查找字体，最后一个为字体族名*/
	font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
	/*font复合属性 是否倾斜 是否加粗 字号/行高 字体（必须按顺序）*/
	font: italic 700 30px/2 楷体;
	text-indent: 2em; /*文本缩进，1em=当前标签字号大小，也可以用px*/
	text-align: center; /*文本对齐方式，left左对齐（默认），center居中，right右对齐*/
	text-decoration: none; /*文本修饰线，none无（默认），underline下划线，line-throught删除线，overline上划线*/
	color: #ffffff; /*文字颜色，可以使用颜色关键字，rgb表示法，rgba表示法，十六进制表示法*/
}

背景属性

div {
	background-color: #f3f3f4; /*背景颜色*/
	background-image: url(); /*背景图片*/
	background-repeat: no-repeat; /*平铺方式，no-repear为不平铺，repeat为平铺（默认），repeat-x为水平平铺，repeat-y为垂直平铺*/
	/*背景图位置，关键词：left、right、center、top、bottom，坐标+px：水平正数向右，垂直正数向下*/
	background-position: 50px,-100px;
	background-size: contain; /*背景图缩放，关键字：cover等比例铺满，contain等比例装入；也可以百分比和px*/
	background-attachment: fixed; /*背景图固定，不会随着元素内容滚动*/
	/*背景复合属性， 背景色 背景图 平铺方式 位置/缩放 是否固定（空格隔开属性值，不区分顺序）*/
	background: pink url(./images/1.png) no-repeat right center/cover;
}

显示模式

块级元素：

• 独占一行
• 宽度默认是父级的100%
• 添加宽高属性生效

行内元素：

• 一行可以显示多个
• 设置宽高属性不生效
• 宽高由内容撑开

行内块元素：

• 一行可以显示多个
• 设置宽高属性生效
• 宽高也可以由内容撑开

/*转换显示模式， block：块级，inline-block：行内块，inline：行内*/
p {
	display: inline-block;
}

盒子模型

div {
	width: 200px; /*盒子宽度*/
	height: 200px; /*盒子高度*/
	
	/*内边距：padding、padding-方位名词*/
	padding: 20px; /*padding有多值写法，见下方*/
	
	/*外边距：margin，与padding写法一致*/
	margin: 50px auto; /*盒子外边距，左右值为auto表示版心居中*/
	
	/*边框线：border、border-方位名词*/
	border: 5px solid brown; /*粗细 样式（solid实线、dashed虚线、dotted点线） 颜色*/
}

padding多值写法

取值个数	示例	含义
一个值	padding: 10px;	四个方向内边距均为10px
四个值	padding: 10px 20px 40px 80px;	上：10px；右：20px；下：40px；左：80px；
三个值	padding: 10px 40px 80px;	上：10px；左右：40px；下：80px；
两个值	padding: 10px 80px;	上下：10px；左右：80px；

总结：从上开始顺时针赋值，当前方向没有数值则与对面相同。

使用技巧

清除默认样式：

有时候不需要浏览器默认样式的时候，可以统一清除，例如默认的内外边距。

/*清除默认内外边距*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/*清除列表项目符号*/
li {
	list-style: none;
}

盒子模型-元素溢出：

作用：控制溢出元素的内容显示方式
属性名：overflow

属性值	效果
hidden	溢出隐藏
scroll	溢出滚动（无论是否溢出，都显示滚动条位置）
auto	溢出滚动（溢出才显示滚动条位置）

外边距问题-合并现象：

垂直排列的两个元素，上下margin会合并，并取较大值

外边距问题-塌陷问题：

父子级的标签，子级的添加上外边距会产生塌陷问题，导致父级一起向下移动

解决方法：

• 取消子级margin，父级设置padding；
• 父级设置overflow: hidden；
• 父级设置border-top；

行内元素-内外边距问题：

行内元素添加margin和padding，无法改变元素垂直位置

解决办法：给行内元素添加line-height可以改变垂直位置

盒子模型-圆角：

作用：设置元素的外边框为圆角
属性名：border-radius
属性值：数字px / 百分比 （为圆角半径）

取值个数	示例	含义
一个值	border-radius: 10px;	四个角均为10px
四个值	border-radius: 10px 20px 40px 80px;	左上：10px；右上：20px；右下：40px；左下：80px；
三个值	border-radius: 10px 40px 80px;	左上：10px；右上+左下：40px；右下：80px；
两个值	border-radius: 10px 80px;	左上+右下：10px；右上+左下：80px；

总结：从左上角开始顺时针，没有就与对角相同

常见形状：

div {
	/*正圆*/
	width: 200px;
	height: 200px;
	border-radius: 100px;
	border-radius: 50%;
	/*胶囊型*/
	width: 200px;
	height: 80px;
	border-radius: 40px;
}

盒子模型-阴影：

作用：给元素设置阴影效果
属性名：box-shadow
属性值：x轴偏移 y轴偏移 模糊半径 扩散半径 颜色 内外阴影

• xy轴偏移必须写
• 默认是外阴影，内阴影需要添加inset

div {
	width: 200px;
	height: 80px;
	box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) inset;
}

浮动

作用：让块元素水平排列。
属性名：float
属性值：

• left：左对齐
• right：右对齐

<style>
  /* 特点：顶对齐；具备行内块显示模式特点；浮动的盒子会脱标 */
  .one {
    width: 100px;
    height: 100px;
    background-color: brown;
    float: left;
  }
  .two {
    width: 200px;
    height: 200px;
    background-color: orange;
    /* float: left; */
    float: right;
  }
</style>
<div class="one">one</div>
<div class="two">two</div>

特点：

• 浮动后的盒子顶对齐
• 浮动后的盒子具备行内块特点
• 浮动后的盒子脱标，不占用标准流的位置

使用技巧

产品区域布局：

<!-- 版心：左右，右面：8个产品 → 8个 li -->
<div class="product">
  <div class="left"></div>
  <div class="right">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

<style>
  * {
    margin: 0;
    padding: 0;
  }
  li {
    list-style: none;
  }
  .product {
    margin: 50px auto;
    width: 1226px;
    height: 628px;
    background-color: pink;
  }
  .left {
    float: left;
    width: 234px;
    height: 628px;
    background-color: skyblue;
  }
  .right {
    float: right;
    width: 978px;
    height: 628px;
    background-color: brown;
  }
  .right li {
    float: left;
    margin-right: 14px;
    margin-bottom: 14px;
    width: 234px;
    height: 300px;
    background-color: orange;
  }
  /* 第四个li和第八个li 去掉右侧的margin */
  .right li:nth-child(4n) {
    margin-right: 0;
  }
  /* 细节：如果父级宽度不够，浮动的盒子会掉下来 */
</style>

清除浮动：

浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱），需要清除浮动

方法：

1. 在父级元素内容最后添加一个块级元素，设置css属性clear: both

   <div class="clearfix"></div>

2. 单伪元素法

   .clearfix::after {
     content: "";
     display: block;
     clear: both;
   }

3. 双伪元素法（推荐）

   /* before 解决外边距塌陷问题 */
   /* 双伪元素法 */
   .clearfix::before,
   .clearfix::after {
     content: "";
     display: table;
   }
   
   /* after 清除浮动 */
   .clearfix::after {
     clear: both;
   }

4. overflow

   .father {
     margin: 10px auto;
     width: 1200px;
     /* height: 300px; */
     background-color: pink;
   
     overflow: hidden;
   }

Flex布局

设置方式：给父元素设置 display: flex，子元素可以自动挤压或拉伸

组成部分：

• 弹性容器
• 弹性盒子
• 主轴：默认在水平方向
• 侧轴 / 交叉轴：默认在垂直方向

Flex属性

主轴对齐方式

属性名：justify-content

属性名	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

侧轴对齐方式

属性名：

• align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
• align-selt：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

属性值	效果
stretch	弹性盒子沿着侧轴线被拉伸至铺满容器
center	弹性盒子沿着侧轴居中排列
flex-start	弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列

修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向

属性名：flex-direction

属性值	效果
row	水平方向，从左往右（默认）
column	垂直方向，从上到下
row-reverse	水平方向，从右往左
column-reverse	垂直方向，从下到上

弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸。
属性名：flex
属性值：整数数字，表示占用父级剩余尺寸的份数。

弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。
属性名：flex-wrap
属性值：

• wrap：换行
• nowrap：不换行（默认）

行对齐方式

属性名：align-content

属性名	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

• 对单行弹性盒子模型无效

定位

作用：灵活的改变盒子在网页中的位置
实现：

1. 定位模式：position
2. 边偏移：设置盒子的位置

• left
• right
• top
• bottom

相对定位

position: relative

特点：

• 不脱标，占用自己原来位置
• 显示模式特点保持不变
• 设置边偏移则相对自己原来位置移动

div {
  position: relative;
  top: 100px;
  left: 200px;
}	

绝对定位

position: absolute

使用场景：子级绝对定位，父级相对定位（子绝父相）
特点：

• 脱标，不占位
• 显示模式具备行内块特点
• 设置边偏移则相对最近的已经定位的祖先元素改变位置
• 如果祖先元素都未定位，则相对浏览器可视区改变位置

.father {
  position: relative;
}

.father span {
  position: absolute;
  top: 0;
  right: 0;
}

定位居中

实现步骤：

1. 绝对定位
2. 水平、垂直边偏移为 50%
3. 子级向左、上移动自身尺寸的一半

• 左、上的外边距为 –尺寸的一半
• transform: translate(-50%, -50%)

img {
  position: absolute;
  left: 50%;
  top: 50%;

  /* margin-left: -265px;
  margin-top: -127px; */

  /* 方便： 50% 就是自己宽高的一半 */
  transform: translate(-50%, -50%);
}

固定定位

position: fixed

场景：元素的位置在网页滚动时不会改变
特点：

• 脱标，不占位
• 显示模式具备行内块特点
• 设置边偏移相对浏览器窗口改变位置

div {
  position: fixed;
  top: 0;
  right: 0;

  width: 500px;
}

堆叠层级z-index

默认效果：按照标签书写顺序，后来者居上
作用：设置定位元素的层级顺序，改变定位元素的显示顺序
属性名：z-index
属性值：整数数字（默认值为0，取值越大，层级越高）

.box1 {
  background-color: pink;
  /* 取值是整数，默认是0，取值越大显示顺序越靠上 */
  z-index: 1;
}

.box2 {
  background-color: skyblue;
  left: 100px;
  top: 100px;

  z-index: 2;
}

使用技巧

CSS精灵：
CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position 精确的定位出背景图片的位置。
优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度
实现步骤：

1. 创建盒子，盒子尺寸与小图尺寸相同
2. 设置盒子背景图为精灵图
3. 添加 background-position 属性，改变背景图位置
4. 使用 PxCook 测量小图片左上角坐标
5. 取负数坐标为 background-position 属性值（向左上移动图片位置）

CSS修饰属性

垂直对齐方式

属性名：vertical-align

属性值	效果
baseline	基线对齐（默认）
top	顶部对齐
middle	居中对齐
bottom	底部对齐

过渡（动画）

作用：可以为一个元素在不同状态之间切换的时候添加过渡效果
属性名：transition（复合属性）
属性值：过渡的属性 花费时间 (s)
提示：

• 过渡的属性可以是具体的 CSS 属性
• 也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）
• transition 设置给元素本身

img {
  width: 200px;
  height: 200px;
  transition: all 1s;
}

img:hover {
  width: 500px;
  height: 500px;
}

透明度opacity

作用：设置整个元素的透明度（包含背景和内容）
属性名：opacity
属性值：0 – 1

• 0：完全透明（元素不可见）
• 1：不透明
• 0-1之间小数：半透明

光标类型cursor

作用：鼠标悬停在元素上时指针显示样式
属性名：cursor

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，表示可以点击
text	工字标，表示可以选择文字
move	十字标，表示可以移动