CSS总结

一 基础属性

连接css

• 内联式

  <p style="color:red;font-size:12px;">...</a>

• 嵌入式

  <style type="text/css">
    a{
      color:red;
      font-size:12px;
    }
  </style>

• 外部式

  <link href="base.css" rel="stylesheet" type="text/css">

  一般写在head

优先级：内联式 > 嵌入式 > 外部式

---

选择器

1. 基本选择器

• 标签选择器：选出所有相同的标签。但无法差异化选择。

• :star: 类选择器：class。最常用的选择器。多个元素可以用一个class，一个元素也可以有多个class

  1. 多类名

     <div class="red font20"></div>

     可以在同个class属性中写多个类名，但中间要用空格隔开

     应用场景：共通的样式可以放到同个class，然后再设置各自单独的class，从而方便修改。

• id选择器：只能使用一次。

2. 复合选择器

• 后代选择器

  元素1 元素2

  空格。选择所有后代。不只是第一代。

• 子代选择器

  元素1>元素2
  大于符号(>),用于选择指定标签元素的第一代子元素。

  （第一代子元素：指定标签中包含的直系子元素。）

<style type="text/css">
	.first>span{
		border:1px solid red;
	}
</style>
...
<!--例 1-->
<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢
回答老师提出的问题。</p>
<!--此例虽有两个span，但为包含关系，第二个span为第二代子元素。因此只    对第一个span起作用。即结果为“我
还是一个胆小如鼠的小女孩”被框选-->

<!--例 2-->
<p class="first">三年级时，<span>我还是一个</span>胆小如鼠<span>的小女孩</span>，上课从来不敢
回答老师提出的问题。</p>
<!--此例也有两个span，但为独立关系，两个span均为第一代子元素。因此两个span均起作用。即结果为“我
还是一个”和“的小女孩”被框选--> 

• 包含选择器
  即加入空格,用于选择指定标签元素下的后辈元素。
  如子选择器的例1，如果改为包含选择器，则“我还是一个胆小如鼠的小女孩”和“胆小如鼠”均被框选。

• 通配符选择器
  使用一个（）号指定，它的作用是匹配html中所有标签元素。
  **用\会消耗CPU，因为浏览器需要找出所有标签，并给它们都加上修饰。**

• 伪类选择器

  1. 链接伪类选择器

     • a:link：选择所有未被访问的链接
     • a:visited：选择所有已被访问的链接
     • a:hover：选择鼠标指针位于上面的链接
     • a:active：选择活动链接（鼠标按下还未弹起的链接）

     注意事项：

     1. 为保证效果，按照link-visited-hover-active的顺序声明（LVHA）
     2. 链接与标题类似，要单独设置样式
     3. 平时一般只定义a的颜色和a:hover的颜色，其他不常用

  2. 表单伪类选择器

     1. input:focus：选择获取了焦点（光标）的input表单元素

• 并集选择器
  使用逗号,，为多个标签元素设置同一个样式。

  1. 摒弃选择器的语法规范：竖着写

---

字体属性

1. 属性总结

• font-size: 字号

  1. 标题文字比较特殊，需要单独设置大小
  2. 各浏览器默认文字大小不同，尽量指定准确像素值

• font-weight: 字体粗细

  1. bold: 加粗

  2. :star: 直接写不带单位的数字，可以自定义粗体效果700=bold

     400=normal

• font-family: 字体样式

  1. 不同字体样式用逗号分隔
  2. 中文或有空格的英文要引号包起来

• font-style: 文字样式

  1. italic: 斜体
  2. normal: 默认标准样式
  3. 主要不是用来加斜体，而是让斜体变为默认

2. 复合写法

font: font-style font-weight font-size/line-height font-family;

1. 绝对不能颠倒顺序
   1. 中间用空格间隔
   2. 不需要的属性可以省略，但是font-size和font-family必须保留，否则将不起作用。

---

文本属性

1. 属性总结

• color: 文本颜色

  1. :star: 十六进制: #➕颜色代码
  2. 预定义的颜色值: 英文颜色名
  3. RGB代码: rgb()

• text-align: 对齐文本

  1. 只能水平对齐
  2. 本质是让盒子里的文字在盒子里居中对齐。因此对齐效果取决于盒子的大小。

