CSS基础

CSS特性：

① 继承性
② 层叠性
③ 优先级

选择器

• 通用选择器（通配符）： * (清除所有元素的margin和padding)
• 元素选择器：div{color:red} (设置页面中某种元素的默认样式)

body{margin:0;padding:0}清除body以及body内所有元素的内外边距

• id选择器：#id

一般id选择器在项目中很少单独使用，一般作为子代选择器或后代选择器

• 类选择器：.className

• 多类选择器：class="t类名1 类名2 类名3 ....."
• 分类选择器：class="类名1 类名2 类名3....." ①.类名1.类名2 { } ②元素名.类名 { }

• 群组选择器：选择器1，选择器2，选择器3........ { } 将多个选择器放在一起，定义公共样式
• 后代选择器：选择器1 选择器2 选择器3...... { }通过元素的后代关系匹配元素
• 子代选择器：选择器1>选择器2>选择器3>.... 只能一级一级嵌套

子代选择器和后代选择器可以混写

• 伪类选择器：匹配元素不同状态的选择器 选择器:伪类{ }

• a标签的未点击状态：a:link{ color:red;}
• a标签访问后的状态：a:visited{color:yellow}
• 鼠标悬停时的状态：a:hover{color:blue}
• 激活状态（鼠标按住不放）：a:active{color:purple}
  以上四个伪类同时作用在同一个元素时，需要有严格的编写顺序：link ----> visited ----> hover ----> active
• 匹配获取焦点的元素的状态：:focus

选择器的权值问题

• 选择器默认自带权值，权值越高优先级越高
• 当一个选择器中含有多个选择器时，需要将所有的选择器权值进行相加，然后比较，权值大的优先显示
• 权值相同，就近原则
• 群组选择的权值，单独计算，不能相加
• 样式后面添加!important，直接获取最高优先级，内联样式不能添加!important
• 选择器权值的计算，不会超过自己的最大数量级

• !important >1000
• 内联样式 =1000
• id选择器 =100
• class和伪类 =10
• 元素选择器 =1
• *通用选择器 =0
• 继承的样式 无权值

尺寸和边框

尺寸

• width、height
• max-width、min-width：使用时不能定宽
• max-height、min-height

如果不写宽高，各个元素默认的宽高：

• 1.块级元素不写宽，默认宽度占满父容器宽度的100%
• 2.块级元素不写高，默认高度靠内容撑起来
• 3.行内元素设置宽高无效，它的宽高靠内容撑起
• 4.自带宽高属性的元素，设置宽高有效img/table

取值：

1. px：具体像素值
   in：1英寸=2.54cm
   pt：磅值 1pt = 1/72in ，多用于设置字体大小
   cm：厘米
   mm：毫米
2. 父元素的百分比
3. 项目中为了做不同端的兼容，会使用相对单位
   em：以父元素的数值当做基本单位
   rem：以html的数值当做基本单位

溢出

• overflow：visible/hidden/auto/scroll 默认纵向溢出

1. overflow-x/overflow-y:水平/垂直滚动条
2. 设置横向溢出：内部容器设置宽度 > 外部容器宽度

边框

• border：border-width border-style(solid/dotted/dashed/double) border-color
• border-width/border-style/border-color也可单属性定义，边框只要写了style属性就会显示，不写style则边框溢出
• border-top/bottom/left/right：边框的单边定义（可以用来做下拉三角）

颜色:

• 颜色的合法值：
  1. 颜色的英文单词
  2. #rrggbb：6位16进制数字
  3. #aabbcc -----> #abc：#ff0000 -----> #f00
  4. rgb(r,g,b)：十进制 r,g,b 0~255
  5. rgba(r,g,b,alpha)：alpha 0~1
  6. hsl()：饱和度、亮度
• transparent：等同于rgba(0,0,0,0)全透明
• 最简方式：border:style
• 单边单属性：border-top-color:#fff

• 边框的倒角（圆角）：border-radius:2px/50%

单角设置：border-top/bottom-left/right-radius:10px左上角

• 边框的阴影：box-shadow:h-shadow v-shadow blur spread color outset/inset;

h-shadow:水平方向阴影
v-shadow:竖直方向阴影
blur:模糊度
spread:阴影大小
color:阴影颜色
outset/inset:设置外部阴影和内部阴影

• 轮廓： outline:width style color

去除轮廓/边框：border/outline:none/0

框模型（盒子模型）【一种计算方式】

• 元素在页面上实际占地空间的一种计算方式
• 浏览器默认元素实际占地宽度：左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
• 占地高度：上外边距+上边框+上内边距+内容区域宽度+下内边距+下边框+下外边距
• 外边距：margin取值auto，对上下外边距无效，自动计算块级元素的外边距，使块级元素水平居中（只对设置了宽度的块级元素有效）

外边距的特殊效果：

