5.css元素显示模式 css常用样式记录 属性选择器 结构伪类选择nth-child() transform转化 animation动画

1.css元素显示模式

元素显示模式就是 元素以什么方式进行显示

块元素：div

1.独占一行

2.可以设置宽高

3.宽度默认 是父级宽度的100%

4.是一个容器及盒子，里面可以放 行内或者块级元素

注意：文字类元素内不能使用块级元素

行内元素：span

1.一行显示多个

2.直接设置宽高 无效

3.默认宽度是 它本身内容宽度

4.行内元素只容纳 文本或 其他行内元素

注意：链接里面可以放块级元素，但是得转换成块级模式

行内块元素：img/input/td 特点：一行显示多个/默认宽度为内容宽度/可以设置宽高等

元素显示模式总结

2.css常用样式记录

一些常用的 Css 样式
----------------------------------------------------------------------------------
单行文本溢出省略显示…

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
----------------------------------------------------------------------------------
多行文本溢出省略显示…

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

注：多行文本溢出也可以设置成单行文本溢出。单行文本溢出不能放置在宽度没有固定的盒子中。


例如：下面的事例，单行文本溢出会失去效果

<div class="container">
    <div class="content">
      <div class="text">
        单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出省略单行文本溢出
      </div>
    </div>
</div>

.container {
    display: flex;
}

.content {
    flex: 1;
}

.text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
----------------------------------------------------------------------------------
利用 css 绘制三角 （▲▼▶◀）
.triangleLeft { /**左三角形*/
    width: 0;
    height: 0;
    border: 50px solid red;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-right: 0;
}
.triangleRight { /**右三角形*/
    width: 0;
    height: 0;
    border: 50px solid red;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left: 0;
}
.triangleTop {	/**上三角形*/
    width: 0;
    height: 0;
    border: 50px solid red;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top: 0;
}
.triangleBottom {	/**下三角形*/
    width: 0;
    height: 0;
    border: 50px solid red;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom: 0;
}
注：css 绘制三角形主要是改变盒子的边框
----------------------------------------------------------------------------------
利用 css 绘制箭头（＜＞∧∨）
<style>
    .arrow {
        width: 20px;
        height: 20px;
        border-top: 2px solid #000;
        border-right: 2px solid #000;
    }

    .right {
        transform: rotate(45deg)
    }

    .left {
        transform: rotate(-135deg)
    }

    .top {
        transform: rotate(-45deg)
    }

    .bottom {
        transform: rotate(135deg)
    }
</style>
<div class="arrow right"></div>
<div class="arrow left"></div>
<div class="arrow top"></div>
<div class="arrow bottom"></div>
----------------------------------------------------------------------------------
设置自定义滚动条样式（https://www.cnblogs.com/ranyonsue/p/9487599.html）
::-webkit-scrollbar {
	width: 4px;
	height: 6px;
}

::-webkit-scrollbar-thumb {
	width: 4px;
	background-color: #c0c7ce;
	border-radius: 8px;
}
----------------------------------------------------------------------------------
css 实现不换行，自动换行，强制换行（此样式主要是用于有英文或者链接的文本。
中文文本基本用不到）
.wrap {		/**不换行*/
    white-space: nowrap;
}

.wrap {		/**自动换行*/
    word-wrap: break-word;
    word-break: normal;
}

.wrap {		/**强制换行*/
    word-break: break-all;
}
----------------------------------------------------------------------------------
用于制作水印的样式（pointer-events）
/** pointer-events 指定在什么情况下元素可以成为鼠标事件的 target。*/
/**
pointer-events: none;
元素永远不会成为鼠标事件的 target。但是，当其后代元素的 pointer-events 属性
指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获
或冒泡阶段触发父元素的事件监听器。
*/
pointer-events: none
注：此属性给页面增加水印时会用到，其他情况用到较少（https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events）
----------------------------------------------------------------------------------
禁止用户选择文本
/**
	不同浏览器的兼容模式
	-webkit-user-select		-moz-user-select		-ms-user-select
*/
user-select: none;
----------------------------------------------------------------------------------
改变文本选中的颜色
/**
	不同浏览器的兼容模式
	::-moz-selection	::-webkit-selection
*/
::selection {
    background:red; 
    color:#fff;
}
----------------------------------------------------------------------------------
文字两端对齐

