【Web-CSS基础】CSS的三大特性、定位方式、静态定位、相对定位、绝对定位、浮动定位、固定定位、设置缩放动画

居然天上楼

已于 2022-11-03 19:57:41 修改

阅读量1.4k

点赞数 2

分类专栏：前端知识点文章标签： css 前端 html

于 2022-11-02 22:19:42 首次发布

本文链接：https://blog.csdn.net/weixin_72612071/article/details/127659778

版权

前端知识点专栏收录该内容

14 篇文章 0 订阅

订阅专栏

行内元素的垂直对其方式Vertical-align

元素的显示层级z-index

综合练习

效果展示

CSS的三大特性

继承性: 指元素可以继承上级元素文本和字体相关的样式,部分标签自带效果不受继承影响,比如超链接字体颜色
层叠性: 多个选择器可能选择到同一个元素, 如果添加的样式不同,则样式全部层叠生效, 如果作用的样式相同
优先级: 选择器的优先级, 选择器作用范围越小优先级会越高, id>class>标签名>继承(间接选中)

定位方式

包括: 静态定位,相对定位,绝对定位,固定定位,浮动定位

静态定位

元素默认的定位方式,也称为文档流定位
显示特点: 元素以左上为基准,块级元素从上往下依次排列, 行内元素从左向右依次排列,一般情况元素无法实现层叠显示的效果
格式: position:static
通过外边距控制元素的位置

相对定位

格式: position:relative;
相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的
显示特点: 元素不脱离文档流(不管元素显示到哪里,仍然占着原来的位置,后面的元素不会顶上来)
通过left/right/top/bottom让元素相对于初始位置做偏移

选择器{

position:relative;

}

绝对定位(absolute)

格式: position:absolute;
显示特点: 元素脱离文档流(不占原来的位置)
通过left/right/top/bottom让元素相对于窗口(默认)或某一个上级元素做位置偏移,如果需要相对于某一个上级元素, 必须将上级元素改成相对定位

固定定位

格式: position: fixed;
显示特点: 元素脱离文档流,元素固定在窗口的某个位置, 不会随着内容位置的改变改变自身位置
- 完全脱标—— 完全不占位置；
- 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
  - 跟父元素没有任何关系；单独使用的
  - 不随滚动条滚动。
通过left/right/top/bottom相对于窗口做位置偏移

浮动定位

格式: float:left/right;
显示特点: 元素脱离文档流,从当前所在行向左或向右浮动, 当撞到上级元素边缘或其它浮动元素时停止移动.
浮动定位一行装不下会自动折行, 折行时有可能被卡住
当某个元素的所有子元素全部浮动时,自动识别的高度为0,后面的元素会顶上来导致显示异常, 通过给元素添加overflow:hidden解决此问题
应用场景: 将纵向排列的元素改成横向排列时使用

粘性定位(sticky)

粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的
格式:position: sticky;
粘性定位的特点：

1.以浏览器的可视窗口为参照点移动元素（固定定位特点）

2.粘性定位占有原先的位置（相对定位特点）

3.必须添加 top 、left、right、bottom 其中一个才有效

跟页面滚动搭配使用。兼容性较差，IE 不支持。

定位总结

一定记住相对定位、固定定位、绝对定位两个大的特点： 1. 是否占有位置（脱标否） 2. 以谁为基准点移动位置。
学习定位重点学会子绝父相。
注意：
边偏移需要和定位模式联合使用，单独使用无效；
top 和 bottom 不要同时使用；
left 和 right 不要同时使用。

设置缩放动画

设置动画持续时间 transition-duration: 1.5s;
设置缩放 transform: scale(1.1);

溢出设置overflow

visible显示(默认)
hidden隐藏
scroll滚动显示

行内元素的垂直对其方式Vertical-align

baseline基线对齐(默认)
top上对齐
middle中间对齐
bottom下对齐

元素的显示层级z-index

值越大元素显示越靠前, 默认值为0

综合练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font: 12px "simhei", Arial, Helvetica, sans-serif;
            color: #666;
        }
        body>div{
            width: 366px;
            height: 233px;
            background-color: #e8e8e8;
        }
        #t_div{
            height: 35px;
            background-color: #0aa1ed;
            border-radius: 2px;
        }
        body>div>div{
            padding-left: 10px;
        }
        #t_div>img{
            margin-top: 10px;
        }
        #t_div>span{
            color: white;
            font-size: 16px;
            /*如果需要对某1个元素进行位置微调则使用下面的相对定位*/
            position: relative;
            bottom: 5px;
        }
        ul,p{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style-type: none;
            overflow: hidden;
        }
        li{
            float: left;
            margin-right: 10px;
        }

        .c1>p{
            margin-top: 20px;
            margin-bottom: 10px;
            color: #62B5EC;
        }
        .c1 a{
            text-decoration: none;
            color: #0aa1ed;
        }
        .c1 a:hover{
            color: #0a7eb8;
        }

    </style>
</head>
<body>
<div>
    <div id="t_div">
        <img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/computer_icon1.png" alt="">
        <span>电脑,办公/1F</span>
    </div>
    <div class="c1">
        <p>电脑整机</p>
        <ul>
            <li><a href="">笔记本</a></li>
            <li><a href="">游戏机</a></li>
            <li><a href="">台式机</a></li>
            <li><a href="">一体机</a></li>
            <li><a href="">服务器</a></li>
            <li><a href="">联想</a></li>
        </ul>
    </div>
    <div class="c1">
        <p>电脑配件</p>
        <ul>
            <li><a href="">CPU</a></li>
            <li><a href="">SSD硬盘</a></li>
            <li><a href="">显示器</a></li>
            <li><a href="">显卡</a></li>
            <li><a href="">组装电脑</a></li>
            <li><a href="">机箱</a></li>
        </ul>
    </div>
    <div class="c1">
        <p>外设/游戏</p>
        <ul>
            <li><a href="">键盘</a></li>
            <li><a href="">鼠标</a></li>
            <li><a href="">U盘</a></li>
            <li><a href="">移动硬盘</a></li>
            <li><a href="">游戏设备</a></li>
            <li><a href="">智能单车</a></li>
        </ul>
    </div>

</div>
</body>
</html>