CSS页面布局解决方案大全

前端布局非常重要的一环就是页面框架的搭建，也是最基础的一环。在页面框架的搭建之中，又有居中布局、多列布局以及全局布局，今天我们就来总结总结前端干货中的CSS布局。

居中布局

水平居中

1）使用inline-block+text-align
（1）原理、用法

  • 原理：先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。
  • 用法：对子框设置display:inline-block，对父框设置text-align:center。

（2）代码实例

<div class="parent"><div class="child>DEMO</div>
</div>
.child{display:inline-block;
}
.parent{text-align:center;
}

（3）优缺点

  • 优点:兼容性好，甚至可以兼容ie6、ie7
  • 缺点:child里的文字也会水平居中，可以在.child添加text-align:left;还原

2）使用table+margin
（1）原理、用法

  • 原理：先将子框设置为块级表格来显示（类似 <table>），再设置子框居中以达到水平居中。
  • 用法：对子框设置display:table，再设置margin:0 auto。

（2）代码实例

<div class="parent"><div class="child>DEMO</div>
</div>
.child {display:table;margin:0 auto;
}

（3）优缺点：

  • 优点：只设置了child，ie8以上都支持
  • 缺点：不支持ie6、ie7,将div换成table

3）使用absolute+transform
（1）原理、用法

  • 原理：将子框设置为绝对定位，移动子框，使子框左侧距离相对框左侧边框的距离为相对框宽度的一半，再通过向左移动子框的一半宽度以达到水平居中。当然，在此之前，我们需要设置父框为相对定位，使父框成为子框的相对框。
  • 用法：对父框设置position:relative，对子框设置position:absolute，left:50%，transform:translateX(-50%)。

（2）代码实例

<div class="parent"><div class="child>DEMO</div>
</div>
.parent {position:relative;
}
.child {position:absolute;left:50%;transform:translateX(-50%);
}

（3）优缺点

  • 优点:居中元素不会对其他的产生影响
  • 缺点:transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀

4）使用flex+margin
（1）原理、用法

  • 原理：通过CSS3中的布局利器flex将子框转换为flex item，再设置子框居中以达到居中。
  • 用法：先将父框设置为display:flex，再设置子框margin:0 auto。

（2）代码实例

<div class="parent"><div class="child>DEMO</div>
</div>
.parent {display:flex;
}
.child {margin:0 auto;
}

（3）优缺点

  • 缺点:低版本浏览器(ie6 ie7 ie8)不支持

5）使用flex+justify-content
（1）原理、用法

  • 原理：通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。
  • 用法：先将父框设置为display:flex，再设置justify-content:center。

（2）代码实例

<div class="parent"><div class="child>DEMO</div>
</div>
.parent {display:flex;justify-content:center;
}

（3）优缺点

  • 优点:设置parent即可
  • 缺点:低版本浏览器(ie6 ie7 ie8)不支持

垂直居中

1）使用table-cell+vertical-align
（1）原理、用法

  • 原理：通过将父框转化为一个表格单元格显示（类似 <td> 和 <th>），再通过设置属性，使表格单元格内容垂直居中以达到垂直居中。
  • 用法：先将父框设置为display:table-cell，再设置vertical-align:middle。

（2）代码实例

<div class="parent"><div class="child>DEMO</div>
</div>
.parent {display:table-cell;vertical-align:middle;
}

（3）优缺点

  • 优点:兼容性较好，ie8以上均支持

2）使用absolute+transform
（1）原理、用法

  • 原理：类似于水平居中时的absolute+transform原理。将子框设置为绝对定位，移动子框，使子框上边距离相对框上边边框的距离为相对框高度的一半，再通过向上移动子框的一半高度以达到垂直居中。当然，在此之前，我们需要设置父框为相对定位，使父框成为子框的相对框。
  • 用法：先将父框设置为position:relative，再设置子框position:absolute，top:50%，transform:translateY(-50%)。

（2）代码实例

