CSS学习总结ing

css选择器：

标签选择器、类选择器（class>>>黑点）、id选择器（#）、通配符选择器（*）

注意：通配符选择器代表页面所有的的标签名，可以去掉浏览器自带的间距，如下代码所示：

*{
    margin:0;   /*外间距*/
    padding:0;  /*内间距*/
}

并集选择器

div,p,h3{
	/*三个标签显示相同的属性，如三个都显示背景颜色为红色*/    
}

交集选择器

精准的找到要渲染的标签，在类选择器和id选择器前添加需要渲染的标签

p.javayu{
    /*类选择器*/
}
-----------------
p#javayu{
    /*id选择器*/
}

派生（后代）选择器

ol li strong{
    /*后代选择器：空格隔开*/
    /*注意： 层级的嵌套最好不要超过3个以上，只需要保留一些关键节点*/
}
------------
ol li{
    list-style: none;  /*去掉ol、li前面的小黑点*/
}

子代选择器

div>p{
    /*只作用于儿子这一代*/
}

<div>
  <p></p>
  <p></p>
</div>
------------
<mark></mark>  /*自带黄色*/

相邻兄弟选择器

strong+span{
    /*只有3起作用 */
    /*加号前面的选择器只是用来作为查找兄弟的参照标签，她不参与样式的影响*/
    /*寻找strong标签的兄弟，而且是要紧挨着的兄弟才可以*/
    /* ~ : 所有兄弟》》》3、4起作用 */
}

<div>
   <span>1</span>
   <strong>2</strong>
   <span>3</span>
   <span>4</span>
</div>

属性选择器

[za]{
    /*属性：分为标签天生自带 和 我们自定义的标签属性*/
    /* 符号:[属性名]*/
}

<div za="as"></div>
-----------------------
[za="as1"]{
    /*精准找到哪一个标签渲染*/
    /* 符号:[属性名="属性值"]*/
}

<div za="as"></div>
<div za="as1"></div>

伪类选择器

input:blur{
    /*失去焦点*/
}

新增

ul li:not(:last-child){
    /* :last-child 最后一个子元素*/
    /*除了做最后一个 li 没有右边框线，其余都有*/
    border-right:10px solid #000
}

<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>

-----------------------------------
:nth-child(n)   >>n表示具体的第几个，n可以使odd/2n+1奇数、even/2n偶数
:only-child     >>仅仅、唯一只有一个起作用
:nth-last-child(n) >>倒数第几个元素起作用
:first-of-type  >>第一同级兄弟元素起作用
:last-of-type  >>最后一个同级兄弟元素起作用
:only-of-type  >>只有一个同级兄弟元素起作用
:nth-of-type(n)  >>第几个同级兄弟元素起作用
:nth-last-of-type(n)  >>倒数第几个同级兄弟元素起作用
:empty   >>空内容

伪元素选择器

:first-line   >>第一行文字内容起作用
:first-letter   >>第一文字起作用
:before       >>元素之前添加内容
:after       >>元素之后添加内容
--------------
li{
    list-style:none;
    display: inline-block;  /*行内块*/
}
/* 添加分割线*/
li:after{
    /*display: inline-block;>>不独占一行*/
    /*确保是一个块>>>只要设置宽度不起作用，就要加 “块”display: block;*/
    display: inline-block;    /*display: block; >>独占一行 */
    content: "";     /* 这个属性不能省略，如果没有，则 before/after后的渲染不会起作用*/
    
    width:2px;
    heigh:20px;
    margin: 0 10px;        /* 上下0，左右10*/
    background-color: #000;
    vertical-align: bottom; /* 基线对齐 */
}

<li></li>
<li></li>

css权重及规则

标签选择器          权重
div                1
---------------------------
class/类选择器      权重
.right             10
---------------------------
id选择器           权重
#right            100
---------------------------
通配符选择器        权重
*                  0-1
---------------------------
后代、子代、交集、并集、相邻兄弟、兄弟->>>>>权重：每个单独的选择器的权重相加之和
注意：1、权重如果相等，遵循就近原则，下面的会覆盖上面的渲染
2、权重相等，不遵循就近原则》》》》使用  !important-》》(权重1000)，比ID大
3、权重大小：!important > id > class > 标签 > *

