CSS整理
css总结
实现垂直居中的方式
基于表格定位
将要居中内容的外层容器元素的display设置成table，内层内容库使用table-cell，而后分别设置水平垂直居中css
/*表格方案*/
#table-father{
display:table;
}
#table-child{
display:table-cell;
text-align:center;
vertical-align:middle;
}
复制代码
缺点是须要额外加标记html
基于绝对定位
若是要居中的元素宽高已知而且不会更改，能够利用-margin，值是元素宽和高的一半android
#child{
position: absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
width:100px;
height:100px;
background:gold;
}
复制代码
缺点是没法自适应，若是元素宽高是自适应百分比定义的，就不能用这种方法，由于margin采用百分比是相对于包含块的宽度而不是元素自身的宽度git
如何解决元素自身宽高自适应的改变？github
- translate()
#position-child{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
复制代码
translate基于自身宽度移动web
- margin:auto
.absolute-center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width:50%;
height:50%;
}
复制代码
margin充满父元素浏览器
基于视口单位
要把元素相对于视口进行居中，那么至关于父元素的高度就是视口的高度，视口的高度能够用vh来获取：bash
/*相对于视口单位进行居中的解决方案*/
#view-child{
margin:50vh auto 0;
transform:translateY(-50%);
}
复制代码
基于 FlexBox
父元素设置为flex，子元素能够经过两种方式居中app
/*基于伸缩盒的解决方案*/
#flex-father{
display:flex;
}
#flex-child{
margin:auto;
}
复制代码
div#flex-father{
display:flex;
align-items:center;
justify-content: center;
}
复制代码
缺点是须要考虑浏览器支持ide
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
复制代码
Flex注意事项
- Flex布局之后，子元素的float、clear和vertical-align属性将失效
- flex内部的子元素（除了position:absolute或fixed）不管是display:block或者display:inline，都成为了伸缩项目
- android浏览器4.4以前对于flex布局支持很差
- flex-shrink属性用于设置或检索弹性盒的收缩比率，默认为1。不容许为负值，flex-shrink值为0时表示不收缩，保持自身
- PC兼容性相对较差，IE要10，甚至11以上才有很好的兼容
盒子模型浅析
盒子模型的组成
盒子模型包含四个重要的部分： content(width、height):盒子内容宽高 padding:内边距(填充) border:边框 margin:外边距
重点：对于盒子来讲，设置的宽高和真实占有宽高是不同的
IE宽度是包括content，padding，border 标准宽度是只有content
CSS浮动
为何要清除浮动
一个块级元素若是没有设置height，那么其高度就是由里面的子元素撑开，若是子元素使用浮动，脱离了标准的文档流，那么父元素的高度会将其忽略，若是不清除浮动，父元素会出现高度不够，那样若是设置border或者background都得不到正确的解析
在咱们让元素浮动的时候，它就会离开原来的文档流，将它原先占有的空间释放。
打个比方，父元素就如一个有伸缩性的容器，而子元素就如一个气球。
当没有设置容器的高宽时，他的高宽彻底是被装在里面的气球撑开的，当子元素浮动时候，就像气球从容器里飘了出来，飘在了他的上方。
而此时容器也就空了，因为伸缩性，高度就变为了o，看不见了。
复制代码
清除浮动的方式
1.父元素添加高度
#div1{
background-color: blank;
height：200px；
}
复制代码
缺点：但当你调整子元素高度的时候，若你要实现父元素包含子元素的效果，你就也要调整父元素高度。
2.父元素也添加浮动
#div1{
background-color: black;
width: 100%;
float: left;
}
复制代码
缺点：虽然能够解决问题，可是后面要添加有不须要浮动的子元素，则影响其显示
3.给父元素添加overflow：hidden；
#div1{
background-color: black;
overflow: hidden;
}
复制代码
缺点：一旦包含非浮动的子元素，则会影响其显示。
4.给父元素添加一个无关的元素，让添加的无关元素去清除浮动 clean：both;
#div5{
clear:both;
}
</style>
<body>
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
</div>
</body>
复制代码
缺点：添加了一个无关元素，代码阅读受影响。
5.经过伪类来实现，在须要清除浮动的父元素里，添加一个清除浮动的伪类。
#div1:after{
content: "";
display: block;
clear: both;
}
复制代码
实现两列布局的方法
首先建立基本的HTML布局和基本样式
<div class="wrapper" id="wrapper">
<div class="left">
左边固定宽度，高度不固定 </br> </br></br></br>高度有可能会很小，也可能很大。
</div>
<div class="right">
这里的内容可能比左侧高，也可能比左侧低。宽度须要自适应。</br>
基本的样式是，两个div相距20px, 左侧div宽 120px
</div>
</div>
复制代码
.wrapper {
padding: 15px 20px;
border: 1px dashed #ff6c60;
}
.left {
width: 120px;
border: 5px solid #ddd;
}
.right {
margin-left: 20px;
border: 5px solid #ddd;
}
复制代码
双inline-block方案
.wrapper-inline-block {
box-sizing: content-box;
font-size: 0; // 消除空格的影响
}
.wrapper-inline-block .left,
.wrapper-inline-block .right {
display: inline-block;
vertical-align: top; // 顶端对齐
font-size: 14px;
box-sizing: border-box;
}
.wrapper-inline-block .right {
width: calc(100% - 140px);
}
复制代码
注：
- 须要知道左侧盒子的宽度，两个盒子的距离，还要设置各个元素的box-sizing
- 须要消除空格字符的影响
- 须要设置vertical-align: top知足顶端对齐。
双float方案
.wrapper-double-float {
overflow: auto; // 清除浮动
box-sizing: content-box;
}
.wrapper-double-float .left,
.wrapper-double-float .right {
float: left;
box-sizing: border-box;
}
.wrapper-double-float .right {
width: calc(100% - 140px);
}
复制代码
本方案和双float方案原理相同，都是经过动态计算宽度来实现自适应。可是，因为浮动的block元素在有空间的状况下会依次紧贴，排列在一行，因此无需设置display: inline-block;，天然也就少了顶端对齐，空格字符占空间等问题。
注：
- 须要知道左侧盒子的宽度，两个盒子的距离，还要设置各个元素的box-sizing。
- 父元素须要清除浮动。
float+margin-left方案
下面两种方案则是利用了block级别的元素盒子的宽度具备填满父容器，并随着父容器的宽度自适应的流动特性。 可是block级别的元素都是独占一行的，因此要想办法让两个block排列到一块儿。 咱们知道，block级别的元素会认为浮动的元素不存在，可是inline级别的元素能识别到浮动的元素。这样，block级别的元素就能够和浮动的元素同处一行了。
.wrapper-float {
overflow: hidden; // 清除浮动
}
.wrapper-float .left {
float: left;
}
.wrapper-float .right {
margin-left: 150px;
}
复制代码
缺点：
- 须要清除浮动
- 须要计算右侧盒子的margin-left
absolute+margin-left方案
另一种让两个block排列到一块儿的方法是对左侧盒子使用position: absolute的绝对定位。这样，右侧盒子也能无视掉它
.wrapper-absolute .left {
position: absolute;
}
.wrapper-absolute .right {
margin-left: 150px;
}
复制代码
缺点：
- 使用了绝对定位，如果用在某个div中，须要更改父容器的position。
- 没有清除浮动的方法，若左侧盒子高于右侧盒子，就会超出父容器的高度。所以只能经过设置父容器的min-height来放置这种状况。
float+BFC方案
这个方案一样是利用了左侧浮动，可是右侧盒子经过overflow: auto;造成了BFC，所以右侧盒子不会与浮动的元素重叠
.wrapper-float-bfc {
overflow: auto;
}
.wrapper-float-bfc .left {
float: left;
margin-right: 20px;
}
.wrapper-float-bfc .right {
margin-left: 0;
overflow: auto;
}
复制代码
这种状况下，只须要为左侧的浮动盒子设置margin-right，就能够实现两个盒子的距离了。而右侧盒子是block级别的，因此宽度能实现自适应。
flex方案
.wrapper-flex {
display: flex;
align-items: flex-start;
}
.wrapper-flex .left {
flex: 0 0 auto;
}
.wrapper-flex .right {
flex: 1 1 auto;
}
复制代码
flex能够说是最好的方案了，代码少，使用简单。有朝一日，你们都改用现代浏览器，就可使用了。 须要注意的是，flex容器的一个默认属性值:align-items: stretch;。这个属性致使了列等高的效果。 为了让两个盒子高度自动，须要设置: align-items: flex-start;
grid方案
.wrapper-grid {
display: grid;
grid-template-columns: 120px 1fr;
align-items: start;
}
.wrapper-grid .left,
.wrapper-grid .right {
box-sizing: border-box;
}
.wrapper-grid .left {
grid-column: 1;
}
.wrapper-grid .right {
grid-column: 2;
}
复制代码
极限状况
最后能够再看一下在父容器极限小的状况下，不一样方案的表现。主要分红四种状况：
- 动态计算宽度的状况
两种方案: 双inline-block方案和双float方案。宽度极限小时，右侧的div宽度会很是小，因为遵循流动布局，因此右侧div会移动到下一行。
- 动态计算右侧margin-left的状况
两种方案: float+margin-left方案和absolute+margin-left方案。宽度极限小时，因为右侧的div忽略了文档流中左侧div的存在，因此其依旧会存在于这一行，并被隐藏。
- float+BFC方案的状况
这种状况下，因为BFC与float的特殊关系，右侧div在宽度减少到最小后，也会掉落到下一行。
- flex和grid的状况
这种状况下，默认两种布局方式都不会放不下的div移动到下一行。不过 flex布局能够经过 flex-flow: wrap;来设置多余的div移动到下一行。 grid布局暂不支持。
单行居中两行居左
咱们让内层 p 居左 text-align:left，外层 h2 居中 text-align:center，而且将 p 设置为display:inline-block ，利用 inline-block 元素能够被父级 text-align:center 居中的特性，这样就能够实现单行居中，多行居左，CSS 以下：
p {
display: inline-block;
text-align: left;
}
h2{
text-align: center;
}
复制代码
超出两行展现
display: -webkit-box; // 设置display，将对象做为弹性伸缩盒子模型显示
-webkit-line-clamp: 2; // 限制在一个块元素显示的文本的行数
-webkit-box-orient: vertical; // 规定框的子元素应该被水平或垂直排列
复制代码
可是这样写后第一行也变回了居左，而没有居中，缘由在于咱们第一个设置的 display: inline-block ，被接下来设置的display: -webkit-box 给覆盖掉了，因此再也不是 inline-block 特性的内部 p 元素占据了一整行，也就天然而然的再也不居中，而变成了正常的居左展现
因此：
<h2><p><em>单行居中，多行居左<em></p></h2>
设置 em 为 display: -webkit-box
设置 p 为 inline-block
设置 h2 为 text-align: center
复制代码
最终成果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
display:inline-block;
text-align:left;
}
em{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
text-overflow:ellipsis;
}
div{
border: 1px solid red;
font-size: 30px;
text-align:center;
width: 800px;
height: 500px;
}
</style>
</head>
<body>
<div>
<p><em>单行居中，多行居左</em></p>
</div>
</body>
</html>
复制代码
如何制做一个三角形，梯形
border-bottom: 50px solid red;
width: 100px;
border-left: 50px solid yellow;
border-right: 50px solid green;
border-top: 50px solid black;
height: 0;
width: 0;
transparent //这个是透明
复制代码
经过border 宽度和透明transparent 来实现三角形和梯形
渐变(Gradients)
线性渐变(Linear Gradient)
向下/向上/向左/向右/对角方向
#grad {
background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(180deg, red, blue); /* 标准的语法 */
}
透明度
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
重复的线性渐变
background: repeating-linear-gradient(red, yellow 10%, green 20%);
复制代码
径向渐变（Radial Gradients)
由它们的中心定义
#grad1 {
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* 标准的语法 */
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}
#grad2 {
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* 标准的语法 */
background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
}
复制代码
移动端适配
移动端适配我的接触的就那么几个
HTML的head部分
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
复制代码
其中：
width：viewport 的宽度，能够指定为一个像素值，如：640，或者为特殊的值，如：device-width （设备的宽度）。
initial-scale：初始缩放比例，即当浏览器第一次加载页面时的缩放比例。值为 1.0 即原始尺寸。
maximum-scale：容许浏览者缩放到的最大比例，通常设为1.0，即原始尺寸。
minimum-scale：容许浏览者缩放到的最小比例，通常设为1.0，即原始尺寸。
user-scalable：浏览者是否能够手动缩放，yes 或 no 。
px转为rem
页面 css 所有写完以后，将全部的 px 转换为以 rem 为单位的数字。例如 我设置 body 的 width ：320px； 则根据 我在第三步设置的 font - size 值，转换为 rem ，则是
width ：16 rem； 【320 / 20 (你设置的标准 font - size) = 16】
rem原理
什么是em
em做为font-size的单位时，其表明父元素的字体大小，em做为其余属性单位时，表明自身字体大小——MDN
- em可让咱们的页面更灵活，更健壮，比起处处写死的px值，em彷佛更有张力，改动父元素的字体大小，子元素会等比例变化，这一变化彷佛预示了无限可能,有些人提出用em来作弹性布局页面
- em作弹性布局的缺点还在于牵一发而动全身，一旦某个节点的字体大小发生变化
什么是rem
rem做用于非根元素时，相对于根元素字体大小；rem做用于根元素字体大小时，相对于其出初始字体大小——MDN
/* 做用于根元素，相对于原始大小（16px），因此html的font-size为32px*/
html{font-size:2rem}
/* 做用于非根元素，相对于根元素字体大小，因此为64px */
p{font-size:2rem}
复制代码
em就是为字体和行高而生的，有些时候子元素字体就应该相对于父元素，元素行高就应该相对于字体大小；而rem的有点在于统一的参考系
Rem布局与案例
rem布局的本质基于宽度的等比缩放
比rem更好的方案
vw —— 视口宽度的 1/100；vh —— 视口高度的 1/100 —— MDN
仅用于我的整理，参考：