<div class="parent"><div class="child>DEMO</div>
</div>
.parent {position:relative;
}
.child {position:absolute;top:50%;transform:translateY(-50%);
}

（3）优缺点

  • 优点:居中元素不会对其他的产生影响
  • 缺点:transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀

3）使用flex+align-items
（1）原理、用法

  • 原理：通过设置CSS3中的布局利器flex中的属性align-times，使子框垂直居中。
  • 用法：先将父框设置为position:flex，再设置align-items:center。

（1）代码实例

<div class="parent"><div class="child>DEMO</div>
</div>
.parent {position:flex;align-items:center;
}

（3）优缺点

  • 优点:只设置parent
  • 缺点:兼容性存在一定问题

水平垂直居中

1）使用absolute+transform
（1）原理、用法

  • 原理：将水平居中时的absolute+transform和垂直居中时的absolute+transform相结合。详见：水平居中的3）和垂直居中的2）。
  • 见水平居中的3）和垂直居中的2）。

（2）代码实例

<div class="parent"><div class="child>DEMO</div>
</div>
.parent {position:relative;
}
.child {position:absolute;left:50%;top:50%;transform:tranplate(-50%,-50%);
}

（3）优缺点

  • 优点:child元素不会对其他元素产生影响
  • 缺点:兼容性存在一定问题

2）使用inline-block+text-align+table-cell+vertical-align
（1）原理、用法

  • 原理：使用inline-block+text-align水平居中，再用table-cell+vertical-align垂直居中，将二者结合起来。详见：水平居中的1）和垂直居中的1）。
  • 见水平居中的1）和垂直居中的1）。

（2）代码实例

<div class="parent"><div class="child>DEMO</div>
</div>
.parent {text-align:center;display:table-cell;vertical-align:middle;
}
.child {display:inline-block;
}

（3）优缺点

  • 优点:兼容性较好

3）使用flex+justify-content+align-items
（1）原理、用法

  • 原理：通过设置CSS3布局利器flex中的justify-content和align-items，从而达到水平垂直居中。详见：水平居中的4）和垂直居中的3）。
  • 见水平居中的4）和垂直居中的3）。

（2）代码实例

<div class="parent"><div class="child>DEMO</div>
</div>
.parent {display:flex;justify-content:center;align-items:center;
}

（3）优缺点

  • 优点:只设置了parent
  • 缺点:兼容性存在一定问题

多列布局

定宽+自适应

1）使用float+overflow
（1）原理、用法

  • 原理：通过将左边框脱离文本流，设置右边规定当内容溢出元素框时发生的事情以达到多列布局。
  • 用法：先将左框设置为float:left、width、margin-left，再设置实际的右框overflow:hidden。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
.left {float:left;width:100px;margin-right:20px;
}
.right {overflow:hidden;
}

（3）优缺点

  • 优点:简单
  • 缺点:不支持ie6

2）使用float+margin
（1）原理、用法

  • 原理：通过将左框脱离文本流，加上右框向右移动一定的距离，以达到视觉上的多列布局。
  • 用法：先将左框设置为float:left、margin-left，再设置右框margin-left。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
.left {float:left;width:100px;
}
.right {margin-left:120px;
}

（3）优缺点

  • 优点:简单，易理解
  • 缺点:兼容性存在一定问题，ie6下有3px的bug。right下的p清除浮动将产生bug

3）使用float+margin（改良版）
（1）原理、用法

  • 原理：在1）的基础之上，通过向右框添加一个父框，再加上设置左、右父框属性使之产生BFC以去除bug。
  • 用法：先将左框设置为float:left、margin-left、position:relative，再设置右父框float:right、width:100%、margin-left，最后设置实际的右框margin-left。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="rigth-fix"><div class="right"><p>right</p><p>right</p></div></div>
</div>
.left {float:left;width:100px;position:relative;
}
.right-fix {float:right;width:100%;margin-left:-100px;
}
.right {margin-left:120px;
}

（3）优缺点

  • 优点:简单，易理解

