好久没整理博客了 进来啰嗦两句   继续抄别人的博客

一、resize实现图片对比

resize的语法如下:

resize:none | both | horizontal | vertical

案例效果如下图 **(鼠标移到左下角白色区域,往右侧拖动,实现图片对比效果)**:

我应用到了resize的如下代码:

resize: horizontal;

可以水平拉伸!

二、:not()的应用技巧

我们平时在书写导航栏分割线的时候,最后一个标签是没有分割线的,我们一般的写法如下:

/* 先给所有添加右侧边框 */

.nav li {

border-right: 1px solid #666;

}

/* 再去除最后一个边框 */

.nav li:last-child {

border-right: none;

}

运用:not()之后如下书写:

.nav li:not(:last-child) {

border-right: 1px solid #666;

}

还可以用我们之前的~[波浪选择器][4]来实现,不明白的可以点击进入,查看第8条!

.nav li:first-child ~ li {

border-left: 1px solid #666;

}

我们在用逗号分隔的列表,最后一个让他没有逗号,写法如下:

ul > li:not(:last-child)::after {

content: ",";

}

not的应用,让我们方便了不少,节省了一些代码!

三、任意元素垂直居中

关于css垂直居中,我之前写过几篇文章:[css固定宽高DIV内部元素垂直居中的方法][5] 和 [css的div垂直居中的方法][6] ,今天我们在body中,初始化定义一下,就可以让任意元素垂直居中,代码如下:

html, body {

height: 100%;

margin: 0;

}

body {

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

display: -webkit-flex;

display: flex;

}

当然,这个有一定的兼容问题!不过现代浏览器是没有问题的!

四、表格单元格等宽

用如下代码可以让表格单元格等宽

.haorooms{

table-layout: fixed;

}

五、使用Flexbox摆脱各种Margin Hacks

实现侧栏时,我们不再需要各种nth-、first-和last-child等设置margin,可以使用Flexbox轻松实现均匀分布!代码如下:

.list {

display: flex;

justify-content: space-between;

}

.list .person {

flex-basis: 23%;

}

六、给空连接使用属性选择符

这个我上一篇文章应用过了,就是使用before或者after的[content的attr属性][7]!

具体可以看:http://www.haorooms.com/post/content_attr

我们还可以给空a标签添加属性,代码如下:

a[href^="http"]:empty::before {

content: attr(href);

}

七、初始化box-sizing

从html中继承box-sizing属性,这样的话,后期维护比较方便。

html {

box-sizing: border-box;

}

*, *:before, *:after {

box-sizing: inherit;

}

八、在nth-child中使用负数

nth-child中使用负数,可以选择小于等于某个数的值,例如:

li:nth-child(-n+4){background:red}

小于等于4的li,显示为红色!

还可以如下应用:

li {

display: none;

}

li:nth-child(-n+3) {

display: block;

}

上面代码的含义是,我们让前三个li显示(小于等于3的),其他的li都隐藏!

关于nth-child的应用,我之前也写过文章,具体请看:http://www.haorooms.com/post/css3_nth-child

九、文本显示优化

html {

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

text-rendering: optimizeLegibility;

}

上面代码可以让字体在我们的设备中最优显示!

十、border的应用技巧!

关于border,我前面的文章已经介绍过其对于[对话框][8]的书写。http://www.haorooms.com/post/css_dhk

border的应用还是蛮广泛的!我之前在慕课网的课程 html5左侧导航,讲了[三道杠][9]的书写!,是运用了box-shadow,关于文章,具体请看:http://www.haorooms.com/post/box_shadow_css

但是呢,这个是css3的属性,今天给大家讲运用border书写三道杠,兼容性很好!代码如下:

width:40px;height:7px;

color: #999;

border-top:18px  double;

border-bottom: 6px solid;

运用border的double属性,可以轻松绘制三道杠,兼容性很好!并且,大家注意的是:border-color可以继承color,我们只要修改color的值,就可以修改border-color的值!

十一、vertical-align 属性

vertical-align 只在行内元素,或者inline、inline-block等中才起作用。当我们在某个div中使用垂直居中是不管用的,我之前的文章写了利用vertical-align,[垂直居中][10]的办法,具体请看:http://www.haorooms.com/post/div_guding_inner_center

除此之外,vertical-align 还支持数值和百分比!

我们可以如下写:

.haorooms{vertical-align:-2px;}

.haorooms{vertical-align:-10%;}

这个负值和 margin-bottom类似,但是呢,vertical-align可以将父级元素撑大!

十二、margin重叠解决方案列举

1、父级元素bfc ,不懂bfc的情看我之前的文章:http://www.haorooms.com/post/css_BFC_bgdiv

2、父级元素给一个padding

3、父级元素给一个border

4、子元素前面加任意一个空的内联元素,(例如:span、nbsp等等)

​ 十三、父元素font-size:0的作用

display:inline-block的元素之间会有一个字符的间隙,这个间隙导致了最后一个会掉下来。解决方案一般有如下几种:

1、给父元素设置font-size:0px;

2、取消掉换行符,如这样:

<span>aaaa</span><span>aaaa</span><span>aaaa</span>

连续。

或者如下:

<div class="space">

<a href="##">惆怅</a><!--

--><a href="##">淡定</a><!--

--><a href="##">热血</a>

</div>

<div class="space">