• text-decoration: 装饰文本

  1. none: 默认无装饰线（最常用，用来给a标签去掉默认的下划线）

  2. underline: 下划线（常用）

  3. line-through: 删除线（不常用）

  4. overline: 上划线（几乎不用）

• text-indent: 文本缩进

  1. “数字+px”，缩进规定像素
  2. :star: “数字+em”，缩进相对当前文字大小的文字个数

• line-height: 行间距

  1. 行间距=上间距+文本高度+下间距。当行间距设置为26且文本为默认大小时，26-16=10，上间距+下间距=10
  2. “数字+px”

• letter-spacing 字母间距（中文文字间距）

  1. 后接“数字+px”

• word-spacing 单词间距

  1. 后接“数字+px”

2. 文字单位

px, em ,%均为相对单位

• px:相对屏幕像素点

• em:

  1. 相对此元素的font-size。如此时字体为14px，那么首行缩进若设置2em即缩进2个14px的大小。即1em=14px。
  2. 若将em应用于font-size，那么是相对于父元素的的font-size。

• %:相对此元素的font-size。

---

背景样式

1. 背景颜色

background-color

• 默认属性值为transparent，透明色

2. 背景图片

background-image

• 常用于logo和装饰性图片，或者是超大的背景图

• 比起img直接插入，背景图更加易于控制位置

• 背景图片和背景颜色可以同时存在，但是图片会压着颜色

• 属性值：

  • none（默认）
  • url()

  background-image:url(images/logo.jpg)

3. 背景平铺

background-repeat

• 属性值：
  • repeat（默认）
  • no-repeat
  • repeat-x（只在横向平铺）
  • repeat-y（只在纵向平铺）

4. 背景图片位置

background-position

• 属性值

  • 方位名词，如：

    1. center right（右中）
    2. left top（左上）
    3. top center（上中）

    注意：

    1. 两个方位都写的话无顺序要求
    2. 只写一个方位时，另一个方位默认居中

  • 精确单位

    1. x,y的顺序不能颠倒
    2. 如果只指定一个数值，那一定是x值，y为居中
    3. 坐标原点为左上角

  • 混合单位

    1. x,y的顺序不能颠倒

5. 背景图像固定（背景附着）

background-attachment

• 属性值
  • scroll(默认)：随着滚轮滚动背景图
  • fixed:固定背景图

6.:star: 背景复合写法

background

• 无强制要求书写顺序
• :star: 约定俗成的顺序为：颜色-图片地址-平铺-图像固定-图片位置
• 中间用空格隔开

7. 背景颜色半透明(CSS3)

background:rgba(0,0,0,0.3);

• 最后一个参数为阿尔法透明度，取值范围为0~1，0为完全透明，1为完全不透明
• 前面的颜色rgb不一定为0可以自己改
• 不影响盒子里的内容

---

CSS三大特性

1. 继承

样式不仅应用于某个特定html标签元素，而且应用于其后代（包含的所有元素)。

• 文字样式都能继承
• 高度宽度等盒子样式一般不会继承

行间距的继承：

• 父元素行间距设置为24px或者2em等带单位时，后代元素即使更改了字体大小，仍然是按父元素的字体大小比例计算
• 父元素行间距设置为2，不带单位时，后代元素即使更改了字体大小，也会按照自己的字体大小比例计算
• 结论；当想让子元素根据自身的字体大小自动调整行高时，父元素的行间距不要带单位

2. 权值

浏览器根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。
权值如下：

• 继承或者是*；0,0,0,0
• 元素选择器：0,0,0,1
• 类选择器，伪类选择器：0,0,1,0
• ID选择器：0,1,0,0
• 行内样式style：1,0,0,0
• !important：约等于无穷大

权值叠加：

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意：

1. 权值永远不会进位（类选择器再叠加也不会超过ID选择器的权重）
2. 等级判断从左往右，如果某一位数值相同，则判断下一位数值
3. 浏览器默认的样式相当于元素选择器，权重大于继承。因此对于链接和标题这种有默认样式的我们必须单独设置。

3. 层叠

对于同一个元素有多个css样式存在时

1. 样式权重相同时，用靠后的
2. 相同的样式才会层叠，如果其中有不冲突的样式依旧正常执行

