css拓展知识2

1.超过两行用省略号代替

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

2.动态效果

①

<span class="shake">弹</span>
<style>
.shake{
    width:40px;
    height:40px;
    display:block;
    background:lightgreen;
    border-radius:50%;
    margin:5px;
    color:#fff;
    font-size:24px;
    text-align:center;
    line-height:40px;
    cursor:pointer;
    -webkit-transition:all 0.25s;
}
.shake:hover{
    -webkit-animation:shake 0.25s;
    background: lightblue;
}
@-webkit-keyframes shake{
    0%,10%,55%,90%,94%,98%,100%{
        -webkit-transform:scale(1,1);
    }
    30%{
        -webkit-transform:scale(1.14,0.86);
    }
    75%{
        -webkit-transform:scale(0.92,1.08);
    }
    92%{
        -webkit-transform:scale(1.04,0.96);
    }
    96%{
        -webkit-transform:scale(1.02,0.98);
    }
    99%{
        -webkit-transform:scale(1.01,0.99);
    }
}
</style>

②

<input class="search" type="text" placeholder="搜索...">
.search{
    width:80px;
    height:40px;
    border-radius:40px;
    border:2px solid lightblue;
    position: absolute;
    right:200px;
    outline:none;
    text-indent:12px;
    color:#666;
    font-size:16px;
    padding:0;
    -webkit-transition:width 0.5s;
}
.search:focus{
    width:200px;
}

③

<div class="wrapper">
    <div class="round">
        <span>东邪</span>
        <span>西毒</span>
        <span>南乞</span>
        <span>北丐</span>
    </div>
</div>
.wrapper{
    width:100px;
    height:100px;
    background:lightblue;
    border-radius:50%;
    border:2px solid lightgreen;
    position: absolute;
    top:200px;
    left:400px;
    cursor:pointer;
}
.wrapper:after{
    content:'你猜';
    display:inline-block;
    width:100px;
    height:100px;
    line-height:100px;
    border-radius:50%;
    text-align:center;
    color:#fff;
    font-size:24px;
}
.wrapper:hover .round{
    -webkit-transform:scale(1);
    opacity:1;
    -webkit-animation:rotating 6s 1.2s linear infinite alternate;
}
@-webkit-keyframes rotating{
    0%{
        -webkit-transform:rotate(0deg);
    }
    100%{
        -webkit-transform:rotate(180deg);
    }
}
.round{
    width:240px;
    height:240px;
    border:2px solid lightgreen;
    border-radius:50%;
    position: absolute;
    top:-70px;
    left:-70px;
    -webkit-transition:all 1s;
    -webkit-transform:scale(0.35);
    opacity:0;
}
.round span{
    width:40px;
    height:40px;
    line-height:40px;
    display:inline-block;
    border-radius:50%;
    background:lightblue;
    border:2px solid lightgreen;
    color:#fff;
    text-align:center;
    position:absolute;
}
.round span:nth-child(1){
    right:-22px;
    top:50%;
    margin-top:-22px;
}
.round span:nth-child(2){
    left:-22px;
    top:50%;
    margin-top:-22px;
}
.round span:nth-child(3){
    left:50%;
    bottom:-22px;
    margin-left:-22px;
}
.round span:nth-child(4){
    left:50%;
    top:-22px;
    margin-left:-22px;
}

3.浮动、div内文字(水平局中、垂直居中)、超出隐藏出现滚动条

  .dialog_cont {
    background-color: #dbdbdb;
    margin-top: 20px;
    line-height: 30px;
    padding: 10px;
    position: relative;    //相对定位
    color: rgb(46, 46, 46);
    max-height: 340px; //设置最大高度
    overflow-y: auto; //超出则隐藏并出现滚动调
    .decisionReult{
      position: absolute; //绝对定位
      opacity: 0.4;
      font-size: 96px;
      letter-spacing: 20px;
      width: 100%;    //宽度与父元素一样
      text-align: center;    //水平居中
      height: 100%;    //高度与父元素一样
      margin-left: -10px;    //因为父元素设置了10px的padding
      margin-top: -10px;        //同上
      display: flex;    //垂直居中
      flex-direction: column;    //垂直居中
      justify-content: center;    //垂直居中
      }  
  }

