H5基础_2_CSS

灵魂拷问：

浏览器能干什么？

我能让浏览器干什么？

前端开发：

• 一点点的空间想象力
• 一点点的小学数学知识
• 一点点的艺术鉴赏能力

CSS

CSS设计思想

html的局限性——主要做结构，显示元素内容

CSS——网页的美容师，CSS内容分两大部分： 选择器 属性值

CSS的引入方式

1 行内样式表

style=“ ”

2 内部样式表

3 外部样式表

CSS的三大特性

层叠性

​ 样式冲突，就近原则（后面的覆盖前面的）

​ 长江后浪推前浪，前浪死在沙滩上

​ （同一个类选择器内部）

继承性

子元素继承父元素的属性（子承父业）

子元素可以继承父元素哪些样式： text- font- line- 开头的属性以及color

font： 18px/1.5 行高是文字高度的1.5倍

优先级

根据权重值来匹配权重最高的属性，如果权重相同，按照层叠性来处理，后面的值覆盖前面的值

选择器	选择器权重
继承或者*	0 0 0 0
元素选择器	0 0 0 1
类选择器、伪类选择器	0 0 1 0
id选择器	0 1 0 0
行内样式style	1 0 0 0
！important	无穷大

复合选择器

权重可以叠加，永远不会进位 .nav .c1 > .nav li

元素显示模式

块元素 div p h ul

• 比较霸道，自己独占一行
• 可是设置高度，宽度，外边距和内边距都可以设置
• 宽度默认是容器的100%
• 是一个盒子，可以放任何元素

行内元素 span

• 相邻的行内元素在一行上
• 宽度和高度是无效的
• 默认宽度是他内容的宽度
• 行内元素只能容纳文本或其他行内元素

注意：a里面不能再放a了

a里面可以放块级元素

行内块元素：

input img td

• 和相邻元素在一行
• 默认宽度是它本身内容的宽度
• 可以设置高度、宽度

块级元素像男人，行内元素像女人。

元素显示模式总结：

块级元素像男人，是骨架，是山。 行内元素像女人，是血肉，是水。 一阴一阳之谓道！！！！

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个 块级元素	可以设置高度和宽度	父容器的宽度	可以包含任何标签
行内元素	一行可以放多个行内元素	不可以设置高度和宽度	默认是内容的宽度	容纳文本或其他行内元素
行内块元素	一行可以放多个行内块元素	可以设置高度和宽度	它本身内容的宽度

显示模式的转换：

元素显示模式可以通过display显示转换：

display: block

dispaly:inline

dispaly: inline-block

文字垂直居中的技巧： line-height = height（行高=盒子高度）

CSS选择器

标签选择器

类选择器

• 样式点定义，结构类调用，一个或多个，开发最常用

id选择器

• 样式#号调用，结构id调用，只能调用一次，别人切勿使用
• css一般和类选择器调用，js一般是id选择器搭配

通配符选择器

复合选择器

基础选择器进行排列组合，由两个或两个以上的基础选择器组成