不可以继承的属性

1、display：inline、 block、inline-block、table-cell、none

2、文本类：盒子模型、背景类、浮动类、定位类

可以继承属性

1、字体系列的样式属性

2、文本系列的样式属性：text-align、line-height、text-indent

盒子模型

盒子宽度和高度单位：

1、px : 像素写死

2、%： 动态计算的单位（自适应，响应式）

1、横向滚动条自适应
.banner img{
    width: 100%;
}

内边距padding

padding:10px;   /*上、右、下、左 = 10px*/   
padding:10px 20px;   /*上、下= 10; 左、右 = 20px*/ 
padding:10px 20px 30px;   /*上=10px; 左、右 = 20px; 下= 30px*/ 
padding:10px 20px 30px 40px;  /*上右下左*/

注意：内边距会影响盒子在浏览器中的实际宽度和高度的大小

边框border

border: 边框的宽度 边框线的类型 边框线的颜色

边框线的类型：solid 实线、dashed 虚线、dotted 点状线

注意：border会影响实际的盒子的宽度和高度的大小。

/*如果没有指明方向，表示四个方向都有边框线而且边框相等*/
只需要上边框线：  
border-top: 10px solid #000;
-----------------------------
去掉边框线：
border:0;

注意：如果border属性只有边框宽度，没有边框线的类型和颜色，导致border属性失效。
如-》  border-top: 10px;  ->上边框失效为0

/*三角图标的实现*/
.arrow{
    /*三角形的大小由宽高控制，三角形的粗细由border边框线的宽度控制*/
    width: 200px;
    height: 200px;
    /*整体下移*/
    margin-top: 50px;
    border-top: 10px solid #000;
    border-left: 10px solid #000;
    /*rotate旋转角度>>deg角度放入单位*/
    transform: rotate(45deg);
}

--------------------------------
/*三角形实现*/
.triangle{
    width: 0px;
    height: 0px;
    border-width: 100px;   /*控制三角形的大小*/
    border-style: solid;
    border-color: red transparent transparent transparent;  /*transparent透明*/
}

--------------------------------
border-radius: 40px;   /*控制圆角*/

外边距margin

/*margin跟padding内边距的方位值和取值情况一样》》》上、右、下、左*/
注意：并列两个盒子，一个盒子，有上边距，另外一个有下边距，会出现margin外边距的重叠问题=》最终的边距》》去最大值

---------------------------------
/*margin兼容问题的处理： 大盒子里嵌套小盒子>>>此时给小盒子加margin-top,不但没有实现和大盒子的间距，反而传递到大盒子上，导致整体下移*/
1、加在大盒子属性：     
overflow:hidden;  /*解决margin-top传递问题》》此处不是溢出隐藏*/
或者：
padding-top: 1px;   /*这种方法会影响实际的宽高，需要在height/width的基础上减去响应的像素值*/
或者：
border-top:1px solid transparent;  /*这种方法会影响实际的宽高*/
或者：
/*不需要在子元素（小盒子》》第二个div）添加margin-top: 20px; */
padding-top: 20px;   /*只需要在大盒子添加这个内边距属性*/
》》》也就是给子元素的margin-top值改为给父元素加内边距padding-top，从而避免了margin-top的传递方法

<div>
  <div></div>
</div>

margin的负值

<div>
  <div>1</div>   /*宽高500px*/
  <div>2</div>   /*宽高800px*/
</div>
要求不改变结构，2在前，1在后：
margin-left: -1300;       /*实现位置的调换*/

内边距和外边距的区别

1、margin外边距、padding内边距

2、margin不会影响最后元素的实际宽高、padding是会影响最后元素的实际宽高

3、margin主要是用来控制元素和元素之间的间距

​ padding不能控制元素和另外一个元素的间距，只能控制它里面的元素

盒子模型的计算

<div class="content"></div>

.content{
    width: 100px;
    height: 250px;
    border: 10px solid #000;
    border-left: 40px;    /* 实际这个左边框失效》border-left: 0px; */
    padding: 10px 30px;
    margin: 10px 20px 30px;
}
实际的宽度： 100 + 30 + 30 + 0 + 10 =170
实际的高度： 250 + 10 + 10 + 10 + 10 =290

背景颜色

