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

于 2021-09-03 19:12:52 发布
阅读量349 收藏 1
点赞数 1
分类专栏： 原创文章 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hrenhua/article/details/120087791
版权

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
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

乐邂逅

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值