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

    目录

    CSS的三大特性

    定位方式

    静态定位

    相对定位

    绝对定位(absolute) 

    固定定位

    浮动定位

    粘性定位(sticky)

    定位总结

    综合练习

    效果展示

    目录

    CSS的三大特性

    定位方式

    静态定位

    相对定位

    绝对定位(absolute) 

    固定定位

    浮动定位

    粘性定位(sticky)

    定位总结

    设置缩放动画

    溢出设置overflow

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

    元素的显示层级z-index

    综合练习

    效果展示

    CSS的三大特性

    1. 继承性: 指元素可以继承上级元素文本和字体相关的样式,部分标签自带效果不受继承影响,比如超链接字体颜色
    2. 层叠性: 多个选择器可能选择到同一个元素, 如果添加的样式不同,则样式全部层叠生效, 如果作用的样式相同
    3. 优先级: 选择器的优先级, 选择器作用范围越小 优先级会越高, 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

    综合练习

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <style>
    7.         body{
    8.             font: 12px "simhei", Arial, Helvetica, sans-serif;
    9.             color: #666;
    10.         }
    11.         body>div{
    12.             width: 366px;
    13.             height: 233px;
    14.             background-color: #e8e8e8;
    15.         }
    16.         #t_div{
    17.             height: 35px;
    18.             background-color: #0aa1ed;
    19.             border-radius: 2px;
    20.         }
    21.         body>div>div{
    22.             padding-left: 10px;
    23.         }
    24.         #t_div>img{
    25.             margin-top: 10px;
    26.         }
    27.         #t_div>span{
    28.             color: white;
    29.             font-size: 16px;
    30.             /*如果需要对某1个元素进行位置微调则使用下面的相对定位*/
    31.             position: relative;
    32.             bottom: 5px;
    33.         }
    34.         ul,p{
    35.             padding: 0;
    36.             margin: 0;
    37.         }
    38.         ul{
    39.             list-style-type: none;
    40.             overflow: hidden;
    41.         }
    42.         li{
    43.             float: left;
    44.             margin-right: 10px;
    45.         }
    46.  
    47.         .c1>p{
    48.             margin-top: 20px;
    49.             margin-bottom: 10px;
    50.             color: #62B5EC;
    51.         }
    52.         .c1 a{
    53.             text-decoration: none;
    54.             color: #0aa1ed;
    55.         }
    56.         .c1 a:hover{
    57.             color: #0a7eb8;
    58.         }
    59.  
    60.     style>
    61. head>
    62. <body>
    63. <div>
    64.     <div id="t_div">
    65.         <img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/computer_icon1.png" alt="">
    66.         <span>电脑,办公/1Fspan>
    67.     div>
    68.     <div class="c1">
    69.         <p>电脑整机p>
    70.         <ul>
    71.             <li><a href="">笔记本a>li>
    72.             <li><a href="">游戏机a>li>
    73.             <li><a href="">台式机a>li>
    74.             <li><a href="">一体机a>li>
    75.             <li><a href="">服务器a>li>
    76.             <li><a href="">联想a>li>
    77.         ul>
    78.     div>
    79.     <div class="c1">
    80.         <p>电脑配件p>
    81.         <ul>
    82.             <li><a href="">CPUa>li>
    83.             <li><a href="">SSD硬盘a>li>
    84.             <li><a href="">显示器a>li>
    85.             <li><a href="">显卡a>li>
    86.             <li><a href="">组装电脑a>li>
    87.             <li><a href="">机箱a>li>
    88.         ul>
    89.     div>
    90.     <div class="c1">
    91.         <p>外设/游戏p>
    92.         <ul>
    93.             <li><a href="">键盘a>li>
    94.             <li><a href="">鼠标a>li>
    95.             <li><a href="">U盘a>li>
    96.             <li><a href="">移动硬盘a>li>
    97.             <li><a href="">游戏设备a>li>
    98.             <li><a href="">智能单车a>li>
    99.         ul>
    100.     div>
    101.  
    102. div>
    103. body>
    104. html>

    效果展示

  • 相关阅读:
    Vue生命周期
    爬虫之xpath
    【python】numpy常用属性
    Airtest如何自动连接重启后的设备并继续执行自动化脚本呢？
    Elasticsearch系列(五)ES数据写入
    如何编写接口自动化框架系列之unittest测试框架的详解（二）
    Spring webflux 构建响应式 RESTful Web 服务
    WebDAV之葫芦儿·派盘+百灵创作
    几行Python代码实现人像动漫化, 让头像独一无二
    文件包含总结
  • 原文地址：https://blog.csdn.net/weixin_72612071/article/details/127659778