后代选择器 (’ ')

ul li ul中所有的li后代（儿子，孙子都可以）

子选择器{>}

只能选儿子

.nav>a

并集选择器(,)

伪类选择器 （：）

伪类就是假的，可能是元素不同的状态，

链接伪类选择器：

a:link (选择所有未被访问的莲姐姐)

a:visited（所有已经访问的链接）

a:hover（鼠标位于其上的链接）

a:active（鼠标按下未弹起的链接）

:hover

为了确保生效，按照LVHA的顺序声明 lvha， lv 好

a链接在浏览器有默认样式，所以要在实际工作中给链接单独指定样式。

开发过程中一般先写个a，然后再写个a：hover

:focus 跟表单有关

:first-child

:last-child

:ntp-child

CSS内容样式

font样式

font-family: Microsoft Yahei, 可以多写几个，系统会自动从前往后匹配，如果都匹配不到，那么就用默认字体。

font-size = 16px;

font-weight: 700 (bold) normal =400 取值：100-900， 400 normal，700 bold 实际开发中更喜欢用数字来表示

font-style normal italic

font: (简写形式， size family) font: 16px/28px Mircosoft Yahei (字体16px，行高28ppx，字体是微软雅黑)

行高的另外一种写法：

font: 16px/1.5 表示行高是字体高度的1.5倍

text样式

1. 文本颜色： color=red
2. 对齐文本: text-align:center; 水平对齐 left，center，right
3. 装饰文本: text-decoration： none，underline，overline，line-through
4. 文本缩进: text-indent : 2em ; 缩进两个字符
5. 行间距: line-height: 26px;

图片格式

图片格式：

jpg： 高清，颜色多，产品类的一般用jpg格式

gif： 颜色比较少，256种颜色，透明背景，动画效果

png：比较清晰，颜色丰富，透明背景

psd： ps专用格式，可以用ps打开

ps切图，前端必备技能：

图层切图

切片切图

ps插件切图

CSS颜色

四种颜色的表示方法：

1. 预定义的颜色： blue red orange pink
2. 16进制： #ffffff #fff（简写）
3. rgb
4. rgba

CSS的背景

1. 背景颜色 background-color
2. 背景图片 background-image非常便于控制位置,可以用来放logo，大块区域的背景图，小块区域的图标等等
3. 背景平铺 background-repeat: repeat(默认值) no-repeat repeat-x repeat -y
4. 背景是否滚动 background-attachment : scroll | fixed
5. 背景图片的位置： background-position： x y;

​ xy: length 精确单位，如果只有x，那么y默认垂直居中

​ xy: 方位名词（left right center top bottom）如果指定方位名词，顺序可以颠倒 ，指定一个，第二个可以省略，默认center

​ 20px，center 可以混合写

背景复合写法

background：transparent none repeat scroll 0% 0%。

css3新属性： 最后一个是透明度0-1之间

背景色透明： background： rgba(0,0,0,0.5)

background： url（…） top（ 水平居中）

CSS布局

网页布局三大核心：盒子模型 浮动 定位

看透网页布局的本质： 网页由一个一个的盒子组成。

网页布局过程：

1 写好html代码

2 写CSS样式，然后摆放到相应位置（核心，难点）

3 往盒子里装内容

网页布局第一准则：父盒子标准流从上往下排列，子盒子浮动布局从左往右排列

网页布局第二准则： 先设计盒子大小，再设计盒子位置

普通流（标准流）： 块元素从上向下，行内元素从左向右布局

盒子模型

盒子指定的高度和宽度是盒子里面内容的高度和宽度，不是盒子实际占有的高度和宽度，所以在改变border，padding，margin的时候都会影响盒子大小。

盒子模型的4个组成部分： 边框，外边距，内边距，实际内容

既然叫盒子模型，可以认为盒子的边框是一个核心，以边框为核心，然后是内外边距。

border

border-weight

border-style ： solid dashed dotted

border-color: pink blue red

边框复合型写法 border: 5px dashed red;

border-top: (4个边框可以分开设置)

table 的边框：

border-collapse ：collapse （相邻的边框合并）

padding

什么情况下调整padding不改变盒子大小：

子元素不指定尺寸的话，默认宽度和父元素一样宽，此时加padding也不会超出父元素，不过一旦指定了宽度（包括100%）再给子元素指定padding，那么子元素就要超出父元素了。

margin

盒子居中对齐：

1 指定width 2. margin：0 auto；

行内元素和行内块元素水平居中： text-align: center

复合写法

border padding margin 都支持复合写法：

padding: 1px 四边内边距都是1px

padding: 1px 2px 上下为1px，左右2px

padding: 1px 2px 3px 上1px 左右2px 下 3px

padding: 1px 2px 3px 4px 上右下左（顺时针）

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

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

有三种解决办法：

1. 为父元素定义上边框。
2. 为父元素定义上内边距。
3. 为父元素添加overflow：hidden

还有其他办法： 比如浮动，固定，绝对定位的盒子不会有塌陷问题。

盒子样式

圆角边框

​ border-radius： 半径值。

​ 可以分别设置4个角，顺序分别是左上，右上，右下，左下

盒子阴影(盒子阴影不占用盒子空间)

​ box-shadow: 10px 10px 10px 10px rgba(0,0,0, 0.3)

盒子伪类

​ div:hover 任何一个盒子都可以加hover

文字阴影

​ text-shadow

CSS浮动

为什么需要浮动

标准流很难实现的布局：

• 1个盒子靠左，1个盒子靠右边
• 多个盒子一行排列

多个块级元素纵向排列标准流，横向排列找浮动

float： none left right

浮动的排列特性

1 浮动的元素会脱离标准流（脱标），不再保留原先的位置，其他标准流盒子会占有空出的位置。

2 浮动的元素一行显示，顶部对齐，左右没有内外边距

3 浮动的元素具有行内块元素的属性

所有元素都可以添加浮动。 如果行内元素加了浮动，可以直接赋值高度和宽度。

浮动布局一般和标准流一起使用： 父盒子标准流，子盒子浮动布局

浮动的注意点：

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

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

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

浮动的本质：

浮动流和标准流是两个图层，浮动流在标准流之上， 浮动元素所在的父盒子往往是个标准流的盒子，所以如果父盒子没有指定高度，那么父盒子必须要清除浮动，不然会影响后面标准流的布局。

清除浮动的本质是把浮动流合并到标准流，让浮动层的内容撑开标准流的父盒子。

---

为什么要清除浮动？

父盒子很多时候不方便给高度，需要由子盒子撑开，而子盒子如果浮动，那么父盒子的高度成了0， 造成布局混乱，为了解决这个问题，我们需要清除浮动。

如果父盒子有高度，不需要清除浮动。

clear:both

4种方法清除浮动：

1、额外标签法，在浮动子元素后面加一个块级元素如div

div style=“clear:both”

2、给父亲添加overflow

overflow: hidden (代码简洁，但是溢出的不显示)

3、给父亲加伪元素

​ .clearfix:after {

​ content: “”;

​ display: block;

clear: both;

​ height:0;

}

4、给父亲加双伪元素

​ .clearfix:after {

​ content: “”;

​ display: table;

​ }

​ .clearfix:after {

​ clear: both;

​ }

CSS定位

为什么要学习定位？

1 某个元素自由的在一个盒子内移动位置，并且压住其他盒子

2 滚动窗口的时候，某些窗口固定在网页中某个位置，不随页面滚动

这些通过标准流和定位都无法实现，只能通过定位

定位组成

定位=定位模式+边偏移

定位模式position： static relative absolute fixed sticky

边偏移： 距离父元素边线的距离（这四个属性只存在于定位中）top bottom left right

static 静态定位（了解）

默认的定位方式，也叫无定位，标准流方式，很少用到

relative 相对定位（重要）

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

元素在移动位置的时候，总是相对于它原来的位置来说的（自恋型）

虽然这个盒子走了，但是它之前的位置保留，不影响其他的盒子布局。（不脱标，它最典型的应用就是给绝对定位当爹的。。。）

absolute 绝对定位（重要）

绝对定位在移动位置的时候，是相对于祖先元素来说的（拼爹型）

绝对定位的特点：

1 如果没有祖先元素或者祖先元素没有定位，那么以浏览器（document)为准进行定位。

