Html+CSS基础知识（二）

最新推荐文章于 2024-08-26 10:57:55 发布
最新推荐文章于 2024-08-26 10:57:55 发布
阅读量163 收藏
点赞数
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42330641/article/details/127463153
版权

1 Position定位

1.1 基础知识
  • 普通流：html元素根据显示属性排列的流，比如块级元素从上到下排列，占一行或者多行，行内元素和其他元素共占一行或者独占一行；
  • positon有5种属性：static 、relative 、 absolute 、fixed 、skicky ；
1.2 Position的属性
1.2.1 static
  • 按照文档流的顺序排列，不受left、right、top、bottou属性值的影响；
1.2.2 relative
  • 相对定位，在普通流的默认位置进行位置移动，相对定位元素移动后仍然要占用空间会出现层叠的情况，受left、right、top、bottom属性值的影响；
  • 移动后是移动前负的位置；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500x;
            height: 500px;
        }
        
        .test1 {
            width: 100px;
            height: 100px;
            background: yellowgreen;
            position: relative;
            left: 100px;
        }
        
        .test2 {
            width: 100px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 100px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>

</html>

在这里插入图片描述

1.2.3 absolute
  • 绝对定位，会以最近的父级元素的位置进行定位，没有父级元素则会以则以html（根元素），不会占用空间，移动后原位置会被占用，受left、right、top、bottou属性值的影响；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500x;
            height: 500px;
        }
        
        .test1 {
            width: 100px;
            height: 100px;
            background: yellowgreen;
            position: absolute;
            left: 100px;
        }
        
        .test2 {
            width: 100px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 100px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    </style>
</head>


<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>
</html>

在这里插入图片描述

1.2.4 fixed
  • 相对浏览器窗口是固定，无论屏幕怎么移动，都会显示，不占据文档流的位置受left、right、top、bottou属性值的影响；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500x;
            height: 500px;
        }
        
        .test1 {
            width: 100px;
            height: 100px;
            background: yellowgreen;
            position: fixed;
        }
        
        .test2 {
            width: 100px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 100px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    </style>
</head>

<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
    </div>
</body>
</html>

在这里插入图片描述

1.2.5 skicky
  • reletive和fixd的结合体，当设置了该属性的元素，当滑动浏览器窗口，当离开此元素时，会保留在浏览器窗口页面，必须设置left、right、top、bottom。
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            width: 500x;
            height: 500px;
        }
        
        .test1 {
            width: 100px;
            height: 100px;
            background: yellowgreen;
            position: sticky;
            top: 100px;
        }
        
        .test2 {
            width: 100px;
            height: 100px;
            background: rgb(68, 50, 205);
        }
        
        .test3 {
            width: 100px;
            height: 100px;
            background: rgb(205, 50, 179);
        }
    </style>
</head>

<body>
    <div class="test">


        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
        <div class="test3">盒子3</div>
    </div>
</body>
</html>
1.2.6 z-index
  • 当position属性为static、relative、fixed才会有效；
  • z-index可以设置定位元素在z轴上的堆叠顺序，数值大的会在数值小的元素上面
  • 父元素不能设置z-index值，如果要和子元素比较必须设置负值；
    示例1：不设置z-index值；
    不设置z-index的值，则会按照代码的执行顺序
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        div.test{
            background: green;
            width: 1000px;
            height: 1000px;
        }
        div.test1{
            background: red;
            width: 100px;
            height: 100px;
            position: relative;
        }
        div.test2{
            background: yellow;
            width: 100px;
            height: 100px;
            position: relative;
            top: -50px;
        }
        div.test3{
            background: yellowgreen;
            width: 100px;
            height: 100px;
            position: relative;
            top: -100px;
        }
    </style>
</head>
<body>
<div class="test">
    <div class="test1">盒子1</div>
    <div class="test2">盒子2</div>
    <div class="test3">盒子3</div>
</div>
</body>
</html>

在这里插入图片描述
示例2：设置z-index值；

  • 盒子3设置6，盒子2 设置7，盒子1设置8
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        div.test{
            background: green;
            width: 1000px;
            height: 1000px;
        }
        div.test1{
            background: red;
            width: 100px;
            height: 100px;
            position: relative;
            z-index: 8;

        }
        div.test2{
            background: yellow;
            width: 100px;
            height: 100px;
            position: relative;
            top: -50px;
            z-index: 7;
        }
        div.test3{
            background: yellowgreen;
            width: 100px;
            height: 100px;
            position: relative;
            top: -100px;
            z-index: 6;
        }
    </style>