4）使用table
（1）原理、用法

  • 原理：通过将父框设置为表格，将左右边框转化为类似于同一行的td，从而达到多列布局。
  • 用法：先将父框设置为display:table、width:100%、table-layout:fixed，再设置左右框display:table-cell，最后设置左框width、padding-right。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
.parent {display:table;width:100%;table-layout:fixed;
}
.left {width:100px;padding-right:20px;
}
.right,.left {display:table-cell;    
}

5）使用flex
（1）原理、用法

  • 原理：通过设置CSS3布局利器flex中的flex属性以达到多列布局。
  • 用法：先将父框设置为display:flex，再设置左框flex:1，最后设置左框width、margin-right。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
.parent {display:flex;
}
.left {width:100px;margin-right:20px;
}
.right {flex:1;
}

（3）优缺点

  • 优点:flex很强大
  • 缺点:兼容性存在一定问题，性能存在一定问题

两列定宽+一列自适应

（1）原理、用法

  • 原理：这种情况与两列定宽查不多。
  • 用法：先将左、中框设置为float:left、width、margin-right，再设置右框overflow:hidden。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="center"><p>center</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
.left,.center {float:left;width:100px;margin-right:20px;
}
.right {overflow:hidden;
}

不定宽+自适应

1）使用float+overflow
（1）原理、用法

  • 原理：这种情况与两列定宽查不多。
  • 用法：先将左框设置为float:left、margin-right，再设置右框overflow: hidden，最后设置左框中的内容width。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
.left{float: left;margin-right: 20px;}
.right{overflow: hidden;
}
.left p{width: 200px;
}

（3）优缺点

  • 优点:简单
  • 缺点:ie6下兼容性存在一定问题

2）使用table
（1）原理、用法

  • 原理：通过将父框改变为表格，将左右框转换为类似于同一行的td以达到多列布局，设置父框宽度100%，给左框子元素一个固定宽度从而达到自适应。
  • 用法：先将父框设置为display: table、width: 100%，再设置左、右框display: table-cell，最后设置左框width: 0.1%、padding-right以及左框中的内容width。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
.parent{display: table; width: 100%;}
.left,.right{display: table-cell;
}
.left{width: 0.1%;padding-right: 20px;
}
.left p{width:200px;
}

（3）优缺点

  • 缺点:ie6 ie7不支持

3）使用flex
（1）原理、用法

  • 原理：通过设置CSS3布局利器flex中的flex属性以达到多列布局，加上给左框中的内容定宽、给右框设置flex达到不定款+自适应。
  • 用法：先将父框设置为display:flex，再设置右框flex:1，最后设置左框margin-right:20px、左框中的内容width。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
.parent {display:flex;
}
.left {margin-right:20px;
}
.right {flex:1;
}
.left p{width: 200px;
}

（3）优缺点

  • 优点:flex很强大
  • 缺点:兼容性存在一定问题，性能存在一定问题

两列不定宽+一列自适应

（1）原理、用法

  • 原理：这个情况与一列不定宽+一列自适应查不多。
  • 用法：先将左、中框设置为float:left、margin-right，再设置右框overflow:hidden，最后给左中框中的内容设置width。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="center"><p>center</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
.left,.center{float: left;margin-right: 20px;
}
.right{overflow: hidden;
}
.left p,.center p{width: 100px;
}

等分布局

公式转化:
l = w * n + g * (n-1) -> l = w * n + g * n - g -> l + g = （w + g） * n

因此，我们需要解决两个问题：

  • 如何让总宽度增加g(即：L+g)
  • 如何让每个宽包含g（即：w+g）

1）使用float
（1）原理、用法

  • 原理：增大父框的实际宽度后，使用CSS3属性box-sizing进行布局的辅助。
  • 用法：先将父框设置为margin-left: -*px，再设置子框float: left、width: 25%、padding-left、box-sizing: border-box。

（2）代码实例

