加油加油加油，天天做笔记！
入门跟着黑马的pink老师在b站的视频走的。

这是他的b站链接。
https://www.bilibili.com/video/BV14J4114768?p=1

文章目录

CSS语法规范
CSS基础选择器
- 标签选择器
- 类选择器
- - 类选择器的多类名
- id选择器
- 通配符选择器
- CSS基础选择器总结
CSS字体属性
- 字体系列font-family
- 字体大小font-size
- 字体粗细font-weight
- 字体样式font-style
- 字体属性复合写法
- CSS字体属性总结
CSS文本外观
- 文本颜色color
- 文本对齐text-align
- 单行文字垂直居中line-height
- 文本装饰text-decoration
- 文本缩进text-indent
- 行间距line-height
- CSS文本外观总结
CSS引入方式
- 内部样式表（内嵌样式表）
- 行内样式表
- 外部样式表
- CSS引入方式总结
CSS复合选择器
- 后代选择器（重要）
- 子（元素）选择器（重要）
- 并集选择器（重要）
- 伪类选择器
- - 链接伪类选择器
  - :focus伪类选择器
- 复合选择器总结
元素显示模式
- 块元素
- 行内元素(内联元素)
- 行内块元素
- 元素显示模式总结
- 元素显示模式的转换
CSS的背景
- 背景颜色background-color
- 背景图片background-image
- 背景平铺background-repeat
- 背景图片位置background-position（重点）
- - 方位名词
  - 精确单位
  - 混合单位
- 背景图像固定（背景附着）background-attachment
- 背景属性复合写法background
- 背景颜色半透明
- CSS背景总结
CSS三大特性（层叠行、继承性、优先级）
- 层叠性
- 继承性
- - 行高的继承
- 优先级
- - 权重的叠加
盒子模型
- 边框border
- 表格的细线边框border-collapse
- - 边框会影响盒子的实际大小
- 内边距padding
- - padding会影响盒子的实际大小
- 外边距margin
- - 相邻块元素垂直外边距的合并
  - 块元素垂直外边距的塌陷
- 清除内外边距
- 圆角边框（重点）
- 盒子阴影（重点）
- 文字阴影（了解）
CSS属性书写顺序（重点）
常见的网页布局
传统网页布局的三种方式
- 标准流（普通流/文档流）
- 浮动
- - 为什么需要浮动？
  - 那么到底什么是浮动？
  - 浮动的特性（重难点）
  - - 脱标
    - 浮动的元素会一行内显示并且元素顶部对齐。
    - 浮动的元素具有行内块元素的特性。
  - 浮动的两个注意点
  - 清除浮动
  - - 为什么需要清除浮动？
    - 清除浮动的方法：
    - - 清除浮动-额外标签法
      - 清除浮动-父元素overflow
      - 清除浮动- :after伪元素
      - 清除浮动-双伪元素
      - 清除浮动总结
- 定位
- - 定位的组成
  - - 边偏移
    - 定位模式
    - - 静态定位static（了解）
      - 相对定位relative（重要）
      - 绝对定位absolute（重要）
      - 固定定位fixed（重要）
      - 如何固定到版心：
      - 粘性定位sticky（了解）
      - 定位模式总结
  - 定位的叠放顺序z-index
  - 绝对定位的盒子居中
  - 定位的特殊特性：
  - 脱标的盒子不会触发外边距的塌陷
  - 绝对定位（固定定位）会完全压住盒子
网页布局总结
元素的显示与隐藏
- display显示隐藏元素
- visibility可见性
- overflow溢出
一些常见的技巧：
- 导航栏的使用
- 如何去掉li前面的小圆点
- Emmet语法
- 一些常见的问题：
精灵图
- 为什么需要精灵图
- 精灵图的目的
- 精灵图的原理
- 精灵图的使用
字体图标
- 字体图标的产生
- 字体图标的优点
- 字体图标的下载
- 字体图标的引入
- 字体图标的追加
CSS三角
CSS用户界面样式
- 什么是界面样式
- - 鼠标样式cursor
  - 表单轮廓线 outline
  - 防止文本域拖拽
vertical-align属性应用
- 解决图片底部默认空白缝隙问题
溢出的文字省略号显示
- 单行文本溢出显示省略号
- 多行文本溢出显示省略号（了解）
常见的布局技巧
- margin负值运用
- 文字围绕浮动元素
- 行内块巧妙运用
- CSS三角巧妙运用（直角三角形）
- CSS初始化

CSS语法规范

        /* 选择器 {样式} *//* 给谁改样式 { 改什么样式} */p {color: red;/* 修改了文字大小为12像素 */font-size: 12px;}

CSS基础选择器

标签选择器

        /* 标签选择器 : 写上标签名 */p {color: green;}div {color: pink;}

类选择器

      /* 类选择器口诀: 样式点定义  结构类(class)调用  一个或多个 开发最常用 */.red {color: red;}

类选择器的多类名

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>利用类选择器画三个盒子</title><style>/*多类名使用场景:标签元素有相同的一些样式，将之放在一个公共类中，让他们可以同时调用公共类和自己独有的类*/.box {width: 150px;height: 100px;font-size: 30px;}.red {/* 背景颜色 */background-color: red;}.green {background-color: green;}</style>
</head><body><div class="box red">红色</div><div class="box green">绿色</div><div class="box red">红色</div>
</body>

id选择器

    /* 样式用#定义, 结构id调用, 只能调用一次 *//* id与class的区别：id只允许调用一次，专属；class可以被多次调用#id       ；    .classcss中多用class，id一般用于页面唯一性的元素上，经常与js搭配*/#red {color: red;}

通配符选择器

    * {color: red;}/* * 这里把 html  body  div  span  li 等等的标签都改为了红色 */

CSS基础选择器总结

CSS字体属性

字体系列font-family

    h2 {font-family: '微软雅黑';}p {/* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */font-family: 'Times New Roman', Times, serif;}