1. 外边距的合并：两个垂直外边距相遇时，将合并成一个，值以大的为准
2. 外边距溢出：在特殊情况下，为子元素设置上外边距会作用到父元素上。

• 特殊情况：
  ① 父元素没有上边框
  ② 子元素的内容区域的上边沿与父元素的内容区域的上边沿重合
• 解决方案：
  ① 给父元素增加外边框（影响父元素的实际占地高度 ）
  ② 给父元素增加上内边距（影响父元素的实际占地高度）
  ③ 在子元素之前添加一个空的table标签

3. 关于块级元素、行内元素、行内块的总结：
   ①行内块的特点：
   （1） 设置宽高无效，宽高会根据内容自动撑开
   （2） 上下外边距无效，左右外边距有效
   （3） 可以与其他行内元素和块级元素共用一行，一行放不下再拆行
   ②块级元素的特点：
   （1） 设置宽高有效，如果不设置宽高，宽度是父级元素宽度的100%，高度靠内容撑开
   （2） 4个方向外边距都有效，独占一行
   ③行内块元素
   （1） 设置宽高有效，但是自带一个默认的宽高
   （2） 4个外边距都有效，但是修改同一行一个行内块的垂直外边距，整行都会跟着一起发生位置变化
   （3） 可以与其他行内块元素和行内元素共用一行
4. 自带外边距的元素：
   ① h1-h6/p/body/ol/ul/dl/pre
   ② 由于不同浏览器对默认的外边距解析可能会有差别，所以在写代码之前一般会把内外边距清空，即css reset
   *{margin:0;padding:0;}

• 内边距：padding：改变padding，视觉上是改变了元素的大小，不会影响其他元素，只会改变当前元素自己实际占地尺寸。没有auto取值
• box-sizing取值：

1. contebt-box(默认值)：浏览器按照盒子模型默认公式计算占地宽度
2. border-box：元素占地宽度=左外边距+width+右外边距

border-box使用的时机：一个容器内，在一行显示多个元素，如果子元素的width使用%定义，那么基本就要使用border-box

背景

• background-color
• background-img:url(1.url)
• background-repeat:repeat/no-repeat/repeat-x/repeat-y
• 背景图片定位：background-position:40px/50%/left/center/right(x轴) 100px/50%//top/center/bottom(y轴)
• 背景图的尺寸：background-size:10px/50%/cover(覆盖，要求容器被全部填满，图片显示不全没关系)/contain(包含，让容器可以完整地包含整张图片，容器如果有空白区域没关系)

  取值：两个是分别设置宽高，取一个值是设置宽，高自适应

• 背景图片的固定：background-attachment:scroll(默认值，背景图会跟随页面滚动条滚动)/fixed(固定，背景图片会相对于页面位置固定，不会随着页面滚动条滚动，但是只会在原容器区域显示)
• 简写：background:color image repeat attachment position
• 最简：background:color/image

写CSS的思路

• 从上往下
• 从左往右
• 从外往里

找到目标元素写样式的步骤

• 尺寸、大体位置
• 边框、背景
• 文字相关
• 微调（margin/padding）

渐变（gradient）

• 渐变的主要因素：色标（一种颜色，和它出现的位置，一个渐变最少两个色标）
• 渐变的分类：线性渐变 / 径向渐变 / 重复渐变
• 线性渐变：background-image:linear-gradient(方向，色标1，色标2，......)

• 方向(angle)：
  1. 关键字：to bottom / to top / to right / to left
  2. 角度值：0deg(to top) / 90deg(to right) / 180deg(to bottom) / 270deg(to left)
• 色标(color-point)：
  1. 只写颜色不写位置：一般用于只有两个色标的情况，对应开头和结尾
  2. 颜色+px 为单位的数字
  3. 颜色+%

• 径向渐变：background-image:radial-gradient(半径 at 圆心，色标1，色标2....)

• 半径：px为单位的数字
• 圆心：
  1. 以px为单位的数字 x y
  2. x% y%
  3. 关键字： x:left / center / right y:top / center / bottom
• 色标：
  1. 颜色+px 颜色的填充，与半径没有关系
  2. 颜色+ % 这里的位置是半径的百分比

• 重复渐变：
  1. 重复线性：background-image:repeating-linear-gradient(方向，色标1，色标2......)
  2. 重复径向：background-image:repeating-radia-gradient(半径 at 圆心，色标1，色标2.....)

• 浏览器兼容问题（ie8.0以下不兼容）【阴影也需要做兼容】
  1. 为了兼容低版本浏览器写的css代码，叫做css hack
  2. 渐变属性，兼容低版本浏览器的写法：
  ① 添加前缀：chrome/safari:-webkit-、firefox:-moz-、IE:-ms-、opera:-o-
  ② 线性渐变的方向，发生了改变，不加to（top / right / bottom / left）,写起点

