Skip to content

css3

Jump to bottom
jiang2016tao edited this page Dec 21, 2018 · 28 revisions

属性选择
E[attr]：只使用属性名，但没有确定任何属性值；
E[attr="value"]：指定属性名，并指定了该属性的属性值；
E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写；
E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；
E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;
结构性选择
为了方便记忆和查询，把CSS的结构伪类选择器归为四类： 1）通用子元素过滤器：E:nth-child(n)（顺序过滤）和E:nth-last-child(n)(逆序过滤)
2）通用子类型元素过滤器：E:nth-of-type（顺序过滤）和E:nth-last-of-type(n)(逆序过滤)
3）特定位置的子元素：E:first-child,E:last-child,E:first-of-type,E:last-of-type
4）特定状态的元素：E:root（根节点）、E:only-child（独子元素）、E:only-of-type（独子类型元素）和E:empty（孤节点）
CSS中有如下四种伪元素选择器：

   1）first-line:为某个元素的第一行文字使用样式；

   2）first-letter:为某个元素中的文字的首字母或第一个字使用样式；
   文本选中伪类：selection,注意要在标签后用双冒号。如：p::selection

   3）before:在某个元素之前插入一些内容；

   4）after: 在某个元素之后插入一些内容；

UI元素状态伪类

我们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类，这些主要是针对于HTML中的Form元素操作，最常见的比如我们"type="text"有enable和disabled两种状态，前者为可写状态后者为不可状态；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"两种状态。来看两个实例，比如说你想将"disabled"的文本框与别的文本框区别出来，你就可以这样应用

		input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}

这样一来就把页面中禁用的文本框应用了一个不同的样式。那么对于其他几个用法是一样的，这里就不在讲述。IE6-8不支持":checked",":enabled",":disabled"这三种选择器。 #文字样式
text-shadow设置文字阴影，可以设置多层。
文字描边-webkit-text-stroke
media响应式设计
border-radius设置圆角。各个圆角的单独设置。 绘制椭圆：

   border-radius:100px/150px

前面是x轴半径，后面是y轴半径。
transform里的ratate、skew、scale和trantranslate属性，都是由matrix(a,b,c,d,e,f) 矩阵函数来实现的。注意IE上使用矩阵函数和Google的不一样。

display使用

参考文献：https://segmentfault.com/a/1190000009636727
https://developer.mozilla.org/en-US/docs/Web/CSS/display

display的值有：

none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

inline：指定对象为内联元素。
block：指定对象为块元素。
list-item：指定对象为列表项目。
inline-block：指定对象为内联块元素。（CSS2）
table：指定对象作为块元素级的表格。类同于html标签<table>（CSS2）
inline-table：指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）
table-caption：指定对象作为表格标题。类同于html标签<caption>（CSS2）
table-cell：指定对象作为表格单元格。类同于html标签<td>（CSS2）
table-row：指定对象作为表格行。类同于html标签<tr>（CSS2）
table-row-group：指定对象作为表格行组。类同于html标签<tbody>（CSS2）
table-column：指定对象作为表格列。类同于html标签<col>（CSS2）
table-column-group：指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）
table-header-group：指定对象作为表格标题组。类同于html标签<thead>（CSS2）
table-footer-group：指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
run-in：根据上下文决定对象是内联对象还是块级对象。（CSS3）
box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
grid;
inline-grid;
ruby;
ruby-base; ruby-text;
ruby-base-container;
ruby-text-container;
contents;
run-in;
inherit;
initial;
unset;

display: inline

inline也是 CSS 1 提出的属性，它主要用来设置行内元素属性，设置了该属性之后设置高度、宽度都无效，同时text-align属性设置也无效，但是设置了line-height会让inline元素居中
练习https://segmentfault.com/a/1190000009636727里的inline的例子。

display: list-item

此属性默认会把元素作为列表显示，要完全模仿列表的话还需要加上 list-style-position，list-style-type
练习https://segmentfault.com/a/1190000009636727里的list-item的例子。

