CSS笔记-上篇

作者: Scincyc | 来源:发表于2020-07-19 12:04 被阅读0次

1. CSS初识


CSS(Cascading Style Sheets)  层叠样式表（级联样式表）

用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样，还可以针对不同的浏览器设置不同的样式

2. 引入CSS样式表

2.1 内部样式表

get start


<head>

<style type="text/CSS">

    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

</style>

</head>

一般写在head头部标签中，其他位置也可
style标签不可省，type属性在html5中可以省略

2.2 行内样式（内联样式）

get start


<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

style属性（行内样式）只对其所在的标签及嵌套在其中的子标签起作用

2.3 外部样式表（外链式）

get start


<head>

  <link href="CSS文件的路径"  rel="stylesheet" />

</head>

注意：

link 是单标签
link标签需要放在head中，三个属性如下：


href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径

type：定义所链接文档的类型，指定为“text/CSS”表示链接的外部文件为CSS样式表

rel：定义当前文档与被链接文档之间的关系，指定为“stylesheet”表示被链接的文档是个样式表文件

2.4 三种样式表总结（位置）

| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |

| ---------- | ------------------------ | ------------------------ | -------------- | ------------------ |

3. CSS样式规则

4. ⭐CSS基础选择器（重点）

4.1 标签选择器（元素选择器）

get start


标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者

元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }


<style>

    span{

        font-size: 150px;

        color: skyblue;

    }

</style>

把某一类标签全部选择出来

4.2 类选择器

get start


.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签调用    class=“类名”


<head>

        <meta charset="utf-8">

        <style>

        span {

        font-size: 100px;

        }

        .blue {

        color: blue;

        }

        .red {

        color: red;

        }

        .orange {

color: orange;

        }

.green {

color: green;

}

        </style>

    </head>

    <body>

    <span class="blue">G</span>

    <span class="red">o</span>

    <span class="orange">o</span>

    <span class="blue">g</span>

    <span class="green">l</span>

    <span class="red">e</span>

    </body>

优点

可以选择一个或者多个标签

小技巧


1.可以使用“-”为选择器命名

2.不建议使用“_”下划线来命名

　浏览器兼容问题 (比如使用_tips命名，在IE6是无效的)

　能良好区分JavaScript变量命名(JS变量命名常用“_”)

3.不要纯数字、中文等命名， 尽量使用英文字母来表示。

命名规范：见附件（Web前端开发规范手册.doc）

4.3 多类名选择器

get start


<div class="pink fontWeight font20">亚瑟</div>

<div class="font20">刘备</div>

<div class="font14 pink">安其拉</div>

<div class="font14">貂蝉</div>

注意


1. 样式显示效果 和html中类名顺序无关,和CSS样式顺序有关

2. 类名之间用空格隔开（只能有一个class属性，可以多个属性值）

4.4 id选择器

get start


#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

规定元素的id值是唯一的

4.5 id选择器和类选择器区别


最大的不同在于 使用次数上

类名选择器----姓名（可相同）

id选择器----身份证号（唯一）

4.6 通配符选择器

get start

匹配页面中所有的元素


* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

清除所有HTML标记的默认边距


* {

  margin: 0;                    /* 定义外边距*/

  padding: 0;                  /* 定义内边距*/

}

5. CSS字体样式属性

font-size

5.1 font-size:字号大小

get start


p{

font-size: 16px; /*别忘了px单位*/

}

属性值

相对长度单位：常用，推荐使用像素单位px
绝对长度单位：使用较少

font-family

5.2 font-family:字体

get start


p{

font-family:"微软雅黑";

}

属性值

有宋体、微软雅黑、黑体等，字体之间使用","隔开，若浏览器不支持第一个字体，则尝试下一个

常用技巧


1. 使用14px+

2. 使用偶数的数字字号（ie6等支持奇数会有bug）

3. 英文字体名必须位于中文字体名之前

4. 中文字体需要加""，英文字体不用（若字体名包含空格、#、$除外，例如font-family: "Times New Roman";）

5. 尽量使用系统默认字体

5.3 CSS Unicode字体


问题：xp 系统不支持 类似微软雅黑的中文

get start

方案一：使用英文来替代


font-family:"Microsoft Yahei";

方案二：在 CSS 使用 Unicode 编码来写字体名（此时浏览器是可以正确解析的）


font-family: "\5FAE\8F6F\96C5\9ED1";/*表示设置字体为“微软雅黑”*/

小技巧

可以通过escape() 来测试属于什么字体
尽量只使用宋体和微软雅黑中文字体

| 字体名称 | 英文名称 | Unicode 编码 |

| ----------- | --------------- | -------------------- |

| 宋体 | SimSun | \5B8B\4F53 |

| 新宋体 | NSimSun | \65B0\5B8B\4F53 |

| 黑体 | SimHei | \9ED1\4F53 |

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

| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |

| 隶书 | LiSu | \96B6\4E66 |

| 幼园 | YouYuan | \5E7C\5706 |

| 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |

| 细明体 | MingLiU | \7EC6\660E\4F53 |

| 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |

font-weight

5.4 font-weight:字体粗细