<style>
	div {
        margin: 10px 0;
        width: 120px;
        border: 1px solid red;
        text-align: justify;
        text-align-last: justify;
      }
</style>
<div>姓名</div>
<div>手机号码</div>
<div>账号</div>
<div>密码</div>

3.属性选择器

  <title>属性选择器</title>
    <style>
        /* 重点： 类选择器 伪类选择器 属性选择器 的权重是10  ！important可以加大权重*/

        /*1. 必须是input 但是同时具有value这个属性 选择这个元素 */
        /* input[value] {
            color: pink;
        } */
        /* 2.只选择type=text的框，第一个text框里面的文字变成粉红色 */
        input[type=text] {
            color: pink;
        }

        /* 3.属性后面有^上箭头 是div 有class属性 以icon开头的元素选中 */
        div[class^=icon] {
            color: pink;
        }

        /* 4.属性后面有$符号 是section 有class属性 以date结尾的元素选中 */
        section[class$=date] {
            color: skyblue;
        }

        /* 5.属性后面有*符号 是section 有class属性 有icon的元素选中 */

        section[class*=icon] {
            color: slateblue;
        }
    </style>

---------------------------------------------------

<body>
    <!-- 1.利用属性选择器，可以不需要借助id选择器或者类选择器 -->
    <!-- <input type="text" value="请输入用户名">
    <input type="text"> -->

    <!-- 2.属性选择器还可以选则 属性=属性值的某些元素 -->
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <!-- 3.属性选择器可以选择 属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>我是打酱油的</div>
    <!-- 4.属性选择器可以选择 属性值结尾的某些元素 -->
    <section class="icon1-date">我是安其拉</section>
    <section class="icon2-date">我是哥斯拉</section>
    <section class="icon-ico">那我是谁呢</section>
</body>

4.结构伪类选器

  <title>结构伪类选择器</title>
    <!-- 常用于选择父元素里面的子元素 -->
    <style>
        /* 1.选择ul里面的第一个li */
        ul li:first-child {
            background-color: slateblue;
        }

        /* 2.选择ul里面的最后一个li */
        ul li:last-child {
            background-color: slateblue;
        }

        /* 3.选择第n个孩子nth-child(n)  n可以是数字 关键字 even偶数 odd奇数 和公式*/
        ul li:nth-child(2) {
            background-color: pink;
        }

        /* 选出偶数even */
        ol li:nth-child(even) {
            background-color: rgb(90, 205, 167);
        }

        /* 选出奇数odd */
        ol li:nth-child(odd) {
            background-color: pink;
        }

        /* :nth-child(n) n从0开始 每次加一 往后计算 这里面必须是n 
        nth-child(2n)选择的是偶数
        nth-child(5n)选择的是5 10 15
        nth-child(2n+1)选择的是奇数
        nth-child(n+5)选择的是从第5个开始的li
        nth-child(-n+5)选择的是从1到第5个li*/
        dl li:nth-child(-n+5) {
            background-color: purple;
        }
 </style>
=================================

<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
    <ol>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ol>
    <dl>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </dl>
</body>

5.transform转化

 <style>
        * {
            padding: 0;
            margin: 0;
        }

        /* ----translate位移-------，不影响其他元素的位置，对行内标签没有效果
        1.transform：translate(X,Y);
        2.transform：translateX(N);
        3.transform：translateY(N);
        4.transform: translate(50%, 50%);位移本身长度的一半 */
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
            /* transform: translate(100px, 100px); */
            /* transform: translate(0, 100px); */
            /* transform: translate(50%, 50%); */
        }

        p {
            position: absolute;
            top: 50%;
            left: 50%;
            /* 用定位来让盒子水平居中的时候，先是各自大盒子的一半，然后往回走小盒子的一半 */
            width: 200px;
            height: 200px;
            background-color: purple;
            /* margin-top: -100px;
            margin-left: -100px; */
            /* 此处要去掉内外边距，初始化才会一样 */
            transform: translate(-50%, -50%);
        }

        /* -----rotate旋转------旋转，正值顺时针，负值逆时针，单位（deg） */
        .box {
            width: 100px;
            height: 100px;
            margin: 100px;
            background-color: #000;
            transform: rotate(45deg);
            transform-origin: bottom left;
            /* 动画写到本身上，谁做动画给谁加 */
            transition: all 2s;
        }

        .box:hover {
            transform: rotate(360deg);
        }

        /* -----设置元素转换中心点transform-origin: x y;   ----- */
        /* 中间 X Y 用空格隔开，默认中心点transform-origin: 50% 50%;
        X Y 的值可以是像素值，也可以是方位名词 top center right left bottom */

        /* 缩放transform:scale(x,y);
          transform:scale(2,2); =transform:scale(2);放大两倍 默认以中心点缩放
        不影响其他盒子大小 */
        .box1 {
            width: 100px;
            height: 100px;
            margin: 200px;
            background-color: rgb(107, 53, 255);
            transition: all 0.3s;
        }

        .box1:hover {
            /* 扩大两倍 */
            transform: scale(2);
            /* 缩小两倍 */
            transform: scale(0.5);
        }

        /* 综合写法：位移 旋转 缩放 transform: translate(x,y) rotate(45deg) scale(1.2,1.3);
        不能改变顺序，位移translate一定要放前面 */
    </style>

