博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css中那些令人迷惑的东西
阅读量:6980 次
发布时间:2019-06-27

本文共 4830 字,大约阅读时间需要 16 分钟。

CSS很简单也很常用,但是经常有一些相似的属性让人傻傻分不清楚,今天列举一下自己经常分不清楚的一些属性。(使用简单的例子对他们进行区分说明)

  • 关于nth-child与nth-of-type。 例子:
//html 部分

我是H4

我是第一个段落

我是第二个段落

//css部分p:nth-child(2) { color: red;}p:nth-of-type(2) { color: greenyellow;}复制代码

结果:

通过结果我们可以知道,它们是有区别的。区别如下: p:nth-child(2)的条件是:父元素的第二个子元素且该元素是p元素。如果第二个子元素不是p元素,则样式无效。

p:nth-of-type(2)的条件是:父元素下的第二个p元素。

  • 关于不透明度

    我们使用opacity来设置元素的不透明度,0表示完全透明,1表示完全不透明。

    对于IE8及其以下的浏览器来说,我们需要使用滤镜来实现透明的效果。 代码如下:

    opacity: 0.5;     //值为0-1之间filter:Alpha(opacity=50);  //值为0-100之间复制代码
  • 关于渐变 渐变主要分为线性渐变和径向渐变。

    1. 线性渐变 语法:linear-gradient(direction, color-stop1, color-stop2, ...);

      direction:表示渐变方向,可以为top,left,right,bottom关键字或者一个角度。

      color-stop:表示渐变的颜色和位置,值可以是颜色值或者带着位置的颜色值,如red 10%

      示例:

      /*从左到右的渐变*/  background: -webkit-linear-gradient(left, red , blue);   background: -o-linear-gradient(left, red, blue);   background: -moz-linear-gradient(left, red, blue);  background: linear-gradient(to right, red , blue);   /*从左到右的渐变, 部分浏览器90deg将创建一个从下到上的渐变*/  background: -webkit-linear-gradient(90deg, red , blue);   background: -o-linear-gradient(90deg, red, blue);   background: -moz-linear-gradient(90deg, red, blue);  background: linear-gradient(90deg, red , blue); 复制代码
    2. 径向渐变 语法:background: radial-gradient(position, shape size, color-stop1, color-stop2, ...);

      position:表示径向渐变的中心位置,可以为top,left,right,bottom,center关键字或者百分比;

      shape:表示渐变的形状, circle 表示圆形,ellipse 表示椭圆形;

      size:表示渐变的大小, closest-side:最近边; farthest-side:最远边; closest-corner:最近角;

      farthest-corner:最远角;

      color-stop:表示渐变的颜色和位置;

      示例:

      background: -webkit-radial-gradient(circle, red, yellow, green);     background: -o-radial-gradient(circle, red, yellow, green);     background: -moz-radial-gradient(circle, red, yellow, green);     background: radial-gradient(circle, red, yellow, green); 复制代码