字体加粗：html中用 <b> 和 <strong> 标签，css用font-weight，但css没有语义

get start


font-weight:700;

属性值

normal、bold、bolder、lighter、100~900（100的整数倍）

小技巧


数字 400 等价于 normal，而 700 等价于 bold。  但是我们更喜欢用数字来表示。

font-style

5.5 font-style:字体风格

字体倾斜：html中用 <i> 和 <em>，css中用font-style

get start


font-style: normal;

属性值

normal：默认值，标准
italic：斜体
oblique：倾斜

小技巧


平时很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式

font

5.6 ⭐font:综合设置字体样式 (重点)

get start


选择器{

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

}

提示

使用font属性，不能更换顺序，各个属性以空格隔开
必须设置font-size和font-family属性，否则font属性不起作用

6. CSS外观属性

color

6.1 color:文本颜色

属性值

预定义的颜色值，如red，green，blue等
十六进制#rrggbb，最常用，如#FF0000（可缩写#F00）等
RGB代码，如红色为rgb(255,0,0)或rgb(100%,0%,0%)

注意

使用十六进制时，必须两两相同才可缩写（如#FF0001不可缩）
使用rgb的百分比，取值为0也不能省%，必须写为0%

line-height

6.2 line-height:行间距

设置行间距，行与行之间的距离，一般称为行高

get start


text-height: 20px;

属性值单位

像素px（常用），相对值em，百分比%

小技巧

一般情况下，行距比字号大7或8像素左右

text-align

6.3 text-align:文本水平对齐方式

设置文本内容的水平对齐，相当于html中的align

get start


text-align:center;

属性值

left：左对齐（默认值）
right：右对齐
center：居中对齐

注意：是让盒子内容水平居中，不是让盒子居中对齐（margin：auto）

text-indent

6.4 text-indent:首行缩进

get start


text-indent: 2em;

1em 就是一个字的宽度

属性值

可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%

允许使用负值, 建议使用em作为设置单位

text-decoration

6.5 text-decoration 文本的装饰

用于给链接修改装饰效果，html中有下划线标签<u><ins>，删除线标签<s><del>

get start


text-decoration：none;

属性值

| 值 | 描述 |

| ------------ | --------------------------------------------- |

| none | 默认。定义标准的文本 |

| underline | 定义文本下的一条线。下划线也是我们链接自带的 |

| overline | 定义文本上的一条线 |

| line-through | 定义穿过文本下的一条线 |

7. CSS复合选择器


由两个或多个基础选择器，通过不同的方式组合而成，更准确更精细的选择目标元素

7.1 交集选择器


标签连写，不能有空格

get start


div.one {   /*或者 div#two */

    ...

}

用的比较少，不太建议使用

7.2 并集选择器


逗号隔开 集体声明 相同样式时

get start


标签，.类名，#id{ ...和...的元素

样式

}


.one, p , #test {   /*.one 和 p 和 #test 三个选择器集体声明颜色为红*/

color: #F00;

}

7.3 后代选择器


外层标签前，内层标签后 空格分隔 选择子孙后代的

get start


.one p {    /*选择 类为one标签 的 所有p后代元素*/

    color: #F00;

}

7.4 子元素选择器


父前，子后 中间" > "连接 选取亲儿子的

get start


.demo > h3 {    /*选择 类为demo的标签 的h3亲子代元素*/

    color: red;

}

注意

符号">"两侧各保留一个空格

7.5 测试题


<div class="nav">    <!-- 主导航栏 -->

  <ul>

    <li><a href="#">公司首页</a></li>

<li><a href="#">公司简介</a></li>

<li><a href="#">公司产品</a></li>

<li>

        <a href="#">联系我们</a>

<ul>

    <li><a href="#">公司邮箱</a></li>

    <li><a href="#">公司电话</a></li>

</ul>

</li>

  </ul>

</div>

<div class="sitenav">    <!-- 侧导航栏 -->

  <div class="site-l">左侧侧导航栏</div>

  <div class="site-r"><a href="#">登录</a></div>

</div>

在不修改以上代码的前提下，完成以下任务：

链接登录的颜色为红色,同时主导航栏里面的所有的链接改为橙色 (简单)


.nav a{

    color:orange;

}

.site-r > a{

    color:red;

}

主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。（中等)


.nav, .sitenav{

    font-size: 14px;

    font-family: "微软雅黑";

    /* font: 14px "微软雅黑"; */

}

主导航栏里面的一级菜单链接文字颜色为绿色。（难)


.nav > ul > li > a{

    color:green;

}

7.6 伪类选择器

可以选择第1个，第n个元素，或者添加特殊效果

区分于类选择器


类选择器是一个点 .demo {} 

伪类是冒号  :link{}

链接伪类选择器

:link /* 未访问的链接 */
:visited /* 已访问的链接 */
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接 */

有顺序：lvha（记忆法：love hate）

get start


a {  /* a是标签选择器  所有的链接 */

    font-weight: 700;

    font-size: 16px;

    color: gray;

}

a:link {



}

a:visited {



}

a:hover {  /* :hover 是链接伪类选择器 鼠标经过 */

    color: red; /*  鼠标经过,由原来的灰变成红 */

}

a:active {



}

