CSS常见属性（二）

小杨码记

于 2024-07-18 13:11:21 发布

阅读量70

点赞数 3

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

本文链接：https://blog.csdn.net/m0_71805861/article/details/140520375

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

#颜色值

（1）英文词汇：white、pink、red、blue、purple、black、orange、green......

（2）十六进制：#ffffff 、#000000 （0,1,2,3,4,5,6,7,8,9，a,b,c,d,e,f）

（3）rgb (0,255,255) 或者 rgba(255,255,255,0.5)

（4）hsl(色调，饱和度，亮度)

1.浮动 float

（1）浮动：设置元素靠左或者靠右摆放

（2）左浮动：float:left 右浮动：float:right

（3）设置了浮动的元素，不占位置，就无法撑开父元素的高度。会影响后面的html标签，不会影响前面html标签

（4）清除浮动的方法

【1】后面的html标签不想受到浮动的影响，可以设置 clear: both; 属性清除浮动的影响

.demo {
            width: 200px;
            height: 150px;
            background-color: pink;
            /* 清除浮动的属性 */
            clear: both;
        }
        .fl {
            float: left;
        }        
    <div class="box bg-red fl"></div>
    <div class="box bg-green fl"></div>
    <div class="box bg-blue fl"></div>
    <div class="demo"></div>

【2】在浮动的元素后面添加一个块元素，给这个块元素设置清除浮动即可。设置属性：clear: both

   .clear {
            /* 清除浮动属性 */
            clear: both;
        }
        
     <div class="parent">
        <div class="child bg-red"></div>
        <div class="child bg-green"></div>

        <!-- 这个块元素用于清除浮动，那能不能用伪类元素代替这个块元素做清除浮动的事情。 -->
        <div class="clear"></div>
    </div>

【3】遇到哪个标签设置了浮动，就找到这个标签的父元素，给这个父元素设置clearfix类名即可，就起到清除浮动的作用。

注：如果父级元素设置了高度，可以不用设置清除浮动，不会影响后面的内容。

/* 使用伪类元素清除浮动 */
        .clearfix::after {
            /* 生成伪类元素属于行内元素 */
            content: "";
            /* 把行内元素转成块元素 */
            display: block;
            /* 清除浮动 */
            clear: both;
        }
        
<div class="parent clearfix">
     <div class="child bg-pink"></div>
      <div class="child bg-orange"></div>
</div>

2.定位 position

（1）相对位置（relative）：不会让元素脱离正常文档流、还占位置（子绝父相）

（2）绝对位置（absolute）：会让元素脱离正常文档流、不占位置（子绝父相）

（3）固定位置（fixed）：会让元素脱离正常文档流、不占位置

（4）粘性定位（sticky）：吸顶、吸底；不会让元素脱离正常文档流、还占位置

【1】吸顶：position:sticky;

top:0;

（5）静态（static）：无定位作用

（6）top、left、right、botton

【1】同时出现top和botton,优先使用top

【2】同时出现left和right,优先使用left

【3】取值为正数时，位置会在盒子内；如果取复数位置会在盒子外

3.层级 z-index

（1）层级越高，层次越高，显示在最上面。

（2）案例：

<style>
    .parent {
      width: 200px;
      height: 200px;background-color: yellowgreen;
      position: relative;
    }
    .child {
      height: 150px;
      width: 150px;
    }
    .c-1{
      background-color: deepskyblue;
      position: absolute;
      left: 0;
      top:0;
      z-index: 10;
    }
    .c-2{
      background-color: pink;
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 1;
    }
    .c-3{
      background: palegreen;
      position: absolute;
      left: 25px;
      top: 25px;
      z-index: 20;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child c-1"></div>
    <div class="child c-2"></div>
    <div class="child c-3"></div>
  </div>
</body>

（3）效果图：

小杨码记

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS常见属性（二）

【3】遇到哪个标签设置了浮动，就找到这个标签的父元素，给这个父元素设置clearfix类名即可，就起到清除浮动的作用。（2）十六进制：#ffffff 、#000000 （0,1,2,3,4,5,6,7,8,9，a,b,c,d,e,f）（3）设置了浮动的元素，不占位置，就无法撑开父元素的高度。（1）相对位置（relative）：不会让元素脱离正常文档流、还占位置（子绝父相）（2）绝对位置（absolute）：会让元素脱离正常文档流、不占位置（子绝父相）（4）粘性定位（sticky）：吸顶、吸底；
复制链接

扫一扫