php css html怎么开发,css的开发小技巧

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

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

html代码：

haorooms多列等高布局左

多列等高布局,使用正负 margin 与 padding 相冲的方式实现。

方法一： 使用正负 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代码如下：

1

2

3

4

5

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代码如下：

• haorooms
• 测试
• hao测试
• 右侧
• 边界线
• 消失
• 测试

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;}

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

相关阅读：