<a href="##">惆怅</a

><a href="##">淡定</a

><a href="##">热血</a>

</div>

但是这种方式不推荐

3、使用margin负值。

4、使用浮动。

5、另外还有使用letter-spacing、word-spacing等方法。

当然最好的解决方案就是设置font-size:0

父元素 font-size:0 例子:

html:

<div class="box">

<div>1</div>

<div>2</div>

<div>3</div>

</div>

css:

.box{

width: 90px;

height: 60px;

border: 1px solid #ccc;

}

.box div{

display: inline-block;

box-sizing: border-box;

font-size: 14px;

width: 30px;

border: 1px solid ;

}

理论上box下面的三个div都是30px,刚好在一行显示,但是实际效果是这样:

这就是上文说到的原因,我们在box下添加font-size:0;再看看效果

提高你css技能的css开发技巧的更多相关文章

  1. 提高你css技能的css开发技巧(转载)

    一.resize实现图片对比 resize的语法如下: resize:none | both | horizontal | vertical 案例效果如下图 (鼠标移到左下角白色区域,往右侧拖动,实现 ...

  2. CSS学习笔记总结和技巧

    跟叶老师说项目,他叫我写一个静态首页,看起来挺简单的,但是下手才发现在真的不会怎么下手啊,什么模型啊模块啊都不懂,写毛线啊!! 如图:页面下拉还有侧栏,中间内容等. 可是答应跟老师做了,不能怂啊,于是 ...

  3. 提高 web 应用性能之 CSS 性能调优

    简介 Web 开发中经常会遇到性能的问题,尤其是 Web 2.0 的应用.CSS 代码是控制页面显示样式与效果的最直接“工具”,但是在性能调优时他们通常被 Web 开发工程师所忽略,而事实上不规范的 ...

  4. (webstorm的CSS插件)前端开发必备!Emmet使用手册

    介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具: 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们称之为“片段”.虽然片段能很好地推动你得生 ...

  5. [转]提高 web 应用性能之 CSS 性能调优

    简介 Web 开发中经常会遇到性能的问题,尤其是 Web 2.0 的应用.CSS 代码是控制页面显示样式与效果的最直接“工具”,但是在性能调优时他们通常被 Web 开发工程师所忽略,而事实上不规范的 ...

  6. 前端开发人员要注意的css规范,css命名。

    刚工作的时候也没注意关于css的规则,根据自己的心情想怎么用就怎么用,完成工作就好不会考虑代码的可读性,加载的性能,现在身为前端的一员就要有程序员的自我修养(嘿嘿,是不是很有责任感啊). 废话不多说, ...

  7. CSS兼容性(IE和Firefox)技巧大全

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...

  8. css选择器顺序的小技巧

    在线演示 本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个 ...

  9. HTML&CSS基础-前端免费开发工具Hbuilder介绍

    HTML&CSS基础-前端免费开发工具Hbuilder介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 工欲善其事必先利其器,想要干好活得有一个好的工具. 一.文本编辑工 ...

随机推荐

  1. 微服务项目开发学成在线_Vue.js与Webpack

    Vue.js 1.Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.自底向上逐层应用:作为渐进式框架要实现的目标就是方便项目增量开发. 渐进式框架:Progress ...

  2. GitHub 中 readme 如何添加图片

    一.Readme 是什么 readme文件一般是放在github 每个repo的根目录下,用来解释.说明本repo的主要内容和相关信息.而且在repo主页进去的时候会被自动加载.一般采用md标记的文本 ...

  3. NOIp2018RP++

    NOIp2018RP++ Rp=0 while True: Rp+=1; print (Rp)

  4. Python 学习笔记:Python 中单引号(')、双引号(")、三引号(''',""")的使用以及不转义字符串

    一.单引号.双引号及三引号: 参考博客:https://www.cnblogs.com/chenhuan001/p/8006017.html 以上四种形式都是 Python 表示字符串的方式,具体的效 ...

  5. redhat6.5 升级内核

    1.导入key rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.org 2.安装elrepo的yum源 rpm -Uvh https:// ...

  6. Kubernetes 问题定位技巧:分析 ExitCode

    使用 kubectl describe pod 查看异常的 pod 的状态,在容器列表里看 State 字段,其中 ExitCode 即程序退出时的状态码,正常退出时为0.如果不为0,表示异常退出,我 ...

  7. 【转】Linux服务器命令行模式安装Matlab2014a

    转自http://www.aichengxu.com/diannao/39100.htm 0.下载安装包  下载Matlab2014a for Linux安装包的ISO镜像文件 将下载好的iso文件挂 ...

  8. Android 自定义dialog类

    首先定制style样式 styles.xml 加入自定义样式 <style name="CustomLoadingDialog"> <item name=&quo ...

  9. 构建Oracle的Docker镜像

    说明:本次构建环境,Centos7.7,Oracle12.2.0.1,Docker19 注意:已安装好docker的,请检查docker版本,1.13以下版本要升级: # df -h 命令检查根目录的 ...

  10. 第二类错误|检验统计量|左偏|右偏|P值

    6 第二类错误在H0中的假设值差别越大时增大? 不对,第二类错误在H0中的假设值差别越大时变小. 检验统计量有哪些? 根据假设内容确定是左偏还是右偏? P值是在原假设为真的条件下,检验统计量大于或等于 ...