<div class="parent"><div class="column"><p>1</p></div><div class="column"><p>2</p></div><div class="column"><p>3</p></div><div class="column"><p>4</p></div>
</div>
.parent{margin-left: -20px;//l增加g
}
.column{float: left;width: 25%;padding-left: 20px;box-sizing: border-box;//包含padding区域 w+g
}

（3）优缺点

  • 优点：兼容性较好
  • 缺点：ie6 ie7百分比兼容存在一定问题

2）使用table
（1）原理、用法

  • 原理：通过增加一个父框的修正框，增大其宽度，并将父框转换为table，将子框转换为tabel-cell进行布局。
  • 用法：先将父框的修正框设置为margin-left: -*px，再设置父框display: table、width:100%、table-layout: fixed，设置子框display: table-cell、padding-left。

（2）代码实例

<div class="parent-fix"><div class="parent"><div class="column"><p>1</p></div><div class="column"><p>2</p></div><div class="column"><p>3</p></div><div class="column"><p>4</p></div></div>
</div>
.parent-fix{margin-left: -20px;//l+g
}
.parent{display: table;width:100%;table-layout: fixed;
}
.column{display: table-cell;padding-left: 20px;//w+g
}

（3）优缺点

  • 优点：结构和块数无关联
  • 缺点：增加了一层

3）使用flex
（1）原理、用法

  • 原理：通过设置CSS3布局利器flex中的flex属性以达到等分布局。
  • 用法：将父框设置为display: flex，再设置子框flex: 1，最后设置子框与子框的间距margin-left。

（2）代码实例

<div class="parent"><div class="column"><p>1</p></div><div class="column"><p>2</p></div><div class="column"><p>3</p></div><div class="column"><p>4</p></div>
</div>
.parent{display: flex;
}
.column{flex: 1;
}
.column+.column{margin-left:20px;
}

（3）优缺点

  • 优点：代码量少，与块数无关
  • 缺点：兼容性存在一定问题

定宽+自适应+两块高度一样高

1）使用float
（1）原理、用法

  • 原理：通过过分加大左右子框的高度，辅助超出隐藏，以达到视觉上的等高。
  • 用法：将父框设置overflow: hidden，再设置左右子框padding-bottom: 9999px、margin-bottom: -9999px，最后设置左框float: left、width、margin-right，右框overflow: hidden。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
p{background: none!important;
}
.left,.right{background: #444;
}
.parent{overflow: hidden;
}
.left,.right{padding-bottom: 9999px;margin-bottom: -9999px;
}
.left{float: left; width: 100px;margin-right: 20px;
}
.right{overflow: hidden;
}

(3)优缺点

  • 优点：兼容性好
  • 缺点：伪等高，不是真正意义上的等高

2）使用table
（1）原理、用法

  • 原理：将父框转化为tabel，将子框转化为tabel-cell布局，以达到定宽+自适应+两块高度一样高。
  • 用法：先将父框设置为display:table、width:100%、table-layout:fixed，再设置左右框为display:table-cell，最后设置左框width、padding-right。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
.parent {display:table;width:100%;table-layout:fixed;
}
.left {width:100px;padding-right:20px;
}
.right,.left {display:table-cell;
}

3）使用flex
（1）原理、用法

  • 原理：通过设置CSS3布局利器flex中的flex属性以达到定宽+自适应+两块高度一样高。
  • 用法：将父框设置为display: flex，再设置左框width、margin-right，最后设置右框flex:1。

（2）代码实例

<div class="parent"><div class="left"><p>left</p></div><div class="right"><p>right</p><p>right</p></div>
</div>
.parent {display:flex;
}
.left {width:100px;margin-right:20px;
}
.right {flex:1;
}

（3）优缺点

  • 优点:代码少，flex很强大
  • 缺点:兼容性存在一定问题

4)使用display
（1）原理、用法

  • 原理：通过设置display中的CSS3的-webkit-box属性以达到定宽+自适应+两块高度一样高。
  • 用法：将父框设置为display: -webkit-box、width: 100%，再设置左框width、margin-right，最后设置右框-webkit-box-flex: 1。

