CSS 专业技巧收集

最新推荐文章于 2025-04-22 16:59:41 发布

转载最新推荐文章于 2025-04-22 16:59:41 发布 · 61 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kerry-xu/p/5980661.html

使用 `:not()` 为导航添加/取消边框

.nav li:not(:last-child){
    border-right:1px solie #ccc;
}

使用负的 `nth-child` 选取元素

/* 选择前3个元素并显示它们 */ 
li:nth-child(-n+3){
    display:block;
}
 
/* 选择第4到第8个元素并显示它们 */ 
li:nth-child(n+4):nth-child(-n+8){
    display:block;
}
 
/* 选择最后两个元素并显示它们 */ 
li:nth-last-child(-n+2){
    display:block;
}

文本展示优化

html{   
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

设置表格相同宽度

table-layout:fixed;

未知元素高度垂直居中

.parent{ position: relative; } 
.child{ 
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: 
    translate(-50%, -50%);
}

使用 flexbox

垂直居中

.parent{ display: flex; flex-direction: column; justify-content: center; }

水平垂直居中

.parent{display: flex;justify-content: center;align-items: center;}

纯CSS实现移动端常见布局

需要的效果,如下图:

实现效果图

CSS代码
* {margin:0;padding:0;} 
.box1{width:50%;padding-bottom:50%;float: left;background:#123;} 
.box2{width:50%;padding-bottom:25%;float: right;background:#234;} 
.box3{width:50%;padding-bottom:25%;float: right;background:#345;}

HTML结构
<divclass="box1"></div>
<divclass="box2"></div>
<divclass="box3"></div>

移动端制作边框的方法

outline: 1px solid #ddd;

这个属性是不会计算在盒子模型当中，另外,当你尝试做一个两列布局的列表的时候,使用这个参数,你会发现两个元素之间的边框好像是两个像素.一般情况下,你只需要给元素加上背景就可以解决这个问题.后面的元素的背景会遮住前面元素的outline发出来的边框.

box-shadow:0 0 0 1px #ddd;

实现段落两端对齐的方法

text-align: justify; //谷歌及火狐

text-justify:distribute; //IE

注：只有 IE 支持 text-justify 属性， text-justify必须在设置了text-align:justify的情况下才起作用。

text-justify在英文中的使用：

auto | inter-word|inter-cluster | kashika | distribute-center-last，在英文段落中的排版影响效果不明显；

iner-ideograph | distribute | distribute-all-lines则会拉伸英文单词中字符的间距。

text-justify在中文中的使用：

必须在设置了text-align:justify的情况下才起作用（重要的事情在说一边）；

iner-ideograph | distribute | distribute-all-lines这三个属性值配合text-align:justify可以实现中文段落的文字两端对齐

distribute-all-lines时在ie浏览器在ie7以下，最后一行会两端对齐（注意这个在后面实现单行文本两端对齐的时候会用到）

单选框以及复选框的css美化方法

方法一：

css:
input {display: none;} 
input + span {display: inline-block;width: 50px;height: 50px;background: #999;cursor: pointer;} 
input[type="radio"] + span {border-radius: 50%;} 
input[type="checkbox"] + span {border-radius: 10%;} 
input[type="checkbox"]:checked + span {background: #f60;} 
input[type="radio"]:checked + span {background: #f60;}

html:
<label><inputname="radio"type="radio"><span></span></label>
<label><input name="radio" type="radio"><span></span></label>
<label><inputname="check"type="checkbox"><span></span></label>

方法二：

html:
<input type="checkbox" id="awesome" />
<label for="awesome">Awesome!</label>

css:  checked \ focus \ disabled \ active都可以
input[type="checkbox"]{ 
position: absolute; clip: rect(0,0,0,0); 
}
input[type="checkbox"] + label::before { 
content: '\a0';  display: inline-block; vertical-align: .2em; width: .8em; height: .8em; margin-right: .2em; border-radius: .2em; background: silver; text-indent: .15em; line-height: .65; 
}
input[type="checkbox"]:checked + label::before { 
content: '\2713'; background: yellowgreen; 
}
input[type="checkbox"]:focus + label::before { 
box-shadow: 0 0 .1em .1em #58a; 
} 
input[type="checkbox"]:disabled + label::before { 
background: gray; box-shadow: none; color: #555; 
}