经常查阅文档是一个非常好的学习习惯。
W3C : http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/
css样式编辑可分为：
- 行内样式：就是代码写在具体网页中的一个元素内；
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css行内样式</title>
</head>
<body>
<div style="width:100px;height:100px;background:red;"></div>>
</body>
</html>
- 内嵌式：就是在</head>前面写；
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css内嵌样式</title>
<style type="text/css">
#div{width:100px;height:100px;background:red;}
</style>
</head>
<body>
<div id="div"></div>>
</body>
</html>
- 外部式：就是引用外部css文件；
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css内嵌样式</title>
<link rel="stylesheet" type="text/css" href="ccss.css">
</head>
<body>
<div id="div"></div>>
</body>
</html>CSS文件
#div{width:50px;height:50px;background:pink;}CSS语法：
选择器{属性：值；}
- 标签{属性：值；}
- #id{属性：值；} 只能使用一次
- .class{属性：值；} 可以使用多次
在上面的样式规则中:
1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;”进行区分。
可以用段落 和 表格的对齐的演示。
多类选择器：无先后顺序
<div class="pink fontWeight font20">亚瑟</div>
<div class="pink">伽罗</div>
<div class="pink font14">安其拉</div>
<div class="red font26">马可波罗</div>字体样式属性
- font-size:字号大小
font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。
- font-family:字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等
- font-weight:字体粗细
font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。
- font-style:字体风格
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。
平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。
- font:综合设置字体样式 (重点)
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
选择器{font: font-style font-weight font-size/line-height font-family;}
h1{
font: 400 25px "宋体";
/*font:12px "微软雅黑"*/
}CSS外观属性
- color：文本颜色
- line-height：行间距
- text-align：水平对齐方式
left：左对齐（默认值） right：右对齐 center：居中对齐
是让盒子里面的内容水平居中， 而不是让盒子居中对齐
- text-indent：首行缩进（2em为每段首行缩进两个字的宽度）
- text-decoration：文本的装饰
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。下划线 也是我们链接自带的 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
CSS注释
CSS规则是使用 /* 需要注释的内容 */ 进行注释的，即在需要注释的内容前使用 “/*” 标记开始注释，在内容的结尾使用 “*/”结束。
p {
font-size: 14px; /* 所有的字体是14像素大小*/
}CSS背景
- 背景颜色background-color：red；
- 背景图像background-image：url（背景图像位置）no-repeat；
- 背景平铺background-repeat：no-repeat；
repeat：（默认）背景图像在纵向和横向上平铺
no-repeat：背景图像不平铺（不重复）
repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向平铺
- 背景位置background-position：center top；
语法：
background-position : length || length； /*像素 x轴 y轴*/
background-position ：25px 100px; /*左移25px，向下移100px*/
background-position : position || position； /* 水平center left right，垂直 center bottom top*/
background-position ：right top; /*右上角*/position后面可以跟方位名词 他们之间没有先后顺序；
position后面也可以跟值 按照：x y ；的顺序；
也可混合使用 也是按照：x y ；的顺序；
- 背景固定background-attachment
语法：
background-attachment : scroll | fixed 参数：
scroll : 背景图像是随对象内容滚动 fixed : 背景图像固定
说明： 设置或检索背景图像是随对象内容滚动还是固定的。
- 背景简写background
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;背景渐变
在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件，比如说Photoshop，你对线性渐变并不会陌生。
兼容性问题很严重，我们这里之讲解线性渐变
语法格式：
background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；
background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....)；背景透明(CSS3)
CSS3支持背景半透明的写法语法格式是:red green blue alpha
background: rgba(0,0,0,0.3);最后一个参数是alpha 透明度 取值范围 0~1之间
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。
背景缩放(CSS3)
通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下：
a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多
c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */多背景(CSS3)
以逗号分隔可以设置多背景，可用于自适应布局 做法就是 用逗号隔开就好了。
- 一个元素可以设置多重背景图像。
- 每组属性间使用逗号分隔。
- 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
- 为了避免背景色将图像盖住，背景色通常都定义在最后一组上，
background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px ,
url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;
盒子模型（CSS重点）
其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
前端面试的时候，面试官可能会问到什么是盒子模型，上面就是答案。
盒子边框（border）
语法：
border : border-width || border-style || border-color ;
举例：
border: 1px dashed red;/*border-width border-style border-color*/
border-top: 1px dashed red; /*上边框*/
border-bottom: 1px dashed red; /*下边框*/
border-left: 1px dashed red; /*左边框*/
border-right: 1px dashed red; /*右边框*/
圆角边框(CSS3)
从此以后，我们的世界不只有矩形。radius 半径（距离）
语法格式：
border-radius: 左上角 右上角 右下角 左下角;
border: 1px; /*四个角都为1px圆角*/表格的细线边框
以前学过的html表格边框很粗，这里只需要CSS一句话就可以美观起来。
table{ border-collapse: collapse; } collapse 单词是合并的意思，border-collapse:collapse; 表示边框合并在一起。
内边距（padding）
padding属性用于设置内边距。 是指 边框与内容之间的距离。
padding-top: 1px; /*上内边距*/
padding-bottom: 1px; /*下内边距*/
padding-left: 1px; /*左内边距*/
padding-right: 1px; /*右内边距*/
padding: 1px; /*上下左右 内边距都为1px*/
padding: 1px 2px; /*上下1px 左右2px*/
padding: 1px 2px 3px; /*上1px 左右2px 下3px*/
padding: 1px 2px 3px 4px ; /*上1px 右2px 下3px 左4px 顺时针*/注意：padding会撑开带有 width 和 height 属性的盒子
- 我们要求这个 div 就是标准的 200 * 200；
- 加一个padding为20px的内边距就撑开了盒子了，变成了240*240的盒子；
- 保证盒子大小为 200 * 200，只需要将宽高设置为160*160，再加内边距20就可以了；
- 这个是宽高和内边距的算法，以后会经常遇到。
外边距（margin）
margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。
margin-top: 1px; /*上外边距*/
margin-bottom: 1px; /*下外边距*/
margin-left: 1px; /*左外边距*/
margin-right: 1px; /*右外边距*/
margin: 1px; /*上下左右 外边距都为1px*/
margin: 1px 2px; /*上下1px 左右2px*/
margin: 1px 2px 3px; /*上1px 左右2px 下3px*/
margin: 1px 2px 3px 4px ; /*上1px 右2px 下3px 左4px 顺时针*/
margin: 0 auto; /*上下0px 左右自动 水平居中对齐 auto自动充满*/注意：相邻外边距不能叠加，会自动合并；
文字盒子居中图片和背景区别
- 文字水平居中 text-align：center；
- 盒子水平居中 margin：0 auto；
- 插入图片 我们用的最多 比如产品展示类
- 背景图片我们一般用于小图标背景 或者 超大背景图片
清除元素的默认内外边距
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
盒子阴影
语法：
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;
box-shadow:1px 1px 1px 1px pink;水平阴影 正值右移 负值左移
垂直阴影 正值下移 负值上移
模糊距离 值越大越模糊
阴影尺寸 值越大尺寸越大
浮动（float）
CSS的定位机制有3种：普通流（标准流）、浮动和定位。
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
在CSS中，通过float属性来定义浮动，其基本语法格式如下：
选择器{ float:属性值; }| 属性值 | 描述 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
| none | 元素不浮动（默认值） |
浮动的目的 就是 为了让多个块级元素同一行上显示。
float 浮 漏 特
浮： 加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。
漏： 加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏 给了标准流的盒子。
特： 特别注意，首先浮动的盒子需要和标准流的父级搭配使用， 其次 特别的注意浮动可以使元素显示模式体现为行内块特性
清除浮动
本质：清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
方法：
clear属性用于清除浮动，其基本语法格式如下：
选择器{clear:属性值;} clear 清除
属性值：left right both- 额外标签法
通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>
- 父级添加overflow属性方法
可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。
- 使用after伪元素清除浮动
使用方法：
.clearfix:after { /*正常浏览器 清除浮动*/
content:"";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /*zoom 1 就是ie6 清除浮动方式 * ie7一下的版本所识别*/
}
<div class="father clearfix">
<div class="big"></div>
<div class="small"></div>
</div>- 使用before和after双伪元素清除浮动
使用方法：
.clearfix:before,.clearfix:after {
content:"";
display:table; /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}定位（position）
元素的定位属性
元素的定位属性主要包括定位模式和边偏移两部分。
1、边偏移
| 边偏移属性 | 描述 |
|---|---|
| top | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
也就说，以后定位要和这边偏移搭配使用了， 比如 top: 100px; left: 30px; 等等
2、定位模式(定位的分类)
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
选择器{position:属性值;}
position属性的常用值
| 值 | 描述 |
|---|---|
| static | 自动定位（默认定位方式） |
| relative | 相对定位，相对于其原文档流的位置进行定位 |
| absolute | 绝对定位，相对于其上一个已经定位的父元素进行定位 |
| fixed | 固定定位，相对于浏览器窗口进行定位 |
静态定位(static)
静态定位唯一的用处： 就是 取消定位。 position: static;
相对定位relative(自恋型)
对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。
注意：
-
相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
-
其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）
绝对定位absolute (拼爹型)
[注意] 如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。
当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
注意： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。
父级没有定位
若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。
父级有定位
绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
子绝父相
子级是绝对定位的话， 父级要用相对定位。
因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。
父盒子布局时，需要占有位置，因此父亲只能是 相对定位.
这就是子绝父相的由来。
绝对定位的盒子水平/垂直居中
普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了
定位的盒子也可以水平或者垂直居中，有一个算法。
-
1.首先left 50% 父盒子的一半大小
-
2.然后走自己外边距负的一半值就可以了 margin-left。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
.father{
position: relative;
background-color: #ccc;
width: 200px;
height: 200px;
}
.son{
position: absolute;
background-color: pink;
width: 100px;
height: 80px;
top: 50%;
left: 50%;
margin-top:-40px;/*高负数一半*/
margin-left: -50px;/*宽负数一半*/
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
固定定位fixed(认死理型)
固定定位是绝对定位的一种特殊形式，类似于 正方形是一个特殊的 矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
固定定位有两点：
-
1.固定定位的元素跟父亲没有任何关系，只认浏览器。
-
2.固定定位完全脱标，不占有位置，不随着滚动条滚动。
叠放次序（z-index）
当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。
比如： z-index: 2; font-weight: 700（与position一起使用）
注意：
-
1.z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
-
2.如果取值相同，则根据书写顺序，后来居上。
-
3.后面数字一定不能加单位。
-
4.只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
1602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
