css复习

css总结

复习参考：
https://segmentfault.com/a/1190000013370170#item-1-17

1.css选择器

1.类型
（1）id选择器（#myid）
（2）类选择器（.myclassname）
（3）标签选择器（div,h1,p）
（4）后代选择器（h1 p ），实现多级嵌套
（5）相邻后代选择器（子）选择器（ul>li），选择ul所有的li
（6）兄弟选择器（li~a）
（7）相邻兄弟选择器（li+a）
（8）属性选择器（a[rel="external"]）
（9）伪类选择器（a:hover,li:nth-chil等）
（10）伪元素选择器（::before、::after）
（11）通配符选择器（*）
2.权值
元素选择器：1
类选择器：  10
伪类选择器：10
ID选择择器：100
内联样式：  1000

css3新增的伪类

（1）elem:nth-child(n)选中父元素下的第n个子元素，并且这个子元素的标签名为elem，n可以接受具体的数
值，也可以接受函数。

（2）elem:nth-last-child(n)作用同上，不过是从后开始查找。

（3）elem:last-child选中最后一个子元素。

（4）elem:only-child如果elem是父元素下唯一的子元素，则选中之。

（5）elem:nth-of-type(n)选中父元素下第n个elem类型元素，n可以接受具体的数值，也可以接受函数。

（6）elem:first-of-type选中父元素下第一个elem类型元素。

（7）elem:last-of-type选中父元素下最后一个elem类型元素。

（8）elem:only-of-type如果父元素下的子元素只有一个elem类型元素，则选中该元素。

（9）elem:empty选中不包含子元素和内容的elem类型元素。

（10）elem:target选择当前活动的elem元素。

（11）:not(elem)选择非elem元素的每个元素。

（12）:enabled    控制表单控件的禁用状态。

（13）:disabled       控制表单控件的禁用状态。

(14):checked单选框或复选框被选中。

关于a标签的伪类 LVHA

a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active；

当链接未访问过时：

（1）当鼠标滑过a链接时，满足:link和:hover两种状态，要改变a标签的颜色，就必须将:hover伪类在:link伪类后面声明；
（2）当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式（:active），
必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。

当链接访问过时，情况基本同上，只不过需要将:link换成:visited。

这个顺序能不能变？可以，但也只有:link和:visited可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。

css中可以继承的样式

每一个属性在定义中都给出了这个属性是否具有继承性，一个具有继承性的属性会在没有指定值的时候，会使用父元素的同属性的值
来作为自己的值。

一般具有继承性的属性有，字体相关的属性，font-size和font-weight等。文本相关的属性，color和text-align等。
表格的一些布局属性、列表属性如list-style等。还有光标属性cursor、元素可见性visibility。

当一个属性不是继承属性的时候，我们也可以通过将它的值设置为inherit来使它从父元素那获取同名的属性值来继承。

如何居中 div？、

一、水平居中

①水平居中：给 div 设置一个宽度，然后添加 margin:0auto 属性

div {
  width: 200px;
  margin: 0auto;
}

②水平居中，利用 text-align:center 实现

.container {
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
}
.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
}

③让绝对定位的 div 居中

div {
  position: absolute;
  width: 300px;
  height: 300px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink; 
}

二、水平垂直居中

①定位+margin自身宽高的一半

/*确定容器的宽高宽500高300的层设置层的外边距div{*/
position:absolute;/*绝对定位*/
width:500px;
height:300px;
top:50%;
left:50%;
margin:-150px00-250px;/*外边距为自身宽高的一半*/
background-color:pink; 
}

②定位加transform移动自身宽高的一半

div {
  position: absolute; /*相对定位或绝对定位均可*/
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink; 
}

③flex

/*利用flex布局实际使用时应考虑兼容性*/
.container {
  display: flex;
  align-items: center; /*垂直居中*/
  justify-content: center; /*水平居中*/
}
.containerdiv {
  width: 100px;
  height: 100px;
  background-color: pink; /*方便看效果*/
}

