学习HTMLCSS第六天

标签：设置 color 元素 height 学习第六天 background HTMLCSS left

CSS 核心属性详解

在前端开发中，CSS（层叠样式表）起着至关重要的作用，它可以让网页变得更加美观和易用。本文将详细介绍 CSS 中的一些核心属性，包括行高、圆角、透明度、颜色值、浮动、定位和子绝父相等。

一、行高（line-height）

概念：行高是指文本行与行之间的间距，实际上是每行文本基线与基线之间的间距。
属性值：可以设置为倍数或像素值。
- 例如：line-height: 1.75表示行高为字体大小的 1.75 倍；line-height: 200px表示行高为 200 像素。
单行文本垂直居中：对于单行文本，可以设置行高等于标签的高度来实现垂直居中。
多行文本垂直居中：对于多行文本，可以通过设置内边距来实现垂直居中，如padding-top: 80px; padding-bottom: 80px;。

<!-- 
  line-height
  行高： 文本行与行之间的间距。
  其实是指每行文本基线与基线之间的间距

-->
<style>
    .text {
        background-color: red;
        font-size: 40px;
        /* 属性值： 倍数 / px */
        line-height: 1.75;
    }
</style>

<div class="text">
    xfgj  hello world
</div>

<style>
 .box {
    font-size: 40px;
    background-color: green;
    height: 200px;
    /* 1）遇到一行文本(单行文本)垂直居中，可以设置行高等于标签的高度 */
    line-height: 200px;
 }
</style>
<div class="box">
  xfgj  hello world
</div>

<style>
    .demo {
        background-color: blue;
        font-size: 40px;
        /* 2）遇到多行文本垂直居中，可以通过内边距居中 */
        padding-top: 80px;
        padding-bottom: 80px;
    }
</style>
<div class="demo">
    xfgj  hello world <br>
    xfgj  hello world <br>
    xfgj  hello world <br>
    xfgj  hello world 
</div>

二、圆角（border-radius）

作用：用于设置元素的圆角。
早期低版本浏览器不支持圆角的解决方案：采用图片代替。
属性设置：
- 可以设置一个统一的圆角半径，如border-radius: 100px;将元素设置为圆形。
- 也可以分别设置不同的圆角，如border-top-left-radius: 40px; border-top-right-radius: 40px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;。

<!-- 圆角,早期低版本浏览器，不支持圆角怎么办？答案：采用图片代替。 -->
 <style>
    .box {
        width: 200px;
        height: 200px;
        background-color: blue;
        /* 圆角属性 */
        border-radius: 100px;
    }
 </style>
<div class="box"></div>