字体大小font-size

    body {font-size: 16px;}/* 标题标签比较特殊,需要单独指定文字大小，无法继承 */h2 {font-size: 16px;}

字体粗细font-weight

    .bold {/* font-weight: bold; *//* 这个700 的后面不要跟单位  等价于 bold 都是加粗的效果 *//* 实际开发中,我们跟提倡使用数字 表示加粗或者变细 */font-weight: 700;}h2 {font-weight: 400;/* font-weight: normal;    */}

字体样式font-style

    p {/* 斜体 */font-style: italic;}em {/* 让倾斜的字体不倾斜 *//* 平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不斜体文字 */font-style: normal;}

字体属性复合写法

    /* 想要div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */div {/* font-style: italic;font-weight: 700;font-size: 16px;font-family: 'Microsoft yahei'; *//* 复合属性: 简写的方式  节约代码 *//* font: font-style  font-weight  font-size/line-height  font-family; *//* font: italic 700 16px 'Microsoft yahei'; *//* 注意：顺序需要固定，语法要规范，font-size和font-family必须保留 */font: 20px '黑体';}

CSS字体属性总结

CSS文本外观

文本颜色color

    div {/* color: deeppink;  预定义的颜色*//* color: #cc00ff;   十六进制*//* color: rgb(255, 0, 255); RGB代码 */color: red;}

文本对齐text-align

    h1 {/* 本质是让h1盒子里面的文字水平居中对齐 *//* text-align: center; */text-align: right;}

单行文字垂直居中line-height

让文字的行高等于盒子的高度，就能让文字在当前盒子内垂直居中。

    div {width: 200px;height: 40px;background-color: pink;line-height: 40px;}

