点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

css的开发小技巧

来源：懂视网责编：小采时间：2020-11-27 15:27:41

css的开发小技巧

css的开发小技巧:关于css技巧类的在网站里已经发了很多了，那么我今天在总结归纳一下平时在工作中可以遇到问题，并且说一下用CSS的解决方案，什么是多列等高布局？点击增加一侧文字，另一侧背景也增加。html代码：<div id="container"> <

推荐度：

点击下载本文 文档为doc格式

导读css的开发小技巧:关于css技巧类的在网站里已经发了很多了，那么我今天在总结归纳一下平时在工作中可以遇到问题，并且说一下用CSS的解决方案，什么是多列等高布局？点击增加一侧文字，另一侧背景也增加。html代码：<div id="container"> <

关于css技巧类的在网站里已经发了很多了，那么我今天在总结归纳一下平时在工作中可以遇到问题，并且说一下用CSS的解决方案，什么是多列等高布局？

点击增加一侧文字，另一侧背景也增加。

html代码：

<div id="container">
 <div class="left">haorooms多列等高布局左</div> 
 <div class="right" id="rights">多列等高布局,使用正负 margin 与 padding 相冲的方式实现。</div></div>

方法一：使用正负 margin 与 padding 相冲的方式实现

 #container{
 width:400px;
 margin:0 auto;
 background:#eee;
 overflow:hidden;}.left,.right{
 width:200px;
 float:left;
 font-size: 16px;
 line-height:24px;
 color:#333;
 padding-bottom:5000px;
 margin-bottom:-5000px;}.left{
 background-color: deeppink;}.right{
 background-color:yellowgreen;}

给一个足够大的padding和负margin

二、使用 display:flex 的方式实现

这个方式很简单，移动端我们经常用，container 设置为display:flex，子元素设置为flex：1就可以了。

三、display:table-cell 实现

和上面方法类似，container 设置为display:table;，子元素设置为display:table-cell;就可以了。

四、父容器设置背景色实现

如下：

#container{
 width:400px;
 margin:0 auto;
 background-color: deeppink;
 overflow:hidden;}.left,.right{
 width:200px;
 float:left;
 font-size: 16px;
 line-height:24px;
 color:#333;}.right{
 background-color:yellowgreen;}

五、父容器多重背景色--线性渐变

#container{
 width:400px;
 margin:0 auto;
 background-image:
 linear-gradient(90deg, yellowgreen 50%, deeppink 0);
 overflow:hidden;}.left,.right{
 width:200px;
 float:left;
 font-size: 16px;
 line-height:24px;
 color:#333;}

六、border实现

 #container{
 border-left:200px solid yellowgreen;
 background-color:deeppink;
 width:200px;
 font-size: 16px;
 line-height:24px;
 color:#333;
 }
 .left{
 width:200px;
 margin-left:-200px;
 float:left;
 }

多列均匀布局

方法一：display:flex

这种方法上面也讲过，实现起来比较简单，适合移动端布局。

方法二：借助伪元素及 text-align:justify

html代码如下：

<div class="container">
 <div class="justify">
 <i>1</i>
 <i>2</i>
 <i>3</i>
 <i>4</i>
 <i>5</i>
 </div></div>

css代码如下：

.justify{ text-align: justify; text-align-last: justify; // 新增这一行}.justify i{ width:24px; line-height:24px; display:inline-block; text-align:center;}
text-align-last兼容性不是很好，可以使用::after，
.justify{ text-align: justify;}.justify i{ width:24px; line-height:24px; display:inline-block; text-align:center; border-radius:50%;}.justify:after { content: ""; display: inline-block; position: relative; width: 100%;}

列表布局边界线问题

方法一：margin负边距

思路：

外层设置width，overflow设置为hidden,内层设置负边距，margin-left:-1px;就可以把左侧边距隐藏

html代码如下：

<div class="ul-container">
 <ul>
 <li>haorooms</li>
 <li>测试</li>
 <li>hao测试</li>
 <li>右侧</li>
 <li>边界线</li>
 <li>消失</li>
 <li>测试</li>
 </ul></div>

css代码：

ul{
 width: 300px;
 margin-left:-1px;}li{
 float:left;
 width:99px;
 line-height:30px;
 text-align:center;
 border-left:1px solid #999;
 font-size:18px;
 margin-bottom:10px;}.ul-container{
 width: 300px; 
 margin: 50px auto;
 overflow:hidden;
 background: #eee;
 padding:10px 0;}

方法二：使用伪类选择器

// 使用伪类选择器，选择第 3n 个元素去掉边框li:nth-child(3n){
border-right:none;}

在工作中常见的问题就这么多了，更多精彩请关注Gxl网其它相关文章！

css的开发小技巧

推荐度：

点击下载本文 文档为doc格式

标签：小技巧技巧开发

热门焦点

css的开发小技巧

css的开发小技巧

css的开发小技巧

最新推荐

猜你喜欢

热门推荐