text-align: center;       /*文字内容水平居中*/

-------------------------------------------
margin: 0 auto;  /*上下0，左右auto>> 块元素的居中*/

文本内容行高控制 》》 line-height
<h3></h3>
/*实现h3文本内容的垂直居中》》》*/
line-height:32px;
height: 32px;

背景图片

/* 实现一个logo的背景图片 */
<h1 class="#">
   <a href="#">111</a>
</h1>

.logo a{
    display: block;   /*一个块*/
    width: 173px;
    height: 66px;
    background-image: url(图片地址);
    text-indent: -9999px;    /*手段缩进，让111消失*/
}

背景重复

<h1 class="logo"></h1>

/* 未指定平铺方式，此时的h1会有重复现象*/
.logo{
    width: 300px;
    height: 300px;
    background-image: url(图片地址);
}

/*指定平铺方式: （默认值repeat）不平铺背景不重复*/
1、拆分写法
background-image: url(图片地址);
background-repeat: no-repeat; 
2、复合写法(简写)》》有空格，一定要指定平铺方式
background: url(图片地址) repeat-y;
----------------------------------------
repeat-x    :x轴平铺
repeat-y    :y轴平铺
注意：1、background-repeat不能单独(单个使用)简写为background
     2、background-image和background-color可以单独简写为background

背景定位

<h1 class="logo"></h1>
--------------------------
background-position: 50px 50px;      /*x,y轴坐标*/

注意：方位只指明x轴，没有Y轴，此时默认y轴为center;
     同理background-position: left;》》》lift center
     同理background-position: right;》》》right center
     同理background-position: 50%》》50% 50%

背景关联

background-attachment: 属性
属性：scroll>>背景随着页面滚动条的滚动而滚动
属性：fixed>>背景不会随着页面滚动条的滚动而滚动》》固定

背景尺寸

background-size: 500px 500px;    /*x、y轴的大小*/
--------------------------------
background-size: auto;           /*图片原本的大小*/
--------------------------------
/*此时有一个问题：图片拉伸之后会  变虚*/
background-size: cover;          /*覆盖，背景图片等比例拉伸 到完全覆盖盒子大小(设置的宽高)为止*/
--------------------------------
/*背景图片会等比例拉伸，但是只要有一条边 触碰到盒子的任何一条边，它都会停止拉升(缩放)= 会出现留白*/
background-size: contain;

背景裁剪

/*content-box>  从内容区域之外开始裁剪（裁剪掉的是内边距和边框区域）*/
background-clip: content-box;
------------------------------------
/*从内边距区域之外开始裁剪（不包括内边距，裁剪掉的是边框区域）*/
background-clip: padding-box;
-----------------------------------
/*从边框线之外开始裁剪（不包括边框线）*/
background-clip: border-box;

设置背景图像的参考原点（位置）

/*background-origin 显示背景的原点坐标*/
/*content-box >>>从内容区域开始显示背景图片(左上角开始)》》width/height*/
background-origin: content-box;
--------------------------------------------------
padding-box;》》从内边距区域（包括内边距）开始显示背景图片》》padding包括padding值
border-box》》从边框区域开始（包括边框）开始显示背景图片》》border包括border值

背景属性复合（缩写）

css新增的属性：
background-size、background-origin、background-clip 都不能用background复合缩写

雪碧图

/*雪碧图  background-position: -400px 0;  x轴上取负值*/
background: url("") no-repeat 0 0;>>>>>/*00>>默认不写，默认是background-position: 0 0;*/

overflow:hidden的多种作用

1、overflow溢出隐藏

2、清浮动

3、解决margin-top的传递问题

那么，单行文本出现省略号，多行文本出现省略号？

overflow溢出隐藏》》》文本内容超过设定的宽度和高度时（超出内容之外的隐藏），出现溢出隐藏效果

多行元素在一行显示

/*两个div显示在一行*/
<div>内容一</div>
<div>内容二</div>

----------------------------
1、css属性设置为行内元素显示》》》display: inline;

----------------------------------
如果此时给两个div设置了宽高和背景颜色：》》》此时设置行内元素显示会对宽高不起作用