（2）代码实例

<div class="parent"><div class="left">left</div><div class="right">right </div>
</div>
.parent {width: 100%;display: -webkit-box;
}
.left {width:100px;margin-right: 20px;
}
.right {-webkit-box-flex: 1;
}

(3)优缺点

  • 缺点:兼容性存在较大的问题

全屏布局

全屏布局的特点

  • 滚动条不是全局滚动条，而是出现在内容区域里，往往是主内容区域
  • 浏览器变大时，撑满窗口

全屏布局的方法

1）使用position
（1）原理、用法

  • 原理：将上下部分固定，中间部分使用定宽+自适应+两块高度一样高。
  • 用法：见实例。

（2）代码实例

<div class="parent"><div class="top">top</div><div class="left">left</div><div class="right"><div class="inner">right</div></div><div class="bottom">bottom</div>
</div>
html,body,.parent{margin:0;height:100%;overflow:hidden;
}
body{color:white;
}
.top{position:absolute;top:0;left:0;right:0;height:100px;background:blue;
}
.left{position:absolute;left:0;top:100px;bottom:50px;width:200px;background:red;
}
.right{position:absolute;left:200px;top:100px;bottom:50px;right:0;background:pink;overflow: auto;
}
.right .inner{min-height: 1000px;
}
.bottom{position:absolute;left:0;right:0;bottom:0;height:50px;background: black;
}

(3)优缺点

  • 优点：兼容性好，ie6下不支持

2）使用flex
（1）原理、用法

  • 原理：通过灵活使用CSS3布局利器flex中的flex属性和flex-direction属性以达到全屏布局。
  • 用法：见实例。

（2）代码实例

<div class="parent"><div class="top">top</div><div class="middle"><div class="left">left</div><div class="right"><div class="inner">right</div></div></div><div class="bottom">bottom</div>
</div>
html,body,.parent{margin:0;height:100%;overflow:hidden;
}
body{color: white;
} 
.parent{display: flex;flex-direction: column;
}
.top{height:100px;background: blue;
}
.bottom{height:50px;background: black;
}
.middle{flex:1;display:flex;
}
.left{width:200px;background: red;
}
.right{flex: 1;overflow: auto;background:pink;
}
.right .inner{min-height: 1000px;
}

(3)优缺点

  • 缺点：兼容性差，ie9及ie9以下不兼容

1）使用flex
（1）原理、用法

  • 原理：通过灵活使用CSS3布局利器flex中的flex属性和flex-direction属性以达到全屏布局。
  • 用法：见实例。

（2）代码实例

<div class="parent"><div class="top">top</div><div class="middle"><div class="left">left</div><div class="right"><div class="inner">right</div></div></div><div class="bottom">bottom</div>
</div>
html,body,.parent{margin:0;height:100%;overflow:hidden;
}
body{color:white;
} 
.parent{display:flex;flex-direction:column;
}
.top{background:blue;
}
.bottom{background:black;
}
.middle{flex:1;display:flex;
}
.left{background: red;
}
.right{flex:1;overflow:auto;background: pink;
}
.right .inner{min-height:1000px;
}

全屏布局相关方案的兼容性、性能和自适应一览表

方案兼容性性能是否自适应
Position好好部分自适应
Flex较差差可自适应
Grid差较好可自适应

当然，最最最最最后，如果您喜欢这片文章，可以疯狂点赞！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/247555.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

AES加密算法的学习笔记

AES加密算法的学习笔记

AES简介高级加密标准(AES,Advanced Encryption Standard)为最常见的对称加密算法(微信小程序加密传输就是用这个加密算法的)。 对称加密算法也就是加密和解密用相同的密钥&#xff0c;具体的加密流程如下图&#xff1a; 下面简单介绍下各个部分的作用与意义&#xff1a; 明文P没…
阅读更多...
前端 crypto-js aes 加解密