6.animation动画

 <style>
        /* 实现盒子从左端到右边 */
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 第二步：调用动画 */
            /* animation-name: move; move动画名称 */
            animation-name: move;
            /* animation-duration: 2s; 动画持续时间 */
            animation-duration: 2s;
            /* animation-timing-function: linear;动画曲线，匀速 */
            animation-timing-function: linear;
            /* animation-delay: 1s; 开始时间，1秒后开始 */
            animation-delay: 1s;
            /* animation-iteration-count: infinite;重复次数iteration重复 infinite总是 */
            animation-iteration-count: infinite;
            /* animation-direction: alternate;规定动画是否在下一周期逆向播放
            默认是normal 逆向播放是alternate */
            animation-direction: alternate;
            /* animation-fill-mode: forwards;规定动画结束后状态 最后位置forwards 起始状态backwards（默认） */
            animation-fill-mode: forwards;

            /* 动画简写属性：animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态 */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            /* animation: move 2s linear 1s infinite alternate forwards; */
        }

        div:hover {
            /* animation-play-state: paused;规定动画播放或暂停 播放running 暂停paused */
            animation-play-state: paused;
        }

        /* 第一步：先定义动画 */
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(500px, 0)
            }
        }
    </style>

7.3d转化transform

 <style>
        body {
            /* 透视写在被观察元素的父盒子身上 */
            perspective: 500px;
        }

        div {
            width: 200px;
            height: 200px;
            margin: 200px auto;
            background-color: pink;
            /* transform: translateZ(100px);Z轴的单位只跟像素 */
            /* transform: translate3d(100px, 100px, 100px); */
            transition: all 2s;
            animation: move 2s linear infinite alternate;
        }

        div:hover {
            transform: rotateX(45deg);
        }

        @keyframes move {
            0% {
                transform: translateZ(-200px);
            }

            100% {
                transform: translateZ(200px);
            }
        }


  /* rotate3d(x,y,z,45deg) xyz 构成向量，旋转多少度 */
        img {
            display: block;
            width: 100px;
            height: 100px;
            margin: 100px auto;
            transition: all 2s;
        }

        img:hover {
            /* 左手准则：大拇指指向正方向，手指弯曲的方向为旋转的正方向 */
            /* transform: rotateX(360deg); 翻转*/
            /* transform: rotateY(360deg);钢管舞 */
            /* transform: rotateZ(90deg);抽奖转盘 */
            /* 沿对角线旋转180度 */
            transform: rotate3d(1, 1, 0, 180deg);
        }

    </style>


    <title>3d呈现transform-style</title>
    <style>
        /* transform-style 控制子元素是否开启三维立体空间
       1. transform-style:flat 子元素不开启三维立体空间
       2.  transform-style:preserve-3d;子元素开启立体空间
       3. 这个代码加给父元素，但是影响的是子盒子*/
        body {
            perspective: 500px;
        }

        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 1s;
            /* 让子元素开启立体空间 */
            transform-style: preserve-3d;
        }

        .box:hover {
            transform: rotateY(180deg);
        }

        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: pink;
        }

        .box div:last-child {
            background-color: purple;
            transform: rotateX(60deg);
        }
    </style>