实际开发，常只用到a和a:hover

8. CSS注释


/* 需要注释的内容  */

get start


p {

  font-size: 14px;                /* 所有的字体是14像素大小*/

}

9. 快捷方式

生成标签直接输入标签名按tab键即可比如 div 然后tab 键，就可以生成 <div></div>
如果想要生成多个相同标签加上 * 就可以了比如 div*3 就可以快速生成3个div
如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
如果有兄弟关系的标签，用 + 就可以了比如 div+p
如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab 键就可以了

10. ⭐标签显示模式（display）

block

10.1 块级元素(block-level)


独占一行，可设置宽、高、对齐等属性

常见的块元素


<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>最典型🚩

块级元素的特点

（1）总是从新行开始

（2）高度，行高、外边距以及内边距都可以控制

（3）宽度默认是容器的100%

（4）可以容纳内联元素和其他块元素

注意

p、h1-h6、dt是文字类块级标签，里面不能放其他块级元素

inline

10.2 行内元素(inline-level)


靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽、高、对齐等属性

常见的行内元素


<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,span🚩

行内元素的特点

（1）和相邻行内元素在一行上

（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效

（3）默认宽度是它本身内容的宽度

（4）只能容纳文本或其他行内元素（a除外 a可以放块级元素）

注意

a里面不能再放链接，但可以放块级元素

10.3 块级元素和行内元素区别


块级元素的特点：

（1）总是从新行开始

（2）高度，行高、外边距以及内边距都可以控制

（3）宽度默认是容器的100%

（4）可以容纳内联元素和其他块元素


行内元素的特点：

（1）和相邻行内元素在一行上

（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素

inline-block

10.4 行内块元素（inline-block）

常见的行内块元素


行内元素中一些特殊的标签<img />、<input />、<td>，可以设置宽高和对齐属性

行内块元素的特点

（1）和相邻行内元素（行内块）在一行上,之间会有空隙（行内元素特点）

（2）默认宽度就是它本身内容的宽度（行内元素特点）

（3）高度，行高、外边距以及内边距都可以控制（块级元素特点）

display

10.5 标签显示模式转换 display

块转行内：display:inline;

行内转块：display:block;

块、行内元素转换为行内块： display: inline-block;

11. CSS书写规范

11.1 空格规范