2 只要父亲有定位，固定，绝对，相对，那么子元素就会以最近的父元素来定位

3 绝对定位脱标 ，比浮动还要高

fixed 固定定位（重要）

1、以浏览器的可视区域为参照点移动位置。

• 跟父元素没有任何关系。
• 不随滚动条滚动。

2、不占有原先的位置，可以理解为一种特殊的绝对定位。

固定定位的另外一种用法：贴着版心固定位置。

核心代码：

.side {
    position: fixed;
    left:50%;
    margin-left:600px;(版心的一半宽度)
}

sticky粘性定位 （了解）

相对定位和固定定位的混合

选择器 {position:sticky;
		top:10px}

1 以浏览器的可视区域为参考点。（固定定位特点）

2 粘性定位占有标准流的位置 （相对定位的特点）

3必须添加top left right bottom其中一个才有效。

跟页面滚动搭配使用，兼容性较差。

可以这样理解：

边偏移是触发条件， 当达不到触发条件的时候，按照标准流显示。

达到触发条件后，图层提升，实现固定定位的效果。

注意： 因为这种效果兼容性比较差，所以不常用，网上我们看的类似效果大多用js实现。

定位总结：

定位模式	是否脱标	移动位置	是否常用
static静态定位	否	不能使用边偏移	不常用
relative相对定位	否	相对于自身偏移	常用
absolute绝对定位	是	相对于带有定位属性的祖先元素偏移（就近原则）	常用
fixed固定定位	是	相对于浏览器可视区域偏移	常用
sticky粘性定位	否	浏览器可视区	不常用

