html+CSS样式（记）

最新推荐文章于 2024-09-28 22:57:04 发布

小马nong

最新推荐文章于 2024-09-28 22:57:04 发布

阅读量181

点赞数

本文链接：https://blog.csdn.net/nengsong111/article/details/119701559

版权

style:

1. z-index :图像或背景层叠出现的优先级值：负数(-1)则出现在后面

2. .类名 ::before/::after :

插入的是span标签，content一定要设置，可为空

 <style>
        .box::before{               /*插入的是span标签*/
            content: "123";         /*after before一定要设置content，可以为空*/
            display: block;
            background-color: red;
            width: 100px;
            height: 100px;
        }
        .box::after{
            content: url();/*引入图片*/
            
        }
    </style>
</head>
<body>
    <div class="box">
        abc
    </div>
</body>

3.background:

filter:

取值：

blur(0px) 模糊度

saturate(5)饱和度

sepia()复古滤镜

grayscale(.5)灰度

contrast(1)函数是一个内置函数，用于应用滤镜以设置图像的对比度。此功能调整图像的对比度。

hue-rotate滤镜可以帮助我们处理所有其他非黑白的颜色。将色调旋转180度，我们确保应用程序的颜色主题不会改变，而只是减弱它的颜色

brightness：亮度取小数 .数值

background-position： xpx ypx 背景坐标

filter: blur(0px) grayscale(.5) sepia(80%) saturate(5) brightness(.8) contrast(1) hue-rotate(180deg) invert(1);

颜色渐变：

background-image: -webkit-linear-gradient(0deg,black,red,green 50px,yellow,blue)

镜像渐变：

background-image: -webkit-radial-gradient(red,green 80%,blue,yellow);

重复渐变：

background-image: -webkit-repeating-linear-gradient(left,green,red,transparent,yellow 50px),-webkit-repeating-linear-gradient(top,pink,black,green 5px);

4. display:flex布局：

flex-wrap: wrap 允许换行 nowrap不允许换行

flex-firection: row、column、row-reverse、column-reverse 调整主轴方向


    <style>
        .box{
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            display: flex; 
            /*设置display:flex 的元素 称之为flex container flex的容器 他的子元素称之为 flex item flex的项目*/
            
            
        }
        .in{
            flex-basis: auto;
            width: 200px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
<body>
    <div class="box">
        <div class="in" style="flex-shrink: 1;" >1</div>
        <div class="in" style="flex-shrink: 1; align-self: center;" >2</div>
        <div class="in" style="flex-shrink: 1;" >3</div>
        <div class="in" style="flex-shrink: 1;" >4</div>
        <div class="in" style="flex-shrink: 1;" >5</div>
        <div class="in" style="flex-shrink: 1;" >6</div>
        <div class="in" style="flex-shrink: 1;" >7</div>
               
    </div>

    <!--
        flex-direction: row; 
            flex-wrap: wrap;            /*wrap允许换行 nowrap不允许换行 wrap-reverse反向换行*/
            justify-content: space-evenly; /*项目间的距离*/
            align-items:stretch;           /*baseline文字的下边缘对齐*/
            align-content:center;

            <div class="in" style="flex-grow: 1;">2</div>  flex-grow:数值   将剩余空间分配完
            order:数值    序号排序
    
        -->
</body>

5.float:left

如果一个元素内部有浮动的子元素就一定要清除浮动(清除浮动带来的影响)

方式1 给父元素设置一个固定的高度且这个高度能包裹完所有的子元素

方式2 在父元素结尾的地方添加一个样式为 clear:both的块元素

6.text-direction 加下划线

例：波浪线 text-decoration:underline blue wavy ;

7.响应式设置

例如：最大显示到500px

 @media screen and (max-width:500px){
           
        }

8.word-break: break-word; 超出div宽度文字自动换行

小马nong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

html+CSS样式 （记）

html+CSS样式（记）