前端 crypto-js aes 加解密

背景 前段时间公司做项目&#xff0c;该项目涉及到的敏感数据比较多&#xff0c;经过的一波讨论之后&#xff0c;决定前后端进行接口加密处理&#xff0c;采用的是 AES BASE64 算法加密~ 网上关于 AES 对称加密的算法介绍看上一篇&#xff01; 具体实现 其实搞懂了是怎么一回事…
阅读更多...
随笔记录（2019.7.10）

随笔记录（2019.7.10）

1、ISO/OSI 网络七层参考模型 物理层 数据链路层 网络层 传输层 会话层 表示层 应用层 2、 TCP/IP 网络四层模型和五层模型 四层模型&#xff1a; 网络接口层 网络层 传输层 应用层 五层模型&#xff1a; 物理层 数据链路层 网络层 传输层 应用层 3、 协议簇 &#xff08;1&a…
阅读更多...
Highcharts的饼图大小的控制

Highcharts的饼图大小的控制

在Highcharts中&#xff0c;饼图的大小是Highcharts自动计算并进行绘制。饼图的大小受数据标签大小、数据标签到切片的距离影响。当数据标签内容较多&#xff0c;并且距离切片较远时&#xff0c;饼图就会被压缩的很小。解决这个问题&#xff0c;有以下几种方法&#xff1a;&…
阅读更多...
document.createDocumentFragment 以及创建节点速度比较

document.createDocumentFragment 以及创建节点速度比较

document.createDocumentFragment document.createDocumentFragment()方法创建一个新空白的DocumentFragment对象。 DocumentFragments是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段&#xff0c;将元素附加到文档片段&#xff0c;然后将文档片段附加到DOM树。…
阅读更多...
Javascript重温OOP之原型与原型链

Javascript重温OOP之原型与原型链

prototype原型对象 每个函数都有一个默认的prototype属性&#xff0c;其实际上还是一个对象&#xff0c;如果被用在继承中&#xff0c;姑且叫做原型对象。 在构造函数中的prototype中定义的属性和方法&#xff0c;会被创建的对象所继承下来。举个栗子&#xff1a; function F()…
阅读更多...
webpack超详细配置

webpack超详细配置

在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出一个合理的属于自己webpack项目; 流程 webpack安装 Step 1: 首先安装Node.js, 可以去Node.js官网下载.Step2: 在Git或者cmd中输入下面这段代码, 通过全局…
阅读更多...
小白十分钟-推荐导航栏

小白十分钟-推荐导航栏

大腿绕道&#xff0c;给小白学习用&#xff0c;上代码 <div class"list"><div class"infor"><ul class"left"><li><a href"">限时特价</a></li><li><a href"">热门推…
阅读更多...
掌握ES6/ES2015核心内容

掌握ES6/ES2015核心内容

ECMAScript 6&#xff08;以下简称ES6&#xff09;是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的&#xff0c;所以又称ECMAScript 2015。 也就是说&#xff0c;ES6就是ES2015。 虽然目前并不是所有浏览器都能兼容ES6全部特性&#xff0c;但越来越多的程序员…
阅读更多...
转：canvas--放大镜效果

转：canvas--放大镜效果

<!DOCTYPE html><html><head><meta charset"UTF-8"><title>鼠标事件</title></head><body><canvas id"canvas"></canvas><canvas id"offCanvas" style" display: none;&qu…
阅读更多...
MON

MON

早上5点,咪咪牛就醒了,开始跳到我边上,用白毛毛把我弄醒,在我身上走来走去,把她按住抚摸也不能让她停止.....只能拎起来扔到边上了 ;)看起来还的确是很调皮的猫咪呢昨天晚上就开始不太怕我了,走到我的椅子边上喵喵叫,直到把她放在身上,才慢慢睡觉,满可爱的早上出门叫车,一车正停…
阅读更多...
CSS做个Switch开关

CSS做个Switch开关

