css常用样式

display样式

<!-- display的常见取值 -->
<!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>
    <style>
        .box {
            border: 1px solid;
            height: 100px;
            width: 100px;
            /* 默认块级,设置为inline(行内),宽高失效 */
            display: inline;
        }
        /* 行内块级可以设置框 */
        img {
            width: 100px;
            height: 100px;
        }
        /* 必须将span设置为行内块级或者块级才能设置宽高 */
        span {
            border: 1px solid;
            width: 100px;
            height: 100px;
            display: inline-block;
        }
    </style>
</head>

<body>
    <!-- div默认块级 -->
    <div class="box"> div </div>
    <!-- p默认块级 -->
    <p> ppppp </p>
    <!-- img默认行内块级 -->
    <img style="width: 100px;" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
    <!-- span默认行内 -->
    <span> span </span>
    <span> span </span>

</body> 
</html>

<!-- display:flex -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Document</title>
    <style>
        .box {
            height: 300px;
            border: 1px solid;
            /* 将父元素设置为flex(包裹层) */
            display: flex;
        }
        p {
            background-color: gray;
            border: 1px solid red;
            height: 50px;
        }
    </style>
</head>
<body> 
    <div class="box">
        <p>11111</p>
        <p>22222</p>
        <p>33333</p>
        <p>44444</p>
    </div> 
</body>
</html>

水平对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Document</title>
    <style>
        .box {
            height: 100px;
            border: 1px solid;
            /* 将父元素设置为flex(包裹层) */
            display: flex;
            /* 左对齐 */
            justify-content: flex-start;
            /* 居中对齐 */
            justify-content: center;
            /* 右对齐 */
            justify-content: flex-end;
            /* 分散对齐 */
            justify-content: space-around;
            /* 两端对齐 */
            justify-content: space-between;
        }
        p {
            background-color: gray;
            border: 1px solid red;
            height: 50px;
        }
    </style>
</head>
<body> 
    <div class="box">
        <p>11111</p>
        <p>22222</p>
        <p>33333</p> 
    </div> 
</body>
</html>

垂直对齐方式

<!-- align-items垂直对齐 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}

        .box {
            height: 100px;
            border: 1px solid;
            /* 将父元素设置为flex(包裹层) */
            display: flex;
            /* 左对齐 */
            justify-content: flex-start;

            /* 居中对齐 */
            justify-content: center;
            /* 右对齐 */
            justify-content: flex-end;
            /* 分散对齐 */
            justify-content: space-around;
            /* 两端对齐 */
            justify-content: space-between;
            /* 顶部对齐(默认) */
            align-items: flex-start;
            /* 居中对齐 */
            align-items: center;
            /* 底部对齐 */
            align-items: flex-end;
        }
        p {
            background-color: gray;
            border: 1px solid red;
            height: 50px;
        }
    </style>
</head>
<body> 
    <div class="box">
        <p>11111</p>
        <p>22222</p>
        <p>33333</p> 
    </div> 
</body>
</html>

<!-- 应用:元素水平居中,垂直居中 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .aa {
            width: 50px;    
            height: 50px;
            background-color: gray;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="aa"></div> 
    </div>
</body>
</html>

剩余空间分配

flex-grow: 1;

盒子配列方向

<!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>
    <style>
        .box {
            border: 1px solid red;
            height: 300px;
            width: 100px;
            display: flex;
            /* 盒子排列方向row-行(默认), column-列*/
            flex-direction: column; 
            /* 当盒子排列方向时,justify-content垂直对齐方式,取值不变 */
            justify-content: space-around;
            /* 当盒子排列方向时,align-items水平对齐方式,取值不变 */
            align-items: center;
            
        }
        span {
            background-color: gray;
            width: 50px;
            height: 20px;
            border: 1px solid red;
        }
    </style>

</head>

<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

</body>
</html>

flex-wrap换行

背景图片

图片地址

background-image:url(./img/28216190-1173fc30c4581b63.webp);

图片重复

不重复
background-repeat:no-repeat

<!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>
<style>
   p{
       background-image:url(./img/u=1228318434\,840422149&fm=253&fmt=auto&app=138&f=JPEG.webp);
       height: 3000px;
       background-repeat: no-repeat;

   }
</style>
<body>
    <p>Hellow Word</p>
</body>
</html>

背景图片横向平铺

background-repeat:repeat-x

背景图片竖向平铺

background-repeat:repeat-y

背景位置

<style>
   p{
       background-image:url(./img/u=1228318434\,840422149&fm=253&fmt=auto&app=138&f=JPEG.webp);
       height: 3000px;
       background-repeat: no-repeat;
       background-position:right top;

   }
</style>

背景位置设定

 background-position:right top;

图片尺寸

background-size: 50px，100px;

文本阴影

text-shadow: offset-x offset-y blur color;

offset-x：必填参数，设置阴影的水平偏移量，可以为负值；
offset-y：必填参数，设置阴影的垂直偏移量，可以为负值；
blur：可选参数，设置模糊的半径，值越大，模糊越大，阴影的边缘越模糊，不允许使用负值；
color：可选参数，设置阴影的颜色，如果省略或未指定该值，则采用 color 属性的值。

盒子阴影

div{
       border: 1px solid #000;
       box-shadow: x y blur spread color inset;
   }

h-shadow：必填参数，设置阴影水平方向的偏移量，可以为负值；(左右两边)
v-shadow：必填参数，设置阴影垂直方向的偏移量，可以为负值；（上下两边）
blur：可选参数，设置模糊的半径，值越大，模糊越大，阴影的边缘越模糊，不允许使用负值；
spread：可选参数，设置阴影的尺寸；
color：可选参数，设置阴影的颜色；
inset：可选参数，将默认的外部阴影 (outset) 改为内部阴影。

过渡效果

<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>
<style>
   div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}
