CSS (4)

CSS 用户界面样式

鼠标样式 cursor

cursor: default/pointer/move/text

轮廓 outline

outline：1px solid red;

边框外围的线。一般不用，去掉。 outline: 0;

防止拖拽文本域textarea

textarea {
            resize: none;
            /*outline: none;*/
        }

垂直对齐

vertical-align 不影响块级元素的内容对齐，只针对行内或行内块元素。通常用来控制图片/表单与文字的对齐

图片和文字默认基线对齐，如

用vertical-align改成中线对齐：

img {
            vertical-align: middle;
}

去除缝隙

图片或表单等行内块元素，底线和父盒子的基线对齐，这样的话底部会空出一点缝隙。

解决方法有：

1. 转成块级元素 display：block;

img {
            vertical-align: top;
        }

英文单词换行

若盒子不够大，里面的英文会进行换行。

word-break：normal

break-all 允许在单词中间换行

keep-all 只能在半角空格或连字符处换行

强制一行显示

white-space： nowrap;

搭配使用text-overflow

text-overflow：clip; 直接截断 ellipsis; 溢出显示省略号

字体图标 （iconfont）

图片不能进行很好的缩放，会失真。字体图标可以像图片一样改变透明度、旋转度等，但本质上是文字，可以随意改变颜色，产生阴影、透明效果等。 且本身体积比图片更小。十分适合在移动端。

字体声明：

        @font-face {
            font-family: 'icomoon';
            src: url();
            src: url() format(), 
            url() format(),
            url() format(),
            url() format();
            font-weight: normal;
            font-style: normal;
        }

使用：

span {
            font-family: icomoon;
            font-size: 50px;
        }
        span::before {
            font-family: icomoon;
            font-size: 100px;
            color: pink;
            content: "\e93a";
        }

<span></span>

css滑动门

为了使得各种形状的背景能够自适应元素中文本的多少，进行拉伸。

核心技术是精灵图和padding撑开宽度。

一般方法：

<li>
        <a href="#">
            <span>导航栏</span>
        </a>
    </li>

a 设置背景左侧，padding撑开合适的宽度。

span设置背景右侧，padding撑开合适宽度，剩下的由文字撑开

a包含span是为了整个导航栏可以点击。

a {
    display: inline-block;
    line-height: 33px;
    background: url("") no-repeat;
    padding-left: 15px;
    /*不能写死宽度*/
    text-decoration: none;
}

a span {
    display: inline-block;
    line-height: 33px;
    background: url("") no-repeat right;
    padding-right: 15px;
}

伪元素

本质上是插入了一个标签元素

:before和:after添加的内容是默认inline

CSS 过渡

transition: 要过渡的属性 花费时间 运动曲线 何时开始；

transition: all 0.5s ease 0s;

transform

水平移动100px:

transform: translate(100px);

如果写50%，是根据自己的宽度移动的，不是父级

得出盒子居中对齐新方法：

transform: translate(-50%, -50%);

缩放：

transform: scale(2,4);
宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍

旋转：

transform: rotate(180deg);  

设置选择中心点（默认中心）：

transform-origin: left top;
    /*左上角*/

也可以设置精确像素。 只写一个参数也行，就变成按左轴转。

3D变形

坐标系：

rotateX() rotateY() rotateZ()

透视

给2D旋转加一点立体感

eg. perspective: 1000px;

视距越小，效果越明显

transform: translate3d(x,y,z);

控制移动，x/y可以是px或者百分数，z必须是px

z移动相当于近大远小的效果

backface-visibility

在旋转体有前后两个面的时候会用到。

定义当前元素不面向屏幕时是否可见。

        div {
            width: 200px;
            height: 200px;
            margin: 50px auto;
            position: relative;
        }
        div img {
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s;
        }
        div img:first-child {
            z-index: 1;
            backface-visibility: hidden;
        }
        div:hover img {
            transform: rotateY(180deg);
        }

CSS 动画 animation

引用动画：

div {
animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
}

定义动画：

@keyframes name {
    0% {
        transform: translate3d(0,0,0);
    }
    50% {
        transform: translate3d(600px,0,0);
    }
    51% {
        transform: translate3d(600px,0,0) rotateY(180deg);

    }
    100% {
        transform: translate3d(0,0,0);
    }
}

伸缩布局flex

三等分：

section {
    width: 80%;
    height: 200px;
    border: 1px solid #0086b3;
    margin: 0 auto;
    display: flex;
}
section div {
    height: 100%;
    flex: 1;  /*占的份数,或者可以对每一个div进行单独份数设置*/
}

<section>
    <div></div>
    <div></div>
    <div></div>
</section>

也可以固定一个块的宽度，剩余的块按份数划分。固定了宽度的是不缩放的。

flex默认主轴是横向row的，可以用flex-direction: column;改成竖向。

调整主轴对齐

justify-content：flex-start flex-end center space-between space-around

section {
            width: 800px;
            height: 600px;
            border: 2px solid burlywood;
            margin: 100px auto;
            display: flex;
            justify-content: space-around;
        }
        div {
            width: 200px;
            height: 200px;
        }
        div:first-child {
            background-color: #eee;
        }
        div:nth-child(2) {
            background-color: purple;
        }
        div:nth-child(3) {
            background-color: indianred;
        }

调整侧轴对齐(垂直对齐)

align-items:

section {
            width: 800px;
            height: 600px;
            border: 2px solid burlywood;
            margin: 100px auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

不设高度时可用stretch拉伸至父元素高度

        section {
            width: 800px;
            height: 600px;
            border: 2px solid burlywood;
            margin: 100px auto;
            display: flex;
            justify-content: space-around;
            align-items: stretch;
        }
        div {
            width: 200px;
        }

控制盒子换行flex-wrap

盒子宽总和超过了父盒子宽度，每个盒子会被压缩宽度来显示。默认，即nowrap

        section {
            width: 800px;
            height: 600px;
            border: 2px solid burlywood;
            margin: 100px auto;
            display: flex;
            flex-wrap: wrap;
        }

align-content

针对flex容器里面多行/轴的情况，align-items是对一行的情况。

必须父元素设置display:flex; 并且排列方式为横向 flex-direction:row; 并设置换行 flex-wrap:wrap; 才能起作用

        section {
            width: 800px;
            height: 600px;
            border: 2px solid burlywood;
            margin: 100px auto;
            display: flex;
            flex-flow: row wrap;
            align-content: space-around;
        }
        div {
            width: 200px;
            height: 200px;
        }

order属性

用css控制盒子的前后顺序。数字小的排在前面。

div:nth-child(5) {
            background-color: darkorange;
            order: -1;
        }

一个问题

当设置了父元素的宽度，子元素设置宽度为100%后再在加上子元素上添加padding或margin值就会溢出。

https://www.cnblogs.com/penghuwan/p/6820737.html