1,权重计算:
权重:id class 标签--->>>顺序不变
当权重一样时,显示后来设置的
继承下来的标签,权重为0
若权重为0,那么谁描述的近,就显示谁
若权重为0,描述的一样近的时候,回归原始状态(数权重)
2,padding:
/*上 右 下 左*/
padding: 20px 30px 40px 50px ;
/*上 左右 下*/
padding: 20px 30px 40px;
/* 上下 左右*/
padding: 20px 30px;
/*上下左右*/
padding: 20px;
3,bordr: 10px solid red;
border-radius:10px; 设置圆角
4,标准文档流的现象: 空白折叠现象----高矮不齐，底边对齐----自动换行，一行写不满，换行写
5,块级---行内
行内元素：
与其他行内元素并排；
不能设置宽、高。默认的宽度，就是文字的宽度。
块级元素：
霸占一行，不能与其他任何元素并列；
能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
display:inline 块级转为行内
display: block; 行内转块级
display: inline-block; 转为行内块
6,浮动
四大特性:
1.浮动的元素脱标
2.浮动的元素互相贴靠
3.浮动的元素由"子围"效果
4.收缩的效果
注意:所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高.
要浮一起浮,有浮动就要清除浮动.
若一个盒子浮动,另一个是行内的话不会顶进去,另一个是块级的话会顶进去,原因就是浮动有自围效果.
清除浮动:
1,给父盒子设置高度-----------不灵活,所以一样不用,万年不变的导航栏可以用
2,clear:both
3,伪元素清除法 .clearfix:after{
content:".";
display:block;
visibility:hidden;
height:0;
clear:both;}
4,overflow:hidden visible 内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
BFC区域: https://blog.csdn.net/riddle1981/article/details/52126522 (有时间就 看一下)
7,margin用法:
塌陷问题:
两个标准流下兄弟盒子 设置垂直方向上的margin时，那么以较大的为准，那么我们称这种现象叫塌陷。
当我们给两个标准流下的兄弟盒子设置浮动之后，就不会出现margin塌陷的问题。
margin：0 auto;注意点：
1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;
2.只有标准流下的盒子 才能使用margin:0 auto;
当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了
3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
8,文本属性:
文本对齐------------------------
text-align 属性规定元素中的文本的水平对齐方式。
属性值：none | center | left | right | justify
文本首行缩进--------------------
text-indent 属性规定元素首行缩进的距离，单位建议使用em
文本修饰
text-decoration属性规定文本修饰的样式
属性值：none(默认)|underline(下划线)|overline(定义文本上的一条线)|line-through (定义穿过文本下的一条线)
inherit(继承父元素的text-decoration属性的值。)
行高
line-height就是行高的意思，指的就是一行的高度。
8,字体属性:
字体大小
font-size表示设置字体大小，如果设置成inherit表示继承父元素的字体大小值。
字体粗细
font-weight表示设置字体的粗细
属性值：none(默认值，标准粗细) | bold(粗体) | border(更粗）| lighter(更细)
100~900（设置具体粗细，400等同于normal，而700等同于bold）| inherit（继承父元素字体的粗细值）
字体系列
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体。
9,行高:
line-height
针对单行文本垂直居中--------
公式：行高的高度等于盒子的高度，可以使当行文本垂直居中，注意只适用单行文本。
针对多行文本垂直居中--------
行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。
第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px
第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;
10,font-family------ https://www.cnblogs.com/majj/p/9040281.html (马哥博客详解)
11, 导航栏示例:
css代码:
{
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.nav{
width: 960px;
/*height: 40px;*/
overflow: hidden;
margin: 100px auto ;
background-color: purple;
/*设置圆角*/
border-radius: 5px;
}
.nav ul li{
float: left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav ul li a{
display: block;
width: 160px;
height: 40px;
color: white;
font-size: 20px;
text-decoration: none;
font-family: 'Hanzipen SC';
}
/*a标签除外，不继承父元素的color*/
.nav ul li a:hover{
background-color: red;
font-size: 22px;
}
}
html代码:
{ <div class="nav"> <ul> <li> <a href="">58同城</a> </li> <li> <a href="">腾讯</a> </li> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> <li> <a href="">网站导航</a> </li> </ul> </div> }
12, 颜色:
三原色:rgb:红,绿,蓝. 例 rgb(255,255,255)白色 rgb(0,0,0)黑色
background-color:rgb(255,0,0,透明度)
进制表示法: #ff0000 <<<--->>> #f00
扩展:#111---#999 代表各种灰色
background-image:表示设置该元素的背景图片,水平方向和垂直方向都平铺
background-repeat:表示设置该元素平铺的方式 ,给元素设置padding之后，发现padding的区域也会平铺背景图片。
repeat
背景图像将在垂直方向和水平方向重复。
repeat-x
背景图像将在水平方向重复。
repeat-y
背景图像将在垂直方向重复。
no-repeat
背景图像将仅显示一次。
inherit
规定应该从父元素继承 background-repeat 属性的设置。
实例:标头大广告图片居中大图效果----
background-image:url("../cms_15337986888589_wGuOE.jpg");
background-repeat: no-repeat;
background-position: center 0;
精灵抠图神技:
先设一个div,然后background-image:url()倒入一张图片进行background-repeat设置,div设置为目标图片大小,
最后通过background-position调节背景图片位置,获得目标图片.
实例:
{目标图片大小为 240*186 ,把原图向上移动150px,像左移动190px得到目标图片
*{
margin: 0;
padding: 0;
}
div{
background-image: url("./bbI.jpg");
background-repeat: no-repeat;
height: 186px;
240px;
background-position: -190px -150px;
}
}
13定位:<重点>
position : static --->>>静态定位
position : relative --->>>相对定位
position : fixed --->>>固定定位
position : absolute --->>>绝对定位
----相对定位: >>>>一般用于微调元素,当做父相子绝的参考
----参考点为原来位置
----不要做压盖现象,会留坑(占着茅坑不拉屎)
----设置定位后,它的层级大于标准盒子
----相对定位的盒子不脱标
用法--->>>设置本标签为position:relative 用top bottom left right 在本标签做位置调节,他是以本标签原来位置为起点参考移动的.
注:页面与浏览器的区别:
----页面:网站的整个页面,比可浏览器大,被内容撑起来的区域
----浏览器:打开浏览器的窗口,就电脑屏幕那么大
----绝对定位:
----脱标
----做压盖现象,层级高
----单独设置绝对定位时:
----top描述时,参考点为页面的左上角
----bottom描述时,参考点为浏览器的左下角
----父子盒子嵌套时:
----父设为相对定位,子设为绝对定位,子(top bottom left right)会以父盒子的左上角作为参考点.
----多个父亲时,子元素以最近的设为相对定位的父盒子的左上角为参考点
盒子居中:
>>>>left:50%
>>>>margin-left:-(一半盒子宽度)px
----固定定位: 用top bottom left right做位置调节
----脱标
----层级提高
----参考点为浏览器的左上角
Z-index:
----z-index值表示谁压着谁,数值大的压盖数值小的
----只有定位的元素才有z-index(固定,绝对,相对都行),浮动元素不能使用
----z-index值没有单位,就是一个正整数,默认为0如果值一样,谁写在html后面,谁在上边压盖别人;定位的元素压盖没定位的.
----从父现象,父亲怂了,儿子再牛逼也扯淡.
补充:outline:none 干掉input外边线
box-shadow:0 15px 31px rgb(0,0,0,.5)阴影
做浮动阴影效果时,浮动位置是以原位置为参考的
抖动效果---->>>>先把自己设为相对定位,然后:hover{top:-2px}
--------------------------------css完---------------------------------------