• CSS元素选择模式

    CSS元素选择模式
    例题： 
    1. <head>
    2.     <meta charset="UTF-8">
    3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    4.     <title>复合选择器之链接伪类选择器title>
    5.     <style>
    6.         div {
    7.             width: 400px;
    8.             height: 150px;
    9.             background-color: pink;
    10.         }
    11.     style>
    12. head>
    13.  
    14. <body>
    15.     
    16.     <div>我是块级元素，比较霸道，自己独占一行div> 这是另一条语句
    17. body>

    运行结果：

      

    例题:

    1. <head>
    2.     <meta charset="UTF-8">
    3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    4.     <title>复合选择器之链接伪类选择器title>
    5.     <style>
    6.         .color {
    7.             color: red;
    8.             /* 设置宽高无效 */
    9.         }
    10.     style>
    11. head>
    12.  
    13. <body>
    14.     
    15.     <span>行内元素都是显示在一行上，一行可以显示多个span> 
    16.     <span class="color">注意：行内元素不可以设置宽高，默认的宽度就是它本身内容的宽度！span>
    17. body>

    运行结果：

    例题：

     

    1. <head>
    2.     <meta charset="UTF-8">
    3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    4.     <title>复合选择器之链接伪类选择器title>
    5.     <style>
    6.         input {
    7.             width: 200px;
    8.             height: 30px;
    9.         }
    10.     style>
    11. head>
    12.  
    13. <body>
    14.     
    15.     <input type="text">
    16.     <input type="text">
    17. body>

    运行结果：

    例题：

    1. <head>
    2.     <meta charset="UTF-8">
    3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    4.     <title>复合选择器之链接伪类选择器title>
    5.     <style>
    6.         a {
    7.             width: 150px;
    8.             height: 50px;
    9.             background-color: pink;
    10.             /* 把行内元素a 转换为 块级元素 */
    11.             display: block;
    12.         }
    13.         
    14.         div {
    15.             /* width: 300px;
    16.             height: 100px; */
    17.             background-color: rgb(230, 119, 230);
    18.             /* 把块级元素div 转换为 行内元素     转换后设置的宽度和高度就会无效*/
    19.             display: inline;
    20.         }
    21.         
    22.         span {
    23.             width: 200px;
    24.             height: 60px;
    25.             background-color: skyblue;
    26.             /* 把行内元素span 转换为 行内块元素  转换后行内元素就可以设置宽高了*/
    27.             display: inline-block;
    28.         }
    29.     style>
    30. head>
    31.  
    32. <body>
    33.     <a href="#">元素显示模式转换:行内 转换 块级a>
    34.     <a href="#">元素显示模式转换：行内 转换 块级a>
    35.     <div>我是块级元素，即将转换为行内元素div>
    36.     <div>我是块级元素，即将转换为行内元素div>
    37.     <span>行内元素转换为 行内块元素span>
    38.     <span>行内元素转换为 行内块元素span>
    39. body>

    运行结果：

    例题：

    1. <title>Documenttitle>
    2.     <style>
    3.         a {
    4.             /* 设置垂直居中的小技巧： 让字体行高等于盒子的高度 */
    5.             display: block;
    6.             background-color: royalblue;
    7.             width: 230px;
    8.             /* 盒子的高度 */
    9.             height: 40px;
    10.             /* 字体的行高 */
    11.             line-height: 40px;
    12.         }
    13.     style>
    14. head>
    15.  
    16. <body>
    17.     <a href="#">字体的垂直居中设置a>
    18. body>

    运行结果：

  • 相关阅读:
    Spring Boot + Redis 实现分布式限流
    Springboot:如何搭建起自己第一个Springboot项目
    Java后端接口幂等的方案
    飞熊领鲜参加「第十届中国产业数字化大会」获创新企业数字化百强
    MySQL【聚合函数】
    sql面试题--业务培训（一）
    Docker基于Minio搭建对象(文件)存储服务
    短视频矩阵系统源码开发分享
    算法排序基础（全版）
    【Spring Cloud】新闻头条微服务项目：文章内容安全审核（需求分析及前期准备）
  • 原文地址：https://blog.csdn.net/qq_48516121/article/details/126874932