4. important

!important为某些样式设置具有最高权值。
一般样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但!important优先级样式会使权值高于用户自己设置的样式，因此要谨慎使用。

p{color:red!important;}/*注意：!important要写在分号的前面*/

---

元素分类

1. 块级元素

例如：<div>,<p>、<h1>、<form>、<ul> 和 <li>

特点：

1. 独占一行

2. 元素的高度、宽度、行高以及顶和底边距都可设置。

   1. 元素宽度默认是它本身父容器的100%（和父元素的宽度一致）
3. 是一个容器或合资
   1. 文字类里不能再放块级元素
   2. :star:转换：将内联元素转换为块状元素
      a{display:block;}

2. 内联元素（行内元素）

例如：<span>、<a>、<label>、 <strong> 和<em>
特点：

1. 和其他元素都在一行上；
2. 元素的高度、宽度及顶部和底部边距不可设置；
3. 元素的默认宽度就是它包含的文字或图片的宽度，不可改变。
4. 行内元素只能容纳文本或者其他行内元素。只有a特殊可以放块级元素。
5. 转换:将元素div转换为内联块状元素
   display:inline;

3. 内联块状元素

例如：\<img>、\<input>
特点：

1. 和其他元素都在一行上。中间有空白缝隙。
2. 默认宽度为包含内容的宽度。
3. 元素的高度、宽度、行高以及顶和底边距都可设置。
4. 转换:将元素div转换为内联块状元素
   1. :star:display:inline-block;
   2. float和position：absolute会隐形改变任何元素为内联块状元素

---

水平居中

1. 内联元素

• 给父元素设置 text-align:center

2. 块状元素

• 利用外边距让盒子水平居中

  前提条件：

  1. 已设置了宽度

  方法：

  1. 让左右margin设置为auto

• 不定宽块状元素
  1.放入table标签中。将table的margin属性设为auto。（因table有自动调节功能）
  2.利用display转换为内联元素，利用内联元素的居中方法。
  3.通过给父元素设置float，然后给父元素设置 position:relative和 left:50%（此时父元素左侧正好位于页面中轴线），子元素设置 position:relative 和 left: -50% 来实现水平居中（利用父元素和子元素宽度相同，使子元素中轴线在父元素最左侧，即子元素的中轴线与页面中轴线重合）。不理解如何达到居中效果

---

垂直居中

1. 父元素高度确定的单行文本

通过设置父元素的 height 和line-height（行间距）高度一致

原理：

​ 行间距=上间距+文字高度+下间距，一旦等于盒子高度，上下间距正好相同，文字就垂直居中了

同理，如果想稍微偏上居中，可以把行间距略小于盒子高度

2. 父元素高度确定的多行文本