子绝父相（务必记住）

弄清楚这个口诀，就弄明白了子绝父相的由来。

1. 子级绝对定位，不会占有位置，可以放在父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
2. 父盒子需要加定位限制子盒子在父盒子内显示
3. 父盒子布局时要占有位置，所以要用相对定位。（相对定位不脱标）

简单一句话： 父亲要保留位置，儿子不需要位置。

定位叠放次序z-index

数值越大，距离我们越近，可以理解为海拔高度。

只有定位的盒子才有z-index。

绝对定位的盒子如何实现居中

首先left或者top设置为50%（确定中心点）

然后margin 给个负值。或者用transform：translate（）

定位特殊特性

绝对定位和固定定位和浮动类似

1 行内元素添加定位后，可以直接设置高度和宽度

2 如果块级元素不给高度和宽度，默认为内容大小

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

4 绝对定位会完全压住标准流的盒子

浮动只会压住盒子，不会压住盒子里的内容。

浮动的前生今世：

之所以浮动不会压住盒子里的内容，因为浮动最初的目的就是为了让文字环绕图片。后来才引申为布局。

网页布局总结

通过盒子模型我们知道html标签都是一个一个的盒子。

1 先用标准流按行摆放

2 行内元素用浮动来做

3 特殊需求定位来做。

通过浮动和定位，所有元素都变成了行内块元素。

网页布局口诀： 上下罗列盒子，左右浮动，定位点缀

深入学习之后发现，浮动有些不三不四，更像是一个过渡特性，实际上也确实如此，浮动最初是为了做文字环绕效果，后来慢慢演变成布局，其实一直到了flex算彻底解决了布局的问题。

元素的显示与隐藏

display：none （不保留位置）

隐藏元素，不占有原来的位置

display: block 和none相对

visibility（保留位置）

visible

hidden ： 元素隐藏，但是保留位置。

overflow（只针对溢出的部分）

hidden

scroll 显示滚动条

auto 溢出显示滚动条

一般情况，我们都不想把溢出的部分显示出来。

CSS高级技巧

精灵图sprites

为了有效的减少服务器接收和发送请求的次数，提高网页的加载速度，出现了CSS精灵技术

精灵图：多个小图片放在一张大图上

使用核心：

1 主要针对背景图片的小背景

2 主要借助于背景位置来实现 background-position

3 一般情况下精灵图都是负值

字体图标iconfont

字体图标的出现是为了代替精灵图。

字体图标展示的是图标，本质上是字体

字体图标的优点：

• 轻量级 比图片小，一旦字体加载了，图标马上渲染出来
• 灵活性： 本质上是文字，可以随意改变颜色，产生阴影，透明效果，旋转等
• 兼容性： 几乎支持所有的浏览器，放心使用

字体图标可以部分代替精灵图。

简单的小图标用字体图标，复杂的用精灵图。

下载字体图标

http://icomoon.io

IcoMoon成立于2011年，推出了第一个自定义图标字体生成器。

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

字体图标的使用：

1 将下载好的字体图标fonts目录复制到网页根目录下