【强制】选择器与 { 之间必须包含空格。


.selector { }

【强制】属性名与之后的 : 之间不允许包含空格， : 与属性值之间必须包含空格。


font-size: 12px;

11.2 选择器规范

【强制】当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行


/* good */

.post,

.page,

.comment {

    line-height: 1.5;

}

/* bad */

.post, .page, .comment {

    line-height: 1.5;

}

【建议】选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确


/* good */

#username input {}

.comment .avatar {}

/* bad */

.page .header .login #username input {}

.comment div * {}

11.3 属性规范

【强制】属性定义必须另起一行。


/* good */

.selector {

    margin: 0;

    padding: 0;

}

/* bad */

.selector { margin: 0; padding: 0; }

【强制】属性定义后必须以分号结尾。


/* good */

.selector {

    margin: 0;

}

/* bad */

.selector {

    margin: 0

}

12. 行高的测量

应用

使盒子中的文本垂直居中对齐

做法就是：文字的行高等于盒子的高度

get start


height: 50px;

line-height: 50px;

补充

line-height > height，则文字会偏下
line-height < height，则文字会偏上

13. CSS 三大特性

层叠继承优先级

13.1 层叠性


所谓层叠性是指多种CSS样式的叠加（就近原则）

注意

样式冲突，遵循就近原则
样式不冲突，不会层叠

13.2 继承性


书写CSS样式表时，子标签会继承父标签的某些样式（子承父业）

注意

不是所有样式都继承（text-，font-，line-开头的都可以继承，以及color属性）

13.3 优先级


定义CSS样式时，出现多个规则应用在同一元素上，考虑优先级

注意

子元素定义的样式会覆盖继承来的样式
行内样式优先级比选择器大
权重相同时，遵循就近原则（或者说排在最后的样式优先级最大）
!important命令优先级最大

CSS特殊性（Specificity）


关于CSS权重，需要公式计算，称为CSS 特性（CSS Specificity）

1、specificity用4位数字串(CSS2是三位)表示，值从左到右，左最大

| 继承或者* 的贡献值 | 0,0,0,0 |

| ---------------------------- | -------- |

| 每个元素（标签）贡献值为 | 0,0,0,1 |

| 每个类，伪类贡献值为 | 0,0,1,0 |

| 每个ID贡献值为 | 0,1,0,0 |

| 每个行内样式贡献值 | 1,0,0,0 |

| 每个!important贡献值重要的 | ∞ 无穷大 |

2、权重是可以叠加


div ul  li  ------>      0,0,0,3

.nav ul li  ------>      0,0,1,2

a:hover      -----—>      0,0,1,1

.nav a      ------>      0,0,1,1 

#nav p      ----->      0,1,0,1

注意

数位之间没有进制

0,0,0,5 + 0,0,0,5 = 0,0,0,10 而不是 0,0,1,0，所以10个div也赶不上一个类选择器
继承的权重是 0

总结优先级

! important > 行内样式 > id选择器 > 类/伪类/属性/伪元素选择器 > 标签选择器 > 通配符选择器
同一类选择器则遵循就近原则


总结：权重是优先级的算法，层叠是优先级的表现

14. CSS 背景(background)

| background-color | 背景颜色 |

| ----------------------------------------------------------- | ---------------- |

| background-image | 背景图片地址 |

| background-repeat | 是否平铺 |

| background-position | 背景位置 |

| background-attachment | 背景固定还是滚动 |

| 背景的合写（复合属性） | |

| background:背景颜色背景图片地址背景平铺背景滚动背景位置 | |

background-image

14.1 背景图片(image)

get start


background-image : none | url (url)

参数

none : 　无背景图（默认的）

url : 　使用绝对或相对地址指定背景图像

background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。如果有背景图片平铺，则会覆盖背景颜色。

小技巧

提倡背景图url不要加引号url

background-repeat

14.2 背景平铺（repeat）

get start


background-repeat : repeat | no-repeat | repeat-x | repeat-y

参数

repeat : 　纵向和横向上平铺（默认的）

no-repeat : 　不平铺

repeat-x : 　横向平铺

repeat-y : 　纵向平铺

background-position

14.3 背景位置(position)


background-position : length || length

background-position : position || position

get start


background-position : bottom right; /*或者right bottom; 没顺序*/


background-position : 50px 12px; /*x坐标 y坐标 有顺序*/


background-position : 10px center;  /*有顺序*/

参数

length : 　百分数 | 由浮点数字和单位组成的长度值

position : 　top | center | bottom | left | right

说明

使用前必须先指定background-image属性
写方位名词position时没有前后顺序，写值length有先后顺序
若只写一个方位名词position，另一个默认center
默认(0% 0%)，若只指定一个值，该值用于横坐标（有顺序）。纵坐标默认50%

background-attachment

14.4 背景附着

设置背景图随内容滚动 / 固定

get start


background-attachment : scroll | fixed

参数

scroll : 　背景图像是随对象内容滚动

fixed : 　背景图像固定

background

14.5 背景简写

get start


background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

属性值顺序没有强制，建议:


background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

background

14.6 背景透明(CSS3)

get start


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

rgba中a是alpha透明度，取值0~1之间，0.3也可写成.3

注意：背景半透明是指盒子背景半透明，内容不影响

14.7 导航栏案例

使用技巧：在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。


<head>

        <meta charset="utf-8">

        <style>

body {

background-color: #000;

}

a {

width: 200px;

height: 50px;

/* background-color: orange; */

display: inline-block;  /* 把a 行内元素转换为行内块元素 */

text-align: center;  /* 文字水平居中 */

line-height: 50px;  /* 我们设定行高等于盒子的高度，就可以使文字垂直居中 */

color: #fff;

font-size: 22px;

text-decoration: none;  /* 取消下划线 文本装饰 */

}

a:hover {  /* 鼠标经过 给我们的链接添加背景图片*/

background: url(images/h.png) no-repeat;

}

        </style>

    </head>

    <body>

    <a href="#">专区说明</a>

    <a href="#">申请资格</a>

    <a href="#">兑换奖励</a>

    <a href="#">下载游戏</a>

    </body>

15. ⭐盒子模型（CSS重点）

css学习三大重点： css 盒子模型、浮动、定位

15.1 网页布局的本质


把网页元素比如文字图片等，放入盒子里，然后用CSS摆放盒子的过程就是网页布局

15.2 盒子模型（Box Model）


所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，每个矩形都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成

border

15.3 盒子边框（border）

1. 边框综合设置


border : border-width || border-style || border-color

| 属性 | 属性值 |

| --------------------------- | ------------------------------------------------------------ |

| border-style:上 [右下左]; | none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线 |

| border-width:上 [右下左]; | 像素值 |

| border-color:上 [右下左]; | 颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%) |

2. get start


/*单独属性*/

border-width: 1px;  /*宽度综合：上 [右下左] */

border-style: none; /*样式综合：上 [右下左] */

border-color: red;  /*颜色综合：上 [右下左] */

/*综合属性*/

border: 1px solid red;  /*边框综合：四边宽 四边样式 四边颜色 */

3. 盒子边框写法总结表

单独边框设置如下：

| 上边框 | 下边框 | 左边框 | 右边框 |

| :------------------------- | :---------------------------- | :-------------------------- | :--------------------------- |

4. get start


/*单独属性*/

border-top-width: 1px;  /*上宽度*/

border-top-style: none;

border-top-color: red;

/*综合属性*/

border-top: 1px solid red;  /*上边框*/

border-bottom: 1px solid red;   /*下边框*/

border-left: 1px solid red; /*左边框*/

border-right: 1px solid red;    /*右边框*/

5. 表格的细线边框

通过表格的cellspacing="0"，消除单元格之间的距离
但是单元格之间的边框重叠，导致边框变粗

解决方法：


table{

border-collapse: collapse; /*单元格相邻边框合并*/

}

6. get start


<style>

table {

width: 500px;

height: 300px;

border: 1px solid red;

}