④vertical+父元素伪元素改变基线

 .center-area {
    /* let it fill the whole container */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .center-area:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
  .centered {
    display: inline-block;
    vertical-align: middle;
  }

注意：这里使用伪元素的原理是改变父div的基线，div并没有被规定基线在哪里，但可以使用在div中加一个X就知道了，默认基线就是穿过X的那条线。

.aimg::before{
  content: "hi";
  display: inline-block;
  height: 100%;
  /* vertical-align: middle; */
  border: 1px solid red;
  width: 20px;  
}

这是不加vertical-align: middle的效果

image.png

加了vertical-align: middle的效果：

image.png

而middle的定义是：使元素的中部与父元素的基线加上父元素x-height（译注：x高度）的一半对齐。

这个x即使我们加的那个x。。

于是基线就变到中间了，这时候其他元素使用vertical-align: middle就可以实现和居中效果啦。如这个图就可以垂直居中的了。

image.png

这种方法有一些优点：

您无需知道要居中的元素的尺寸。

CSS不需要知道的大小.center-area。

高度.container可以通过其内容来定义，该内容可以动态更改。

它的标记相对干净。只需一个辅助元素（.center-area）。

它能够使一个以上的元素彼此垂直对齐。

所有浏览器均支持该功能。

而且最好写出这样：

将两个开始标签放入一行：(::before和之间有<div.centered>一个空格,所以要消除空格)
<div class="center-area"><div class="centered">
</div></div>

参考：https://christopheraue.net/design/centering-inline-block-with-vertical-align-middle

总结：一般常见的几种居中的方法有：

对于宽高固定的元素

（1）我们可以利用margin:0auto来实现元素的水平居中。

（2）利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水
平和垂直方向上的居中。

（3）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素
的中心点到页面的中心。

（4）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素
的中心点到页面的中心。

（5）使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对
齐，然后它的子元素也可以实现垂直和水平的居中。

对于宽高不定的元素，上面的后面两种方法，可以实现元素的垂直和水平的居中。

2.外边距的特殊效果


1.外边距合并
 当两个垂直外边距相遇时，他们将合并为一个，最终取决于两个外边距中距离较大的那个。
 如果两个外边距相遇时值相等，那么取其中一个值。
2.外边距的溢出
 在某些条件下，为子元素设置上外边距时，有可能会作用到父元素上。
 1.父元素没有上边框
 2.为子元素设置上外边距时

2.在d2中嵌套一个子元素div,id="d3",设置其尺寸为100*100，并设置其背景颜色
3.设置d3的上外边距为50px,观察其结果。
 解决溢出方案：
 1.为父元素增加上边框
 弊端：对父元素的高度有影响
 2.使用父元素的上内边距来取代子元素的上外边距
 弊端：对父元素的高度有影响
 3.在父元素的第一个子元素位置处，增加一个空(table)
 行内元素以及行内块元素的垂直外边距
 1.行内元素垂直外边距无效（img除外）
 2.行内块元素，设置垂直外边距时，整行元素都跟着发生改变</pre>

溢出效果如图，没有margin-top的效果。

<div class="d2">  <table></table>
 <div class="d3">
 margin
 </div>
</div>

css样式：

.d2{ 
 width: 100px;
 height: 100px;
 background-color:yellow;
}
.d3{
 background-color: pink;
 margin-top:50px;
}

溢出效果：

image.png

加了table之后：

image.png

3.背景属性

1.背景色background-color 
2.背景图片  background-image: url("./3.jpg");
3.背景图片平铺 background-repeat :no-repeat 不平铺（图片只显示一次）/ repeat-x 只在水平方向平铺/ repeat-y 只在垂直方向平铺
4.背景图片尺寸 background-size  
 1.width/height  (ex:200px 300px)
 2.width%/height%  (ex:50% 50% 是元素自己的高宽占比)
 3.cover
 将背景图等比放大，直到背景图完全覆盖到元素的所有区域为止。
 4.contain
 将背景图等比放大，直到背景图碰到元素的某一个边缘为止
5.背景图片固定   background-attachment:scroll 默认值，滚动/fixed 固定
6.背景图片定位 background-position: 
 1.x y  具体的数值（px）
 2.百分比
 0% 0% 背景图在左上角
 100% 100% 背景图在右下角
 50% 50% 背景图在中间位置
 3.关键字
 x:left/center/right
 y:top/center/bottom

7.背景简写属性
属性：background
取值：color url() repeat attachment position
eg:background: pink url('./2.jpg' ) no-repeat scroll center;

4.渐变

1.线性渐变
 属性：background-image
 取值：linear-gradient(angle,color-point1,color-point2,....);
 1.angle
 表示渐变填充的方向或角度
 取值：
 1.关键字
 to top 从下向上填充渐变色
 to bottom 从上向下填充渐变色
 to left 从右向左填充渐变色
 to right 从左向右填充渐变色
 2.角度值
 0deg 从下向上填充，等同于to top
 90deg 从左向右填充，等同于to right
 180deg 从上到下填充，等同于to bottom
 270deg 从右向左填充，等同于to left

eg:
background-image: linear-gradient(to right,lightblue 10% ,red 50%,yellow );

image.png

2.径向渐变
属性：
background-image:radial-gradient([size at position], color-point1,color-point2,...);
eg:
background-image: radial-gradient(200px at center,red 2% ,orange 50%,yellow );

image.png

5.字体

字体属性简写
 属性：font
 取值：style variant weight size family;
 注意：
 如果用简写方式，必须设置family的值，否则无效。
font:12px; 错误
font:12px "黑体"; 正确

.font{
 /* font-family:"楷体","微软雅黑";
 font-size: 20px;
 font-weight: 400;
 font-style: italic;
 */
 /* 转成大写字母 */
 /* font-variant: small-caps;  */

 /*! 简写  必须写family 且按顺序写*/
 font:  italic small-caps  900  30px "宋体";
}

6.浮动定位

1.什么是浮动&特点
 1.元素一旦浮动起来，将不占据页面空间（脱离了文档流），其它未浮动元素将上前补位。
 2.浮动元素会停靠在父元素的左边或右边，或其它已经浮动的元素的边缘上。
 3.浮动定位解决的问题：能够让多个块级元素在一行中显示。
2.语法
 属性：float
 取值：
 1.left
 左浮动，让元素停靠在父元素的左边或挨着左侧已经浮动的元素
 2.right
 右浮动，让元素停靠在父元素的右边或挨着右侧已经浮动的元素
 3.none
 默认值，即无任何浮动效果

7.浮动引起的效果

1.变成块级元素
2.放不下就换行
3.其他非块级元素会环绕

8.清除浮动

元素的高度都是以未浮动元素的高度为准的，浮动元素是不占页面的高度的

解决父元素的高度方案如下：
1.直接设置父元素的高度
 弊端：不是每次都知道父元素的高度
2.设置父元素也浮动
 弊端：不是任何时候父元素都需要浮动，而且浮动会影响后续元素
3.为父元素设置overflow
 取值：hidden或auto
 弊端：如果有内容需要溢出显示的话，也会一同被隐藏
4.在父元素中，追加空子元素(块级)，并设置其clear:both;
5.父元素加伪元素
.clear::after{
content:'';
display:table;//也可以是'block'，或者是'list-item'
clear:both;
}

9.定位

相对定位，绝对定位，固定定位。只有已定位元素才能使用偏移属性。

定位详解

1.相对定位
 1.什么是相对定位
 元素相对于它原来的位置偏移某个距离
 2.使用场合
 做元素位置微调时使用
 3.语法
 position:relative;
 配合偏移属性来实现位置的移动
 left:10px;
 top:10px;
2.绝对定位
 1.什么是绝对定位&特点
 1.绝对定位的元素会脱离文档流-不占页面空间
2.绝对定位的元素会相对于离他最近的，已定位的，祖先元素 去实现位置的初始化。
3.如果没有已定位的祖先元素，那么该元素就相对于body去实现位置的初始化
4.配合偏移属性 实现元素位置的修改
 2.语法
 position:absolute;
配合偏移属性实现位置的修改
 3.使用场合
 1.有堆叠效果的元素
2.弹出菜单
 4.注意：
 1.脱离文档流-不占据页面空间
2.绝对定位元素会变成块级元素

 5.堆叠顺序
 一旦元素变为已定位元素的话，元素们则有可能出现堆叠的效果
属性：z-index
取值：无单位的数字，数字越大越靠上
 注意：
 1.只有已定位元素才能实现堆叠顺序的改变（z-index）
 2.父子元素间，z-index无效，永远都是子元素压在父元素上方
3.固定定位
 1.什么是固定定位
 将元素固定在网页的某个位置处，位置不会随着滚动条而发生改变，固定在可视区域中。
 2.语法
 position:fixed;
配合偏移属性使用
 注意：
 1.固定定位的元素永远都是相对于body去实现位置的初始化和偏移。
2.固定定位的元素会变成块级元素
3.固定定位元素会脱离文档流-不占页面空间

10.显示

取值：

display：none/block/inline/inline-block/table

显示效果：

1.显示/隐藏
 属性：visibility
 取值：
 1.visible:默认值，元素可见
 2.hidden:元素不可见-隐藏
 面试：display:none和visibility:hidden的区别
 display:none 不占页面空间
 visibility:hidden 占页面空间
2.透明度
 属性：opacity
 取值：0.0（完全透明）~1.0（完全不透明）之间的小数
3.垂直方向对齐方式
 属性：vertical-align
 场合：
 1.表格中使用
 取值：top/bottom/middle
 2.图片（img）中使用
 取值：
 top：上
 bottom：下
 middle：中间
 baseline:基线对齐，默认值(和bottom不一样的，y 默认和y字母中间对齐，bottom是和y的脚对齐)

注意：

[CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

如：设置该图与文本的对齐方式：

.aimg  img{
 vertical-align: middle;
 width: 50px;
 height: 50px;
}

image.png

注意 vertical-align 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素。

拓展：图片在div中垂直居中，img不用设置，在父元素中设置display和 vertical-align属性

.manyimg{
 height: 1000px;
 width: 2000px;
 border: #ddaacc 1px solid;
 display: table-cell;
 vertical-align: middle;
}