4.固定背景

背景图片固定，图片不会随着页面滚动而改变位置

background-attachment: fixed;

注：滚动为scroll

5.渐变背景

background: linear-gradient(45deg, blue, red);

6.元素显示模式转换

• 转换为块元素：display:block;
• 转换为行内元素：display:inline;
• 转换为行内块：display: inline-block;

7.font-size

取值：

• inherited继承，默认从父标签继承字体大小（默认值），所有CSS属性的默认值都是inherited
• pix像素pixel
• %百分比,相对于父标签的字体大小的百分比
• em倍数,相对于父标签字体大小的倍数

HTML根元素默认字体的大小为16px,也称为基础字体大小

8.font-weight

取值：

• normal普通(默认)
• bold粗体
• 自定义400 normal 700 bold

9.文本属性

color—— 颜色
line-height—— 行高 ——行的高度
text-align ——水平对齐方式 ——取值：left、right、center
vertical-align ——垂直对齐方式—— 取值：top、middle、bottom可以用于图片和文本的对齐方式
text-indent—— 首行缩进
text-decoration ——文本修饰—— 取值：underline、overline、line-through
text-transform ——字母打大小—— 取值：lowercase、uppercase、capltalize（首字母大写）
letter-spacing ——字符间距
word-spacing ——单词间距 ——只对英文有效
while-space—— 空白的处理方式 ——文本走出后是否换行，取值：nowrap

10.border(边框)

表示盒子的边框
分为四个方向：

上top、右right、下bottom、左left

border-top、border-right、border-bottom、border-left
每个边框包含三种样式：

border-top-color、border-top-width、border-top-style

border-right-color、border-right-width、border-right-style

border-bottom-color、border-bottom-width、border-bottom-style

border-left-color、border-left-width、border-left-style
样式style的取值：

solid实线、dashed虚线、dotted点线、double双线、inset内嵌的3D线、outset外嵌的3D线
简写，三种方式：

按方向简写：
border-top、border-right、border-bottom、border-left
书写顺序：
border-顺序：width style color
按样式简写：
border-color（颜色）、border-width（粗细）、border-style （样式）
书写顺序：
border-样式：top right bottom left
必须按顺时针方向书写，同时可以缩写：
border-width:2px;--------->四个边框的宽度均为2px
border-width:1px 2px;
border-width:1px 2px 4px;
规则：如果省略，则认为上下一样，左右一样。
11.元素所占空间

页面中元素的实际所占空间：

• 宽度=width+左右的padding+左右的border+左右的margin

• 高度+height+上下的padding+上下的border+上下的

12.外边距合并

也称为外边距的折叠，指的是两个块级元素垂直外边距相遇时，它们将合并为一个外边距，合并后的外边 距值为其中较大的那个外边距值。

两种情况：

当一个元素出现在另一个元素上面时，第一个元素的下边距与第二元素的上边距会发生合并。
当一个元素包在另一个元素中时，并且没有内边距或边框把外边距分隔开时，两个元素的上外边距会发生合并。
外边距的合并的好处，让排版在视觉上显得更美观。
13.z-indx

设置元素定位方式后，元素会浮在页面上方，此时可以通过z-index属性设置优先级，控制元素的堆叠顺序。
取值为数字，值越大优先级越高，默认为auto(大多数浏览器默认为0)。
注意：只能给非static定位的元素设置z-index属性。
14.元素的显示和隐藏

①display显示

通过display属性设置元素是否显示，以及是否独占一行显示

常用取值：

none——不显示

inline——显示内联元素，行级元素的默认值——将块级元素变为行级元素，不在独占一行

block——显示块级元素，块级元素的默认值——将行级元素变为块级元素，独占一行

inline-block——显示内联元素，但是可设置宽高——在inline基础上允许设置宽和高

②visibility

也可以通过visibility属性设置元素的显示和隐藏

常用取值：

visible——显示

hidden——隐藏

区别

• display属性隐藏时不再占据页面中的空间，后面的元素会占用其位置
• visibility隐藏时会占据页面中的空间，位置还保留在页面中，只是不显示