div:hover {
  width: 120px;
}
</style>
<body>
    <div>111111</div>
</body>
</html>

图片在框中缩放不会出框

  div{
        height: 500px;
        width: 500px;
        border: 1px solid #000;
        overflow: hidden;//此为不让图片出边框
    }
    img{
        width: 100%;
        height: 100%;
        transition: all 2s;
    }
    img:hover{
        transform: scale(1.5);
    }//改变图片的过渡效果为等比例放大1.5倍

宽1200px 居中

<!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>
<style>
.w1200 {
width: 1200px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="w1200"></div>
<p class="w1200"></p>
</body>
</html>

改变鼠标手势

.cur{cursor: pointer;}//当鼠标移动到目标上时鼠标手势会变成手指模样

背景透明

opacity

a标签的使用

a:link定义正常链接的样式
a:visited定义已访问过的样式
a:hover定义鼠标悬浮在连接上时的样式
a:active定义鼠标点击链接时的样式
text-decoration: none;取消文字下划线

输入框

定义输入框中文字属性

// 定义文字颜色，定义文字字体大小
::-webkit-input-placeholder{
                color: #fff;
            }

控制文本框中提示语与光标位置

 input {
                border: 1px solid #cfccd6;
                height: 150px;
                width: 270px;
                margin-right: 50px;
                padding-bottom: 100px;
                padding-left: 20px;
            }// 这只能将输入框顶上去，但输入的内容不会跟着掉落在下面一行，只能无限往后面增加。样式可行，但不适用。因为输入框为单行标签。

用css做出轮播图

  1. 先做一个div，此相当于展示框（box）
  2. 再在div里做一个div，此相当于存放图片的框（box1）
  3. 在box1里放入需要滚动的图片，此时放入的图片会有一定的间距，可用font-size：0来进行调整（在box里。此时需对溢出部分进行隐藏）
overflow: hidden;
  1. 对图片设置宽和高，box1的宽需和总图片的宽和相等，高和图片高相等。box宽和高和图片大小相等即可（为了适配性，可在box里放入一张和滚动图相等的图片，然后对此图片进行隐藏即可）
<img style="visibility: hidden;" src="http://static.huruqing.cn/fresh/banner1.jpeg" alt="">
  1. 对box进行定位（父元素），box1进行子元素定位
  2. 设置滚动动画
@keyframes gundong {
        0% {
          left: 0;
        }
        33.33% {
          left: -200px;
        }
        66.66% {
          left: -400px;
        }
        100% {
          left: -600px;
        }
    } 
//@keyframes为代码，gundong为此动画名称，0%、33.33%都为时间，需要不回弹需设置到100%，因此如只有三张图片需加一张图片，图片和第一张相同即可
  1. 将动画应用在box1中
animation: gundong 6s infinite;
//gundong为动画名称，6s为动画时间，infinite为无限循环播放

  1. 在图片中加入滚动图标，在box中加如div（box2）（在此时需要注意前面box1中设为了照片没有空隙的font-size：0，在此时需要对该box2中字体元素设置font-size，并需要对box2设置z-index使box2显示在最外层）


    内容代码

    样式代码

    （nth-child(1)为num中的第一个）

  2. 对图标也设置相应的滚动，与图片相对应（此为第一个图标对应第一张照片时图标变蓝色，后续与之一样）


    图标滚动
  3. 简易滚播图完整代码
<!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>
  <style>
    /* 最外层包裹层 */
    .wrap {
      margin: 30px;
      border: 2px solid red;
      font-size: 0;
      height: 120px;
      width: 200px;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
       
    }
    /* 图片的包裹层 */
    .img-box{
      border: 2px solid blue;
      width: 800px;
      height: 100px;
      position: absolute;
      left: 0;
      animation: gundong 6s infinite;
    }
    img {
      width: 200px;
      height: 100px; 
    }

    @keyframes gundong {
        0% {
          left: 0;
        }
        33.33% {
          left: -200px;
        }
        66.66% {
          left: -400px;
        }
        100% {
          left: -600px;
        }

    } 
  </style>
</head>
<body>
  <div class="wrap">
      <div class="img-box">
        <img src="http://static.huruqing.cn/fresh/banner1.jpeg" alt="">
        <img src="http://static.huruqing.cn/fresh/banner2.jpeg" alt="">
        <img src="http://static.huruqing.cn/fresh/banner3.jpeg" alt="">
        <img src="http://static.huruqing.cn/fresh/banner1.jpeg" alt="">
      </div>
  </div> 
</body>
</html>
  1. 加入图标的完整代码
<!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,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .wrap {
            width: 100vw;
            font-size: 0;
            position: relative;
            overflow: hidden;
            box-sizing: initial;
            border: 2px solid red; 
        }

        .img-box {
            position: absolute;
            width: 400vw;
            animation: gundong 5s infinite;
        }

        img {
            width: 100vw;
        }

        .num-box {
            /* border: 1px solid red; */
            position: absolute;
            bottom: 0;
            z-index: 2;
            font-size: 16px;
            display: flex;
            justify-content: center;
            width: 100%;
        }

        .num-box .num {
            background-color: #fff;
            margin: 5px;
            width: 25px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            border-radius: 50%;
            color: #000;
        }

        .num-box .num:nth-child(1) {
            animation: num1 5s infinite;
        }
        .num-box .num:nth-child(2) {
            animation: num2 5s infinite;
        }
        .num-box .num:nth-child(3) {
            animation: num3 5s infinite;
        }

        @keyframes gundong {
            0% {
                left: 0;
            }

            33.33% {
                left: -100vw;
            }

            66.66% {
                left: -200vw;
            }

            100% {
                left: -300vw;
            }
        }

        @keyframes num1 {
            0% {
                background-color: blue;
                color: #fff;
            }

            33.33% {
                background-color: #fff;
                color: #000;
            }

            66.66% {
                background-color: #fff;
                color: #000;
            }

            100% {
                background-color: blue;
                color: #fff;
            }
        }
        @keyframes num2 {
            0% {
                background-color: #fff;
                color: #000;
            }

            33.33% {
                background-color: blue;
                color: #fff;
            }

            66.66% {
                background-color: #fff;
                color: #000;
            }

            100% {
                background-color: #fff;
                color: #000;
            }
        }
        @keyframes num3 {
            0% {
                background-color: #fff;
                color: #000;
            }

            33.33% {
                background-color: #fff;
                color: #000;
            }

            66.66% {
                background-color: blue;
                color: #fff;
            }

            100% {
                background-color: #fff;
                color: #000;
            }
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="img-box">
            <img src="http://static.huruqing.cn/fresh/banner1.jpeg" alt="">
            <img src="http://static.huruqing.cn/fresh/banner2.jpeg" alt="">
            <img src="http://static.huruqing.cn/fresh/banner3.jpeg" alt="">
            <img src="http://static.huruqing.cn/fresh/banner1.jpeg" alt="">
        </div>
        <img style="visibility: hidden;" src="http://static.huruqing.cn/fresh/banner1.jpeg" alt="">

        <div class="num-box">
            <span class="num">1</span>
            <span class="num">2</span>
            <span class="num">3</span>
        </div>
    </div>
</body>

</html>
animation语法

盒子里使用dispaly后，出现盒子里照片大小无法进行统一，方可对盒子里使用

flex-shrink: 0;
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 再战CSS样式
    前言 最近面试，发现CSS层叠样式表很多细节已经忘得差不多了。 写样式，画界面是一个前端工程师最基础的素养。 一、...
    生命里那束光阅读 1,636评论 9赞 33
  • 常用重要CSS样式的属性
    1. 盒子模型 盒子模型是CSS中一个很重要的概念，页面中的所有元素都可以看成一个盒子，并占据一定的页面空间，一个...
    马佳乐阅读 935评论 0赞 0
  • CSS样式属性
    1、字体属性(type) font-family(使用什么字体) font-style(字体的样式，是否斜体)：n...
    程序媛_阅读 1,399评论 0赞 0
  • 关于CSS样式 基本标签使用(个人总结)
    一 .背景 1 . background-color 背景色 值描述color_name规定颜色值为颜色名称的背...
    Una_Bella阅读 587评论 8赞 7
  • Css样式
    background是背景颜色的缩写 如果要加背景图片的大小，方式是：颜色 图片 平铺方式 位置 / 背景图片大小...
    奔向我阅读 238评论 0赞 1