文本装饰text-decoration

    div {/* 重点记住如何添加下划线，如何删除下划线 *//* 下划线，常用*/text-decoration: underline;/* 删除线，不常用；*/text-decoration: line-through;/* 上划线，几乎不用；*/text-decoration: overline;}a {/* 取消a默认的下划线,最为常用；*/text-decoration: none;color: #333;}

文本缩进text-indent

    p {font-size: 24px;/* 文本的第一行首行缩进 多少距离  *//* text-indent: 20px; *//* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离  *//* em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大         小 */text-indent: 2em;  }

行间距line-height

    div {/* 更改行高改变的是上间距和下间距，文本高度始终不变 */line-height: 26px;}

CSS文本外观总结

CSS引入方式

根据CSS样式书写的位置（引入方式），CSS可分为行内样式表（行内式）、内部样式表（嵌入式）、外部样式表（链接式）。

内部样式表（内嵌样式表）

写于html页面内部，是将所有的CSS代码抽取出来，单独放到一个< style > 标签中。

其中< style >标签理论上可以放在HTML文档的任何地方，但是一般会放在< head >标签中。

内部样式表代码结构清晰，但是并没有实现结构与样式完全分离。

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>内部样式表</title><style>div {color: red;}</style>
</head>
<body><div>所谓内部样式表,就是在html页面内部写样式,但是是单独写到style标签内部.</div></body>

行内样式表

在元素标签内部的style属性中设定CSS样式。适合于简单修改样式。

style其实就是标签的属性。

在双引号的中间，写法要符合CSS的规范。

由于书写繁琐，并没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用。

<body>   <pstyle="color: pink; font-size: 20px;">我是一个行内样式表</p>
</body>

外部样式表

实际开发都采用外部样式表。

外部样式表适用于样式比较多的情况。

核心是：样式单独写道CSS文件中，之后把CSS文件引入到HTML页面中使用。

引入外部样式表的步骤：

（1）新建一个.css的样式文件，写入CSS代码。

（2）使用标签引入这个.css文件。

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>外部样式表</title><!-- rel属性：定义当前文档与被链接文档之间的关系，在这里指定stylesheet表明被链接文档是一个样式表文件 --><!-- href属性：定义所链接外部样式表文件的url，可以是行对路径也可以是绝对路径 --><link rel="stylesheet" href="style.css">
</head>

CSS引入方式总结

CSS复合选择器

在CSS中可以根据选择器的类型把选择器分为基础选择器和复合选择器。

复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。
复合选择器可以更加准确、高效的选择目标元素（标签）。
复合选择器是由两个或者多个基础选择器通过不同的方式组合而成的。

常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等等。

后代选择器（重要）

又称为包含选择器，可以选择父元素中的子元素。
写法为把外层标签写在前面，内层标签写在后面，中间用空格分隔。
当标签发生嵌套时，内层标签就成为外层标签的后代。

元素1 元素2 { 样式声明 }

元素1和元素2中间用空格隔开；

元素2必须是元素1的后代，可以是儿子，孙子等；

元素1和元素2可以是任意的选择器。

    /* 我想要把ol里面的小li选出来改为red */ol li {color: red;}

子（元素）选择器（重要）

子选择器只能选择作为某元素最近一级子元素，即"亲儿子"元素，和孙子没关系。

        .nav>a {/* 子选择器使用的是">" */color: red;}/* <div class="nav"><a href="#">儿子</a><p><a href="#">孙子</a></p></div> *//* 此时选择的是儿子标签，孙子标签没有被选中。 */

并集选择器（重要）

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

        /* 要求2: 请把div,p标签改为红色 */div,p,.pig li {color: red;}/* 约定的语法规范,我们并集选择器喜欢竖着写 *//* 一定要注意,最后一个选择器 不需要加逗号 */

伪类选择器

伪类选择器用于某些选择器增加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是用冒号（:）表示，比如:hover、:first-child。

伪类选择器有很多，比如链接伪类选择器、结构伪类选择器等。

链接伪类选择器

注意事项：

为了确保生效，按照LVHA的循顺序声明： :link :visited :hover :active 。

a链接在浏览器中具有默认样式，所以在实际开发中都需要给链接单独的指定样式。

        /* 1.未访问的链接 a:link  选择所有未被访问的链接 */a:link {color: #333;text-decoration: none;}/*2. a:visited 选择所有已被访问过的链接 */a:visited {color: orange;}/*3. a:hover 选择鼠标经过的那个链接 */a:hover {color: skyblue;}/* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */a:active {color: green;}

链接伪类选择器在实际开发中的写法：

        body {color: red;}a {color: #333;text-decoration: none;}a:hover {color: #369;text-decoration: underline;}

:focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况< input >类表单元素才能获取，因此这个选择器也主要针对表单元素。

        /* // 把获得光标的input表单元素选取出来 */input:focus {background-color: pink;color: red;}

复合选择器总结

元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示，例如< div >自己独占一行，< span >一行可以多个布局。

HTML元素一般分为块元素和行内元素两种类型。

块元素

常见的块元素有< h1 >~< h6 > < p > < div > < ul > < ol > < li >等，< div >最典型。

块元素的特点：

块元素独占一行。
高度宽度以及内外边距都可以控制。
宽度默认是容器（父级宽度）的100%。
块元素是一个容器及盒子，里面可以放行内或块级元素。

注意：

文字类的元素内不能使用块级元素，例如< p >和< h1 >~< h6 >。

行内元素(内联元素)

常见的行内元素有< a > < strong > < b > < em > < i > < del > < s > < ins > < u > < span >等，其中< span >为最典型的行内元素。

行内元素的特点：

相邻行内元素在一行上，一行可以显示多个。
高度宽度直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。

注意：

链接里面不能再放链接；

特殊情况链接< a >里面可以放块级元素，但是给< a >转换成块级元素最安全。

行内块元素

行内元素中有几个特殊标签，例如< img > < input > < td >，它们同时具有块级元素和行内元素的特点。

行内块元素的特点：

和相邻行内元素（行内块）在一行上，但是它们之间有空白缝隙，一行可以显示多个。
默认宽度就是它本身内容的宽度。
高度宽度行高，内外边距都可以控制。

元素显示模式总结

元素显示模式的转换

当一个模式的元素需要另一个模式的特性时，我们需要转换元素模式。

例如想要增加链接< a >的触发范围

转换为块级元素（常用）：display:block;

转换为行内元素：display:inline;

转换为行内块元素（常用）：display:inline-block;

        a {width: 150px;height: 50px;background-color: pink;/* 把行内元素 a 转换为块级元素 */display: block;}div {width: 300px;height: 100px;background-color: purple;/* 把块级元素 div 转换为行内元素 */display: inline;}span {width: 300px;height: 30px;background-color: skyblue;/* 把 行内元素 span 转换为行内元素 */display: inline-block;}

CSS的背景

背景属性可以设置背景颜色，背景图片，背景图片位置，背景图像固定，背景平铺等。

背景颜色background-color

        div {width: 200px;height: 200px;/* 一般情况下元素背景颜色默认值是transparent *//* background-color: transparent;   透明的 清澈的  *//* background-color: red; */background-color: blue;}

背景图片background-image

background-color属性描述了元素的背景图像，实际开发中常见于logo，一些装饰性的小图片或者是超大的背景图片。

优点是非常便于控制位置。

        div {width: 300px;height: 300px;/* 不要落下 url()   *//* none表示无背景图 *//* url可以使用绝对地址或相对地址 */background-image: url(images/logo.png);}

背景平铺background-repeat

        div {width: 300px;height: 300px;background-color: pink;background-image: url(images/logo.png);/* 1.背景图片不平铺 *//* background-repeat: no-repeat; *//* 2.默认的情况下,背景图片是平铺的 *//* background-repeat: repeat; *//* 3. 沿着x轴平铺 *//* background-repeat: repeat-x; *//* 4. 沿着Y轴平铺 */background-repeat: repeat-y;/* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */}

背景图片位置background-position（重点）

利用background-position属性可以改变图片在背景中的位置。

background-position: x , y;

x , y 可以使用方位名词或者精确单位。

方位名词

        div {width: 300px;height: 300px;background-color: pink;background-image: url(images/logo.png);background-repeat: no-repeat;/* background-position:  方位名词; *//* background-position: center top; *//* background-position: right center; *//* 如果是方位名词  right center 和 center right 效果是等价的 跟顺序没有关系 *//* background-position: center right; *//* 此时 水平一定是靠右侧对齐  第二个参数省略 y 轴是 垂直居中显示的 *//* background-position: right; *//* 此时 第一个参数一定是 top y轴 顶部对齐   第二个参数省略x  轴是 水平居中显示的 */background-position: top;}

精确单位

        div {width: 300px;height: 300px;background-color: pink;background-image: url(images/logo.png);background-repeat: no-repeat;/* 20px 50px; x轴一定是 20  y轴一定是 50 *//* background-position: 20px 50px; *//* background-position: 50px 20px; */background-position: 20px;}

混合单位

    <style>div {width: 300px;height: 300px;background-color: pink;background-image: url(images/logo.png);background-repeat: no-repeat;/* 20px center  一定是x 为 20  y 是 center  等价于   background-position: 20px *//* background-position: 20px center; *//* 水平是居中对齐  垂直是 20 */background-position: center 20px;}

背景图像固定（背景附着）background-attachment

background-attachment属性设置背景图片固定或随着页面的其余部分滚动。

background-attachment后期可以制作视差滚动的效果。

        body {background-image: url(images/bg.jpg);background-repeat: no-repeat;background-position: center top;/* scroll，背景图像随着对象内容滚动 *//* fixed，把背景图片固定住 */background-attachment: fixed;color: #fff;font-size: 20px;}

背景属性复合写法background

当使用背景简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置；

复合写法是实际开发中更提倡的写法。

        body {/* background-image: url(images/bg.jpg);background-repeat: no-repeat;background-position: center top; *//* 把背景图片固定住 *//* background-attachment: fixed;background-color: black; */background: black url(images/bg.jpg) no-repeat fixed center top;color: #fff;font-size: 20px;}

背景颜色半透明

CSS3提供了背景颜色半透明的效果。

半透明是指盒子背景半透明，盒子里的内容不受影响。

        div {width: 300px;height: 300px;/* background-color: black; *//* background: rgba(0, 0, 0, 0.3); *//* r对应红色，g对应绿色，b对应蓝色，a则是alpha的简写，范围是0-1 *//* 我们习惯把0.3的0舍去掉，写成.3 */background: rgba(0, 0, 0, .3);}

CSS背景总结

背景图片实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点在于非常便于控制位置（精灵图也是一种运用场景）

CSS三大特性（层叠行、继承性、优先级）

层叠性

相同的选择器给相同的样式，此时一个样式就会覆盖另一个冲突的样式，层叠性主要解决样式冲突的问题。

层叠性的原则：

样式冲突就遵循就近原则，哪个样式离结构近（< body >）就执行哪个；

样式不冲突就不会层叠。

       div {color: red;font-size: 12px;}div {color: pink;}

继承性

子标签会继承父标签的某些样式，比如文本颜色和字号。

恰当的使用继承性可以简化代码，降低CSS样式的复杂性；

子元素可以继承父元素的样式（ text- font- line- color ）;

行高的继承

        body {color: pink;/* font: 12px/24px 'Microsoft YaHei'; */font: 12px/1.5 'Microsoft YaHei';}div {/* 子元素继承了父元素 body 的行高 1.5 *//* 这个1.5 就是当前元素文字大小 font-size 的1.5倍   所以当前div 的行高就是21像素 */font-size: 14px; }p {/* 1.5 * 16 =  24 当前的行高 */font-size: 16px;}/* li 没有手动指定文字大小  则会继承父亲的 文字大小  body 12px 所以 li 的文字大小为 12px 当前li 的行高就是  12 * 1.5  =  18*//* body 行高1.5这样写法最大的优势在于里面的子元素可以根据自己文字大小自动调整行高 */

优先级

当同一个元素指定多个选择器时，就会产生优先级。

选择器相同，则执行层叠性；

选择器不同，则根据选择器权重执行。

        .test {color: red;}div {color: pink!important;}#demo {color: green;}

优先级注意点：

权重由4个数字组成但是不会有进位。

等级判断从左到右，如果某一位数字相同则判断下一位。

继承的权重是0！

    <style>/* 父亲的权重是 100  */#father {color: red!important;}/* p继承的权重为 0 *//* 所以以后我们看标签到底执行那个样式,就先看这个标签有么有直接被选出来 */p {color: pink;}body {color: red;}/* a链接浏览器默认制定了一个样式 蓝色的 有下划线  a {color: blue;}*/a {color: green;}</style>
</head>
<body><div id="father"><p>你还是很好看</p></div><a href="#">我是单独的样式</a>
</body>

权重的叠加

如果是复合选择器，则会有权重叠加，需要计算权重。

div ui li → 0，0，0，3

.nav ui li→ 0，0，1，2

a:hover→ 0，0，1，1

.nav a→ 0，0，1，1

       /* 复合选择器会有权重叠加的问题 *//* 权重虽然会叠加,但是永远不会有进位 *//* ul li 权重  0,0,0,1 + 0,0,0,1  =  0,0,0,2     2 */ul li {color: green;}/* li 的权重是 0,0,0,1    1 */li {color: red;}/* .nav li  权重    0,0,1,0  +  0,0,0,1  =  0,0,1,1    11 */.nav li {color: pink;}

盒子模型

页面布局要学习三大核心：

盒子模型
浮动
定位

网页布局的核心本质就是利用CSS摆盒子。

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括：边框、内外边距、实际内容。

边框border

border可以设置边框的宽度、样式、颜色。

        div {width: 300px;height: 200px;/* border-width 边框的粗细  一般情况下都用 px *//* border-style 边框的样式  solid 实线边框   dashed 虚线边框  dotted 点线边框*//* border-style: dashed; *//* border-style: dotted; *//* border-color 边框的颜色  *//* 复合写法（没有顺序）：border ： border-width border-style border-color ； */border: 5px solid red;/* 边框分开写，上边框 */border-top: 5px solid pink;}

表格的细线边框border-collapse

border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。

border-collapse：collapse；表示相邻边框合并在一起

边框会影响盒子的实际大小

边框会额外增加盒子的实际大小，可以通过以下方法解决：

测量盒子的大小时，不测量边框；
如果测量盒子大小时包含了边框，则需要width/height 减去边框的宽度。

        /* 我们需要一个200*200的盒子, 但是这个盒子有10像素的红色边框 */div {width: 180px;height: 180px;background-color: pink;border: 10px solid red;}

内边距padding

内边距即边框于内容之间的距离。

        div {width: 200px;height: 200px;background-color: pink;/* padding-left: 5px;padding-top: 5px;padding-bottom: 5px;padding-right: 5px; *//* 内边距复合写法(简写) *//* padding: 5px; *//* padding: 5px 10px; *//* padding: 5px 10px 20px; */padding: 5px 10px 20px 30px;}

padding会影响盒子的实际大小

如果盒子已经有了宽度和高度，此时再指定padding，则会撑大盒子。

为了保证盒子大小与效果图一致，则让width/height减去多出来的内边距大小。

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

        h1 {/* width: 100%; */height: 200px;background-color: pink;padding: 30px;}div {width: 300px;height: 100px;background-color: purple;}div p {/* width: 100%; 如果写了这一句就会撑开 */padding: 30px;background-color: skyblue;}

外边距margin

margin属于设置外边距，控制盒子与盒子之间的距离。

典型应用：

使块级盒子水平居中，但是必须满足两个条件：

（1）块级盒子必须指定了宽度（width）

（2）盒子的左右外边距都设置为auto。

      .header {width: 900px;height: 200px;background-color: pink;margin: 100px auto;}

对于行内元素和行内块元素，可以给其父元素添加text-align：center 。

      .header {width: 900px;height: 200px;background-color: pink;margin: 100px auto;/* 行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可 */text-align: center;}

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

当上下两个都有margin的块元素相邻时，他们之间的垂直边距不是margin-bottom和margin-top之和，而是取两个值中的较大者。

将这种现象称作相邻块元素垂直外边距的合并。

解决方法：

尽量只给一个盒子添加margin值。

块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

浮动的的盒子不会有外边距合并的问题。

解决方案：

可以为父元素定义上边框。
可以为父元素定义上内边距。
可以为父元素添加overflow：hidden。

        .father {width: 400px;height: 400px;background-color: purple;margin-top: 50px;/* border: 1px solid red; *//* border: 1px solid transparent; *//* padding: 1px; */overflow: hidden;}.son {width: 200px;height: 200px;background-color: pink;margin-top: 100px;}

清除内外边距

网页元素很多带有默认的内外边距，我们在布局前首先要清除网页的内外边距。

        /* 这句话也是我们css 的第一行代码 */* {margin: 0;padding: 0;}span {/* 行内元素为了照顾兼容性，尽量只设置左右外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了 */background-color: pink;margin: 20px;}

圆角边框（重点）

        div {width: 300px;height: 150px;background-color: pink;/* radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果。 */border-radius: 10px;}

        .yuanxing {width: 200px;height: 200px;background-color: pink;/* border-radius: 100px; *//* 50% 就是宽度和高度的一半  等价于 100px *//* 如果是正方形想要设置成一个圆，把数值修改为高度或宽度的一半即可，或者直接写为50% */border-radius: 50%;}.juxing {width: 300px;height: 100px;background-color: pink;/* 圆角矩形设置为高度的一半 *//* 如果是个矩形，设置为高度的一半就可以做 */border-radius: 50px;}.radius {width: 200px;height: 200px;/* 如果是一个简写属性，可以跟四个数值，分别代表左上角、右上角、右下角、左下角 *//* border-radius: 10px 20px 30px 40px; *//* 如果只跟了两个数值，则对角线是一个数值，另一个对角线又是一个数值 *//* border-radius: 10px 40px; *//* 只让左上角变化，top和left值不能颠倒 */border-top-left-radius: 20px;background-color: pink;}

盒子阴影（重点）

CSS3中新增了box-shadow属性为盒子添加阴影。

        div {width: 200px;height: 200px;background-color: pink;margin: 100px auto;/* box-shadow: 10px 10px; */}div:hover {box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);}/* 默认的是外阴影outset，但是不可以写这个单词，否则导致阴影无效 *//* 盒子阴影不占用空间，不影响其他盒子排列 *//* 原先盒子没有影子,当我们鼠标经过盒子就添加阴影效果 */

文字阴影（了解）

CSS中可以使用text-shadow属性设置文本阴影。

CSS属性书写顺序（重点）

常见的网页布局

传统网页布局的三种方式

网页布局的本之——利用CSS来摆放盒子，把盒子摆到相应位置。

CSS提供了三种传统布局方式（简单的说就是盒子如何排列）：

标准流（普通流）
浮动
定位

这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。

实际开发中，一个页面基本包含了这三种布局方式。

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

所谓的标准流就是标签按照规定好的默认方式排列，标准流是最基础的布局方式。

1、块级元素会独占一行，从上到下顺序排列。

常用元素：< div > < hr > < p > < h1 >-< h6 > < ul > < ol > < dl > < form > < table > 。

2、行内元素会按照顺序从左到右排列，碰到父元素边缘则自动换行。

常用元素：< span > < a > < i > < em > 。

浮动

为什么需要浮动？

总有很多布局效果标准流没法完成，此时就可以利用浮动完成布局。因为浮动能改变元素标签默认的排列方式。
浮动最典型的应用：可以让块级元素一行内排列显示。
网页布局的第一准则：多个块级元素纵向排列找标准流，多个块级元素横线排列找浮动。

那么到底什么是浮动？

浮动（float）属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：

        .left,.right {float: left;width: 200px;height: 200px;background-color: pink;}.right {float: right;}

浮动的特性（重难点）

浮动元素会脱离标准流（脱标）
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素具有行内块元素的特性

脱标

    <style>/* 设置了浮动（float）的元素会：1. 脱离标准普通流的控制（浮）移动到指定位置（动）。2.浮动的盒子不在保留原先的位置 */.box1 {float: left;width: 200px;height: 200px;background-color: pink;}.box2 {width: 300px;height: 300px;background-color: rgb(0, 153, 255);}</style>
</head><body><div class="box1">浮动的盒子</div><div class="box2">标准流的盒子</div>
</body>

浮动的元素会一行内显示并且元素顶部对齐。

浮动的元素具有行内块元素的特性。

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。

浮动的盒子中间是没有缝隙的，是紧挨在一起的，行内元素同理。

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

如果行内元素有了浮动,则不需要转换块级\行内块元素就可以直接给高度和宽度。

浮动的两个注意点

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

为了约束浮动元素位置，我们网页布局一般采取的策略是：

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，复合网页布局第一准则。

一个元素浮动了，理论上其余的兄弟也要浮动。

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

清除浮动

为什么需要清除浮动？

思考：所有的父盒子都需要设置高度吗?

有一种情况：让子盒子撑开父亲，有多少子盒子，父盒子就被撑多高。

但是不给父盒子加高度，父盒子的高度变成了0，同时子盒子又添加了浮动，那么势必会影响下面的标准流盒子的位置。

因此，需要进行清除浮动。（重要）

由于父级盒子很多情况下不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。

清除浮动的本质

清除浮动的本质是清除浮动元素脱标而造成的影响；
如果父盒子本身有高度，则不需要清除浮动；
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

清除浮动的方法：

额外标签法（隔墙法），W3C推荐的做法。
父级添加overflow属性。
父级添加after伪元素。
父级添加双伪元素。

清除浮动-额外标签法

额外标签法也称为隔墙法，是W3C推荐的做法。

额外标签法会在浮动元素末尾添加一个空的标签，例如< div style=" clear:both" >< /div >，或其他标签（如< br >等）

优点：通俗易懂，书写方便。

缺点：添加许多无意义的标签，结构化较差。

注意：要求这个新的空标签必须是块级元素。

    <style>~~~.clear {clear: both;}</style>
</head><body><div class="box"><div class="damao">左盒子</div><div class="ermao">右盒子</div><!-- 这个新增的盒子要求必须是块级元素不能是行内元素 --><!-- <span class="clear"></span>  X这样是不对的--><div class="clear"></div></div><div class="footer"></div>
</body>

清除浮动-父元素overflow

可以给父元素添加overflow属性，将其属性值设置为hidden、auto或scroll 。

优点：代码简洁。

缺点：无法显示出溢出的部分。

清除浮动- :after伪元素

:after 方式是额外标签法的升级版，也是给父元素添加。

优点：没有增加标签，结构更简单。

缺点：照顾低版本浏览器。

代表网站：百度、淘宝、网易等

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

清除浮动-双伪元素

也是给父元素添加。

优点：代码更简洁。

缺点：照顾低版本浏览器。

代表网站：小米、腾讯等。

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

清除浮动总结

为什么需要清除浮动？

父级没高度。
子盒子浮动。
影响了下面标准流盒子的布局，从而影响整体布局。

定位

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子；

而定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中的某个位置，并且可以压住其他盒子。

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位的组成

定位= 定位模式 + 边偏移

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

边偏移

边偏移就是定位的盒子移动到最终位置。

top top：30px；顶部偏移量，定义元素相对于其父元素上边线的距离。
bottom bottom：30px；底部偏移量，定义元素相对于其父元素下边线的距离。
left left：30px；左侧偏移量，定义元素相对于其父元素左边线的距离。
right right：30px；右侧偏移量，定义元素相对于其父元素右边线的距离。

定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：

static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位

静态定位static（了解）

静态定位是元素默认定位方式，无定位的意思。

    div {position: static;   /*  relative absolute fixed */
}

静态定位的特点：

静态定位按照标准流特性摆放位置，没有边偏移
静态定位在布局时很少用到

相对定位relative（重要）

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。

div {position: relative; /*  absolute fixed  */top: 100px;left: 200px;}

相对定位的特点（重要）：

它是先对于自己原来的位置来移动的。（移动位置的时候参照点是自己原来的位置）
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保持原来位置）
因此，相对位移并没有脱标，它的最典型应用是当绝对定位的父元素。
如果子元素使用了绝对定位，那么父元素要用相对定位。

绝对定位absolute（重要）

绝对定位是元素在移动的时候，是相对于它父元素来说的。

div {position: absolute; /*  fixed  */top: 100px;left: 200px;}

绝对定位的特点（重要）：

如果没有父元素或父元素没有定位，则以浏览器为准定位。（Document文档）
如果父元素有定位（相对、绝对、固定），则以最近一级的有定位的父元素为参考点移动位置。
绝对定位不再占有原来的位置。（脱标）
如果子元素使用了绝对定位，那么父元素要用相对定位。

固定定位fixed（重要）

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

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

固定定位的特点（重要）：

以浏览器的可视窗口为参照点移动元素，跟父元素没有关系。
不随着滚动条滚动。
固定定位不再占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

如何固定到版心：

让固定定位的盒子left：50% 走到浏览器可视区的一半位置。
让固定定位的盒子margin-left：版心宽度的一半距离。

粘性定位sticky（了解）

粘性定位可以认为是相对定位和固定定位的混合。

div {position: sticky;top: 20px;}

粘性定位的特点：

以浏览器的可视窗口为参照点移动元素。（固定定位特点）
粘性定位占有原来的位置。（相对定位特点）
必须添加top、left、right、bottom其中一个才有效。
跟页面滚动搭配使用，兼容性较差，IE不支持。

定位模式总结

定位的叠放顺序z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）

div {z-index: 1; /* 数值可以是正整数、负整数、0，默认是auto，数值越大，盒子越靠上。 *//* 如果属性值相同，则按照书写顺序，后来居上。 *//* 数字后面不能加单位。 *//* 只有定位的盒子才能有z-index属性。 */}

绝对定位的盒子居中

加了绝对定位的盒子是不能通过margin：0 auto；水平居中的。

算法：

left 走 50%，为父元素容器宽度的一半。
margin 负值往左边走，自己宽度的一半。

定位的特殊特性：

绝对定位和固定定位也和浮动相似。

行内元素添加绝对或固定定位，可以直接设置高度和宽度。
块级元素添加绝对或固定定位，如果不给宽度或高度，默认大小是内容的大小。

脱标的盒子不会触发外边距的塌陷

浮动元素、绝对或固定定位的元素都不会触发外边距合并的问题。

绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）。

但是绝对定位（固定定位）会压住下面标准流所有的内容。

浮动之所以不会压住文字，是因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素。

网页布局总结

通过盒子模型，清楚的知道大部分html标签是一个盒子。

通过CSS浮动、定位可以让每一个盒子排列成网页。

一个完整的网页是由标准流、浮动、定位一起完成布局的，每个都有自己专门的用法。

标准流：可以让盒子上下排列或左右排列，垂直的块级盒子显示就用标准流布局。
浮动：可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
定位：定位的最大特点就是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

元素的显示与隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面就会出现。

本质：让一个元素在页面中隐藏或显示出来。

display显示隐藏元素

display属性用于设置一个元素应如何显示。

display：none；隐藏对象。
display：block；除了转换为块级元素之外，同时还有显示元素的意思。

特点：

display隐藏元素后，不再占有原来的位置。（后面应用广泛，搭配JS做很多网页特效）

visibility可见性

visibility属性用于指定一个元素应可见还是隐藏。

visibility：visible；元素可视。
visibility：hidden；元素隐藏。

特点：

visibility隐藏元素后，继续占有原来的位置。

overflow溢出

overflow属性指定了如果内容溢出一个元素的框时（超过其指定高度及宽度）

overflow：visible；不剪切内容也不添加滚动条。
overflow：hidden；不显示超过对象尺寸的内容，超出的部分隐藏掉。
overflow：scroll；不管是否超出内容，都显示滚动条。
overflow：auto；超出内容则显示滚动条，不超出则不显示滚动条。

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用overflow：hidden；因为它会隐藏多余的部分。

一些常见的技巧：

导航栏的使用

在实际开发当中，我们不会直接使用链接a而是用li包含链接（li+a）的做法。

1、（li+a）的语义更加清晰，一看就是有条理的列表型内容。

2、如果直接使用a，搜索引擎容易辨别为有堆砌关键词嫌疑（导致容易被搜索引擎降低权重的风险），从而影响网站排名。

注意：

让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示。
这个导航栏可以不给宽度，将来可以继续添加其余文字。
因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度。

如何去掉li前面的小圆点

list-style: none;

Emmet语法

Emmet语法使用缩写来提高html/css的编写速度。

1、快速生成HTML结构语法

生成标签：直接输入标签名按tab
生成多个相同标签：div*3
生成父子级关系的标签：ui>li*3
生成兄弟关系的标签：div+p
生成带类名或者ID的标签，.one 或者 #two ，按tab（如果是p标签可以写成：p.one 或者 p#two）
生成的div类名是有顺序的，可以用自增符号 $，例如 . d e m o$ *5
生成的标签内部写内容可以用 { } 表示

2、快速生成CSS样式语法

CSS基本采取简写形式即可。

例如：w200 + tab = width ：200px；

lh26 + tab =line-height ：26px；

3、快速格式化代码（排版）

Shift + Alt + F ；

自动格式化：文件 →首选项 →设置 →搜索format on save; →勾选

一些常见的问题：

布局的时候为啥用不同的盒子，不能只用div吗？

标签都是有语义的，需要在合理的地方使用合理的标签，比如产品标题就用标签，大量文字片段就用

标签。

为什么要用很多类名？

类名就是给每个盒子起一个名字，可以更好的找到这个盒子，这样选取盒子更加方便，后期维护也更加容易。

什么时候用margin和padding？

大部分情况下两个可以混用，两者各有优缺点。

精灵图

为什么需要精灵图

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，大大降低了页面的加载速度。

精灵图的目的

因此，为了有效地减少服务器接收和发送请求的速度，提高网页的加速速度，出现了CSS精灵技术。（CSS sprites、CSS雪碧）

精灵图的原理

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要请求一次就可以了。

精灵图的使用

使用精灵图的核心：

精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图中。（主要针对小背景图片）
这个大图片也成为sprites 精灵图或雪碧图。
移动背景图片位置，此时可以使用background-position。（主要借助背景位置来实现）
移动的距离就是这个目标的x和y坐标，注意网页中的坐标有所不同。
一般情况下都是往上往左移动，数值为负值。
使用精灵图时需要精确测量每个小背景图片的大小和位置。

        .box1 {width: 60px;height: 60px;   margin: 100px auto;background: url(images/sprites.png) no-repeat   -182px 0;}

字体图标

字体图标的产生

字体图标的使用场景：主要用于显示网页中通用、常用的一些小图标。

精灵图有很多优点，但是缺点很明显：

图片文件比较大。
图片本身放大和缩小会失真。
一旦图片制作完毕想要更换非常复杂。

此时，就需要用到字体图标iconfont 。

字体图标可以为前端提供一种方便高效的图标使用方式，展示的是图标，本质属于文字，可以随意更换大小颜色，不失真。

字体图标的优点

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
灵活性:本质其实是文字，可以随意更改颜色、产生阴影、透明效果、旋转等。
兼容性：几乎支持所有的浏览器。

注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

总结：

如果遇到一些结构和样式比较简单的小图标，就用字体图标。
如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

字体图标的下载

icomoon字库：http://icomoon.io

阿里iconfont字库：http://www.iconfont.cn/

字体图标的引入

把下载包里面的fonts文件夹放入页面根目录下。

在CSS样式中全局声明字体：简单理解把这些字体文件通过CSS引入到页面中。（一定注意字体文件路径的问题）

  <style>/* 字体声明 */@font-face {font-family: 'icomoon';src:  url('fonts/icomoon.eot?p4ssmb');src:  url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?p4ssmb') format('truetype'),url('fonts/icomoon.woff?p4ssmb') format('woff'),url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}span {font-family: 'icomoon';font-size: 100px;color:pink;}</style>
</head><body><span></span><span></span>
</body>

字体图标的追加

如果工作中原来的字体不够用了，我们需要添加新的字体图标到原来的字体文件中。

把压缩包里的selection.json 重新上传，然后选中自己想要的新图标，重新下载压缩包并替换原来的文件即可。

CSS三角

网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标。

        .jd span {position: absolute;right: 15px;top: -10px;width: 0;height: 0;/* 为了照顾兼容性,照顾一些低版本的浏览器 */line-height: 0;  font-size: 0;border: 5px solid transparent;border-bottom-color: pink;  }

CSS用户界面样式

什么是界面样式

所谓的界面样式，就是更改一些用户的操作样式，以便于提高更好的用户体验。

更改用户的鼠标样式
表单轮廓
防止表单域拖拽

鼠标样式cursor

li { cursor: pointer; }

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

default 小白，默认
pointer 小手
move 移动
text 文本
not-allowed 禁止

表单轮廓线 outline

给表单添加outline：0；或者 outline：none；样式之后，就可以去掉默认的蓝色边框。

防止文本域拖拽

实际开发中，文本域右下角是不可以拖拽的。

textarea { resize: none; }

vertical-align属性应用

CSS的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。

官方解释：用于设置一个元素的垂直对齐方式，但它只针对于行内元素或行内块元素。

vertical-align: baseline | top | middle | bottom ;

baseline 默认，元素放置在父元素的基线上。
top 把元素的顶端与行中最高元素的顶端对齐。
middle 把此元素防止在父元素的中部
bottom 把元素的顶部与行中最低的元素的顶端对齐

解决图片底部默认空白缝隙问题

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

给图片添加vertical-align: middle| top| bottom ;等（提倡使用）
把元素转换为块级元素 display: block;

溢出的文字省略号显示

单行文本溢出显示省略号
多行文本溢出显示省略号

单行文本溢出显示省略号

想要满足此效果，必须满足三个条件。

        div {width: 150px;height: 80px;background-color: pink;margin: 100px auto;/* 这个单词的意思是如果文字显示不开自动换行 *//* white-space: normal; *//* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */white-space: nowrap;/* 2.溢出的部分隐藏起来 */overflow: hidden;/* 3. 文字溢出的时候用省略号来显示 */text-overflow: ellipsis;}

多行文本溢出显示省略号（了解）

多行文本溢出显示省略号，有较大的兼容性问题，适合于webkit浏览器或移动端（移动端大部分是webkit内核）

        div {width: 150px;height: 65px;background-color: pink;margin: 100px auto;overflow: hidden;text-overflow: ellipsis;/* 弹性伸缩盒子模型显示 */display: -webkit-box;/* 限制在一个块元素显示的文本的行数 */-webkit-line-clamp: 3;/* 设置或检索伸缩盒对象的子元素的排列方式 */-webkit-box-orient: vertical;}

更推荐后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

常见的布局技巧

margin负值运用

让每个盒子margin往左侧移动-1px正好压住相邻盒子边框。
鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位relative（保留位置），如果有定位，则加z-index提高层级）

        ul li {position: relative;float: left;list-style: none;width: 150px;height: 200px;border: 1px solid red;margin-left: -1px;}/* ul li:hover {1. 如果盒子没有定位，则鼠标经过添加相对定位即可position: relative;border: 1px solid blue;} */ul li:hover {/* 2.如果li都有定位，则利用 z-index提高层级 */z-index: 1;border: 1px solid blue;}

文字围绕浮动元素

这种情况下不需要设置左右两个盒子并且都浮动。

只需要设置文字围绕浮动元素即可，巧妙运用浮动元素不会压住文字的特性。

行内块巧妙运用

只要给父元素（inline-block）添加text-align：center；那么子元素就能居中。
行内块元素既可以设置宽度高度，也可以设置在一行上。
行内块元素中间有空隙，不需要调整margin值。

CSS三角巧妙运用（直角三角形）

         .box1 {width: 0;height: 0;/* 把上边框宽度调大 *//* border-top: 100px solid transparent;border-right: 50px solid skyblue; *//* 左边和下边的边框宽度设置为0 *//* border-bottom: 0 solid blue;border-left: 0 solid green; *//* 1.只保留右边的边框有颜色 */border-color: transparent red transparent transparent;/* 2. 样式都是solid */border-style: solid;/* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */border-width: 100px 50px 0 0 ;}

CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化。

简单理解：CSS初始化是指重设浏览器的样式，也称CSS reset

每个网页都必须首先进行CSS初始化。

以京东CSS初始化代码为例：

/* 把我们所有标签的内外边距清零 */
* {margin: 0;padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {font-style: normal
}
/* 去掉li 的小圆点 */
li {list-style: none
}img {/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */border: 0;/* 取消图片底侧有空白缝隙的问题 */vertical-align: middle
}button {/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */cursor: pointer
}a {color: #666;text-decoration: none
}a:hover {color: #c81623
}button,
input {/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}body {/* CSS3 抗锯齿形 让文字显示的更加清晰 */-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;color: #666
}.hide,
.none {display: none
}
/* 清除浮动 */
.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0
}.clearfix {*zoom: 1
}

Unicode编码字体：

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效避免浏览器解释CSS代码时候出现乱码的问题。

比如：

黑体\9ED1\4F53

宋体\5B8B\4F53

微软雅黑\5FAE\8F6F\96C5\9ED1

CSS基础笔记（多看多记冲冲冲）相关推荐

妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
CSS基础笔记（w3school）
CSS 概述 CSS 基础语法 1.CSS语法 2.值的不同写法和单位 3.记得写引号 4.多重声明 5.空格和大小写 CSS 高级语法 1.选择器的分组 2.继承及其问题 3.友善地对待Netsca ...
前端 CSS 基础笔记
CSS入门一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet 层叠样式表是一组样式设置的规则,用于控制页面的外观样式二.基本用法 1.css语法 <hea ...
HTML+CSS基础笔记
PS基础前端需要的PS技能图片格式 PSD测量注意事项代码初识 background border padding margin 盒模型和结构样式常见文本设置 img a标签常见标签和SEO ...
02.CSS基础笔记及导入
CSS是什么 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS样式 CSS引 ...
html css基础笔记,学习html/css基础的重点笔记
1.权重问题内联样式表 > id选择符 > class选择符 > 类型选择符(所有html标签名称) 内联样式表 > 内部样式表.外部样式表内部样式表.外部样式表的权重与书 ...
html+css基础笔记_CSS样式_part1_2
1.CSS背景样式属性: background-color:背景色 background-image:背景图 url背景地址,默认水平垂直铺满背景图写法:background-image: url ...
CSS基础笔记——边框样式
在浏览网页的过程中,边框样式随处可见.几乎所有的元素都可以定义边框边框样式有三个属性想要为一个元素定义边框样式,必须要同时设置border-width.border-style.border-co ...
html，css基础笔记（一）
一．基本标签 2020年10月15日星期四 1.骨架:标签[元素/标记] 2.<!doctype html>–申明文档类型–HTML5 专业术语:DTD–文档定义类型[document t ...