8.CSS1

最新推荐文章于 2024-05-22 00:06:01 发布

简至大道

最新推荐文章于 2024-05-22 00:06:01 发布

阅读量181

点赞数 2

分类专栏：前端文章标签： css3 css

又见面了，惊不惊喜，意不意外

本文链接：https://blog.csdn.net/zxyhj/article/details/119753991

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

1. CSS样式：定位：

定位一般都是和left/right/top/bottom连用

fixed: 固定定位。广告跟着滚动条走。
- 文档流中清除位置。相对与整个窗体定位
relative：相对定位：保留原位置，相对于原来的位置
absolute: 绝对定位：清除原位置，相对于非static父如果父没有定位相对与窗口。场景：绝对定位的父是相对定位
static: 默认
z-index;必须和定位联用。大值在上面

   <style>
        div>div {
            width: 100px;
            height: 100px;
        }
        div>div:nth-of-type(1) {
            background-color: red;
        }
        div>div:nth-of-type(2) {
            background-color: green;
            position: relative;
            top: 50px;
            right: 50px;
            /* z-index: 1; */
        }
        div>div:nth-of-type(3) {
            background-color: pink;
            /* position: relative;
            z-index: 2; */
        }
        .a1 {
            width: 600px;
            height: 600px;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    
    <div class="a1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

2. visibility: 显示与不显示

display: none;不显示，清除位置

visibility:hidden; 不显示，保留位置

visible: 可见的。

   <script>
        var flg = false;
        function abc() {
            document.getElementById("a1").classList.remove("show");
            document.getElementById("a1").classList.remove("hide");
            if (!flg) {
                document.getElementById("a1").classList.add("hide");
                document.getElementById("btn").innerHTML="显示"
            } else {
                document.getElementById("a1").classList.add("show");
                document.getElementById("btn").innerHTML="隐藏"
            }
            flg = !flg;
        }
    </script>
    <style>
        .show {
            /* 显示 */
            visibility: visible;
        }
        .hide {
            /* 隐藏，保留了位置 */
            visibility: hidden;
        }
        .show1 {
            display: block;
        }
        .hide1 {
            /* 隐藏，不保留了位置 */
            display: none;
        }
    </style>
</head>
<body>
    <button id="btn" onclick="abc();">显示</button>
    <div id="a1">
        akslfjalkfjalksfjklas
    </div>
22222222

3. float: 浮动

场景：UL>LI的横向显示。

float:left；左浮动
float:right:右浮动

float:inherit: 继承

※**浮动要清除 **

clear: both/left/right;

    <style>
        div>div {
            border: 1px solid blue;
            width: 200px;
        }
        div.a2 {
            background-color:red;
        }
        div.a1 {
            float: left;
        }
    </style>
    <div>
        <div class="a1">
            1
        </div>
        <div class="a1">
            2
        </div>
        <div style="clear: left;"></div>
        <div class="a2">
            34242
        </div>
    </div>

4. CSS: 整理

文字相关;

font-size
color
font-famliy
font-weight
font-style
text-decoriation
letter-spacing
text-indent
white-space: nowrap; 不换行
- nobr标签，一般人不知道
overflow: hidden/scroll; 区域内容超出时处理
text-overflow: ellipsis；单行超出时文本处理...
word-break: break-all; 强制断行。英文效果明显
text-shadow; x轴 y轴阴影宽颜色； css3
```
text-shadow: -10px -10px 5px red;
```
columns: n; 显示几列
column-width: 指定列宽
column-gap; 指定间距
@font-face{} 关联自定义字体

       @font-face {
        font-family: 'myfont';

        src: url('./fonts/glyphicons-halflings-regular.eot');
        src: url('./fonts/glyphicons-halflings-regular.eot?#iefix') 
        format('embedded-opentype'), 
        url('./fonts/glyphicons-halflings-regular.woff2') format('woff2'), 
        url('./fonts/glyphicons-halflings-regular.woff') format('woff'), 
        url('./fonts/glyphicons-halflings-regular.ttf') format('truetype'),
         url('./fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') 
         format('svg');
        }
  .a3::before {
                    font-family: 'myfont';
                    content: '\e021';
                }

3 CSS3类动画相关

第一种

变形： transform:
- translate: 位移
- rotate： rotate旋转角度
- scale: 缩放
- skewY：倾斜
- 万能的！记不住

过渡

transition: 样式周期秒数过渡效果延迟

/* 变形  + rotate旋转角度 translate位移  scale缩放  skew倾斜*/
/* transform: translateX(300px) rotateY(180deg) rotateX(180deg) scale(1.2) skewY(180deg); 
/* 使用webkit类型浏览器 */
/* -webkit-transform: rotateY(360deg);  */
/* 过渡  all（所有的样式）1s内完成 
ease慢入  0sdelay延迟
*/
/* transition: all 10s ease-in 0.5s; */

第二种：万能的动画

关键帧与过渡帧。。。。。只写关键帧。过渡自动补全

@keyframes 动画名{0% from {} 100%to{} }
animation: 动画名周期过渡效果延迟次数（infinite）

                    animation: abc 2s ease-in 0s infinite;
                }
                @keyframes abc {
                    0% {
                        
                    }
                    50% {
                        transform: translateX(300px) rotateY(180deg) rotateX(180deg) scale(1.2) skewY(180deg); 
                    }
                    0% {
                        transform: translateX(0px) rotateY(360deg) rotateX(360deg) scale(1) skewY(360deg); 
                    }
                }

4

简至大道

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
8.CSS1

1. CSS样式：定位：定位一般都是和left/right/top/bottom连用fixed: 固定定位。广告跟着滚动条走。文档流中清除位置。相对与整个窗体定位relative：相对定位：保留原位置，相对于原来的位置absolute: 绝对定位：清除原位置，相对于非static父如果父没有定位相对与窗口。场景：绝对定位的父是相对定位static: 默认z-index;必须和定位联用。大值在上面 <style> div&gt
复制链接

扫一扫