td {

border: 1px solid red;

text-align: center;

}

table, td {

border-collapse: collapse;  /*合并相邻边框*/

}

</style>

padding

15.4 内边距（padding）

1. 内边距

设置边框与内容的距离


padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

注意：后面跟几个数值表示的意思是不一样的

2. get start

padding：四边边距


padding: 3px; /*上下左右都是3*/

padding: 上下边距左右边距


padding: 3px 5px; /*上下3 左右5*/

padding：上边距左右边距下边距


padding: 3px 5px 10px; /*上3 左右5 下10*/

padding:上内边距右内边距下内边距左内边距


padding: 3px 5px 10px 15px; /*上3px 右是5px 下 10px 左15px 顺时针*/

3. 内边距产生的问题


当盒子设置了width属性（前提）时，设置padding会改变盒子大小（撑大）

解决：


改变width值，减去相应内边距的值

4. 特殊情况（不改变盒子大小）

如果一个盒子没有给定宽度，则会和父亲一样宽，padding不会影响盒子大小

5. 元素实际大小 / 内盒尺寸

盒子实际大小 = content + padding + border
盒子高：border-top + padding-top +height + padding-bottom + border-bottom
盒子宽： border-left+ padding-left + width + padding-right + border-right

计算盒子宽高：


div {   /*盒子宽度为352px，高度为306px*/

    width: 200px;

    height: 200px;

    border: 1px solid #000000;

    border-top: 5px solid blue;

    padding: 50px;

    padding-left: 100px;

}

margin

15.5 外边距（margin）

外边距会在元素之间创建“空白”


margin-top:上外边距

margin-right:右外边距   /*margin-right: auto;右侧自动充满，即靠左*/

margin-bottom:下外边距

margin-left:上外边距

margin:上 右 下  左（同padding）

1. 实现盒子居中

需要满足两个条件：必须是块级元素 + 盒子必须指定宽度（width）
实现方法：给左右的外边距都设置为auto（工作常用）


.header{

    width:960px;

    margin:0 auto;

}

2. 文字、盒子居中

文字水平居中是 text-align: center
盒子水平居中左右margin改为auto


text-align: center; /*  文字居中水平 */

margin: 10px auto;  /* 盒子水平居中  左右margin 改为 auto 就阔以了 */

3. 图片和背景区别

插入图片比如产品展示类
背景图片用于小图标背景或者超大背景图片


img { 

width: 200px;/* 插入图片：更改大小width和height */

height: 210px;

margin-top: 30px;  /* 插入图片：更改位置通过margin或padding */

margin-left: 50px; /* 插入当图片也是一个盒子 */

}

div {

width: 400px;

height: 400px;

border: 1px solid purple;

background: #fff url(images/sun.jpg) no-repeat;

background-size: 200px 210px; /*  背景图片:更改大小只能用background-size */

background-position: 30px 50px; /* 背景图片:更改位置用 background-position */

}

4. 清除元素的默认内外边距


* {

  padding:0;        /* 清除内边距 */

  margin:0;          /* 清除外边距 */

}

注意：

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距

15.6 ⭐外边距合并

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

上下相邻的两个块元素，如果上面的元素有margin-bottom
下面的元素有margin-top，则他们的垂直间距是两者中的较大者，称外边距塌陷


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

2. 嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
父元素的上外边距与子元素的上外边距合并
合并后的外边距为两者中的较大者

解决方案：

为父元素定义1px的border-top或padding-top（缺点：增大了盒子）
为父元素添加overflow:hidden

其他方法，比如浮动、固定、绝对定位的盒子不会有问题...

15.7 content宽度和高度

width和height的属性值

不同单位的数值（最常用）
相对于父元素的百分比%

注意：

1、width和height仅适用于块级元素和行内块元素（img和input）

2、计算盒子模型的总高度时，应考虑盒子的垂直外边距合并的情况

15.8 盒子模型布局稳定性

按照优先使用width，其次使用padding，再margin


  width >  padding  >  margin

原因：

margin会有外边距合并，还有 ie6下margin 加倍的bug，所以最后使用
padding会影响盒子大小，需要进行加减计算（麻烦），其次使用
width没有问题，经常使用宽度剩余法高度剩余法来做

border-radius

15.9 圆角边框(CSS3)

get start


border-radius: 50%;  /*让正方形变成圆圈  radius 半径（距离）*/

/*类似padding*/

border-radius: 1px 1px 1px 1px; /*左上 右上 右下 左下（顺时针）*/

border-radius: 150px 0; /*左上右下 右上左下*/

box-shadow

15.10 盒子阴影(CSS3)


box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色  内/外阴影；

前两个属性必须写，其余可省
外阴影 (outset) 但是不能写默认想要内阴影 inset

get start


div {

    width: 200px;

    height: 200px;

    border: 10px solid red;

    /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */

    /* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */

    box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);

}

float

16. ⭐浮动(float)

16.1 CSS的定位机制


CSS的定位机制有3种：普通流（标准流）、浮动和定位

普通流(normal flow)：网页内块级元素正常从上到下，行内元素从左到右排列顺序
浮动(float)：让盒子从普通流中浮起来，用于让多个块级盒子一行显示
定位：将盒子定在浏览器的某一个位置