</head>
<body>
<div class="test">
    <div class="test1">盒子1</div>
    <div class="test2">盒子2</div>
    <div class="test3">盒子3</div>
</div>
</body>
</html>

在这里插入图片描述

  • 示例3 z-index 不能设置值，但是可以把子元素设置为负，父元素就会把子元素遮挡；
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="test,test1">
    <meta name="description" content="这个练习使用的标签">
    <style>
        div.test{
            background: green;
            width: 1000px;
            height: 1000px;
        }
        div.test1{
            background: red;
            width: 100px;
            height: 100px;
            position: relative;
            z-index: -8;

        }
        div.test2{
            background: yellow;
            width: 100px;
            height: 100px;
            position: relative;
            top: -50px;
            z-index: -7;
        }
        div.test3{
            background: yellowgreen;
            width: 100px;
            height: 100px;
            position: relative;
            top: -100px;
            z-index: -6;
        }
    </style>
</head>
<body>
<div class="test">
    <div class="test1">盒子1</div>
    <div class="test2">盒子2</div>
    <div class="test3">盒子3</div>
</div>
</body>
</html>

在这里插入图片描述

2 三栏布局的实现

问题：高度固定，左右盒子宽度位200；

2.1 使用float实现
  • 可以先给第一个盒子设置为向左浮动，第二个盒子设置为向右浮动，根据float的特性，设置浮动的元素不占用文档流，给第三个盒子设置边框宽度为200px就能实现三栏布局；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
        }
        
        .test1 {
            width: 200px;
            height: 300px;
            background: yellowgreen;
            float: left;
        }
        
        .test2 {
            width: 200px;
            height: 300px;
            background: rgb(205, 50, 179);
            float: right;
        }
        
        .test3 {
            background: rgb(68, 50, 205);
            height: 300px;
            margin: 0px 200px;
        }
    </style>
</head>

<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>

    </div>

</body>

</html>

在这里插入图片描述

2.2 使用position实现
  • 使用position实现三栏布局的原理和float的方式大致一致，对第一个盒子设置position:absolute, left:0对第二个盒子设置position:position:absolute,right :0 第三个盒子设置固定高度height：300px，margin200px;
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            position: relative;
        }
        
        .test1 {
            width: 200px;
            height: 300px;
            background: yellowgreen;
            position: absolute;
            left: 0px;
        }
        
        .test2 {
            width: 200px;
            height: 300px;
            background: rgb(205, 50, 179);
            position: absolute;
            right: 0px;
        }
        
        .test3 {
            background: rgb(68, 50, 205);
            height: 300px;
            margin: 0 200px;
        }
    </style>
</head>

<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>

    </div>

</body>

</html>

在这里插入图片描述

2.3 使用flex实现
  • flex实现最为简单，给父元素设置为弹性布局：display：flex；然后再给第二个子项目设置flex-grow：1；
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            flex-direction: row;
        }
        
        .test1 {
            width: 200px;
            height: 300px;
            background: yellowgreen;
        }
        
        .test2 {
            height: 300px;
            background: rgb(205, 50, 179);
            flex-grow: 1;
        }
        
        .test3 {
            background: rgb(68, 50, 205);
            width: 200px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="test">
        <div class="test1">盒子1</div>
        <div class="test2">盒子2</div>
        <div class="test3">盒子3</div>
    </div>
</body>
</html>

在这里插入图片描述

3 如何设置水平居中

3.1 行内块级元素设置水平居中；
  • 第一种方法使用文字属性，文字对齐方式text-align:center,然后设置行高，行高为行内块级元素的高度（行高等于字体的高度+行距）
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: inline-block;
            width: 500px;
            height: 500px;
            text-align: center;
            line-height: 500px;
        }
    </style>
</head>

<body>
    <spn class="test">学习学习</spn>


</body>

</html>

在这里插入图片描述

  • 第二种方法：使用弹性布局，水平轴居中，交叉轴居中
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: inline-flex;
            width: 500px;
            height: 500px;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <spn class="test">学习学习</spn>


</body>

