css样式大全（总结、心得、css3新特性、盒子居中模型等）

最新推荐文章于 2024-03-08 14:14:04 发布

乐邂逅

最新推荐文章于 2024-03-08 14:14:04 发布

阅读量352

点赞数 1

分类专栏：原创文章文章标签： css html html5

本文链接：https://blog.csdn.net/Hrenhua/article/details/120087791

版权

原创文章专栏收录该内容

20 篇文章 5 订阅

订阅专栏

css、html、js是前端的三剑客学习好css，这能让前端页面‘妆扮’成更加美丽！

行内元素（display:inline）

span a bi em label input select textarea img br code strong front

块内元素 (display:block)

div h h1 h2 h3 h4 h5 h6 p ul form fieldset hr pre table dl
一般来说，行内元素与块内元素可以相互转化：
display:inline --> 行内元素（设置宽高无效）

display:inline-block --> 行内块元素（能设置宽高）

display:block --> 块级元素（能设置宽高）
注意：加定位（position）或者展示方式（display），会影响行内元素，使其宽高属性生效。
在这里插入图片描述

定位

css中，定位方式有如下几种：
position:static;这个是默认的文档流定位方式，按从左到右，上到下的方式组织文档流的元素。

position: absolute;这个是绝对定位方式，元素相对于第一个非static的祖先元素进行定位，没有父元素，则定位与body。当然，实际上，如果父元素没有内容，他才是相对于第一个非static的祖先元素进行定位，但是，如果祖先元素有内容，他会相对于内容下面进行定位。看例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="div1">
        dddd
    </div>

    <div class="div2">
      div2
    </div>
</body>
<style>
    .div1{
        color:blue;
        width:50%;
        height: 50%;
        background-color: rgb(9, 216, 112);
    }
    .div2{
        height: 100px;
        position: absolute;
        width:100px;
        background-color: rgb(180, 169, 169);
    }
   
</style>
</html>

在这里插入图片描述
position: relative; 相对定位。它是相对于自己在文档流的原来位置而定位，通常搭配top,left,bottom,right（用两对来确定坐标）来使用。
注意的是：你定位别的位置去了，文档流还会保留你原来的位置。如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="div1">
        dddd
    </div>

    <div class="div2">
      div2
    </div>
</body>
<style>
    .div1{
        color:blue;
        position: relative;
        top:100px;
        left:100px;
        width:50%;
        height: 50%;
        background-color: rgb(9, 216, 112);
    }
    .div2{
        height: 100px;
        position: absolute;
        width:100px;
        background-color: rgb(180, 169, 169);
    }
   
</style>
</html>

在这里插入图片描述

position:fixed; 这个固定定位，是固定于浏览器定位。那些弹窗广告通常用这种方式定位，无论你鼠标滑倒哪里去，只要你不关闭，它就一直固定在你的窗口。

position: sticky; 粘性定位：是css3新增的一个position属性。于position:fixed的区别：我们都知道常用的几个定位（static、absolute、relative、fixed），如果没有额外的js处理，只要写上，页面立马就可以看到相对应的效果。而sticky相当于加了一个滚动事件的处理，当页面滚动到相对应的元素上，就会变成固定定位的效果。当滚动到父元素不在可视区域范围内时，定位效果就会消失。
适用场合：一开始不显示，滚动到一定位置需要显示的元素。
注意：
1.父元素不能有overflow属性
2.left、top、right、bottom必须要有一个
3.仅在父元素内生效，父元素的高度必须大于sticky元素的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="div1">
        <div class="div2">
     
        </div>
    </div>
<div class="div3"></div>
   
</body>
<style>
    .div1{
        width:100vw;
        height: 120vh;
        position: relative;
        background-color: rgb(9, 216, 112);
    }
    .div2{
        height: 100px;
        position: sticky;
        width:100px;
        left:100px;
        top:100px;
        background-color: rgb(180, 169, 169);
    }
    .div3{
        height: 120vh;
        width: 20vw;
        background-color: blue;
    }
   
</style>
</html>

在这里插入图片描述

css3一些新特性

文本换行： 默认情况下，英文单词、数字、汉字等会被当成一个完整的字（word），完整的字永远在同一行，这会造成溢出。用 word-wrap:break-word; 能在超出容器的宽度下自动换行。
word-break:break-all;能实现和word-wrap:break-word;一样的效果。
word-break:normal;能保持完整的字不被分割成两行。
word-break:normal;中日韩完整的字，不会被分割，直到遇到空白符或者标点才换行。

(盒子)阴影：box-shadow:x-shadow y-shadow blur spread color inset;
(选)x-shadow: 阴影水平偏移值，可负值。必填
(选)y-shadow: 阴影垂直偏移值，可负值。必填
blur: 值越大，阴影越大。选填
spread:阴影扩散的面积，默认和原边框一致。选填
(选)color:阴影颜色。选填
inset：阴影默认为外阴影，设置inset将是内阴影。选填

