前端学习之CSS模块

CSS基础语法

CSS基本样式

基本样式

内联样式与内部样式

外部样式及两种写法

CSS中的颜色表示法

CSS背景样式

CSS边框样式

CSS文字样式

字体大小粗细样式

CSS段落样式

CSS复合样式

CSS选择器

ID选择器

Class选择器

标签群组通配等选择器

层次选择器

属性选择器

hover等伪类选择器

after等伪类选择器

结构伪类选择器

CSS样式继承

单一样式的优先级

important群组等优先级

编辑

层次优先级

CSS盒子模型

盒模型之margin叠加问题

盒模型之margin传递问题

CSS盒子模型扩展

标签分类

按类型划分标签

按内容划分标签

按显示划分标签

显示框类型

display显示框类型

标签嵌套规范

overflow溢出隐藏

透明度与手势

最大最小宽高

CSS默认样式

CSS重置样式(CSS reset)

Photoshop工具

png等图片的切图流程

float浮动

概念及其原理

float注意点整理

清除float浮动

relative相对定位

absolute绝对定位

fixed和sticky以及z-index

sticky粘性定位

Z-index定位层级

定位实现下拉菜单

定位实现居中和装饰点

CSS添加省略号

CSS精灵（Sprite)

CSS圆角设置

注：HTML的相关部分已经在本人的另一篇文章记录完毕，这里主要用于记录本人在学习CSS时的相关笔记，谢谢！

CSS基础语法

css的基础语法可以大致写成这样：

选择器 { 属性1 ： 值1 ；属性2 ： 值2；}

在CSS的学习过程中，我们引入一个单位：px -->像素（pixel)，以及一个相对单位：%

在这里我们以一个简单的例子引入：

<head><style>div {width:100px;height:100;background-color: red;}</style>
</head>
<body><div>这是一个块</div>
</body>

他的显示效果是这样的：

CSS基本样式

基本样式

这里我们学习几个新的样式：

width:宽 height:高 background-color:背景色

CSS的注释：/* 内容 */ 快捷键分别是shift+alt+a与ctrl+/

内联样式与内部样式

内联（行内，行间）样式：在html标签上添加style属性来实现

内部样式：在style标签内添加的样式

注：内部样式的优点：可以复用代码

二者的区别：内部样式的代码可以复用，符合W3C的规范标准，尽量让结构与样式分开处理。

这里以代码做出相关说明：

 <head>      <style>div {width:100px;height:100px;background-color: red;} </style></head><body><!-- <div style="width:100px;height:100px;background-color:red">这是一个块</div> --><!-- <div style="width:100px;height:100px;background-color:red">这是另一个块</div> --><div>这是一个块</div><div>这也是一个块</div>

在这个部分，我们通过观察可以发现，通过内部样式，可以以更少的代码实现与注释部分内联样式同样的效果。

外部样式及两种写法

在这里我们通过引入一个外部的css文件来学习外部样式的书写

如何引用外部资源，在这里有两种方法：

1.通过<link>标签：

同时，这种方法需要学习两种属性：

rel：指定资源和页面的关系，他的样式属性比较多，可以自行查阅

href：资源的地址

上代码：

<head><link rel="stylesheet" href="E:\HTML\common.css">
</head>
<body><div>这是一个块</div>

2.通过@import：利用<style>标签，格式为：

@import url('目标路径')

CSS中的颜色表示法

CSS中常见的颜色表示法有三种，我们逐一介绍

单词表示法：red,bilue,green,pink,yellow……

十六进制表示法：#000000代表最小值，为黑色，#ffffff代表最大值，为白色

RGB三原色表示法：rgb（r值，g值，b值），取值范围为0-255

如何获取十六进制与三原色的相关数值呢？这里我们可以通过photoshop等相关工具得到，不过多解释。

CSS背景样式

background-color：背景颜色

background-image：背景图片

background-repeat：背景图片的平铺方式