</html>
3.2 块级元素设置为水平居中
  • 第一种方法知道子盒子的高度
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: inline-flex;
            width: 500px;
            height: 500px;
            position: relative;
        }
        
        .test1 {
            background-color: yellow;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>
</head>

<body>
    <div class="test">
        <div class="test1"></div>
    </div>

</body>

</html>

在这里插入图片描述
第二种方法不知道子盒子的高度可以使用tramsform进行平移

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: inline-flex;
            width: 500px;
            height: 500px;
            position: relative;
        }
        
        .test1 {
            background-color: yellow;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="test">
        <div class="test1"></div>
    </div>

</body>

</html>

在这里插入图片描述
第三种方法使用flex弹性布局


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test {
            background-color: rgba(213, 21, 21, 0.5);
            display: flex;
            width: 500px;
            height: 500px;
            justify-content: center;
            align-items: center;
        }
        
        .test1 {
            background-color: yellow;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="test">
        <div class="test1"></div>
    </div>

</body>

</html>

在这里插入图片描述

4 CSS 的常用属性；

4.1 圆角
  • **border-radius:100px 50px 100px 50px/20px 50px 100px 50px;**斜杠之前的数据圆的水平半径，斜杠之后的数据是圆的垂直半径，上面的数据就等同于下面数据的简写：
    border-top-left-radius(左上)：100px 20px；
    border-top-right-radius(右上)：50px 50px ；
    border-bottom-left-radius(左下)：100px 20px；
    border-bottom-right-radius(左上)：50px 50px；
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test1 {
            width: 500px;
            height: 500px;
            background: yellowgreen;
            border-radius:100px 50px 100px 50px/20px  50px 100px 50px;
        }
    </style>
</head>

<body>
    <div class="test1"></div>
</body>
</html>

在这里插入图片描述

  • border-radius:10px 20px 30px 当简写只有3个值就意味着水平半径和垂直半径相等，方位是 左上 ，右上左下（对角线），右下；
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test1 {
            width: 500px;
            height: 500px;
            background: yellowgreen;
            border-radius:10px 60px 30px;
        }
    </style>
</head>

<body>
    <div class="test1"></div>
</body>
</html>

在这里插入图片描述

  • border-radius:100px 30px 当简写只有2个值就意味着水平半径和垂直半径相等，方位是 左上右下 ，右上左下（对角线；
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test1 {
            width: 500px;
            height: 500px;
            background: yellowgreen;
            border-radius:100px  30px ;
        }
    </style>
</head>

<body>
    <div class="test1"></div>
</body>
</html>

在这里插入图片描述

  • border-radius:100 px 当简写只有1个值就意味着所有方位水平半径和垂直半径相等；
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test1 {
            width: 500px;
            height: 500px;
            background: yellowgreen;
            border-radius:100px ;
        }
    </style>
</head>

<body>
    <div class="test1"></div>
</body>
</html>

在这里插入图片描述

4.2 盒阴影
  • 外部阴影：box-shadow 10px 10px 10px red；
  • 外部阴影：box-shadow 10px 10px 10px red inset；
    box-shadow：x 轴 y轴 模糊程度 颜色；
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        body{
            display: flex;
            justify-content: center;
            flex-wrap:wrap;

        }
        /*外部阴影*/
        .test1 {
            width: 200px;
            height: 200px;
            border: 1px solid;
            box-shadow: -20px -20px 60px yellowgreen;
            margin: 100px;
        }
        /*内部阴影*/
        .test2 {
            width: 200px;
            height: 200px;
            border: 1px solid;
            box-shadow: 50px 50px 60px red inset;
        }



    </style>
</head>

<body>
    <div class="test1"></div>
    <div class="test2"></div>
</body>
</html>

在这里插入图片描述

4.3 边框图片
  • border-image是border-image-source,border-image-slice,border-image-width,border-image-outset,border-image-repeat的缩写，
  • border-image-source：是用来定义边框图片的路径的，当值为none或者图像不可用时，会使用默认边框；
    • 用法： border-image-source：url();
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test{
            height: 200px;
            width: 200px;
            padding: 10px;
            border: 10px solid;
            border-image-source:url("http://c.biancheng.net/uploads/allimg/210809/1532491419-0.png");
        }
    </style>
</head>

<body>
    <div class="test"></div>
</body>
</html>

在这里插入图片描述

  • border-image-slice是用来分割border-image-source的图图像，存在四条线把图像分割为9个小块 4个角 4条边
    • number：使用数值的方式分割图像，不能为复制；
    • percentage：使用百分比的方式分割图像，以原图像为依照，图像的宽度影响水平方向，高度影响垂直方向；
    • fill 指的是图像的中心区域一般是透明的，使用了fill参数会展示中心区域；
    • border-image-slice最多可以拥有四个数值
      • 四个数值 上 右 下 左；
      • 三个数值 上 左右 下；
      • 二个数值 上下 左右；
      • 一个数值 上下左右 ；
        在这里插入图片描述
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test{
            height: 200px;
            width: 200px;
            padding: 10px;
            border: 10px solid;
            border-image-source:url("http://c.biancheng.net/uploads/allimg/210809/1532491419-0.png");
            border-image-slice: 27 ;
            /*border-image-outset: 100px;*/
            /*border-image-repeat:space;*/
            /*background-color: #CCC;*/


        }
    </style>
</head>

<body>
    <div class="test"></div>
</body>
</html>

在这里插入图片描述

  • border-image-width是设置border-image-source图像边框的厚度
    • length 通过数值加上单位定义数值边框的厚度，不允许为负值；
    • percentage 通知百分比定义边框的厚度，参照的是边框的宽和高
    • number 通过浮点数来定义边框的厚度，例如数值是0.5就是0.5*border-width 不能负值
    • auto 和border-image-slice定义的高度和宽度相同；
    • border-image-width 最多可以拥有四个数值
      • 四个数值 上 右 下 左；
      • 三个数值 上 左右 下；
      • 二个数值 上下 左右；
      • 一个数值 上下左右 ；
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test{
            height: 200px;
            width: 200px;
            padding: 10px;
            border: 10px solid;
            border-image-source:url("http://c.biancheng.net/uploads/allimg/210809/1532491419-0.png");
            border-image-slice: 27 ;
            border-image-width: 50px
        ;
            /*border-image-outset: 100px;*/
            /*border-image-repeat:space;*/
            /*background-color: #CCC;*/
        }
    </style>
</head>

<body>
    <div class="test"></div>
</body>
</html>

在这里插入图片描述

  • border-image-outset设置图像边框相对图像边框偏移的距离（就是图像边框脱离盒子的距离）；
    • length 通过数值加上单位定义图像边框的便宜距离；
    • number 用浮点数指定图像边框向外偏移的距离，该值表示 border-width 的倍数，例如值为 0.5，则表示偏移量为 0.5 * border-width，不允许为负值。
    • border-image-outset最多可以拥有四个数值
      • 四个数值 上 右 下 左；
      • 三个数值 上 左右 下；
      • 二个数值 上下 左右；
      • 一个数值 上下左右 ；
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>

        .test{
            position: relative;
            right: -50%;
            height: 200px;
            width: 200px;
            padding: 27px;
            border: 27px solid;
            border-image-source:url("http://c.biancheng.net/uploads/allimg/210809/1532491419-0.png");
            border-image-slice: 27 ;
            border-image-outset: 10px 50px
        ;
        ;
            /*border-image-outset: 100px;*/
            /*border-image-repeat:space;*/
            /*background-color: #CCC;*/
        }
    </style>
</head>

<body>
    <div class="test"></div>
</body>
</html>

在这里插入图片描述

  • border-image-repeat被border-image-slice分割块再图像边框的分布方式
    • stretch 分割块以拉伸的方式占据图像边框；
    • repeat 分割块以重复铺满的方式占据边框遇到分割线会被割断；
    • round 和repeat的方式大致相同，但是根据情况缩放分割块铺满；
    • space 和repeat的方式大致相同 但是会根据情况拓展分割块铺满；
    • border-image-repeat最多可以拥有2个值
      • 2个值 第一个值代表的水平方向，第二个值代表的是垂直方向
      • 一个值就是代表的水平方向和垂直方向；
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>

        .test{
            position: relative;
            right: -50%;
            height: 200px;
            width: 200px;
            padding: 10px;
            border: 27px solid;
            border-image-source:url("http://c.biancheng.net/uploads/allimg/210809/1532491419-0.png");
            border-image-slice: 27 ;
            border-image-repeat:space round;

        }
    </style>
</head>

<body>
    <div class="test"></div>
</body>
</html>

在这里插入图片描述

4.4 渐变
  • 渐变指的是拥有2种颜色或者多种颜色，一种颜色向另外一种颜色平滑过度的一种方式，渐变方式分有直线渐变，径向渐变、圆锥渐变，重复渐变；
  • 直线渐变指的是渐变向直线的方向进行渐变（从左到右，从上到下）
    • 用法：linear-gradient direction,color1,color2…
    • direction指的是方位一般值有：
      • to right
      • to left
      • to top
      • to bottom
      • to right top
      • to left top
      • to right bottom
      • to left bottom
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test{
            height: 300px;
            width: 200px;
            background: linear-gradient(to left top,red,blue,greenyellow);
        }
    </style>
</head>

<body>
    <div class="test"></div>
</body>
</html>

在这里插入图片描述

  • 径向渐变指以圆心为中点向周围辐射渐变，可以定义辐射的中点，辐射的形状；
    • 用法：radial-gradient（shape ，size，at position,color1,color2…）
    • shape 指的是渐变的形状：一般值有circle eliplise；
    • size 除了circle elilipse可以定义渐变的形状之外以下的值可以定义：
      • closest side 向渐变长度为圆心到离圆心最近的边为半径的长度渐变；
      • closest corner向渐变长度为圆心到离圆心最近的角为半径的范围渐变；
      • farthest side 向渐变长度为圆心到离圆心最远的边为半径的长度渐变；
      • farthest corner 向渐变长度为圆心到离圆心最远的角为半径的长度渐变；
    • at position前面的关键字
    • position 定义圆心，可以使用数值加上单位，百分比 关键词（top left）如果只有2个值第一个为x轴的坐标，第二个为y轴的坐标。只有一个数值，另外一个值则是轴的中点；
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test1{
            float: left;
            height: 100px;
            width: 100px;
            background: radial-gradient(ellipse at 50% 50%,red,blue,greenyellow);
        }
        .test2{
            float: left;
            height: 100px;
            width: 100px;
            background: radial-gradient(closest-side at 50% 50%,red,blue,greenyellow);
        }
        .test3{
            float: left;
            height: 200px;
            width: 100px;
            background: radial-gradient(farthest-corner at 20% 20%,red,blue,greenyellow);
        }
        .test4{
            float: left;
            height: 200px;
            width: 100px;
            background: radial-gradient(closest-corner at 20% 20%,red,blue,greenyellow);
        }
    </style>
</head>

<body>
    <div class="test1"></div>
    <div class="test2"></div>
    <div class="test3"></div>
    <div class="test4"></div>
</body>
</html>

在这里插入图片描述

  • 圆锥渐变和径向渐变的方式相同可以设置圆心，但渐变的方式是以旋转的方进行；
  • 用法：conic-gradient（from angle at position ,color1,color2…）：
    • from 是angle 的关键字；
    • angle 渐变开始的角度；
    • at position前面的关键字
    • position 定义圆心，可以使用数值加上单位，百分比 关键词（top left）如果只有2个值第一个为x轴的坐标，第二个为y轴的坐标。只有一个数值，另外一个值则是轴的中点；
    • color 不仅可以设置颜色 还可以设置颜色所占用的比例；
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="key" content="测试 测试1">
    <meta name="description" content="测试网页">
    <style>
        .test1{
            margin: 50px;
            float: left;
            height: 100px;
            width: 100px;
            background: conic-gradient(from 0deg at 50% 50%,red 0deg 90deg,blue 90deg 180deg,greenyellow 180deg 360deg);
        }
        .test2{
            margin: 50px;
            float: left;
            height: 100px;
            width: 100px;
            background: conic-gradient(from 90deg at 50% 50%,red 0% 55%, yellow 55% 90%, lime 90% 100% );
        }
        .test3{
            margin: 50px;
            float: left;
            height: 100px;
            width: 100px;
            background: conic-gradient(at 50%, red, orange, yellow, green, blue, indigo, violet, red);
        }

    </style>
</head>

<body>
    <div class="test1"></div>
    <div class="test2"></div>
    <div class="test3"></div>

</body>
</html>

在这里插入图片描述

  • repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 等函数来分别创建线性渐变、径向渐变和圆锥渐变的重复渐变，所谓重复渐变就是指将渐变的过程重复多次，以铺满整个元素。
<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 210px;
            height: 100px;
            float: left;
            margin: 10px;
            border: 1px solid black;
        }
        .one {
            background: repeating-linear-gradient(190deg, #000 0px 10px, #FFF 10px 20px);
        }
        .two {
            background: repeating-radial-gradient(circle 100px at 50%, red 0% 10%, yellow 10% 30%, lime 30% 40%);
        }
        .three {
            background: repeating-conic-gradient(#69f 0 36deg, #fd44ff 36deg 72deg);
        }
        .four {
            background: conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn) top left / 25% 25% repeat;
        }
    </style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>

在这里插入图片描述

4.5 文本效果
  • text-shaow 文本阴影；
    • 用法 text-shadow: 5px 5px 5px red 第一个参数为x轴的偏移量，第二个参数为y轴的偏移量 第三个参数为模糊程度，第四个参数为颜色
<!DOCTYPE html>
<html>
<head>
    <style>
        div{
            margin: 10px;
            padding: 10px;
            border: 1px solid ;
            height: 200px;
            width: 200px;
            text-shadow: 5px 5px 5px red;
        }

    </style>
</head>
<body>

<div>
  今天不学习明天变垃圾
</div>

</body>
</html>

在这里插入图片描述

  • text-overflow：规定当文本溢出时，以怎样的方式来处理；
    • clip：当对象内文本溢出部分裁切掉；
    • ellipsis：当对象内文本溢出时显示省略标记（…）
    • 前提条件；
      • white-space：设置文字在一行显示，不能换行；
      • overflow：文字长度超出限定宽度，则隐藏超出的内容
<!DOCTYPE html>
<html>
<head>
    <style>
        div{
            margin: 10px;
            padding: 10px;
            border: 1px solid ;
            height: 200px;
            width: 200px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>

<div>
  今天不学习明天变垃圾,今天不学习明天变垃圾,今天不学习明天变垃圾,今天不学习明天变垃圾,今天不学习明天变垃圾
</div>

</body>
</html>

在这里插入图片描述

  • 文本换行
    • word-warp 允许长文本和长连接进行换行
      • normal 按照浏览器规则换行；
      • break-word 允许长文本进行换行；
    • word-break 可以让浏览器在任意处换行；
      • normal 按照浏览器规则换行；
      • break-all 可以在单词内换行；
      • keep-all 只能在空格和字符处换行
<!DOCTYPE html>
<html>
<head>
    <style>
        .test1{
            margin: 10px;
            padding: 10px;
            border: 1px solid ;
            height: 200px;
            width: 200px;
            word-wrap:break-word;
        }
      .test2{
            margin: 10px;
            padding: 10px;
            border: 1px solid ;
            height: 200px;
            width: 200px;
            word-break:break-all;
        }
    </style>
</head>
<body>

<div class="test1">
  今天不学习明天变垃圾www.baidu,com,今天不学习明天变垃圾,今天不学习明天变垃圾,今天不学习明天变垃圾,今天不学习明天变垃圾
</div>


<div class="test2">
  今天不学习明天变垃圾www.baidu,com,今天不学习明天变垃圾,今天不学习明天变垃圾,今天不学习明天变垃圾,今天不学习明天变垃圾
</div>

</body>
</html>

在这里插入图片描述

5 gird 网格布局

  • flex是轴线布局，只能指定“项目”所在的轴线，grid布局是将容器划分行和列产生单位格，指定单位所在的位置，和flex布局相相似的地方也有容器属性（container）和项目属性（items）
  • 简单说下grid布局的创建方法，详细可以参考：https://blog.csdn.net/leilei__66/article/details/122360901
<!DOCTYPE html>
<html>
<head>
    <style>
        .test{
            margin: 0px;
            padding: 0px;
            border: 1px solid ;
            height: 500px;
            width: 500px;
            display: grid;
            /*第一种方式直接设置每个单元格所占的宽高 */
            /*grid-template-rows: 100px 100px 100px 100px 100px;*/
            /*grid-template-columns: 100px 100px 100px 100px 100px;*/

            /*第二种方式设置每个单元格所占父容器高 宽的比例 */
            /*grid-template-rows: 20% 20% 20% 20% 20%;*/
            /*grid-template-columns: 20% 20% 20% 20% 20%;*/

            /*第三种方式设置几行 几列 以及每个单元格所占父容器高 宽的比例
            /*grid-template-rows: repeat(5,20%);*/
            /*grid-template-columns: repeat(5,20%);*/
        }
        .test1{
            height: 100px;
            width: 100px;
            background-color: red;
            font-size: 50px;
        }
        .test2{
            height: 100px;
            width: 100px;
            background-color: orange;
            font-size: 50px;
        }
        .test3{
            height: 100px;
            width: 100px;
            background-color: yellow;
            font-size: 50px;
        }
        .test4{
            height: 100px;
            width: 100px;
            background-color: blue;
            font-size: 50px;

        }
        .test5{
            height: 100px;
            width: 100px;
            background-color: pink;
            font-size: 50px;
        }
        .test6{
            height: 100px;
            width: 100px;
            background-color: peru;
            font-size: 50px;
        }
        .test7{
            height: 100px;
            width: 100px;
            background-color: yellowgreen;
            font-size: 50px;
        }
        .test8{
            height: 100px;
            width: 100px;
            background-color: tomato;
            font-size: 50px;
        }
        .test9{
            height: 100px;
            width: 100px;
            background-color: fuchsia;
            font-size: 50px;
        }
        .test10{
            height: 100px;
            width: 100px;
            background-color: rebeccapurple;
            font-size: 50px;
        }
    </style>
</head>
<body>
<div class="test">
    <div class="test1">1  </div>
    <div class="test2">2  </div>
    <div class="test3">3  </div>
    <div class="test4">4  </div>
    <div class="test5">5  </div>
    <div class="test6">6  </div>
    <div class="test7">7  </div>
    <div class="test8">8  </div>
    <div class="test9">9  </div>
    <div class="test10">10  </div>
</div>

</body>
</html>

在这里插入图片描述

李大哥1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML+CSS+JS基础知识
01-08
对于学习html的学习，更多的就是记住这些标签的含义以及会使用即可，这是前端最重要的知识。 注释的语句为： 整个HTML页面主要分为两个部分：头部head 身体body. 下面我们来介绍标签：标签分为单标签和双标签，单...
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频尚品汇项目源码
03-06
【标题】中的“尚硅谷前端入门html+css零基础教程”指的是一个由尚硅谷教育机构提供的，面向初学者的前端开发课程，主要涵盖了HTML（超文本标记语言）和CSS（层叠样式表）的基础知识。这个教程是为那些对前端开发...
HTML 根据元素属性的选择性显示与隐藏
稚枭天卓
10-19 3649
通过 C 标签，根据测试对象的角色名称实现角色 ID 的显示与隐藏。源码如下： 角色 ID： 通过 C 标签，根据测试对象的角色名称属性，实现页面元素不同的显示。源码如下： 新建角色
html+css基础知识
weixin_52682120的博客
05-10 2141
0、前提 80%知识，只有20%的场景可以用到； 20%的知识，有80%的场景可以用到。 1 、HTML & CSS 到底是什么，有什么用？ 它们是两门语言。 HTML + CSS + Javascript = 网页 HTML：Hyper Text Markup Language 超文本标记语言；定义网页中有什么。 CSS：Cascading Style Sheets 层叠样式表；定义网页中的东西长什么样子。 1.1 执行HTML CSS HTML、CSS -> 浏览器内核 -> 页面
HTML+CSS基础知识
m0_46201565的博客
06-06 3434
HTML+CSS基础文档
HTML+CSS+JavaScript基础知识总结
qq_53061847的博客
05-27 1万+
目录 一、HTML+CSS 1. 如何理解HTML的语义化 2. 从浏览器地址栏输入url回车会发生什么 3. 溢出的文字显示省略号 4. css选择器和优先级 css选择器 5. BFC 6. 水平垂直居中的方法 二、JavaScript 1. 基本数据类型 2. 数组的使用 一、数组序列化 二、栈和队列方法 三、排列方法 四、操作方法 五、位置方法 六、迭代方法 2.1 利用函数求任意个数的最大值 2.2 利用函数翻转任意数组 reverse ......
html+css知识点总结：
2303_79193185的博客
04-27 1992
css指层叠样式表css定义如何显示html元素样式通常存储在样式表中外部样式表可以极大提高工作效率外部样式表通常存储在css文件多个样式定义可以层叠为一。
【前端】Html+Css+JavaScript基础知识点
lcukyNwa的博客
07-18 6355
Html+Css+JavaScript基础知识点
HTML+CSS基础知识1
m0_74033027的博客
10-18 2431
HTML和css是两种编程语言，配合使用，是作为网站（一个网站由多个网页组成，浏览器把代码解析后的样子就是网站）开发的基础语言html是HyperTextMark-upLanguage的缩写，即超文本标记语言；css是Cascading Style Sheets 的缩写,即层叠式样式表单，它是由W3C协会制定并发布的一个网页排版式标准,是对HTML语言功能的补充
web前端基础（一）——HTML+CSS
热门推荐
广龙宇的博客
08-18 14万+
系列文章目录 web前端基础（一）——HTML+CSS 目录 系列文章目录 前言 HTML HTML的介绍 1. html的定义 2. html的作用 HTML的基本结构 1. 结构代码 2. 浏览网页文件 vscode的下载与使用 1. vscode 的基本介绍 2. vscode 的安装 3. vscode 的插件安装 4. vscode 的插件卸载 5. 设置字体大小 6. 设置颜色主题 7. 设置默认浏览器[可选] 初识常用的HTML标签 1. 常用的 ..
制作百度页面（HTML+CSS基础知识）
m0_74766888的博客
02-01 2188
只用CSS和HTML的基础知识创建一个百度页面
超详细的html+css基础知识树状图~HTML标签
有事儿私信。
09-03 1801
本系列的博客旨在更新自己在学习路上总结的思维导图，希望可以帮助初学者快速理清知识结构。
HTML+CSS基础知识点.pdf
06-17
HTML+CSS 基础知识点总结 HTML+CSS 是前端开发的基础技术，掌握 HTML、CSS 和 JavaScript 语言是必不可少的。下面是 HTML+CSS 基础知识点总结： 1. HTML 是网页内容的载体，内容就是网页制作者放在页面上想要让...
html+css基础知识总结
06-07
能快速准确的看出html+css基础标签和样式的作用
html+css基础代码
06-16
本资料包“html+css基础代码”显然是为了帮助初学者理解这两门语言的基础知识。 HTML是一种标记语言，它使用一系列预定义的标签来告诉浏览器如何呈现网页内容。例如，`<html>`标签定义整个HTML文档的开始，`<head>`...
Vue 绘制圆形 上下左右
qq_40216244的博客
08-26 66
【代码】Vue 绘制圆形 上下左右。
CSS3页面布局-三栏-中栏流动布局
业精于勤荒于嬉，行成于思毁于随
08-23 250
控制两个外包装容器的外边距，一个包围三栏，一个包围左栏和中栏。实现三栏布局且中栏内容区不固定的核心问题就是处理右栏的定位，并在中栏内容区大小改变时控制右栏与布局的关系。
图书馆座位再利用系统小程序源码 图书馆座位再利用系统小程序代码（高分毕设项目源码）
08-26
1. 小程序图书馆座位再利用系统代码说明：经导师指导并认可通过的98分毕设项目代码。 2.适用对象：本代码学习资料适用于计算机、电子信息工程、数学等专业正在做毕设的学生，需要项目实战练习的学习者，也适用于课程设计、期末大作业。 3.技术栈：java，项目代码都经过严格调试，代码没有任何bug！ 4. 作者介绍：大厂码农，java领域创作者，阿里云开发社区乘风者计划专家博主，专注于大学生项目实战开发，文章底部有博主联系方式，更多优质系统、项目定制请私信。 5. 最新计算机软件毕业设计选题大全: https://blog.csdn.net/weixin_45630258/article/details/135901374
Python基于Django旅游景点搜索网站设计毕业源码案例设计.zip
最新发布
08-26
Python基于Django旅游景点搜索网站设计毕业源码案例设计.zip
HTML+CSS基础知识详解：从入门到精通
本资源摘要信息涵盖了HTML和CSS的基础知识，旨在帮助读者从入门到精通HTML和CSS技术。 **HTML基础知识** * HTML（Hypertext Markup Language）是超文本标记语言，用于创建网页。 * HTML文件的基本结构由 `<HTML>`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值