一般开发，选 box-shadow:x-shadow y-shadow color;

边框圆角： border-radius:**px; 如：

在这里插入图片描述

盒子居中模型

最近弄项目，要用原生的css代码编写样式，用到最多的是盒子的居中模型。现在我就给大家总结一下有哪些方法可以实现盒子的居中模型。前面我会介绍只有父子关系的居中，后面我会介绍三种关系的居中（图片和文字）！！！

1、利用position属性、margin、left、top、right和bottom。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div class="div1">
        <div class="div2"></div>
    </div>

</body>
<style>
.div1{
    width: 400px;
    height: 400px;
    background-color: red;
    position: relative;
    border: 1px solid green;
}
.div2{
    width: 200px;
    height: 200px;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
    margin:auto;
    background-color: rgb(15, 15, 15);
}

   
</style>
</html>

在这里插入图片描述
2、质心计算，利用数学方法。如果知道了父子元素的宽高，通常采用的是这种方式。
公式是：（ fatherWidth - sonWidth + fatherHeight - sonHeight）/ 2

注意：利用这种方法，关键是父元素设置border属性和利用margin-left、margin-top。 即margin要有外边框才能生效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div class="div1">
        <div class="div2 center"></div>
    </div>

</body>
<style>
.div1{
    width: 400px;
    height: 400px;
    background-color: red;
    border: 1px solid green;
}
.div2{
    width: 200px;
    height: 200px;
    background-color: rgb(15, 15, 15);
}
.center{
     margin-left: 100px;
     margin-top: 100px;
   
}
   
</style>
</html>

3、利用display: flex 属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div class="div1">
        <div class="div2"></div>
    </div>

</body>
<style>
.div1{
    width: 400px;
    height: 400px;
    background-color: red;
    border: 1px solid green;
    display: flex;
    /*flex-direction: column; 可不写,默认对齐方向*/
    justify-content: center;
    align-items: center;
}
.div2{
    width: 200px;
    height: 200px;
    background-color: rgb(15, 15, 15);
}
   
</style>
</html>

4、利用偏移的方法，transform:translate（x,y）和定位。

这种方法我最常用，因为代码最短逻辑最清楚，哈哈！不过关键是利用定位！因为父元素只有relative或者absolute才能让子元素top和left属性生效。它的思想是利用子元素偏移父元素的宽高的一半再减去自身宽高的一半。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div class="div1">
        <div class="div2"></div>
    </div>

</body>
<style>
.div1{
    width: 400px;
    height: 400px;
    background-color: red;
    border: 1px solid green;
    position: absolute;
}
.div2{
    width: 200px;
    height: 200px;
    background-color: rgb(15, 15, 15);
    top:50%; /*偏移父元素的height一半*/
    left:50%;/*偏移父元素的width一半*/
    transform: translate(-50%,-50%);/*再偏移掉自己宽高的一半*/
    position: relative;
}
   
</style>
</html>

5、利用css3的新增属性table-cell, vertical-align:middle。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div class="div1">
        <div class="div2"></div>
    </div>

</body>
<style>
.div1{
    width:400px;
    height:400px;
    border: 1px solid wheat;
    background-color: red;
    display: table-cell;
    vertical-align:middle;
}
.div2{
    width:200px;
    height:200px;
    background-color: rgb(24, 22, 22);
    margin: auto;
  
}

   
</style>
</html>

文字永远和图片中间对齐（案例开发种常用到）

文字和图片通常不在一个元素内，且文字通常是行内元素，img通常被设置成块内元素，这让他们俩永远对齐，还真困难！这关键的思路，就是，
让他们都变成块级元素，宽度一致（包含padding计算在内），文字居中显示！
上案例！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div class="div">
        <img src="../icon/1.jpg"/>
        <span>溜溜狗</span>
    </div>

</body>
<style>
.div{
    border: 1px solid wheat;
    background-color: antiquewhite;
    border-radius: 10px;
    width:204px;
}
img{
    width:200px;
    height:200px;
    border-radius: 200px;
    padding: 2px;
    background-color: white;
    display: inline-block;
}
span{
    width:204px;
    display: inline-block;
    text-align: center;

}
   
</style>
</html>

在这里插入图片描述
好了，希望能帮到大家，我们共同学习！^_^

乐邂逅

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
css样式大全（总结、心得、css3新特性、盒子居中模型等）

css、html、js是前端的三剑客学习好css，这能让前端页面‘妆扮’成更加美丽！## 行内元素（display:inline）`` span a bi em label input select textarea img br code strong front``## 块内元素 (display:block)`` div h h1 h2 h3 h4 h5 h6 p ul form fieldset hr pre table dl ``**一般来说，行内元素与块内元素可以相互转化：*
复制链接

扫一扫