1. 利用table.同时设置 vertical-align：middle。（因td默认不用设置）

   <style>
     table td{height:500px;background:#ccc}
   </style>
   <body>
     <table><tbody><tr><td class="wrap">
       <div>
           <p>看我是否可以居中。</p>
       </div>
     </td></tr></tbody></table>
   </body>

2. 设置块级元素的 display 为 table-cell（设置为表格单元显示），并设置vertical-align 属性。（此方法会将块级元素隐形改变为内联元素）。

---

二 盒子模型

边框

1. 边框粗细

border-width

• 一般用px单位

2. 边框样式

border-style

属性值

• solid：实线边框
• dashed：虚线边框
• dotted：点状边框

3. 边框颜色

border-color

4. 复合写法

1. 综合写法

   border:border-width border-style border-color

   • 无强制要求顺序
   • 约定俗成的顺序为粗细-样式-颜色

2. 单独写法

   • border-top
   • border-right
   • border-bottom
   • border-left

5. 边框合并

border-collapse

属性值：

• collapse:将相邻的边框合并

6.边框相关注意事项

1. 边框会影响盒子的大小：在盒子外包了一层边框，因此盒子会变大

---

内边距

padding

边框与内容的距离

1. 属性总结：

   • padding-top
   • padding-right
   • padding-bottom
   • padding-left

2. 复合属性

   1. 1个值：上下左右都为一个值

      padding=5px;

   2. 2个值：上下一个值 左右一个值

      padding=5px 10px;

   3. 3个值：上一个值 左右一个值 下一个值

      padding=5px 10px 20px;

   4. 4个值：上一个值 右一个值 下一个值 左一个值

      padding=5px 10px 20px 30px;

3. 注意事项

   1. 指定高宽时会影响盒子大小，撑大盒子

      解决方法：减小盒子的宽和高

   2. 不指定高宽时不会影响盒子大小

---

外边距

margin

外边距。盒子和盒子的距离。

1. 属性总结

   • margin-top

   • margin-right

   • margin-bottom

   • margin-left

1. 复合属性

   和padding复合属性完全相同

1. 利用外边距让盒子水平居中

   前提条件：

   1. 已设置了宽度

   方法：

   1. 让左右margin设置为auto

1. 外边距合并

   1. 相邻块元素垂直外边距的合并

      效果：取两值较大者

      如上面有个块元素1，下面有个块元素2，为垂直关系。块元素1的下margin为100，而块元素2的上margin为200时，两个块元素间的距离为200

      解决方法：尽量只给一个盒子添加margin

   2. 嵌套块元素垂直外边距的塌陷

      效果：取两值较大者

      如有个父块元素，里面有个子块元素，为父子关系。父块元素的上margin为50，而子块元素的上margin为100时，两个块元素间的距离为100

      解决方法：

      1. 为父元素添加一个边框（为保证效果可以做成transparent边框）
      2. 为父元素添加padding
      3. 为父元素添加overflow:hidden
      4. 子盒子增加浮动

2. 清除内外边距

   不同浏览器默认内外边距不同，因此我们布局前要先清除内外边距。一般使用通配符*

   注意：

   行内元素为照顾兼容性只设置左右外边距。但是块元素和行内块元素可以随意设置。

---

CSS3新增样式

1. 圆角边框

border-radius

• 属性值：

  • px为单位的数值
  • 百分比

• 原理：

  ​ 调出四个数值同大小半径的圆，与矩形结合。因此数值越大，弧度越明显

• 使用：

  1. 圆形：
     1. 数值=正方形的边长的一半
     2. 百分比=50%
  2. 圆角矩形：
     1. 数值=矩形高度的一半

• 复合写法

  1. 四个数值

     border-radius：左上角 右上角 右下角 左下角

  2. 两个数值

     border-radius:左上角及其对角 右上角及其对角

• 单独写法

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius

2. 盒子阴影

box-shadow：h-shadow v-shadow blur spread color inset

• 属性：

  • h-shadow:必须，水平阴影的位置，允许负值。以左上角为坐标原点，正为右，负为左。
  • v-shadow:必须，水平阴影的位置，允许负值。正为下，负为上。
  • blur:可选。模糊距离。越大边缘阴影越模糊。
  • spread:可选，阴影尺寸。影子大小。
  • color:可选。阴影颜色。一般用rgba(0,0,0,0.3)，黑色半透明。
  • inset:可选。改为内阴影。

• 注意：

  1. 盒子阴影不占用空间。

• 使用：

  1. 鼠标经过出现影子效果

     :hover

     不只是链接元素，盒子元素（div等）也可以使用

3. 文字阴影

text-shadow:h-shadow v-shadow blur color

• 属性：
  • h-shadow:必须，水平阴影的位置，允许负值。以左上角为坐标原点，正为右，负为左。
  • v-shadow:必须，水平阴影的位置，允许负值。正为下，负为上。
  • blur:可选。模糊距离。越大边缘阴影越模糊。
  • color:可选。阴影颜色。

---

三 浮动

1. 传统网页布局的三种方式

实际开发中，一个网页基本都要用到这三个布局

1. 标准流（普通流/文档流）

   标签按照规定好的默认方式排列

   • 特性：

     1. 块级元素独占一行，从上到下按顺序排列

     2. 行内元素从左到右按顺序排列

1. 浮动（float）

   float

   创建浮动框，使其移动到一边，直到左边缘或者右边缘触及包含块或另一个浮动框的边缘

   • 属性值

     • none：不浮动
     • left：左浮动
     • right：右浮动

   • 特性

     1. 浮动的元素会脱离标准流（脱标）
     2. 浮动的盒子不再保留原先的位置（后面的标准流会上来顶上位置）
     3. 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流（虽然后面的标准流会上来被压在浮动下，浮动却无法飘到上面的标准流上）
     4. 如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐
     5. 如果父元素宽度放不下，对出来的会自动换行
     6. 浮动元素会有行内块元素的特点（与原元素无关）：1.可以设置宽高 2.显示
     7. 与行内块不同之处：行内块之间会有缝隙，浮动元素没有

   • 注意

     1. 浮动元素经常和标准流父级搭配使用：

        为了约束浮动元素的位置，我们一般先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

     2. 一个元素浮动了，理论上其余的兄弟元素也要浮动，以防出现问题

2. 定位

2. 网页布局准则

1. 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
2. 先设置盒子大小，再设置盒子的位置

3. 清除浮动

1. 原因

父级盒子很多情况下不方便给高度，但是盒子浮动不占用位置，会导致

1. 父级盒子高度为0
2. 影响下面的标准流盒子

2. 本质

1. 清除浮动元素造成的影响
2. 如果父级本身有高度，则不需要清除浮动

3. 使用

clear

• 属性值

  • left：清除左浮动的影响
  • right：清除右浮动的影响
  • both：清除左右浮动的影响

• 注意

  1. 实际开发中几乎只用both
  2. 策略为闭合浮动

• 使用

  1. 额外标签法

     <div style="clear:both;"></div>

     在浮动元素末尾添加一个空块级标签

     1. 优点：通俗易懂
     2. 缺点：添加无意义标签，结构性差

  2. 父级添加overflow

     overflow:hidden|auto|scroll

     为父级添加overflow任意属性值，开发中常用的是hidden

     1. 优点：代码简洁
     2. 缺点：无法显示子元素溢出部分

  3. :after伪元素法

     .clearfix:after {
       content:"";
       display:block;
       height:0;
       clear:both;
       visibility:hidden;
     }
     
     .clearfix {/*IE6，7专有*/
       *zoom:1;
     }

     clearfix为父盒子的class名

     1. 优点：没有增加标签，结构简单
     2. 缺点：需要照顾低版本

  4. 双伪元素法

     .clearfix.before, .clearfix:after {
       content:"";
       display:table;
     }
     .clearfix:after {
       clear:both;
     }
     .clearfix {
       *zoom:1;
     }

     clearfix为父盒子的class名

     1. 优点：代码更简洁了
     2. 缺点：需要照顾低版本

4. 使用场景

1. 父元素没有高度
2. 子盒子浮动了
3. 影响下面布局了

四 定位

五 PS切图

1. 图层切图

1. 导出图片
2. 合并图层

2. 切片切图

1. 导出图片
2. 导出透明图片：关闭背景-选中png格式

3. 插件切图Cutterman

1. 导出图片
2. 合并图层
3. 导出选区

六 书写相关

CSS属性书写顺序

1. 布局定位属性
2. 自身属性
3. 文本属性
4. 其他属性

流动模型（flow）

默认的网页布局模式。

1. 块级元素垂直分布
2. 内联元素水平分布

   浮动模型（float）

   使块级元素脱离默认的流动模型，浮于其他块级元素的上层。其他元素不受影响继续按照流动模型排版。但不会影响内联元素，内联元素依旧被挤走。因此可实现文字环绕图片效果。关于float浮动的通俗理解

div{float:left;}//左浮动
div{float:right;}//右浮动

层模型

1.绝对定位
相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
绝对定位将块级元素从默认模型拉出来，使其位于默认模型和浮动模型之上。

div{
  position:absolute;
  top:;
  right:;
  left:;
  bottom:;
}

2.相对定位
首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

• position:relative
• 相对于以前的位置移动：属性确定的是以移动后的元素为主体，观察以前的位置。如right:50px会把块级元素向左移动50px，因为浏览器观察到以前的元素是在右边50px。
  （个人理解：relative属性相当于形成了一个以此元素为原点的坐标系）
• 偏移前的位置保留不动：虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。
  
  3.固定定位
  小广告定位：相对移动的坐标是视图（屏幕内的网页窗口）本身。会浮于默认模型上。
  position:fixed

  组合使用

  1.absolute+relative
  将前辈元素加上absolute属性
  想移动的元素加上relative
  此时以前辈元素形成一个坐标系，可以相对前辈元素改变位置。