浮动溢出、定位、阴影的制作

最新推荐文章于 2025-05-15 16:24:36 发布

原创最新推荐文章于 2025-05-15 16:24:36 发布 · 213 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

本文详细介绍了CSS中的标准文档流、浮动与清除浮动的概念及应用技巧，探讨了文本溢出处理方法，包括如何使用overflow属性控制内容显示。此外，还介绍了按钮制作、圆角、文本阴影及盒子阴影等CSS特效的实现。

浮动与溢出

标准文档流

在HTML中，元素的排列等都离不开文档流，指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式。

文本溢出overflow

当一个盒子中的内容较多的时候,超出去当前容器。

值	说明
visible	默认值表示超出正常显示
hidden	隐藏
scroll	滚动
auto	自动（根据文字多少判断是否加滚动条）

省略号的显示

显示省略号的四个条件

容器要有固定的宽高大小
文本强制性的在一行显示
超出去的文本隐藏起来
让隐藏的文本变成省略号

        width: 110px;
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

浮动

在文档流的情况下元素是从左到右、从上到下依次排列，在有些情况下需要将有些块级元素在一行显示，我们可以对其进行浮动处理。

浮动的方式

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边

添加浮动

为想要浮动的元素添加float属性，值为left right ，向左或者向右浮动。

浮动的后果

浮动会导致浮动的元素脱离文档流，不再占据原本文档流的位置，但是原来的父元素盒子还是会根据之前的计算方式来计算盒子的高度，这样会导致脱离文档流的元素溢出容器，影响后续元素的布局。

清除浮动

给父元素添加属性overfloat:hidden,这样在计算时会计算远东元素的高度，缺点：会隐藏定位到外围的元素.
在浮动元素下方添加一个空div,并添加清除浮动的样式[<div style="clear: both;"></div>]原理:clear的作用是设置元素左右两边不允许存在浮动元素。

使用after伪元素清除浮动--推荐使用

     div.parent::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

visibility: hidden;可以隐藏元素，但是元素的位置还在，在页面重新渲染时不需要进行重排，siaplay:none也可以隐藏元素，但是他不会保留元素的位置，在页面重新渲染时会进行重排。

在页面中如果使用浮动可以在css文件最前面加固定样式来清除浮动

 .clearfix::after {
            content: "";
            clear: both;
            display: table;
      
      }

定位

postition属性是元素的定位类型，postition有五个值，static.ralatiive.fixed.absolute.sticky。

static定位，是默认值，没有定位，遵循正常的文档流对象。
fixed定位，是指元素相较于浏览器窗口进行固定定位。窗口移动该元素也不会移动。
ralatiive定位，进行相对定位的元素相对于自身原本的位置。虽然元素进行了移动，但是元素原本所在的位置还在，不会脱离文档流。
absolute定位，指进行绝对定位的元素相较于距离最近的进行定位的父元素的位置。如果父元素门都没有定位则是相对于body。会脱离文档流。

3、按钮与阴影

按钮的制作

  <input type="button" value="提交">
  <button>提交</button>
  button{ width: 50px;
        height: 30px;
        color: aliceblue;
        background-color: rgb(123, 211, 180);
        border: 1px solid aquamarine;
    }
    input{
        width: 50px;
        height: 30px;
        color: black;
        background-color: rgb(134, 131, 217);
        border: 1px solid rgb(156, 152, 216);
     
    }

圆角

border-radius: 5px 5px 5px 5px;

当容器为正方形时，将border-radius的值设为宽度的一半会得到一个圆。

文本阴影

字体阴影，使用text_shadow:2px 2px 2px green,分别为水平偏移量，竖直偏移量，模糊半径，颜色。
h1{ text-shadow: 5px 5px 5px rgb(129, 118, 118); }

盒子的阴影

盒子阴影使用 box-shadow，box-shadow不单可以制作出阴影的效果，我们还可以利用其扩展半径这个值，来给对象制作出类似于边框的样式，

box-shadow：给对象实现图层阴影效果

语法：box-shadow:inset x-offset y-offset blur-radius spread-radius color

            {
            width: 200px;
            height: 200px;
            background-color:  aquamarine;
            box-shadow:   0 0 0 green,  
                /* 顶部阴影 */
                0 0 0 blue,
                /* 底部阴影 */
                0 5px 5px rgb(167, 232, 196),
                /* 右边阴影 */
                5px 0 5px rgb(133, 216, 179);
           /*四边有一样的阴影*/
           box-shadow: 0 0 5培训green
            }

图片的内阴影

img放到一个div中，对父元素div进行box-shadow，再对img进行相对定位，并让其在父元素下一层；

 div.img{
              width: 100px;
              height: 150px;
              border: 1px solid gray;
              box-shadow:inset 0 0 3px 3px rgb(212, 162, 162);
          }
   img{
       width: 100px;
       height: 150px;
       position: relative;
       z-index: -1;
      }
      <div class="img">
          <img src="./img/1.jpg" alt="">
      </div>

在img父元素上应用上伪元素“::before”来实现

div.imgs{
    width: 100px;
    height: 150px;
    border: 1px solid gray;
    position: relative;
    display: inline-block;
    *display: block;  
}
div.imgs::before{
    width: 100%;
    height: 100%;
    content: "";
    box-shadow:inset 0 0 3px 3px rgb(212, 162, 162);
    display: inline-table;
    position: absolute;
}
img{
    width: 100px;
    height: 150px;
    position: relative;
    z-index: -1;
}
<div class="imgs">
<img src="./img/1.jpg" alt=""></div>

z-index属性

z-index属性是用来设置元素的堆叠顺序，值越大层级越高，值越小层级越小越在后，当元素发生堆叠时，层级高的会覆盖层级低的元素。
auto:与父元素层级相同
该属性只能在设置了position: relative | absolute | fixed的元素和父元素设置了display：flex的子元素中起作用。

同级元素之间

当两个设置了定位并且z-index属性值不同的元素谁的属性值越大，该元素越在前。
  
当两个设置了定位并且z-index属性值相同情况下，根据元素的书写顺序来决定，谁先写谁在前。
  
两个元素一个设置了z-index属性，一个没有设置的同级元素，没有设置的默认值为0，进行比较。

父元素与子元素

  父元素没有设置该属性，子元素设置该属性，当子元素的z-index属性的值大于0时，子元素层级高于父元素，当子元素的值小于0时，则父元素的层级高于子元素。
  父元素设置该属性，子元素没有设置该属性，无论父元素z-index属性的数值为多少，子元素层级永远高于父元素。