2、修改属性为》display: inline-block;
注意：display: inline-block可以让元素在一行显示，但是它会受空格、换行键的影响，会有默认的间距产生
=》解决办法：
（1）去掉空格和换行键的影响，将（div）标签全都在一行（不推荐，阅读性不好）
（2）给两div添加一个父div,给父div增加css属性》font-size:0>>>但是发现一个问题，此时div中的文字消失了=》解决：此时只需要在“内容一”和“内容二”的div属性身上加加一个font-size:14把父元素font-size:0覆盖;

/*hack写法：指css兼容写法*/
另外注意：display: inline-block;在ie6/ie7下不兼容解决办法=》在“内容一”和“内容二”的div属性增加=》*display: inline> css hack IE浏览器可以识别; 
=》*zoom:1;重新出发layout

<div>
  <div>内容一</div>
  <div>内容二</div>
</div>
------------------------------------
3、使用左浮动和有浮动(注意清除浮动)
float:left;
float:right;

单行文本出现省略号

<h3>文本字段</h3>
/*单行文本出现省略号必备条件：缺一不可*/
width: 30px;      /*必须要有宽度*/
overflow:hidden;    /*溢出隐藏*/
white-space: nowrap;  /*强制文字不折行*/
text-overflow: ellipsis;   /*文字隐藏方式：以省略号的方式隐藏*/

多行文本出现省略号

<h3>文本字段</h3>
/*多行文本出现省略号必备条件：主要是引用手机端*/
display: -webkit-box;          /*弹性盒模型*/
-webkit-box-orient: vertical;  /*规定元素的排列方式：垂直排列*/
-webkit-line-clamp: 2;    /*文字的行数，需要哪一行，值就是多少*/
overflow:hidden;    /*溢出隐藏*/

浮动

<div>内容一</div>
<div>内容二</div>

1、在一行显示：
float: left;
---------------------------------
<div>内容一</div>
<div>内容二</div>
<div>内容三</div>

2、”内容一“和”内容二“的css属性中都有float: left;
但是“内容三”无浮动属性》》》》此时，浮动元素会脱离文档流，导致下面没有浮动的元素识别不了它的高度和位置，此时“内容三”div就会往上跑

---------------------------------
3、元素都是 float: left; 左浮动，元素从左往右依次排列；
  元素都是float: right; 有浮动，元素从右往左依次排列；

---------------------------------
4、父元素浮动，子元素并不会继承父元素的浮动；
5、浮动属性不能继承；

---------------------------------
<span></span>

6、浮动元素本身具有块元素的特点，所以用了浮动就不需要在加display: block;

7、所以元素都可以用浮动属性

文档流和脱离文档流

文档流： 指的是元素的排列方式；

正常文档流： 从左往右 从上到下；
文档流可以分等级： 行内元素（从左往右）和 块级元素（从上到下）；

----------------------------------------
需求:需要块级元素（比如div）在一行显示
=》此时常规文档流方式被打破；
=>所以得到》》脱离文档流：正常的文档流被打破；

脱离文档流的影响：
1、float
2、定位

浮动元素的值

<div>内容一</div>
<div>内容二</div>

关于浮动的值：
float: left; 左浮动
float: right; 右浮动
float: none;  正常的文档流
float：inherit;  规定应该从父元素继承float属性的值。

浮动元素产生的影响

<div>
  <div>内容一</div>
  <div>内容二</div>
</div>

1、父元素设置背景颜色不起作用
2、父元素设置边框border属性没有被撑开，会重合到一起。
3、父元素设置内边距padding属性也没有被撑开

清浮动的方法

1、给浮动元素的父元素手动添加一个height属性；（不推荐）

2、给浮动元素的父元素设置overflow:hidden/auto;

3、给浮动元素的父元素结束标签之前加一个具有块元素特点的标签（一般是div）,
给元素加一个clear:both;  <div style="clear:both"></div>

4、clearfix 伪元素去清除浮动；  （常用）
/*利用伪元素:after 清除浮动必备的条件，缺一不可*/
（1）display: block;  /*确保元素是一个块级元素*/
(2)clear: both;      /*不允许左右两边有浮动对象*/
(3)content:"";       /**/

/*下列属性是写全的方式,不是必备的条件*/
height: 0;            /*防止低版本浏览器中默认 height: 1px;的情况*/
font-size: 0;         /**/
overflow: hidden;     /**/
visibility: hidden;   /*让左右可见性的元素隐藏*/