文本格式化

• 字体属性：
  1. 字体大小：font-size
  2. 字体系列：font-family:PC中字体库里有的字体，如果字体名称带空格，必须加" "，多个字体名称，使用 , 隔开
  3. 字体加粗：font-weight:normal(400) / lighter(细的) / bold(加粗 700) / boldr(更粗) / 无单位并且是100整倍数的数值，最大值1000
  4. 字体样式：font-style:italic(斜体) / normal
  5. 小型大写字母：font-variant:small-caps
  6. 简写：font:style variant weight size family
  7. 最简写法：font:size family

• 文本属性：
  1. 文本颜色：color
  2. 文本对齐方式：text-align:left / center / right / justify(两端对齐)
  3.

注意：

1. 一个元素写了text-align属性，控制的是内部文本
2. 元素本身想要居中对齐，则设置margin:0 auto
3. text-align对是行内元素的子元素都生效
4. 子元素如果是块级元素，只会继承text-align，而块级元素本身不会居中

3. 行高：line-height (以px为单位的数字)

特性：

• 如果行高的数值大于字体的大小，那么该行文本将在指定的行高内部，成垂直居中的方式显示
• 行高一般设置成与容器高度相同的值，确保文字在容器内垂直居中下显示。
• 如果文字发生折行，则不建议使用行高进行垂直居中

4. 文本的线条修饰text-decoration:none(默认)【a标签去除下划线】 / underline(下划线) / overline(上划线) / line-through(删除线)
5. 首行缩进text-indent：以px为单位的数字
6. 文本阴影text-shadow:h-shadow(水平偏移) v-shadow(垂直偏移) blur(模糊距离) color(阴影颜色)

表格

• 表格的常用样式：
  1. table：尺寸、边框（设置table边框只设置最外一圈边框）、背景、字体、文本、内外边距
  2. td / th：尺寸、边框、背景、文字、文本、内边距都会起作用，外边距无效，vertical-align(设置单元格内部文本对齐方式):top / bottom / middle(居中)【对tr也生效】
  3. table特殊的显示方式 ：【行内元素、块级元素、行内块、table】

• table是一种特殊的表现方式：
  单元格内容较多，尺寸较小，单元格大小以内容为准
  单元格内容较少，尺寸较大，单元格大小以尺寸为准
  table在浏览器的渲染方式：先加载到浏览器内存中，然后一次性画在页面上

4. 表格的特有属性：
   ① 边框的合并和分离：border-collapse:separate(默认值，边框分离状态) / collapse(边框合并状态)
   ② 边框的边距：border-spacing:5px(x轴边距) 10pxsd(y轴边距)（前提：边框处于分离状态）
   ③ 表格的标题：<caption></caption>

   调整标题位置：caption-side:top / bottom

   ④ 设置表格的显示规则：table-layout:auto(默认，自动表格布局。td大小以内容和尺寸较大的为准) / fixed(固定表格布局。td大小以尺寸为准)

   表格自动布局和固定布局的区别：

   自动布局	固定布局
   单元格大小会自动适应内容	单元格取决于设置的值
   表格复杂时，加载速度较慢	任何情况下都是逐行渲染，渲染速度快
   自动布局比较灵活	固定的表格布局不灵活
   适用于不确定每一列大小，并且不复杂的表格	适用于明确知道每一列大小的表格

定位

• 定位分类：
  1. 普通流定位（默认文档流）
  2. 浮动定位
  3. 相对定位
  4. 绝对定位
  5. 固定定位

普通流定位

① 每个元素在页面都有自己的空间
② 每个元素都是从父元素左上角开始渲染
③ 行内元素和行内块在同一行显示，从左往右，一行放不下就折行
④ 块级元素独占一行，从上往下排列

浮动定位

① 让块级元素横向显示的时候使用浮动定位
② `float: left / right / none(默认值) / inherit`
>- 浮动的特点:
>		1. 元素一旦浮动，该元素脱离文档流（不占页面空间）
>		2. 浮动元素会在当前行，靠左 / 右，停靠在父元素的边缘，或者是其他已浮动的元素的边缘
>		3. 父元素横向显示不下所有的浮动元素时，显示不下的部分会自动换行，换行默认去距离当前行最近的位置
>		4. 浮动解决多个块级元素横向在一行显示的问题

③ 浮动元素引发的特殊情况：
1. 浮动元素的占位问题：
	当父元素一行显示不下所有浮动元素时，最后显示不下会换行，默认去离当前最近的一行。
	但是，已浮动的元素会根据自己的浮动方向占据位置，导致被挤下去的元素，会躲开被占据的位置，在更下方显示。
2. 元素一旦浮动，如果元素没有定义宽度，元素的宽度靠内容撑开
3. 元素一旦脱离文档流，会变成块级元素，尺寸、垂直外边距都生效
4. 文本，行内元素，行内块元素，是不会被任何浮动元素压在下面的，而是会环绕着浮动元素进行显示