display: flex

css3的新特性弹性布局，曾经为了给几个块级元素并列在一行上，我就是用浮动来设置。如：

<div class="tab">
      <div class="" style="width: 33%;float: left;text-align: center">商品</div>
      <div class="" style="width: 33%;float: left;text-align: center">评价</div>
      <div class="" style="width: 33%;float: left;text-align: center">商家</div>
    </div>

其实这样有弊端，就是永远不会是100%，如果做的细致，就需要不断的调，看效果。现在我们可以用新的布局。如：

<div class="tab">
      <div class="tab-item">商品</div>
      <div class="tab-item">评价</div>
      <div class="tab-item">商家</div>
    </div>
.tab{
    display: flex;
    height: 40px;
    line-height: 40px;
  }
  .tab-item{
    flex: 1;
    text-align: center;
  }
  • flex　　是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
  • flex-grow　　项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
  • flex-shrink　　项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
  • flex-basis　　在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
    其他的参考：https://www.cnblogs.com/xuyuntao/articles/6391728.html

css清除浮动

父元素DIV里包含几个float的元素的子DIV，父元素的DIV的高度，不是几个子元素div高度的和。

<div>
    <div style="width: 300px;height: 300px;float: left"></div>
    <div style="width: 500px;height: 500px;float: right"></div>
</div>

这样父元素的高度肯定是不能覆盖子元素的高度的，需要再父元素设置overflow:hidden样式。例如：

<div style="overflow: hidden">
    <div style="width: 300px;height: 300px;float: left"></div>
    <div style="width: 500px;height: 500px;float: right"></div>
</div>

overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。

一个父div下包含两个行级的子div，发现这两个div怎么都对不齐。代码如下：

<style type="text/css">
    .left-div{
        border: 1px solid red;
        width: 50px;
        height: 100px;
        display: inline-block;
    }
    .right-div{
        border: 1px solid;
        height: 100px;
        display: inline-block;
    }
</style>
<body>

<div>
    <div class="left-div"></div>
    <div class="right-div">
        <div>
            <span>test</span>
        </div>
    </div>
</div>

显示结果：

这时应该给right-div加vertical-align: top;就可以，当初我一直想着给父div加。

chrome使用技巧

  • Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

css一些样式属性的使用

/*
        animation: name duration timing-function delay iteration-count direction fill-mode play-state;
        参数顺序解释
        animation：指定要绑定到选择器的关键帧的名称 动画指定需要多少秒或毫秒完成 设置动画将如何完成一个周期 设置动画在启动前的延迟间隔 定义动画的播放次数 指定是否应该轮流反向播放动画 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式 指定动画是否正在运行或已暂停
        对动画说明：
        关键帧的名称bottom-top 动画2s  infinite循环播放  动画低速进和出 启动前延迟间隔0s
        
        */
        .Loader .Bar:nth-child(0) { left: -15px; -webkit-animation: bottom-top 2s infinite ease-in-out 0s; animation: bottom-top 2s infinite ease-in-out 0s; }

@-webkit-keyframes bottom-top {
            0% { height: 0; opacity: 0; }
            50% { height: 30px; opacity: 1; }
            100% { height: 0; opacity: 0; }
        }
  • z-index属性无效
    参考z-index不起作用的大坑
    z-index不起作用的三种情况：
    1、父标签 position属性为relative；
    2、问题标签无position属性（不包括static）；
    3、问题标签含有浮动(float)属性。（我的问题就是标签下的子标签有些是float的）

CSS奇淫技巧

在公众号中，有些页面会时不时地可以左右拉动，刚开始以为是bootstrap地row样式影响了（因为row样式的margin左右是-15）,之前有些页面的将margin设为0，解决过类似的问题。今天发现并不是这个问题，有一方面的问题更可疑，那就是内容撑破容器，没有换行。需要给内容过多地方添加自动换行的属性word-wrap: break-word;

.row {
  margin-right: -15px;
  margin-left: -15px;
}

Clone this wiki locally