注意：content:"";/*这是伪元素:before和:after天生自带的属性，如果不写，伪元素不起作用*/

/*利用伪元素清除浮动》固定写法*/
/*只要清浮动，就在浮动元素的父元素上加一个 .clearfix 即可*/
如：<div class="head clearfix"></div>

.clearfix:after{
    display: block;
    clear: both;
    content: ""; 
    height: 0;           
    font-size: 0;         
    overflow: hidden;     
    visibility: hidden;
}    


[clear清除浮动]：
clear:both; /*不允许左右两边有浮动对象（清除左右两边的浮动的影响）*/

clear:left; /*不允许左边有浮动对象（清除左两边浮动的影响）*/
clear:right; /*不允许右边有浮动对象（清除右两边浮动的影响）*/

clear:none; /*允许左右两边有浮动对象 默认值（不清除左右两边的浮动的影响）*/

如何让元素消失在视野中

/* 1、透明度为0 */
opacity: 0;

/* 2、隐藏 */
display: none;

/* 3、宽度为0和 overflow*/
width: 0;    
overflow:hidden;    

/* 4、没有设置height高度的情况下，和 line-heigh和overflow*/
overflow:hidden; 
line-heigh: 0;

/* 5、让所有可见性元素消失(优先考虑)*/
visibility: hidden;

/* 6、margin和padding设置足够大*/
margin-left: -9999999999px;

/* 7、利用transfrom属性，让translate坐标设置足够大*/
transfrom: translateY(-999999px);

伪元素:before和:after

:before  表示元素之前添加内容

:after   表示元素之后添加内容

定位

绝对定位

position: absolute;

1、它设置top、bottom、left、right四个方位值；

2、绝对定位元素会脱离文档流，不占位，导致后面的元素会往前跑，占领它的位置；

3、绝对定位元素一定要有相对参照（它的直接父级元素），如果父级元素没有相对参照物，它会一级一级的往上查找，直到找到最外层的根元素html;

4、如果方位里，同时有left和right，最后听left;
             同时有top和bottom，最后听top;
所以在实际应用中只需要设置left或者top;

5、z-index越大，层级越在上

6、一个元素定在另一个元素上，或者两个元素叠加的情况，都可以使用定位（绝对定位），同时需要设定相对参照物（相对定位 position: relative;）并且要指明它定位的方向。

相对定位

position: relative;

1、不会脱离文档流，会占位，所有后面的元素不会往前跑。

2、可以设置top、bottom、left、right四个方位值
如果方位里，同时有left和right，最后听left;
          同时有top和bottom，最后听top;

3、参照物： 自己本身

4、可以设置z-index属性，z-index越大，层级越在上
z-index必须要和定位元素同时使用，才起作用。

固定定位

position: fixed;

1、会脱离文档流

2、可以设置top、bottom、left、right四个方位值
如果方位里，同时有left和right，最后听left;
          同时有top和bottom，最后听top;

3、参照物：整个浏览器窗口

4、可以设置z-index属性，z-index越大，层级越在上

定位总结

（1）相同点：
1、可以设置top、bottom、left、right四个方位值
如果方位里，同时有left和right，最后听left;
          同时有top和bottom，最后听top;

2、可以设置z-index属性，z-index越大，层级越在上

（2）不同点：
1、是否脱离文档流
绝对定位：是
相对定位：否
固定定位：是

2、参照物
绝对定位：是具有定位元素的父级元素，如果直接父级元素没有定位元素，则会往上级查找，知道找到根级元素html
相对定位：自己本身
固定定位：整个浏览器窗口

z-index(层级)的特点

1、当标签中都有定位元素时，在后面标签中的z-index要比在前面的z-index的值要大

2、z-index没有单位，支持负值

3、z-index一般是同级元素比较，子元素与父元素比较，z-index并不起作用（z-index值越大，越在上）

4、 z-index属性不能继承

基于WebStorm常用快键键

ctrl + D 复制整行
ctrl + X 剪切整行
ctrl + G 可快速定位到想要的行数
ctrl + alt +L 代码格式化
window + E 调出资源文件管理器
window + D 快速回到左面