16.2 什么是浮动

设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程

语法


选择器{

float:属性值;

}

属性值

none 不浮动（默认）、left 向左浮动、right 向右浮动

16.3 浮动的作用

⭐让多个盒子(div)水平排列成一行
可以实现盒子的左右对齐等等（浮动只有左右浮动）
浮动最早是用来控制图片，实现文字环绕图片的效果

16.4 浮动的特性

get start


.box1 {

    width: 200px;

    height: 200px;

    background-color: rgba(255, 0, 0, 0.5);

    float: left;

}

.box2 {

    width: 150px;

    height: 300px;

    background-color: skyblue;

}

浮动(float)小结

浮：让盒子浮在标准流的上面（第二个标准流盒子跑到浮动盒子底下）
漏：不占有原来位置
特：使元素具有行内块特性，但元素之间没有空隙

16.5 ⭐浮动的应用

浮动和标准流的父盒子搭配

浮动是脱标的，会影响下面的标准流元素，需要给浮动元素添加一个标准流的父亲

应用案例

商品展示案例

导航栏案例

注意：实际导航栏中，用 li + a 的做法

li+a 语义更清晰，一看就是有条理的列表型内容
如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑，从而影响网站排名

16.6 浮动的扩展

1. 浮动元素与父盒子的关系


浮动的元素总是找它最近的父级元素对齐，不会超出内边距（不贴着父边框）

2. 浮动元素与兄弟盒子的关系


一个父盒子中，它的一个子级浮动，其他子级需要浮动，才能一行对齐显示（推荐使用）

在一个父级盒子中，如果前一个兄弟盒子是：

浮动，那么当前盒子会与前一个盒子顶部对齐
普通流，那么当前盒子会显示在前一个盒子的下方

17. 清除浮动

17.1 为什么要清除浮动

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

17.2 清除浮动的方法


选择器{

clear:属性值;  /*clear 清除  */

}

| 属性值 | 描述 |

| ------ | ------------------------------------------ |

| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |

| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |

| both | 同时清除左右两侧浮动的影响 |

但是我们实际工作中，几乎只用 clear: both;

clear

1. 额外标签法(隔墙法)

使用方法


在最后一个浮动标签后面添加一个空的标签

get start


...

<div style="float: left;"></div>

<div style="float: right;"></div>

<div style="clear:both"></div> <!--清除浮动-->

优点：通俗易懂，书写方便（W3C推荐）
缺点：添加许多无意义的标签，结构化较差

overflow

2. 父级添加overflow属性

使用方法


给父级添加 overflow为 hidden| auto| scroll

get start


.father {

overflow: hidden;

}

优点：代码简洁
缺点：内容增多时，导致溢出隐藏/生成滚动条

3. 使用after伪元素

*:after 方式为额外标签法的升级版，好处是不用单独加标签

使用方法


给父级添加clearfix样式类

get start


.clearfix:after {  /*用css在盒子最后生成了一个新标签*/

    content: "";

    display: block;

    height: 0;

    clear: both;

    visibility: hidden;

} 

.clearfix {

    *zoom: 1;

}  /* IE6、7 专用清除浮动 */

<>

优点：符合闭合浮动思想结构语义化正确
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout

4. 使用双伪元素

使用方法


伪元素用来插入新盒子

get start


.clearfix:before,.clearfix:after {

  content:"";

  display:table;

}

.clearfix:after {

clear:both;

}

.clearfix {

  *zoom:1;

}

优点：代码更简洁
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

5. 总结

| 清除浮动的方式 | 优点 | 缺点 |

| -------------------- | :----------------- | :--------------------------------- |

| 额外标签法（隔墙法） | 通俗易懂，书写方便 | 添加许多无意义的标签，结构化较差。 |

| 父级overflow:hidden; | 书写简单 | 溢出隐藏 |

| 父级after伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |

| 父级双伪元素 | 结构语义化正确 | 由于IE6-7不支持:after，兼容性问题 |

17.3 应用场景

满足以下3个条件时，使用清除浮动

父级没高度
子盒子浮动了
影响下面布局了

18. 版心和布局流程


“版心”(可视区) 是指网页中主体内容所在的区域。一般水平居中显示，常见宽度值为960px、980px、1000px、1200px等

18.1 布局流程

目的：为了提高网页制作的效率

确定页面的版心（可视区）
分析页面中的行模块，以及每个行模块中的列模块
制作HTML结构
CSS初始化，然后运用盒子模型原理，通过DIV+CSS布局来控制网页的各个模块

18.2 一列固定宽度且居中

最普通的，最为常用的结构


.top+.banner+.main+.footer

18.3 两列左窄右宽型

比如小米 <a href="http://www.mi.com" target="_blank"> 小米官网 </a>


.top+.banner+.main>.left+.right+.footer

18.4 通栏平均分布型

比如锤子 <a href="http://www.smartisan.com/" target="_blank"> 锤子官网 </a>

19. Photoshop基本使用

19.1 PS界面组成

显示隐藏标尺


ctrl + r        右击 标尺 --- 把里面的单位一律改为像素

取消选区