2 在css中引入font-face

    <style>
  @font-face {
      font-family: 'icomoon';
      src:  url('fonts/icomoon.eot?hwrgfi');
      src:  url('fonts/icomoon.eot?hwrgfi#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?hwrgfi') format('truetype'),
        url('fonts/icomoon.woff?hwrgfi') format('woff'),
        url('fonts/icomoon.svg?hwrgfi#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }

.font {
    font-family: 'icomoon';
    font-size: 40px;
    color: blue;
}

3 、在html中引入字体， （打开demo文件，找到对应图标的值）

4、 在css中指定font-family

CSS实战技巧

页面布局的整体思路

1 必须确定页面的版心（核心区域）（确定宽度 1266，为了兼容）

2 分析页面的行模块，以及每行模块中的列模块（页面布局第一准则）

3、一行中的列模块采用浮动布局，确定每列的宽度、位置（网页布局第二准则）

4、制作HTML结构。先有结构再有样式，结构永远最重要。

5、先理清楚布局结构，再写代码。 这要靠经验积累。

一层层写，类似摆积木。

CSS属性书写顺序

1、布局定位属性：display position float clear visibility overflow (display第一个写，毕竟关系到显示模式)

2、自身属性 width height margin border padding background

3、文本属性 color font text-decoration text-align vertical-align white-space break-word

4、其他属性（CSS3）： content cursor border-radius box-shadow background:linear-gradient…

css代码初始化

不同的浏览器对元素的默认样式都有不同的规定，为了兼容性考虑，css一定要做初始化的操作

/* base.css */
/* 把所有的内外边距清零 */
* {
    margin: 0;
    padding: 0
}
/* 去掉斜体 */
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 {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* 抗锯齿性，让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    /* \5B8B\4F53  这个表示宋体，为了照顾某些浏览器不能兼容中文，用unicode编码表示 */
    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
}

核心板块类

w {
    width:1200px;
    margin: 0 auto;
}

导航栏写法

不要直接写a，用li包含a。 （不要把连接堆到一起，搜索优化）

.nav>ul>li>a

行内元素

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

如何让图片跟父盒子一样大

img { width:100%; height: 100%}

CSS三角的做法

三角的本质是一个实心盒子的边框, 另外三个边框透明，只保留一个有颜色，然后使用绝对定位。
选择器 {
    width: 0;
    height:0 ;
    border: 20px solid transparent;
    border-bottom-color: pink;
    line-height：0；
    font-size:0;
}

用户界面样式

鼠标样式cursor

cursor：

pointer 小手

move 移动

text 文本

not-allowed 禁止

表单元素的轮廓线 outline

input { outline: none}

textarea 禁止拖动：

textarea { resize:none}

textarea 尽量写在一行里，这里可以保证里面没有内容。

vertical-align

设置行内元素或者行内块元素 跟文字的垂直对齐方式

baseline 基线对齐

top 顶线

middle 中线

bottom 底线

多用于图片和文字垂直居中。

img {

vertical-align： middle；

}

图片底下有空白缝隙的解决方案

原因： 图片默认vertical-align为基线对齐，所以留下的空白缝隙是基线到底线的距离。

只要将图片的vertical-align 改为bottom middle任何一个即可

显示不开的文字用省略号代替

单行文本：

1. white-space: nowrap (强制一行内显示文本)
2. overflow: hidden; (溢出部分隐藏)
3. text-overflow:ellipsis (用省略号代替超出的部分)

多行文本

有较大兼容性问题，适合webkit内核

略

常见布局技巧

margin 负值

margin-left: -1; 实现两个盒子边框合并

让边框突出：

如果没有定位,添加 position=relative

如果 有定位： z-index =100

文字环绕图片的效果

浮动元素不会压住文字，父盒子用标准流，子盒子浮动，不会压住父盒子的文字。

行内块巧妙运用

大盒子添加text-align = center，大盒子里面的所有行内元素和行内块元素都水平居中。

答疑

为什么用不同的盒子，我只想用div？

标签都是有语义的，在合适的地方用合适的盒子

为啥那么多类名？

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

到底什么时候用margin什么时候用padding？

大部分情况两个可以混用，两者各有优缺点。根据实际情况，总有更简单的办法实现。

自己做没有思路？

布局有很多实现方式，可以先模仿，然后再慢慢摸索自己的风格

最后一定要多运用辅助工具，比如屏幕画笔，ps等等。