脱离文档流，意味着：

1. 不占页面空间
2. 后续元素上前补位
3. 变成块级元素

• 清除浮动效果
  1. 概念：前面的浮动元素脱离文档流，后面的元素会上前补位，设置了清除浮动后，就不需要上前补位
  2. clear:left / right / both / none

• 高度坍塌

  1. 父元素如果不设置高度，高度默认是内部内容撑起来的。
     如果内部所有元素都浮动了，那么父元素认为内部就没有内容了，所以高度为0
  2. 解决方案：
     ① 给父元素设置高度，弊端是很多时候不知道确切高度
     ② 给父元素设置浮动，弊端是父元素的兄弟元素会受到影响
     ③ 正确解决方案：
     在最后一个子元素的后面追加一个块级元素，
     给这个元素设置clear:both,
     那么这元素停留在文档流中，父元素的高可以找到它。
     这个元素不会被前面的浮动元素覆盖。
     这个元素不写宽高，没有内容，宽度默认是父级的100%，高度为0，不影响父级高度

显示

显示方式：

• 决定元素在网页中的表现形式（块级、行内、行内块、table）
• display：
  ① block：元素以块级的方式显示
  ② inline：元素以行内的方式显示
  ③ inline-block：元素以行内块的方式显示
  ④ table：元素以table的方式显示
  ⑤ none：元素隐藏，脱离文档流，不占位置

显示效果

• visibility
  ① visible：默认值，可见
  ② hidden：隐藏

• visibility:hidden 和 display:none 的区别：
  display:none 脱离文档流，后续元素上前补位
  visibility:hidden 不脱离文档流，虽然看不到，但是还占位置

透明度

• opacity:
  取值：0-1，1是不透明，0是全透明

• opacity 和 rgba() 的区别：
  opacity：作用于元素，只要跟颜色相关的属性都会改变透明度
  rgba()：只会修改当前颜色的透明度

垂直对齐方式

• vertical-align：一般用于table(top / middle / bottom)设置table中内容的对齐方式 ，和 image(top / middle / bottom / baseline[基线，默认值]) 设置图片和图片前后文字的垂直对齐方式，一般项目中通常会将所有图片与文字垂直对齐方式，更改为非基线对齐

光标

• cursor
  ① default：箭头
  ② pointer(小手)/crosshair(十字)/text(文本输入I)/wait(加载圈)/help(箭头带问号)

列表的属性

• list-style-type:disc(默认) / none(去掉标识项) / circle(空心圆) / square(方块)
• list-style-image:url(图片路径)图片太大会加不进去
• list-style-position:outside(默认值,在内边距里) / inside列表项的位置，ul默认自带上下外边距（16px），自带左右内边距（40px）
• 简写：list-style:type/url position，最简：list-style:none

定位

• 分为相对定位、绝对定位、固定定位
• 属性position
• 取值：
  1. static：固定定位
  2. relative：相对定位
  3. absolute：绝对定位
  4. fixed：固定定位
• 当一个元素设置了position属性，并且取值为 relative / absolute / fixed其中一种时，这个元素被称为已定位元素，已定位元素解锁了4个偏移属性top / bottom / left / right

相对定位

• position:relative;配合偏移属性实现定位
• 相对定位未脱离文档流
• 如果相对定位不写偏移属性，效果和不写定位是一样的，不影响任何布局，只是把这个元素变成了已定位元素
• 相对定位是相对自己原来的位置偏移某个距离
• 使用场合
  1. 元素本身位置微调，类似margin
  2. 一般作为绝对定位的祖先级元素

绝对定位

• position:absolute;配合偏移属性实现定位
• 绝对定位脱离文档流
• 绝对定位元素，如果祖先元素没有已定位元素，那么就相对于body左上角进行偏移
• 绝对定位元素，会相对于离自己最近的、祖先级、已定位元素的左上角进行偏移
• 绝对定位由于脱离文档流，产生以下效果
  1. 页面不占据空间，后续元素上前补位
  2. 绝对定位的元素，会变成块级元素
  3. 没有写宽度的元素，发生绝对定位后，靠内容撑开

固定定位

• position:fixed，配合偏移属性使用
• 将元素固定在页面上某个位置，不会随着滚动条滚动，发生变化一直固定在页面的可视区域
• 特点：脱离文档流，位置始终相对body初始化

堆叠顺序

• 默认的堆叠顺序，html元素后写的堆叠顺序高
• 浮动和定位的堆叠顺序不是同一个体系，尽量避免在一起处理
• 手动调整堆叠：z-index:100，理论上最大值65536
• 堆叠顺序对父子级关系无效，子元素永远在父元素上
• 只有已定位元素可以设置堆叠顺序