css 总结2：
一：css的引入：
1，行内引入样式
行内式是在标记的style属性中设定css样式。不推荐使用
案列：<p style="color: red">Hello world</p>
2，内部样式
是将css标签集中写在<head></head>标签对的<style></style>标签中
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
}
</style>
</head>
3，外部样式 最标准的写法，推荐使用
就是将css写在一个单独的文件中，让后在页面中映入即可
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
二，css选择器
css选择器一
选择器优先级
1.选择器相同的情况下:就近原则
2.选择器不同的情况下:
行内>id选择器>类选择器>标签选择器
三，css属性相关
1，宽和高：
width属性可以为元素设置宽度
height属性为元素设置高度
2，字体属性：
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值
案列：body {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
字体大小：font-size：14px
字重（粗细）：font-weight 用来设置字体的字重（粗细）
字体颜色： 1，十六进制值 - 如: ＃FF0000
2，一个RGB值- 如: RGB(255,0,0)
3，样色单词：如 color: red; red就是字体颜色为红色
4，rgba(255,0,0,0.3) 最后一个参数表示透明度，范围是0.1—1；
3，文字属性 text-align
1，文字对齐：
text-align 属性规定了文本的对齐方式，水平对齐方式
text-align:left; 左对齐 默认为左对齐
text-align: right; 右对齐
text-align:center: 居中对齐
text-align:justify; 两端对齐
4，文字装饰
text-decoration 属性用来给文字添加特殊效果
none: 默认。定义标准的文本
underline 定义文本下的一条线
overline 定义文本上的一条线
line-through 定义穿过文本下的一条线
inherit 继承父元素的text-decoration属性的值
常用的为去除a标签默认的自划线 *******
a{text-decoration:none}
首行缩进
p { text-indent:32px;} ********
5，背景属性：
背景颜色：background-color:red;
背景图片：background-image:url('111.png')
背景重复：
支持简写：
background:#336699 url('1.png') no-repeat left top
背景图片不平铺：background-repeat: no-repeat;
背景位置：background-position: 200px 200px #第一个参数调节的是左右 第二个参数调节的上下
背景图片居中：background-position: center center;
repeat(默认）：背景图片平铺满整个页面
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/
案列 div {
/*background-color: orange;*/ 背景颜色
height: 500px;
width: 500px;
/*background-image: url("111.png"); !*背景图片 默认是填充整个区域 如果大小不够 默认重复填充*!*/
/*background-repeat: no-repeat;*/
/*background-repeat: repeat-x;*/ x轴平铺
/*background-repeat: repeat-y;*/ y轴平铺
/*background-position: center center;*/ 居中，此时图片居中
/*background-position: 10px 30px; !*第一个参数调节的是左右 第二个参数调节的上下*!*/
background: orange url("代码/111.png") no-repeat center center; 支持简写，简写方式}
6,边框属性（border）
border-width 边框的粗细
border-style 边框的样式
border-color 变宽的样色
border-radius 边框变为圆形，及设置边框的偏平度
支持简写：border: 2px solid red;
也可单独为某一边设置：border-top-color: red; 上边为红色
border-top-style:dotted; 上边框为点状虚线
上;top 下:bottom 左:left 右：right 把中间的top换了就可以了
边框样式
border-style: solid ; 实线边框
none 无边框
dotted 点状虚线边框
dashed 矩形虚线边框
7，display属性
用于控制HTML元素的显示效果
display:"none" 意义是HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分
display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。
注意：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。
也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，
而且该元素原本占用的空间也会从页面布局中消失。
四,css盒子模型
margin: 盒子与盒子之间的距离，也称外边距 ，即标签与标签之间的距离
padding：盒子中的物体与盒子之间的距离，即 用于控制内容与边框之间的距离 ，也称内填充
border：盒子的厚度，即盒子外边与内边之间的距离 ，也称边框
content（内容）：盒子里的内容或者物体， 即显示文本和图像
推荐使用简写： 顺序：上下左右
.margin-test {margin: 5px 10px 15px 20px;}
.mycenter{ margin:0 auto;}
分步写:
.padding-test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
padding内填充 顺序：上右下左
推荐使用简写：.padding-test {padding: 5px 10px 15px 20px;}
.padding-test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
补充padding的常用简写方式：
提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；
五：float ：浮动属性
属性:值；
在css中 任何元素都可以浮动
浮动元素会生成一个块级框，而不论它本身是何种元素
关于浮动的两个特点：
浮动的元素 是脱离正常文档流的 也就意味着没有独占一行一说
也不再占用原来的位置
浮动的框可以向左或者向右移动，直到他的边缘碰到包含框或者另一个浮动框的边框为止：
由于浮动框不在文档流中，所以文档的普通流中的块框表现的就像浮动框不存在一样。
三种取值
left：向左浮动
right：向右浮动
none: 默认值，不浮动
clear（清除）
clear属性规定元素的那一侧不允许其他浮动元素
属性:值；
值： left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧都不允许浮动元素
none 默认值。允许浮动元素出现在两侧
注意：clear属性只会对自身起作用，而不会影响其他元素
浮动造成的问题：父标签塌陷问题
清除浮动造成的问题：*******************
.clearfix:after {
content: "";
display: block;
clear: both;
}
六：overflow 溢出属性
属性:值； 案例overflow:visible;
值 ：visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）
八：定位：
static 默认值，无定位，不能当作绝对定位的参照物，标签都是静态的。
并且设置标签对象的left、top等值是不起作用的。
!*position: static; 默认是静态的 不能动位置
!*position: relative; 相对定位
!*position: absolute; 绝对定位
重点：所有的标签默认都是静态的 无法直接调节位置
你需要先将其设置成可定位状态
相对定位：relative 相对于标签自身原来的位置
绝对定位：absolute 相对于已经定位过的父标签 (注意：一定是已经定义过得父标签）
但只给你一个父标签的长宽 让你做定位
固定定位：fixed 相对于浏览器窗口 固定在某个位置
浏览器会优先展示文本内容
九：是否脱离文档流
脱离文档流：
绝对定位
固定定位
不脱离文档流：
相对定位
十：z-index
设置对象的层叠顺序。
z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，
那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用
opacity
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。
去除ul标签丑陋的部分：
ul {
list-style-type: none;
padding: 0;
}
