CSS基础
CSS 引入方式
内联样式表
- 位置： 标签内部
- 优点： 优先级非常高
- 缺点： 冗余代码非常多,维护非常困难
- 使用场景： 针对个别特殊的样式进行修饰 内部样式表
- 位置：
head标签的内部<style></style> - 优点： 一定程度上实现代码和样式的分离 ,速度快，没有额外的服务器的请求压力
- 缺点： 造成单个页面体积过大, 代码较乱，前后端沟通困难
- 使用场景： 大型网站的首页 外部样式表
- 位置： head 标签的内部
<link rel="stylesheet" type="text/css" href ="文件路径" > - 优点： 复用性强，一个样式表可用于多个页面.维护方便，易于改变,代码简洁，易于分工协作
- 缺点： 容易混淆,会有垃圾代码,会造成服务器请求压力
- 使用场景： 公共样式的设计,大型网站的二三级页面. 引入方式的优先级问题
- 内联 > 内部 ？外部
- 如果优先级相同，谁后加载谁生效，如果优先级不同，谁优先级高的生效
CSS 选择器
选择器优先级问题
内联样式表 > ID 选择器 > 类选择器 > 标签名选择器
CSS 选择器（重要）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*标签选择器*/
div {
color: red;
}
/*类选择器*/
.i1 {
color: red;
}
/*ID选择器*/
#id {
color: red;
}
/*通配符选择器:不推荐使用，因为通配符需要检索的是全部的标签设置这一个内容，会将所有标签更改，非常影响效率*/
* {
margin: 0;
padding: 0;
}
/*相邻兄弟选择器：紧挨着`选择器1`的`选择器2`，CSS样式作用在`选择器2`*/
.i1+.i2 {
color: blue;
}
/*同级元素通用选择器：紧挨着`选择器1`的`选择器2`，CSS样式作用在`选择器2`*/
.i1~.i2 {
color: blue;
}
/*群组选择器*/
.i1,
.i2 {
color: red;
}
/*后代选择器:控制这连个需要是父子元素；后代同一选择器均会受影响*/
body .i2 {
color: red;
}
/*子代选择器:只选择儿子，而不选择孙子*/
body>.i2 {
color: red;
}
/*属性选择器*/
[class='i3'] {
color: red;
}
/*伪元素选择器*/
/*用于选取指定选择器的首行*/
.i3:first-line {
color: blue;
}
/*用于选取指定选择器的首字母。*/
.i3:first-letter {
color: green;
}
/*伪类的顺序应为：`link`->`visited`->`hover`->`focus`->`active`。*/
/*当鼠标悬停在某一内容之上触发；*/
.i3:hover {
color: orange;
}
/*未被访问的链接*/
.i3:link {
color: orange;
}
/*已被访问过的链接*/
.i3:visited {
color: orange;
}
/*鼠标点击的时候出发，按住时*/
.i3:active {
color: orange;
}
/*当获取焦点是触发 如果需要给`div`获取焦点，可以给`div`设置`<div tabindex='0'></div>`*/
.i3:focus {
color: orange;
}
/*在某一元素之前添加内容*/
.i3:before {
content: '添加内容A';
}
/*在某一元素之后添加内容*/
.i3:after {
content: '添加内容B';
}
/*选择器匹配父元素中的偶数个子元素*/
li:nth-child(2n) {
color: red;
}
/*选择器匹配父元素中的奇数个子元素*/
li:nth-child(2n-1) {
color: blue;
}
/*计数从最后一个开始*/
li:nth-last-child(1) {
color: orange;
}
/*匹配同类型中的第`2`个同级兄弟元素*/
li:nth-of-type(2) {
color: orange;
}
/*父元素标签内的第3个元素，其次这个元素必须是选中的`li`标签，否则无效*/
li:nth-child(3) {
color: orange;
}
/*选择父元素的第一个孩子*/
li:first-child {
color: orange;
}
/*选择父元素的最后一个孩子*/
li:last-child {
color: green;
}
</style>
</head>
<body>
<div id='i1' class='i1'>demo1</div>
<div class='i2'>demo2</div>
<div class="i3" tabindex='0'>demo3</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
CSS 常用样式属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.i1 {
/*设置文字字号 font-size：x-large,xx-large,x-small,xx-small, medium(默认文字大小16px文本如果不进行特殊设置默认16px,font-size是继承的属性*/
font-size: x-large;
/*设置文字颜色 color*/
color: orange;
/*
设置文字的修饰线 text-decoration
* underline下划线
* overline上划线
* line-through删除线
* none无—给超链接取消默认样式
* 闪烁线blink
*/
text-decoration: underline;
/*设置文字间距 letter-spacing*/
letter-spacing: 2em;
/*
设置文字首行缩进 text-indent;
* px 单位是像素，相对长度单位相对于显示器屏幕分辨率而言
* em 也是单位名称也是相对长度单位，相对于当前对象内的文本尺寸而言
* rem 相对长度单位 相对于根元素的文本字体尺寸大小
*/
text-indent: 1em;
/*
设置文字的大小写转换 text-transform
* uppercase 他将全部单词大写
* lowercase 他将全部单词小写
* capitalize 所有单词首字母大写
*/
text-transform: capitalize;
/*
设置水平对齐方式 text-align
* center left right
* text-align 针对的不是他本身而是针对具有内联元素特征的元素生效 （内联，内敛块）
*/
text-align: center;
/*设置文字行高 line-height*/
line-height: 70px;
/*
设置文字样式 font-style
* normal 正常
* italic 斜体字
* oblique 倾斜的文字
* italic失效的时候需要使用oblique替代，平时尽量使用italic
*/
font-style: oblique;
/*设置文字加粗 font-weight normal 正常 bold 加粗 bolder 更粗*/
font-weight: bold;
/*
设置字体样式 font-family
* 定义 用于某个元素的字体族的名称或者类族的名称的一个优先表 浏览器会使用他可识别的第一个值,每一个值使用，分割始终需要提供一个类族名称作为最后选择
* 黑体 SimHei 宋体 SimSun 华文行楷 STKaiti 微软雅黑 Mircosoft YaHei
* 最后填写一个通用字体 Helvetica
*/
font-family: SimHei SimSun;
/*
设置文字当中：英文：的显示方式 font-variant
* normal 普通
* small-caps; 英文全部变成大写并且以小字号显示
*/
font-variant: small-caps;
/*
visibility：规定元素内容是否可见
* 属性：hidden会让元素隐藏，会占据空间
* 属性：visible元素显示（默认）
*/
visibility: visible;
/*
overflow规定当内容超出conten时我们如何处理
* auto 超出滚动条显示，当内容超出元素区域的时候会出现滚动条（如果超出才会触发）
* scroll超出滚动条显示，当内容超出元素区域的时候会出现滚动条
* hidden超出内容，隐藏
* overflow:使用的时候需要注意两个问题
* 不同浏览器之间显示时可能存在差异，
* overflow兼容性很差，低版本内容可能不支持
*/
overflow: :auto;
/*
cursor:用于设置鼠标样式的属性
* text 文本输入
* move 移动光标
* pointer 手掌
* url() 自定义图片；推荐图片格式--.cur--图片分辨率需要在128*128之内
*/
cursor: pointer;
/*
让一个元素消失
* height: 0; 让元素消失，不会占据文档流空间
* display: none;让元素消失，不会占据文档流空间
* margin-left: -999999px;让元素消失，依旧占据文档流空间
* visibility:hidden; 让元素消失，依旧占据文档流空间布局是依旧会考虑该空间
*/
}
</style>
</head>
<body>
<div id='i1' class='i1'>demo1</div>
</body>
</html>
CSS 浮动
浮动：float:left/right/none;
特性：
- 会使元素脱离文档流（布局的时候不会再考虑）；
- 提升层级半级；
- 如果没有宽度，浮动元素的内容会去撑开宽度；
- 浮动元速度会使不支持宽高的元素，支持宽高；
- 浮动元素对后面与之相邻的下一个元素产生影响
浮动元素什么时候停止呢？
- 遇到父级的边框的时候
- 遇到另一个浮动元素的边框的时候
- 当一行内容放不下时，该元素会参考上一个元素的高另起一行；
如何清除浮动：高度塌陷问题；
- 给父级设置高度，
hight=300px缺点:拓展性太差； - 给父级设置浮动
float=left缺点：拓展性太差，本末倒置； - 给父级
overflow:hidden缺点：超出部分会被隐藏，兼容性差； - 给父级
display:inline-block缺点再次引发其他问题； - 使用clear清除浮动
clear:left/right/both/none缺点每一次都要确认清除的元素位置（找后一个） - 使用
:after伪类内部使用需要注意：1.content:'';2.clear：both;3.display:block;
封装：
<style>
.clearFIX:after{content:'';clear:both;display:block;}//清除浮动
.clearFIX{zoom:1;/倍率/}//触发IE6的hasLayout
<style>
<div style='width: 300px;background-color: green;' class='clearFIX'>
<div style='width: 30px;height: 30px;float: left;background-color: yellow;' ></div>
</div>
CSS 定位
position：static：默认，不定位
relative:相对定位top/left/right/bottom
- 特性：
- 对定位数值可以设为负数
- 设置偏移量为正值，则向相反方向移动；
- 同时设置
top&bottom bottom生效left&right right生效 - 相对定位的位移参考自身原始位置移动；
- 相对定位不会使元素脱离文档流（布局是还是需要考虑）
- 相对定位偏移的时候，属性会保留在初始位置，内容会进行偏移；
- 如果只设置相对定位，而不进行偏移的话，对当前元素本身没有任何影响
absolute:绝对定位top/left/right/bottom/z-index;
- 特性:
- 绝对定位会使元素脱离文档流；
- 提升层级一级；会同时压住属性和内容；
- 会使不支持宽高的元素从新支持宽高；
- 没有设置宽度的元素，会由内容撑开宽度；
- 我的绝对定位的位移实际上是参考与离它最近的设置了定位的父级；（
static无效）
fixed：固定定位top/left/right/bottom/z-index;
- 特征:
- 绝对定位的特性基本一致，区别：位移始终参考与浏览器界面的位置；
- 固定位置：
position:fixed;top:0;left:0;
z-index:专门用于控制层级的属性；
- 可以设置为负数—但是假如设为负数，无法响应任何点击事件；
- 透明度：
opacity透明度为：0-1描述上是不可继承的，实际测试是可继承的。- 替代透明度的方法，可以通过设置
rgba()来进行更替； - 阐述：
position：relative和position:absolute都可以改变元素在文档流中的位置，- 同时也会激活
top、right，bottom、left。 在未激活之前是可以设置的，但是界面无效果的， z-index未设置之 前，默认是auto网页看起来是二维的结构，但是实际上是存在一个Z轴的，Z轴的大小由z-index来决定。默认情况下，所有的元素都是处于z-index=0这一层的。内部元素去根据元素类 型（block、inline...）长宽，内边距外边距等内容来去排列在z-index=0这一层,但是绝对定位，能够使元素完全脱离文档流，不会在z-index=0这一层保留位置，但是相对定位不会使元素 脱离文档流，布局的时候依旧需要考虑。浮动不会让元素“上浮”到另一层，它实际上还是处于z-index=0这一层，但是它会改变正常的文档流的布局z-index=0这一层，也就是我们俗称的 文档流
定位的兼容性问题：
- 固定定位在
IE6中是不生效的 position:relative;在IE6,7下，父级的overflow包不住子级的relative处理方法，父级添加relative;position:absolute;在IE6下，定位元素的宽和高都是为奇数，在IE6下，定位元素的right和bottom会有1px的偏差；无法解决
CSS 盒模型详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.i1 {
/*
盒模型
盒模型划分：内容：content ；内边距： padding ；边框： border ；外边距： margin ；
盒模型：内容参数
基础属性：width：height
background-color 背景颜色
颜色的写法 英文单词 透明 transparent rgb（red,green,blue） 取值范围 0 - 255 rgba（red,green,blue,alpha） alpha 取值范围 0 ~ 1 .4 -> 0.4
常用的颜色简写: #ffffff -> #fff -> white #cccccc -> #ccc -> gray
background-image 设置背景图片 url(“ 图片的路径 ”)
background-repeat 背景图片的重复方式:repeat 横向纵向全平铺repeat-x横向平铺repeat-y纵向平铺no-repeat 不平铺;
background-position 背景图片的定位,值得书写方式： 数值 100px 100px 百分比30%30% 英文单词(常用) top上 right右 bottom下 left左 center居中
当只设置一个定位方向时另外一个数值默认center
background复合写法: 1.颜色 2.图片路径 3.定位 4.重复方式 ：background:red url("img/1.png") bottom no-repeat;
background-attachment： 设置背景图片是否随着界面滚动而滚动 属性 scroll滚动 默认值 fixed固定的 可能造成偏移
background-size 设置背景图片大小 background-size: 600px 300px;
背景尺寸:数值的填写：具体尺寸，百分比，英文，auto 默认尺寸；
cover等比例的覆盖，直至完全覆盖，背景图片可能超出容器
contain会将背景图片等比例缩放，宽度或者高度和父容器相等的时候停止背景图片不会超过父容器
background-clip：指定背景的绘制区域，将背景图片适当裁剪
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
决定背景图片的剪切范围
border-box:border+padding+content
padding-box:padding+content
content-box:content
background-origin：决定背景图片的填充的初始位置
border-box:以border作为起始位置
padding-box:以padding作为起始位置
content-box:以content作为起始位置
盒模型：边框参数
border-style：边框常用的样式 solid 实线: 四个方向 top right bottom left
* dashed（虚线—在大多数浏览器里面为实线）
* dotted（点线—在大多数浏览器里面为实线）
* solid （实线）double双实线(如果为1px为实线)
* none无边框
* hidden 隐藏（效果与“none”相同--样式冲突时使用隐藏）
* groove 3D凹槽边框
* ridge 垄状边框
* inset 内陷
* outset 外凸
border-width:thin medium thick 像素（px）
* border-width: 10px; 上右下左
* border-width: 10px 20px;上下左右
* border-width: 10px 20px 30px; 上 左右 下
* border-width: 10px 20px 30px 40px; 上 右 下 左
border-style: 边框颜色取决于border-color
border-color: color
border复合写法 宽度 样式 颜色border:1px dotted blue;
border-radius：设置圆角边框
* 数值1,数值2,数值3,数值4 前四个横向距离 数值5,数值6,数值7,数值8 后四个纵向距离
* 数值1,数值2,数值3,数值4 左上，右上，右下，左下
* 数值1,数值2,数值3 左上，右上左下，右下
* 数值1,数值2 左上右下，右上左下
* 数值1 左上右上右下左下
盒模型：margin和padding的特性
padding注：两个元素是父子关系，你需调整内容的位置的时候去使用paddiing,可以填充背景图片；
* 特性:
* padding 会撑大盒模型
* pddding 不能为负数
* padding 会显示背景图片
背景时期填充范围是整个盒模型的实际范围：content+padding+border
margin注：当两个元素是兄弟关系的时候推荐使用 margin;
* 特性：
* margin 不会占我们的盒子空间，他只会影响盒子的位置
* margin 不会填充背景图片
* margin 可以设置负数
盒模型：盒子阴影
E{box-shadow:inset x-offset y-offset blur-radius spread-radius color}
* box-shadow:inset 0px 15px 10px -15px #000;
换句说： 对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}
* 投影方式： 唯一值“inset"
* X轴偏移量 Y轴偏移量：偏移量可为负
* 阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
* 阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小
* 阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。
多重阴影
* 用它的好处是它支持逗号分隔语法，我们可以创建任意数量的投影
* box-shadow:0px 0px 0px 3px #bb0a0a,0px 0px 0px 6px #2e56bf, 0px 0px 0px 9px #ea982e;
盒模型：字体阴影：
text-shadow:10px 10px 50px black：X轴偏移量 Y轴偏移量 阴影模糊半径 阴影颜色
* X轴偏移量 Y轴偏移量：偏移量可为负
* 阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
* 阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。
盒模型问题：
background-color: red;background: url("img/1.jpg") no-repeat;当我设置 background-color 之后，在下面使用 background 的时候background 的背景颜色会失效、
background-origin失效问题：background-origin,设置背景图片初始位置；background-position；设置相对于初始位置的偏移量如果背景图片设置了background-attachment:fixed的时候background-origin:就会失效；
问题:边框数值的缺失 ：
* border-width: 如果缺失，可以显示属性 thin 细的边框 1px, medium 默认值 中等的边框 3px, thick 粗的边框 5px
* border-style：如果省略，无法显示
* border-color：如果省略，可以显示 显示的颜色是黑色
利用padding让div居中：
* 让子元素居中div_1{width:100px;height:100px;background:red;padding：100px;}：父级div_2{width:100px;height:100px;background:yellow;}
* 子级padding 可以撑大盒子的空间 四个方向 top right bottom left padding 不能为负数！
问题：当两个元素是兄弟是关系的时候：第一个元素的 margin-bottom 和第二个元素的 margin-top 会产生叠压（两者取最大值）
问题：当两个元素是父子关系的时候,子级元素的第一个元素的margin-top会传递给父级
* 解决方法：
* 给父级元素设置 border
* 给父级元素设置 overflow:hidden;
* 不要使用margin，而去使用padding注意盒子空间
*/
}
</style>
</head>
<body>
<div id='i1' class='i1'>demo1</div>
</body>
</html>
CSS ICE优先级计算原则
/*
* 继承权重0.001通配符
* 权重 0.1
* 标签选择器
* 权重1
* 类选择器
* 权重10
* ID选择器
* 权重100
* 内联样式表
* 权重1000
* 群组选择器与权重没关系
* 后代选择器权重相加（子代选择器）
* 注意：同级选择器的权重现价存在极限，不能越过更高级别的权重。
CSS DOM操作CSS样式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作CSS样式</title>
<style type="text/css">
#div1{
width: 300px;
height: 300px;
background: yellow;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2" style="width:200px;height:200px;background:red;">div2</div>
<script type="text/javascript">
/*
通过JS的DOM来动态的操作CSS样式
1、操作行内样式的属性
获得：元素.style.样式属性名 或 元素.style[样式属性名]
设置：元素.style.样式属性名 = 值
2、操作内部样式和外部样式
设置：元素.style.样式属性名 = 值
获得：
-- IE中：元素.currentStyle.样式属性名
-- 其他：window.getComputedStyle("元素", "伪类").属性名
不过一般伪类我们写成 null 即可。 只读的方式
*/
var div1 = document.getElementById("div1");
//获得内部样式的样式属性值
console.log(div1.style.width); //得不到
console.log(window.getComputedStyle(div1, null).width); //300px
//如果非要用style来获得内部样式或外部样式的属性值怎么办？
//先通过style去设值，在通过它就可以取了
div1.style.width = "100px";
console.log(div1.style.width);
// //获得行内样式
var div2 = document.getElementById("div2");
console.log(div2.style.width); // 200px
//遇到样式为 ： font-size 这种，在style的属性中变成 fontSize
div1.style.fontSize = "40px";
</script>
</body>
</html>
CSS 居中问题
关于页面中一直存在导航居中问题：
/*
方法一
margin:50% auto;
方法二
position:absolute;top:50%;left:50%;margin-top:'自身高度的一半';margin-left:'自身宽度的一半';
方法三：推荐使用第三种
margin:auto;position:absolute;top:0;left:0;right:0;bottom:0;
/*
行高问题
如何让多行文字居中
- 父级：
display:table; - 子级：
display:table-cell vertical-align:middle;水平居中 text-align:centermargin-left:auto;margin-right:auto;垂直居中- 通过上下内边距相同实现
line-height:100px;height:100px让一个元素消失display:none;opacity:0height:0;vishbility:hidden;position:absolute; top:-9999pxposition:absolute; z-index:-9999pxmargin-left:-9999px
CSS 应用场景
标题小技巧：隐藏添加标题
h2{margin: 0;width: 0;height: 0;font-size: 0;padding: 200px;}
<h2>王王王王王</h2>
最小宽度
img{width: 100%;height: 100%;min-width: 500px;max-width: 800px;min-height: 500px;max-height: 800px;}
字体图标：可以使用字体来代替图片
- 网站下载一个矢量量图 www.iconfont.cn/collections…
- 将内部字体文件放入当前文件夹下
- 将 CSS 文件中的内容复制当前文件的样式表中
- 删除无关部分
- 设置类的名称，需要和上面的名称相同
<style type="text/css">
@font-face {
font-family: "iconfont";
src: url('font/iconfont.eot')format('embedded-opentype'),
url('font/iconfont.woff')format('woff'),format('truetype'),
url('font/iconfont.svg')format('svg');
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-gouwuchexuanzhong:before {
content: "\e650";
}
</style>
<div class="icon-gouwuchexuanzhong iconfont"></div>
外边框
outline最常使用的情况input{outline:none;}- 绘制在元素的周围，为了突出元素的一条线，常用于清除input的默认样式 注意
outline在css2中已经存在IE8下必须声明<！DOCTYPE html>才会生效outline不会占内容的位置
设置元素是否可拉伸 resize
属性
vertical竖直拉伸horizontal横向拉伸both竖直和水平都可以进行拉伸none不允许进行拉伸 注意- 当你的内容需要拉伸的时候，需要配合
overFlow：hidden；当这个内容两边的margin为auto的时候，它的拉伸会同时向两边一起 拉伸 firefox 4.0 + & chrome & safari中才会生效
无限的优先级
- 在样式后面添加
!importment div{background:blue!important;}
怪异盒模型
- 用于设置 普通盒模型 和 怪异盒模型 的属性
box-sizing属性content-box正常的盒模型width指的是内容的宽度border-box怪异盒模型width指的是border + padding + width
雪碧图应用原理：
将我们的默认状态图片和滑动状态图片合并成一张图片,background-image，在滑动的时候利用background-position去更改定位位置，我们称这种技术 称为图片翻转技术，演化到最后就是我们的 CSS sprite
优点
减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量
示例
.div_1{
width: 46px;height: 46px;
background-image: url("img/1.png");background-repeat: no-repeat;background-position: -102px 0px;
}
.div_1:hover{
background-position: -204px -54px;
}
ICON浏览器图标：页面标题图片
具体写法（以下两条均写）
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="bookmark" href="/favicon.ico" type="image/x-icon" />
制作方法
推荐大小:16*16 或者 32*32
服务器端字体
font-face中的src可以存放多个路径，中间用，隔开,为了同时设置多个格式
推荐格式 ttf svg woff eot
@font-face {
font-family:"iconfont";src:url("font_bab.ttf") ;
}
div {
font-size:200px;font-family:"iconfont";
}
欢迎大家批评指正！~