Switch开关&#xff1a;根据需求可知&#xff0c;Switch开关只有两种选择&#xff0c;true或false。所以我们想到HTML的checkbox控件&#xff0c;用它来做。　　<input id"switch" type"checkbox" class"switch" />但是在浏览器中&#xf…
阅读更多...
解决虚拟机能ping通宿主机，而宿主机不能ping通虚拟机

解决虚拟机能ping通宿主机，而宿主机不能ping通虚拟机

解决虚拟机能ping通宿主机&#xff0c;而宿主机不能ping通虚拟机 首先&#xff0c;查看宿主机的网卡状态 如果没有&#xff0c;打开虚拟机&#xff0c;选择编辑 打开虚拟网络编辑器&#xff0c;并选择更改设置 勾选将设备适配器连接此网络 完成&#xff0c;这样宿主机便可以pin…
阅读更多...
推荐base.css

推荐base.css

学习《编写高质量代码--Web前端开发修炼之道》 /* CSS Document */ /*css reset*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{ border-collapse:collapse;border-spacing:0;} fieldest,i…
阅读更多...
如何通过RFID开发来迎接第四次工业革命（转）

如何通过RFID开发来迎接第四次工业革命（转）

我们都经历了革命性的冲击&#xff0c;自上世纪90年代初的互联网冲击了文化和商业&#xff0c;但很少人知道如何完成RFID开发来迎接第四次工业革命&#xff0c;在接下来的二十年里&#xff0c;智能工厂的出现将成为一个重要组成部分。制造业作为我国工业的主体&#xff0c;面临…
阅读更多...
JS 数据处理技巧及小算法汇总（转载）

JS 数据处理技巧及小算法汇总（转载）

1、根据属性来更新一个数组中的对象 const arr [ {id: 1, score: 1}, {id: 2, score: 2}, {id: 3, score: 4}]; //更新的值 const newValue {id: 3, score: 3} 更新数组中id为3的score值。 Es6 装逼写法如下&#xff1a; const result initial.map(x > x.id newValue.i…
阅读更多...
Vue中watch的简单应用

Vue中watch的简单应用

Vue.js 有一个方法 watch&#xff0c;它可以用来监测Vue实例上的数据变动。 如果对应一个对象&#xff0c;键是观察表达式&#xff0c;值是对应回调&#xff0c;值也可以是方法名&#xff0c;或者是对象&#xff0c;包含选项。 下面写两个demo&#xff0c;参考demo来了解一下 …
阅读更多...
placeholder的兼容处理方法

placeholder的兼容处理方法

placeholder是html5新增的一个属性&#xff0c;极大的减轻了表单提示功能的实现&#xff0c;但是对于IE6-IE9真的是只能靠自己写啦&#xff01; 但是在自己写时会掉进了一个坑里&#xff0c;还好用了一会时间还是爬出来啦。 最终的解决方法方法如下&#xff1a; 1 <form nam…
阅读更多...
运行Xcode时出现 Lazy loading NSBundle MobileCoreServices.framework和 Loaded MobileCoreServices.framework

运行Xcode时出现 Lazy loading NSBundle MobileCoreServices.framework和 Loaded MobileCoreServices.framework

运行Xcode时出现 Lazy loading NSBundle MobileCoreServices.framework和 Loaded MobileCoreServices.framework 解决方案&#xff1a; 1、打开项目的 Product-->Scheme --> Edit Scheme--> Run-->Arguments-->Environment Variables添加Name为OS_ACTIVITY_MO…
阅读更多...
详解 vue-cli 的打包配置文件代码(转)

详解 vue-cli 的打包配置文件代码(转)

一、前言 对于webpack基础不好&#xff0c;node指令不通的童鞋。估计对自己搭建Vue、react脚手架是相当头疼的&#xff0c;有种无从下手的感觉。然而&#xff0c;从头看这2块&#xff0c;耗时太长&#xff0c;而且说实话得练才行&#xff0c;不练练手看不明白。那大多数人就采取…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023