background-position：背景图片的位置：x,y(number)

background-attachment：背景图片随滚动条的移动方式

默认情况下会水平垂直都铺满图片，在这种情况下就可以通过repeat改变方式，如：

repeat-x:x轴平铺 repeat-y:y轴平铺 repeat（x,y都进行平铺） no-repeat（x,y都不平铺）

对position的补充说明：除了通过number(px,%)的方式，还可以从left,center,right以及top,center,bottom的角度进行说明
对attachment的补充说明：scroll：是默认值，会让图片跟着鼠标滚轮移动，背景位置按照当前容器偏移。 fixed：背景位置按照浏览器显示范围便宜，目测很多网页的小广告都是这个属性！

下面上代码，举个书写方式的例子：

<style>body{ height: 2000px ;}/* 设置一个滚动条  */div {width:300px;height:300px;background-color: red;background-image: url(这里写目标图片的路径);background-repeat: no-repeat;background-position: 100px 50px;background-attachment: scroll;} /* 这个需要另外设置滚动条 */</style>

CSS边框样式

border-style：样式：solid实线，dashed虚线，dotted点线

border-width：大小：px

border-color：颜色：这里可以参考css中的颜色表示法，只特殊记录transparent：透明色

这里还可以对某一条边进行单独设计！下面直接上代码：

<style>/*  div{width:300px;height:300px;border-style: solid;border-color:red;border-width: 1px;}这是基础部分 */div{width: 300px;height: 300px;border-right-style:dotted ;border-right-width:10px; border-right-color:red ;border-top-style: dashed;border-top-width:15px;border-top-color: green;}  /* 针对不同的边可以分别更改样式 */</style>

下面是效果图：

CSS文字样式

font-family：字体类型

英文字体：Arial,'Times New Roman' 注：出现空格的整体用单引号引起来

中文字体：微软雅黑，宋体 注：中文字体也有英文名称

微软雅黑:Microsoft YaHei 宋体：SimSun

    <style>div{font-family: 宋体;}</style>

这里还要介绍衬线体与非衬线体

衬线体：端点有棱角，如宋体

非衬线体：字体平滑，如微软雅黑

非衬线体采用了扁平化设计，直观明了，是现在设计的潮流，具体可以参考谷歌公司的新旧图标！

字体大小粗细样式

font-size：字体大小，默认情况下为16px

写法：(number)px->推荐写法

其他写法：

xx-small：最小；x-small：较小；small 小；medium 正常；large 大； x-large：较大；xx-large：最大

font-weight：字体粗细

两种：正常(normal)，加粗(bold)

写法除了：单词（normal,bold）外，还可以number(100,200……900）其中100-500为正常，600-900为加粗

font-style：字体样式

模式：正常(nromal) 斜体(italic)

写法：单词(normal,italic)

注：oblique也表示斜体，但用的比较少

区别：1、italic：带有倾斜属性的字体才可以设置

2、oblique：不带倾斜属性的字体也可以设置倾斜操作

表示方法：(number)px

除此之外，还可以通过color更改字体颜色。

<head><style>div{font-size:30px;font-weight: bold;font-style: italic;}</style>
</head>
<body><div>这是一段文字</div><p>这是一段文字</p>

CSS段落样式

text-decoration:文本修饰

文本修饰包括：不装饰（none)，下划线(underline)，删除线(line-through)，上划线(overline)等

若想拥有多个文本修饰，则在不同修饰之间用空格隔开

text-transform：文本大小写（针对英文）

取值：lowercase小写 uppercase大写 capitalize只针对首字母大写

text-indent：文本缩进

首行缩进

em单位：相对单位，1em永远与字体大小相同

text-align：文本对齐方式

文本对齐方式有这几种：left（左对齐），right（右对齐），center（居中），justify（两端对齐）

line-height：定义行高

我们知道，行高由上边距，字体大小，下边距组成，上下边距往往是等价关系