ctrl+ d  （矩形框测量宽高）

复制图层


  1、按ALT拖拽图像

  2、CTRL+J  （重合）

图层编组


选中目标图层，CTRL+G 

取消编组：CTRL+SHIFT+G

移动工具V选择组或图层时，需设置选项栏

图层上下位置移动


1、选中目标图层，在图层面拖拽

2、CTRL+]    向上移动图层

  CTRL+[    向下移动图层

3、CTRL+SHIFT+]  图层置顶

  CTRL+SHIFT+[  图层置底

移动选区或图像时


移动过程中，没释放鼠标，按住SHIFT，可同一水平线、同一垂线、45度移动

撤销操作


ctrl+z  撤销一步

ctrl+alt+z  撤销多步

19.2 Photoshop 切图

利用切片切图
利用PS的插件快速切图

1. 切片工具

1). 用切片选中图片

利用切片工具手动划出
图层菜单---新建基于图层的切片
利用辅助线来切图 -- 基于参考线的切片

2). 导出切片

文件菜单 -- 存储为web设备所用格式 ---- 选择我们要的图片格式 ---- 点存储 --- 别忘了选中的切片

2. 辅助线和切片使用及清除

视图菜单-- 清除辅助线/ 清除切片

3. 切图插件

Cutterman支持各种各样的图片尺寸、格式、形态输出，方便在pc、ios、Android等端上使用

官网: http://www.cutterman.cn/zh/cutterman

注意： cutterman插件要求ps 必须是完整版（窗口菜单>扩展功能>可以点开）

导出选中图层

导出选区

20. chrome调试工具

20.1 打开开发者工具

右键，选择 “检查” 快捷键 F12 或者 ctrl+shift+i

基本的结构布局是左边html 右边是 css

chrome调试数值

点击数值，上箭头调大数值，下箭头调小数值

快速定位css所在行数

右边css右侧显示

20.2 Chrome提示的常见布局错误

1). css单词书写错误提示

用下图所示的黑色箭头，点击我们需要的 html 元素。右边显示对应的css

2). css无显示

原因：声明类名和html调用名不一致或者 css文件引入不对或者这个样式的前面多余了一些符号影响的

3). html 标签不正确嵌套(重要)

左侧展开可以看到html 标签是否匹配

4). 通过颜色判断盒子

蓝色是盒子的宽度高度；青色是padding ；橙色margin 通过这个很方便的看到盒子范围

21. 定位(position)

目标

理解
- 能说出为什么要用定位
- 能说出定位的4种分类
- 能说出四种定位的各自特点
- 能说出我们为什么常用子绝父相布局
应用
- 能写出淘宝轮播图布局

21.1 CSS 布局的三种机制

💧网页布局的核心 —— 就是用 CSS 来摆放盒子位置。

💧CSS 提供了 3 种布局机制分别是普通流、浮动和定位

21.2 什么时候使用定位

标准流不能覆盖前面的元素，浮动不能覆盖图片和文字，最好通过绝对定位实现。

1. 小黄色块在图片上移动，吸引用户的眼球。（absolute）

2. 当我们滚动窗口的时候，盒子是固定屏幕某个位置的(fixed)

三种布局机制的上下顺序：

标准流在最底层 (海底) ------- 浮动的盒子在中间层 (海面) ------- 定位的盒子在最上层（天空）

21.3 定位详解

定位也是用来布局的

🌀 定位 = 定位模式 + 边偏移

21.3.1 边偏移

通过 top、bottom、left 和 right 属性定义元素的边偏移（方位名词），从而移动位置。

| 边偏移属性 | 示例 | 描述 |

| ---------- | :------------- | -------------------------------------------------------- |

| top | top: 80px | 顶端偏移量，定义元素相对于其父元素上边线的距离。 |

| bottom | bottom: 80px | 底部偏移量，定义元素相对于其父元素下边线的距离。 |

| left | left: 80px | 左侧偏移量，定义元素相对于其父元素左边线的距离。 |

| right | right: 80px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |

一般情况下，凡是有定位地方必定有边偏移。

21.3.2 定位模式 (position)

在 CSS 中，通过 position 属性定义元素的定位模式


选择器 { position: 属性值; }

| 值 | 语义 |

| ---------- | :----------: |

| static | 静态定位 |

| relative | 相对定位 |

| absolute | 绝对定位 |

| fixed | 固定定位 |

✧1. 静态定位(static) - 了解

静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none。
静态定位按照标准流特性摆放位置，它没有边偏移。
静态定位在布局时我们几乎不用的

✦2. 相对定位(relative) - 重要

相对定位是元素相对于它原来在标准流中的位置来说的。（自恋型）

效果图：

👉相对定位的特点：（务必记住）

相对于自己原来在标准流中位置来移动的
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

✦3. 绝对定位(absolute) - 重要

绝对定位元素相对带有定位的父级元素来移动位置（拼爹型）

完全脱标 —— 完全不占位置；
父元素没有定位，则以浏览器为准定位（Document 文档）。

父元素要有定位

将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

👉定位口诀 —— 子绝父相

子级是绝对定位，父级要用相对**定位。

❓疑问：为什么子绝父相？

┘分析┌