<style>
    .demo {
        width: 200px;
        height: 300px;
        background-color: green;
        /* 分别设置不同的圆角 */
        border-top-left-radius: 40px;
        border-top-right-radius: 40px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
</style>
<div class="demo"></div>

三、透明度（opacity）

作用：设置标签的透明度。
注意事项：当设置标签透明时，标签和文本都会变透明，且完全透明时（opacity: 0;），标签虽然看不见，但仍然占位置。例如：opacity:.5;表示透明度为 50%。


<style>
    .box-2 {
        width: 300px;
        height: 100px;
        font-size: 40px;
        background-color: rgb(0,0,255);
        /* 设置标签透明
           标签和文本都变透明了
           opacity: 0; 完全透明，但标签不是消失，还是占位置的。
         */
        opacity: .5;
    }
</style>
<div class="box-2">
    hello abc
</div>

四、颜色值

设置方式：
- 英文词汇，如white（白色）、black（黑色）、red（红色）等。
- 十六进制，如#ffffff（白色）、#000000（黑色）。十六进制由数字 0-9 和字母 a-f 组成。
- rgb()函数，如rgb(0,255,255)表示青色。
- rgba()函数，如rgba(255,255,255,.5)，最后一个参数表示透明度。
- hsl()函数，如hsl(色调,饱和度，亮度)。

<style>
    .box {
        width: 100px;
        height: 100px;
        /* 1） 英文词汇 white black  red green blue pink purple orange gray yellow lightgreen .... */
        /* 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,.5)  */
        /* 4)  hsl(色调,饱和度，亮度) */
        background-color: #d70a0a;
    }
</style>
<div class="box"></div>

五、浮动（float）

作用：设置元素靠左或者靠右摆放，使元素脱离正常文档流。
属性值：float: left;表示左浮动，float: right;表示右浮动。
影响：浮动的元素不占位置，会影响后面的 HTML 标签，但不会影响前面的 HTML 标签。
清除浮动：
- 可以在受浮动影响的元素后面添加一个块元素，并设置clear: both;属性来清除浮动的影响。
- 也可以使用伪类元素清除浮动，如给父元素添加clearfix类名，在 CSS 中设置.clearfix::after { content: ""; display: block; clear: both; }。

 <!-- 
     浏览器在解析html文档时，正常的顺序是从上往下、从左往右解析。
     这个正常的解析过程，我们叫做正常文档流(标准文档流)    
    -->


<style>
    /* 浮动: 设置元素靠左或者靠右摆放。 */
    .fl {
        float: left;
    }
    .fr {
        float: right;
    }
</style>
<!-- 
  123 
-->
<div class="fl">1</div>
<div class="fl">2</div>
<div class="fl">3</div>


<!-- 
   654
-->
<div class="fr">4</div>
<div class="fr">5</div>
<div class="fr">6</div>


 <!-- 
浮动会让元素脱离正常文档流，这个浮动了的标签就不占位置了，
会影响后面的html标签，不会影响前面html标签。
后面的html标签不想受到浮动的影响，可以设置 clear: both; 属性清除浮动的影响。

-->

 <style>
 .clear {
    /* 清除浮动属性 */
    clear: both;
}

/* 使用伪类元素清除浮动 */
.clearfix::after {
    /* 生成伪类元素属于行内元素 */
    content: "";
    /* 把行内元素转成块元素 */
    display: block;
    /* 清除浮动 */
    clear: both;
}

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

<!-- 
设置了浮动的元素，不占位置，就无法撑开父元素的高度，就看不见灰色的背景。
在浮动的元素后面添加一个块元素，给这个块元素设置清除浮动即可。

使用这个类名：clearfix 
目的是为了生成伪类标签代替 “<div class="clear"></div>”。

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

<div class="parent clearfix">
     <div class="child bg-pink"></div>
     <div class="child bg-orange"></div>
</div>

六、定位（position）

属性值：
- relative（相对定位）：不会让元素脱离正常文档流。
- absolute（绝对定位）：会让元素脱离正常文档流，不占位置。
- fixed（固定定位）：会让元素脱离正常文档流，不占位置。
- sticky（粘性定位）：不会让元素脱离正常文档流。
- static（静态，无定位作用）。
方位属性：配合left（左）、top（上）、right（右）、bottom（下）等属性使用。同时设置left和right时优先读取left属性值。
层级属性：可以使用z-index属性设置元素的层级。

 <!-- 
    定位： 设置标签的位置
    position属性
    配合以下属性使用
    方位： left  top  right bottom 
    层级： z-index
    同时设置left和right优先读取left属性值。


    position 有哪些属性值
    relative   相对定位
    absolute   绝对定位
    fixed      固定定位
    sticky     粘性定位（吸顶/吸底）
    static     静态（无定位作用）
    -->

<style>
body {
    margin: 0;
    height: 2000px;
}
.box {
    width: 100px;
    height: 100px;
    font-size: 25px;
}

.box-1 {
    background-color: red;
    /* 相对定位 (不会让元素脱离正常文档流)*/
    position: relative;
    left: 150px;
    top: 0px;
}
.box-2 {
    background-color: green;
    /* 绝对定位 (会让元素脱离正常文档流、不占位置) */
    position: absolute;
    left: 150px;

}
.box-3 {
    background-color: blue;
    /* 固定定位 (会让元素脱离正常文档流、不占位置)*/
    position: fixed;
    left: 300px;
}
.box-4 {
    background-color: orange;
    /* 粘性定位 (不会让元素脱离正常文档流)*/
    position: sticky;
    left: 450px;
    top: 0;
}
.box-5 {
    background-color: purple;
    /* static (没有定位作用的) */
    position: static;
    left: 450px;
    top: 0;
}
.box-6 {
    background-color: pink;
}
</style>
<div class="box box-1">1(相对)</div>
<div class="box box-2">2(绝对)</div>
<div class="box box-3">3(固定)</div>
<div class="box box-4">4(粘性)</div>
<div class="box box-5">5</div>
<div class="box box-6">6</div>

七、子绝父相

概念：子元素设置为绝对定位，父元素设置为相对定位。
作用：绝对定位会让元素脱离正常文档流，不占位置；相对定位不会让元素脱离正常文档流，占位置。这样可以方便地对子元素进行定位，同时不影响父元素在文档流中的位置。实在实际的前端开发中，合理运用这些 CSS 属性可以实现各种复杂的布局和效果。通过对行高的调整可以优化文本的排版；圆角可以使元素更加美观；透明度可以实现一些特殊的视觉效果；颜色值的灵活设置可以满足不同的设计需求；浮动和定位则可以实现元素的灵活布局。而子绝父相的技巧更是在一些特定场景下非常有用。

 <!-- 
     子绝父相：
        子元素设置为绝对定位
        父元素设置为相对定位
    
        绝对定位会让元素脱离正常文档流，不占位置，
        相对定位不会让元素脱离正常文档流，占位置
    -->

    <style>
        body {
            margin: 0;
        }
        .header {
            width: 600px;
            height: 80px;
            background-color: darkred;
            margin: 0 auto;
        }
        .main {
            width: 600px;
            height: 600px;
            background-color: deepskyblue;
            margin: 0 auto;
        }
        .footer {
            width: 600px;
            height: 300px;
            background-color: yellowgreen;
            margin: 0 auto;
        }
        .main {
            /* 父元素（相对定位） */
            position: relative;
        }
        .main .box {
            width: 100px;
            height: 100px;
            background-color: red;

            /*子元素 
            设置.box标签绝对定位*/
            position: absolute;
            /* 正数 往左侧移动； 负数 往右侧移动*/
            right: 100px;
            /* 正数 往上边移动； 负数 往下边移动*/
            bottom: 100px;

            /* 正数 往右侧移动； 负数 往左侧移动*/
            left: 50px;
            /* 正数 往下边移动； 负数 往上边移动*/
            top: 50px;
        }
    </style>
    <div class="header"></div>

    <div class="main">
            <div class="box"></div>
    </div>
    <div class="footer"></div>

希望本文对大家理解和运用 CSS 这些核心属性有所帮助。

标签：设置,color,元素,height,学习,第六天,background,HTMLCSS,left
From： https://blog.csdn.net/2401_83588067/article/details/142457935