默认行高并不是固定值，而是随字体大小的变化而变化的

取值：line-height:number(px)或者scale(比例值）

特别注意：在这里要与font-size区分开，line-height不会改变字体大小！

letter-spacing：定义字间距

word-spacing：定义词间距（针对英文）

取值：number(px)

<head><style>p{width:300px;text-decoration: underline;text-indent: 2em;}</style>
</head>
<body><p>你拍一我拍一你拍一我拍一你拍一我拍一你拍一我拍一你拍一我拍一你拍一我拍一你拍一我拍一你拍一我拍一你拍一我拍一你拍一我拍一你拍一我拍一你拍一我拍一</p>
</body>

他的显示效果如下：

拓展：如何处理英文与数字不自动折行的问题？

强制拆行（针对英文）：

1、word-break：break-all（非常强烈的折行)

2、word-wrap：break-word(不那么强烈，会产生空白区域）

CSS复合样式

单一样式：一个CSS属性只控制一种样式

复合样式：一个CSS属性控制多种样式，复合的写法通过空格实现

常用的复合样式：

background:red url repeat 位置

border:1px red solid

以上两种写法不用关心取值的顺序，但下面的font有顺序，这里要特别注意

font:最少要有两个值:size和family

 <head>  <style>div{height:300px;width:300px;background:red url(添加背景图) repeat-x center center; border:2px green solid;font:30px 宋体； }</style>
</head>
<body><div>这是一段文字</div>
</body>

注：尽量不要混写，如果非要混写，那么一定先写复合样式，再写单一样式

CSS选择器

ID选择器

CSS：#elem{ }

HTML:id："elem"

<head> <style>#div1{background-color: blue;}#div2{background-color: red;}</style>
</head>
<body><div id="div1">这是一个块</div><div id="div2">这又是一个块</div>
</body>

注：1、在一个页面中，ID值是唯一的

2、命名规范：字母_-数字，且第一位不能为数字

3、命名方式：驼峰式：searchButton(小驼峰）SearchButton（大驼峰）后者并不推荐

下划线式：search_small_button

短线式：search-small-button

Class选择器

CSS：.elem{ }

HTML:class:"elem"

 <head>  <style>.box{background-color: red;}.content{font-size: 30px;}</style>
</head>
<body><div class="box">这是一个块</div><div class="box">这还是一个块</div><p class="box content">这是一个段落</p> <!-- class的复用 -->
</body>

注：1、class选择器可以复用

2、可以添加多个class样式

3、存在多个样式的时候，样式的优先级根据CSS决定，而不是在Class属性中的顺序。

4、便签＋类的写法

标签群组通配等选择器

一、标签选择器（TAG选择器）

CSS：div{ }

HTML：<div>

使用的场景：1、去掉某些标签的默认样式时

2、复杂的选择器：如层次选择器

二、群组选择器

CSS：div，p，span{ }

通过逗号的方式，给多个不同的选择器添加统一的CSS样式实现代码的复用

三、通配选择器：尽量避免使用通配选择器，因为此选择器会给所有标签添加样式

*{ }-->div,ul,li,p,h1,h2…………

使用场景：去掉所有标签的默认样式

<head><style>/* div{ background-color: red;  } *//* #text{background-color: red;} *//* .title{background-color: red;} */div,#text,.title{background-color: red;}/* 等效于上面三个修饰的效果 *//* *{ border:1px red solid;} 这个叫做通配选择器*/</style>
</head>
<body><div>第一个块</div><p id="text">这是一个段落</p><h2 class="title">这是一个标题</h2>
</body>

层次选择器

后代：M N

父子：M>N

兄弟：M~N

相邻：M+N

 <head>  <style>/* ul li{border: 1px red solid;}后代选择：在ul下去寻找li *//* ul>li{border: 1px red solid;} 父子选择：只选择孩子，不选择孩子的孩子*//* div~h2{background:red;)兄弟选择器：找到div下的所有h2 *//* div+h2{background:red;} 相邻选择器：找到div下的临近的一个元素*/</style>
</head>
<body><ul><li><li></li><li></li><li></li></li><li></li><li></li></ul><ol><li></li><li></li><li></li></ol><div>这是一个块</div><h2>这是一个标题</h2><p>这是一段话</p>

属性选择器

M[attr]：M元素选择指定为attr属性的集合

M[attr=（完全匹配）value]：M元素选择指定为attr属性与value值的集合

M[attr*=（部分匹配）value]：M元素选择指定为attr属性并且包含值为value的集合

M[attr^=（起始匹配）value]：M元素选择指定为attr属性并且起始值为value的集合

M[attr$=（结束匹配）value]：M元素选择指定为attr属性并且结束值为value的集合

M[attr1][attr2]（组合匹配）：M元素选择满足多个属性的集合

<head><style>/* div[class]{background: red;} *//* div[class=box]{background: red;}  *//* div[class*=search]{background: red;} *//* div[class^=search]{background: red;} *//* div[class$=search]{background: red;} *//* div[class][id]{background: red;} */</style>
</head>
<body><div>aaaaa</div><div class="box" id="elem">aaaaa</div><div class="search">aaaaa</div><div class="search-button">dddd</div><div class="button-search">ffff</div>
</body>

hover等伪类选择器

CSS伪类用于向某些元素添加特殊的效果，一般用于初始样式添加不上的时候，用伪类来添加。

其中:link是访问前的样式，:visited是访问后的样式， :hover是鼠标移动到显示的样式，:active是鼠标按下时显示的样式。

注：1、前两个样式只能针对a标签，后两个可以针对所有标签。

2、如果四个伪类都要生效，一定要注意顺序：LVHA（首字母）

3、一般网站只这样去配置：a{ } a:hover{ }，前者为初始样式，后者为hover样式

如：a{color:red;} a:hover{color:blue;}

 <head><style>div{width:200px;height: 200px;background-color: red;}/* div:hover{background-color: blue;}div:active{background-color: green;} */a:link{color: red;}a:visited{color: blue;}a:hover{color: yellow;}a:active{color: green;}/* 遵循顺序 */</style>
</head>
<body><div>11 </div><a href="这是一段链接"></a>
</body>

after等伪类选择器

:after与:before通过伪类的方式给元素添加文本内容，在这里要使用content属性

:checked、:disabled、:focus：针对表单关系，不单独介绍

<head><style>div:after{ content: "world";}/* 添加内容至元素内容后 */</style>
</head>
<body><div>hello</div>
</body>

结构伪类选择器

:nth-of-type( ) :nth-child( )

:first-of-type( ) :first-child( )

:last-of-type( ) :last-child( )

:only-of-type( ) :only-child( )

角标从1开始，区别于一些编程语言，1表示第一项。n表示从0~无穷大

思考：如何实现隔行换色？

可以设置角标为2n，代表偶数行，2n+1代表奇数行

type与child的区别在哪里呢？

type：类型：同一类型下的样式修改

child：孩子：同一级中不同样式均修改

 <head>   <style>/* li:nth-of-type(3){background: red;} *//* li:first-of-type{background: red;} *//* li:last-of-type{background: red;} *//*目标只有一个的时候才可以使用 li:only-of-type{background: red;} */</style>
</head>
<body><ul><li></li><li></li><li></li><li></li><li></li></ul>

CSS样式继承

文字相关的样式可以被继承，布局相关的样式不能被继承

<head><style>div{width:300px;height: 300px;border:1px red solid;color:red;font-size: 30px;}p{border:inherit}/* 文字想要继承布局样式需要额外设置继承属性inherit值 */</style>
</head>
<body><div><p>这是一个段落</p></div>
</body>

单一样式的优先级

style行间>id>class>tag>*>继承

相同样式的优先级：当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况

内部样式与外部样式：内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高

 <head>   <style>div{color:red}div{color:blue} </style>
</head>
<body><div>这是一个块</div>
</body>

important群组等优先级

注：不能针对继承属性进行优先级的提升

!important用于提升样式优先级，但并不是一种规范的方式，不建议使用，一般只用在样式非常复杂时

标签＋类与单类的优先级关系？标签＋类>单类

群组优先级：

群组选择器与单一选择器的优先级本质上相同，靠后写的默认优先级更高

<head><style>#elem{color:red !important}</style>
</head>
<body><div id="elem" style="color:blue;">这是一个块</div>
</body>

层次优先级

层次优先级有两种比较方法：

1、权重比较法

这里假设如下：
第一个：ul li .box p input{ }
第二个：.hello span #elem{ }
根据权重，我们可以知道，第一个权重数值相加为14
第二个权重数值相加为111，所以第二个优先级更高

2、约分比较法

这里假设如下：
第一个：ul li .box p input{ }
第二个：.hello span #elem{ }
ul与span级别相同，约掉
.hello与.box级别相同，约掉
上方还剩li p input{ }，权重数值为3
下方还剩#elem，权重数值为100，所以第二个优先级更高

CSS盒子模型

组成：content（物品）-->padding（填充物)-->border(包装盒）-->margin（盒子与盒子之间的距离）

content：内容区域 width与height组成

padding：内边距也叫内填充(left right top bottom)可以对左边这四个值进行单独设置

只写一个值：30px（上下左右）写两个值：30px 40px（上下，左右）还可以写四个值（上右下左）注：单一样式只能写一个值

margin：外边距也叫外填充(left right top bottom)

写法与padding相同

注意：1、背景颜色会填充到margin以内的区域（不包括margin区域）

2、文字会显示在content区域

3、padding不能为负数，但margin可以为负数

<head><style>#box{ width: 200px;height: 200px;background: red;border: blue solid;padding: 30px;margin: 10px;}#box2{width: 200px;height: 200px;background: yellow;}</style>
</head>
<body><div id="box">这是一个盒子</div><div id="box2">这又是一个盒子</div>

box-sizing改变盒子模型

box-sizing（盒尺寸）属性允许您以特定的方式定义匹配某个区域的特定元素。取值为content-box（默认值）或者 border-box（content,padding,border)

正常情况下height与width作用于content区域，但在改变展示形态后可以作用于其他区域。

使用场景：1、不用再去计算一些值

2、解决一些百分比的问题

 <head><style>#box{ width: 200px;height: 200px;background: red;border:10px  blue solid;padding: 30px;margin: 50px;box-sizing:border-box;}</style>
</head>
<body><div id="box">这是一个盒子</div>

盒模型之margin叠加问题

当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题，这个问题只有上下有，左右没有。当上下margin都存在的时候，会取上下中值较大的作为叠加的值

解决方案：1、BFC规范 2、想办法只给一个元素添加间距

  <head><style>#box{ width: 200px;height: 200px;background: red;margin-bottom: 30px;}/* 最后上下margin以大的为最后叠加的值，较小的值不做讨论，没有实际效果 */#box{ width: 200px;height: 200px;background: blue;margin-top: 20px;}</style>
</head>
<body><div id="box1">这是一个盒子</div><div id="box2">这是一个盒子</div>

盒模型之margin传递问题

margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，另外三个方向没有问题

解决方案：1、BFC规范 2、给父容器加边框 3、margin换成padding（父容器）

  <head><style>#box1{ width: 200px;height: 100px;background: red;padding-top: 100px}#box2{ width: 100px;height: 100px;background: blue;;/* margin-top: 100px; */}</style>
</head>
<body><div id="box"><div id="box2"></div></div>

CSS盒子模型扩展

margin自适应居中

扩展：1、margin左右自适应是可以的，但是上下自适应是不行的，后续学习中我们再来了解上下自适应

<head>    <style>#box{ width: 400px;height: 100px;background: red;margin:0 auto/* 实现左右居中 */;}</style>
</head>
<body><div id="box"></div>
</body>

不设置content的现象

扩展：宽高不设置的时候对盒子模型的影响：会自动去计算容器的大小，节省代码

 <head><style>#box1{height: 300px;width: 300px;background: red;}/* #box2{height: 100%;width: 100px;background: blue;color: white;padding-left: 30px;border-left: black solid;} */#box2{height: 100%;background: blue;color: white;padding-left: 30px;border-left: black solid;}</style>
</head>
<body><div id="box1"><div id="box2">  这是一段文字 </div></div>

标签分类

按类型划分标签

按类型

block:块:div,p,ul,li,h1……

1、独占一行

2、支持CSS里的所有样式

3、不写宽的时候与父元素的宽相同

4、所占区域是一个矩形

inline:内联:span,a,em,strong,img……

1、挨在一起的，并不是独占一行，可以形成并排的效果

2、部分样式不支持，比如：width,height,margin左右不支持，上下不支持,padding

3、不写宽的时候，宽度由内容决定

4、所占的区域不一定是矩形

5、当两个内联标签写完后中间会有个空隙：换行产生空隙，可以通过修改样式解决

inline-block:内联块:input,select……

1、挨在一起，但是支持宽高

2、既有块的特性（矩形），又有内联的特性（支持宽高，有空隙）

注：布局一般用块标签，修饰文本一般用内联标签

按内容划分标签

Flow：流内容（包含了下属所有内容，Metadata包含部分）

Metadata：元数据（部分感知）

Sectioning：分区

Heading：标题

Phrasing：措辞（包含下述Embedded）

Embedded：嵌入的

Interactive：互动的

按显示划分标签

替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容，如：input,img

非替换元素：将内容直接告诉浏览器，将其显示出来，如：h1,div,p

显示框类型

display显示框类型

block

inline

inline-block

none

     <style>div{width:100px;height: 100px;display: inline;background: red;}/* 不推荐这样做 */span{width:100px;height: 100px;display: block;background: red;}/* 不推荐这样做 */</style>

display:none与visibility:hidden二者均可以表示隐藏，区别在哪里呢？

使用display:none隐藏后，不占空间；使用visibility:hidden隐藏后，占空间。

标签嵌套规范

块标签可以嵌套内联标签

块标签不一定能嵌套块标签：如：p标签里面不能嵌套div标签

内联标签不能嵌套块标签：特殊的有，a标签

<a href="#"><div></div>   像这样的是正确的
</a>

overflow溢出隐藏

overflow有这么几个值：

visible:默认

hidden：隐藏多余的部分

scroll：添加滚动条

auto：自适应

x轴,y轴：overflow-x,overflow-y还可以针对两个轴分别设置

<head><style>
div{width: 300px;height: 200px;border: 1px black solid;overflow: scroll;}</style>
</head>
<body><div>溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏溢出隐藏溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏溢出隐藏</div>

透明度与手势

opacity:0~1，0表示透明(透明度为0也占空间），1表示不透明，0.5表示半透明（所有的子内容也会半透明化）

  <head>  <style>
div{width: 100px;height: 100px;background: red;opacity: 0.5;}</style>
</head>
<body><div>这是一个块</div><p>这是一个段落</p>

如何使我们的背景半透明化但是文字清晰呢？

在这里我们学习rgba这个属性。

rgba可以设置只针对背景（background），但opacity针对的是整体！

 <head> <style>
#div1{width: 100px;height: 100px;background: red;opacity: 0.5;}
#div2{width: 100px;height: 100px;background: rgba(255,0,0,0.5);;}</style>
</head>
<body><div id="div1">这是一个块</div><p>这是一个段落</p><div id="div2">这又是一个块</div>
</body>

透明度说完了我们来看看手势是什么：

cursor:

default：默认箭头

pointer：手型

move：移动

help：帮助

要实现自定义手势，首先你需要准备图片： .cur .ico/

cursor:url(目标路径/xxx.ico),auto;

最大最小宽高

min-width,max-width

min-height,max-height

注：强化对百分比单位的理解

%单位的换算：以父容器的大小进行换算

一个容器怎么适应屏幕的高度：容器加height：100%，来自于body，body也要100%，html类似

html,body{height:100%;}

.contrainer{height:100%;}

CSS默认样式

有些标签有默认样式，有些标签没有默认样式

没有默认样式：

div,span……

有默认样式：

body,h1……h6,p,ul,……

具体具备什么默认样式，我们可以通过浏览器的开发者工具来详细了解，这里不过多解释。

CSS重置样式(CSS reset)

简单的CSS reset：

*{margin:0;padding:0;} 优点：不用考虑哪些标签有默认的margin与padding 缺点：影响性能

ul{list-style:none;}

a{text-decoration:none;color:#666;}

img{display:block;} 文字对齐方式默认为：verlical-align:baseline，我们可以把最后改为 buttom解决问题，此类方法也推荐

问题的现象：原因是内联元素的对齐方式是按照文字基线对齐，而不是文字底线对齐

写具体页面的时候或一个布局效果的时候：

1、写结构

2、CSS重置结构

3、具体样式

Photoshop工具

组成：

菜单项

工具栏

辅助面板

图格式：

jpg：适合做风景色彩丰富的图像

png：做透明图推荐使用

gif：动图

注：psd：设计稿原件

如何快捷显示参考线：ctrl+r，或者鼠标拖拽

可以自行学习ps的相关操作，这里不过多讲解。

png等图片的切图流程

矩形选框选取区域（按住alt可以减少区域，shift增加区域，上下左右键进行微调）

利用参考线记录量取的位置，以便以后测量其他的值

ctrl+c：复制

ctrl+n：新建

ctrl+v：粘贴

导出，存储为web格式。

利用切片工具也可以完成上述操作

float浮动

概念及其原理

文档流：文档流是文档中可显示对象在排列时所占用的位置。

float特性

加浮动的元素，会脱离文档流，会延迟父容器靠左或者靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

取值：left right none（默认）

<head><style>body{border: 1px black solid;}#box1{width: 100px;height: 100px;background: yellow;float:left}#box2{width: 200px;height: 200px;background: red;}</style>
</head>
<body><div id="box1"></div><div id="box2"></div>

float注意点整理

只会影响后面的元素

内容默认提升半层

默认宽根据内容决定

换行排列（浮动元素在父容器当中排列不下的时候，就会折行排在下面）

主要给块元素添加，但也可以给内联元素添加

<head>   <style>body{border: 1px black solid;}#box1{width: 100px;height: 100px;background: yellow;}/* 下面的浮动不会影响上面的内容 */#box2{width: 200px;height: 200px;background: red;float: left;}#box3{width:300px;height:300px;background: blue;}#box4{height:10px;background: green;float: left;}/* 浮动的默认宽根据内容长度来决定 */</style>
</head>
<body><div id="box1"></div><div id="box2"></div><div id="box3">文字文字文字文字</div><!-- 内容默认高于背景 --><div id="box4">这个块没有宽度</div>
</body>

清除float浮动

上下排列：利用clear属性清除浮动：(left,right,both)

<head><style>#box1{width: 100px;height: 100px;background: red;float:left}#box2{width: 200px;height: 200px;background: blue;clear: left;}</style>
</head>
<body><div id="box1"></div><div id="box2"></div>

嵌套排列：

固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果

父元素浮动：不推荐，因为父容器浮动会影响到后面的元素

overflow：hidden(BFC规范），如果子元素想溢出，那么会受到影响

display：inline-block（BFC规范），不推荐，父容器会影响到后面的元素

设置空标签：不推荐，会多添加一个标签

after伪类：推荐，是空标签的加强版，目前各大公司的做法(clear属性只会操作块标签，不会影响内联标签）

relative相对定位

定位：css position属性用于指定一个元素在文档中的定位方式。top,right,bottom,left属性则决定了该元素的最终位置。

position取值：

static（默认）

relative

absolute

fixed

sticky

relative相对定位：如果没有定位偏移量，对元素本身没有任何影响

不使元素脱离文档流

不影响其他元素布局

left,right,right,bottom是相对于当前元素进行偏移的

<head><style>#box1{width: 100px;height: 100px;background: red;}#box2{width: 100px;height: 100px;background: blue;position: relative;left:100px;top: 100px;}#box3{width: 100px;height: 100px;background: yellow;}</style>
</head>
<body><div id="box1"></div><div id="box2"></div><div id="box3"></div>
</body>

absolute绝对定位

使元素完全脱离文档流（与浮动类似）

position: absolute;

是内联元素支持宽高（让内联具备块特性）

使块元素默认宽根据内容决定（让块具备内联的特性）

如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）

fixed和sticky以及z-index

fixed固定定位：（有些小广告就是利用这个实现的）

使元素完全脱离文档流

使内联元素支持宽高（让内联具备块特性）

使块元素默认宽根据内容决定（让块具备内联的特性）

相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响

sticky粘性定位

在指定的位置，进行粘性操作，需要配合位置使用

Z-index定位层级

默认层级为0

嵌套时候的层级问题

定位实现下拉菜单

  <head><style>*{margin: 0;padding: 0;}ul{list-style: none;}#menu{width: 100px;height: 30px;margin: 20px auto;border: 1px black solid;position: relative;}#menu ul{width: 100px;border: 1px black solid;position: absolute;left: -1px;top: 30px;background:white;display: none;}p{text-align: center;}#menu:hover ul{display: block;}#menu ul li:hover{background: grey;}</style>
</head>
<body><div id="menu">卖家中心<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li></ul></div><p>测试段落测试段落测试段落测试段落</p>
</body>

定位实现居中和装饰点

1、实现居中：

  <head><style>#box1{height: 300px;width: 300px;border: 1px black solid;position: relative;}#box2{height: 100px;width: 100px;background: red;position: absolute;left:50%;top: 50%;margin: -50px 0 0 -50px;}</style>
</head>
<body><div id="box1"><div id="box2"></div></div>
</body>

2、实现装饰点：

给li列表添加定位，可以添加伪类，这里不过多解释

CSS添加省略号

width：必须有一个固定的宽

white-space:nowrap：不让内容折行

overflow:hidden：隐藏溢出的内容

text-overflow:ellipsis：添加省略号

<head>   <style>#content{width: 200px;border: 1px black solid;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}</style>
</head>
<body><div id="content">测试文字测试文字测试文字测试文字</div>
</body>

CSS精灵（Sprite)

特性：CSS雪碧也叫CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面设计到的所有零星图片都包含到一张大图中去加载

好处：可以减少图片的质量，网页的图片加载速度块；减少图片的请求次数，加快网页的打开

CSS圆角设置

border-radius：给标签添加圆角

 /* #box{width: 200px;height: 200px;background: red;border-radius: 100px;} *//* #box{width: 200px;height: 200px;background: red;border-radius: 10px 20px;} *//* #box{width: 200px;height: 200px;background: red;border-radius: 10px 20px 30px 40px;}左上、右上、右下、左下 *//* #box{width: 200px;height: 200px;background: red;border-radius: 20px / 40px;}椭圆相切 */#box{width: 200px;height: 150px;background: red;border-radius: 150px 150px 0 0;}/* 半圆的绘制 */注意：如第一行100px就是⚪的半径，所以直径为200，这个⚪与我们的容器正好相切，正好形成一个⚪