方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。
父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它。

如果父级盒子也使用绝对定位，会完全脱标，那么下方的广告盒子会上移，这显然不是我们想要的。

┘结论┌

父级要占有位置，子级要任意摆放，这就是子绝父相*的由来。

✦4. 固定定位(fixed) - 重要

固定定位是绝对定位的一种特殊形式（认死理型）

完全脱标 —— 完全不占位置；
相对浏览器的可视窗口

跟父元素没有任何关系；单独使用的
不随滚动条滚动。

补充：必须给宽度，盒子要居中margin设置无效，要 left: 50%; （屏幕的一半）transform: translateX(-50%);（盒子的一半）

提示：IE 6 等低版本浏览器不支持固定定位。

21.4 定位(position)的案例

21.4.1 哈根达斯

哈根达斯分析

一个大的 div 中包含 3 张图片；
大的 div 水平居中；
2 张小图片重叠在广告图片上方 —— 脱标，不占位置，需要使用绝对定位；
2 张小图片分别显示在左上角和右下角 —— 需要使用边偏移确定准确位置。

案例小结：

子绝父相 —— 子元素使用绝对定位，父元素使用相对定位；
与浮动的对比：

绝对定位：脱标，利用边偏移指定准确位置；
浮动：脱标，不能指定准确位置，让多个块级元素在一行显示。

课堂练习：模拟老师的随堂案例完成哈根达斯案例（5 分钟）。

21.4.2 仿新浪头部和广告

新浪案例分析

顶部图片固定在浏览器可视窗口顶部，不会随窗口一起滚动；
左右两侧的广告图片固定在浏览器可视窗口的左右两侧，不会随窗口一起滚动；
注意：底部的内容图片初始显示在顶部图片的下方，如何解决？

步骤1 顶部图片和底部内容


.top {

    /* 注意：使用固定定位时，如果盒子中没有内容，需要指定宽度 */

    width: 100%;

    height: 44px;

    background: url(images/top.png) no-repeat top center;

    position: fixed;

    left: 0px;

    top: 0px;

}

.box {

    width: 1002px;

    /* 顶部的 44px 的 margin 可以让 box 显示在顶部图片下方 */

    margin: 44px auto;

}

注意：

在使用固定定位时，如果盒子中没有内容，需要指定宽度
设置底部内容图片的顶部 margin，可以让底部盒子初始显示在顶部图片的下方。

步骤2 左右两侧广告


.ad-left,

.ad-right {

    position: fixed;

    top: 100px;

}

.ad-left {

    left: 0px;

}

.ad-right {

    right: 0px;

}

注意：不要同时使用 left 和 right 和边偏移属性。

案例小结：

固定定位的应用场景：固定在浏览器可视窗口某个位置的布局；
在使用固定和绝对定位时，如果盒子中没有内容，需要指定宽度（稍后就讲）。

练习：模拟完成仿新浪头部和广告案例。

21.5 定位(position)的扩展

21.5.1 绝对定位的盒子居中

👉注意：绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。

👉要想实现水平居中，算法如下：

left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
margin-left: -100px;：让盒子向左移动自身宽度的一半。

👉练习：实现盒子在父盒子中的左中、右中、中上、中下、中中定位

21.5.2 堆叠顺序（z-index）

👉在使用定位布局时，可能会出现盒子重叠的情况，默认后来者居上。

加了定位的盒子，默认后来者居上。

👉应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。
z-index 的特性如下：

属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
如果属性值相同，则按照书写顺序，后来居上；
数字后面不能加单位。

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

21.5.3 定位改变display属性

display 是显示模式，可以改变显示模式有以下方式:

可以用inline-block 转换为行内块
可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块。

所以，一个行内的盒子，如果加了浮动、固定定位和绝对定位，可以给这个盒子直接设置宽度和高度等。

👉注意：

浮动、绝对、固定定位元素的都不会触发外边距合并的问题。（我们以前是用padding border overflow解决的）

21.6 综合演练 - 淘宝轮播图

圆角矩形设置4个角

圆角矩形可以为4个角分别设置圆度，但是是有顺序的


border-top-left-radius:20px;

border-top-right-radius:20px;

border-bottom-right-radius:20px;

border-bottom-left-radius:20px;

如果4个角，数值相同
```
border-radius: 15px;
```
里面数值不同，我们也可以按照简写的形式，具体格式如下:


border-radius: 左上角 右上角  右下角  左下角;

还是遵循的顺时针

21.7 定位小结

| ---------------- | -------------------- | :--------------------- | ------------------ | ------------------------ |

注意：

边偏移需要和定位模式联合使用，单独使用无效；
top 和 bottom 不要同时使用；
left 和 right 不要同时使用。

21.8 学成网定位总结添加

👉tip：网页缩放时，侧边固定栏会贴着版心缩放，算法如下：

21.9 网页布局总结

一个完整的网页，有标准流、浮动、定位 一起完成布局的。

1). 标准流

可以让盒子上下排列 或者 左右排列的

2). 浮动

可以让多个块级元素一行显示 或者浮动的盒子左右排列

3). 定位

有层叠的概念，让多个盒子前后叠压，但每个盒子要测量数值。