可以利用渐变做出很多炫酷的效果,大家多多实践啦。

  • 搞不清楚的文本属性

    • letter-spacing: 设置字符间距。
    • word-spacing:设置单词间距。
    • white-space:规定如何处理元素中的空白。
    • word-break: 规定非中日韩文本的换行规则。
    • word-wrap:允许对长的不可分割的单词进行分割并换行到下一行。
  • 单行文本溢出省略

    .text-overflow {      width: 200px;      overflow: hidden;      text-overflow: ellipsis;      white-space: nowrap;  }复制代码
  • 多行文本溢出

    1. 利用webkit-line-clamp属性(控制块出现的文本行数),适用于WebKit浏览器及移动端
    p {      display: -webkit-box;      -webkit-box-orient: vertical;      -webkit-line-clamp: 3;    //第几行出现省略号      overflow: hidden;      width: 100px;  }复制代码
    1. 使用js插件来实现。
  • 清除浮动

    为什么要清除浮动,因为浮动会造成浮动元素的父元素高度塌陷。

    1. 为浮动元素的父元素添加高度。
    2. 为浮动元素的父元素添加over-flow:hidden||auto
    3. 为浮动元素的父元素添加display: flex
    4. 为浮动元素的父元素添加伪类(最常用)
    5. 添加空标签进行清除
    .clearfloat::after {       content: '';       clear: both;       display: block;       height: 0;   }复制代码
  • margin

    margin代表元素的外边距,接受任何长度单位、百分数值甚至负值。 当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。只有普通文档流中块框的垂直外边距才会发生外边距合并。

  • 多列等高

    • 第一种方法:flex布局
    .container {      display: flex;  }  .item {      padding: 5px;      margin: 0 5px;      float: left;      width: 100px;      border: 1px solid #666  }  
    我是第一个
    我是第二个,我比第一个高很多,我很帅,我有车有房
    复制代码
    • 第二种方法:padding补值法
    * {     margin: 0;     padding: 0; } .container {     overflow: hidden;     position: relative; } .item {     padding: 5px;     margin: 0 5px;     float: left;     width: 100px;     border: 1px solid #666;     padding-bottom: 1000px;     margin-bottom: -1000px; } .item-border {     position: absolute;     bottom: 0;     height: 1px;     width: 112px;     background: #666; } .item-border1 {     left: 5px; } .item-border2 {     left: 127px; } 
    我是第一个
    我是第二个,我比第一个高很多,我很帅,我有车有房
    复制代码

    给等高元素设置巨大的padding-bottom和负的margin-bottom,然后父元素设置overflow: hidden;就可以实现等高。缺点是底部边框会消失不见,我们需要使用背景图片或空的标签以绝对定位的形式模拟底部边框。

  • 禁用鼠标事件

.disabled {        pointer-events: none;    }复制代码
  • calc() 的使用。

    calc()用于动态计算长度值,使用标准的数学运算优先级规则,支持 "+", "-", "*", "/"运算。 可以混合使用百分比、em、px、rem等单位进行计算。 注意:运算符前后都需要保留一个空格。 如:calc(100% - 10px)

  • 百分比的参照

    • 参照父元素宽度的属性:width,padding,margin,left,right
    • 参照父元素高度的属性:height,top,bottom ####css相对单位
  • em与rem

    html {      font-size: 12px;  }  .parent {      font-size: 1.2em;   //1.2*12=14.4px      font-size: 1.2rem;   //1.2*12=14.4px  }  .child {      font-size: 1.5em;    //14.4*1.5=21.6px      font-size: 1.5rem;    //12*1.5=18px  }  
    parent
    child
    复制代码

    通过上述例子我们可以看到em与rem的区别。1em 等于当前的字体尺寸,1rem等于根元素的字体尺寸。

  • vw与vh vw等于viewport宽度的1/100,vh等于viewport高度的1/100。 ####等比例缩放的盒子 思路:将元素的 height 设成 0,使得元素的高度等于 padding-bottom;合理设置 padding-bottom 的值,使之与宽度成一定比例。

    * {      margin: 0;      padding: 0;      box-sizing: border-box;  }  ul {      width: 40%;  }  li {      float: left;      width: 25%;      height: 0;      padding-bottom: 50%;      border: 1px solid red;  }  
    • 1
    • 2
    • 3
    • 4
    复制代码

    上述例子会在窗口大小改变时,li元素始终保持高/宽=2的比例进行扩大与缩小。

转载于:https://juejin.im/post/5afe95e251882567161ad066

你可能感兴趣的文章
jQuery学习---------认识事件处理
查看>>
Win7/Win8 系统下安装Oracle 10g 提示“程序异常终止,发生未知错误”的解决方法...
查看>>
获得PMP证书的这一年
查看>>
大型网站架构演变和知识体系
查看>>
jQuery EasyUI 表单插件 - Datebox 日期框
查看>>
要哭了,模拟器键盘一直不显示
查看>>
获取下个月的今天
查看>>
elasticsearch简介
查看>>
文件分区格式化及挂载
查看>>
Centos运行级别和开机过程
查看>>
Linux 装B之作酷炫小工具
查看>>
Citrix Avalon安装实验手册之一----Avalon概述及实验环境准备
查看>>
动态表单构建器——建造者模式
查看>>
Android 自动化测试
查看>>
MySQL 5.5 服务器变量详解(二)
查看>>
bootstrap table
查看>>
CentOS 7 yum 安装 MySQL5.7
查看>>
企业网络翻译官——DNS
查看>>
RocketMQ3.2.2生产者发送消息自动创建Topic队列数无法超过4个
查看>>
USG防火墙telnet实验
查看>>