css知识总结二

最新推荐文章于 2024-07-06 23:20:22 发布

喜乐ll

最新推荐文章于 2024-07-06 23:20:22 发布

阅读量350

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_63341952/article/details/121309663

版权

无序列表

<ul>
     <li>熊大</li>
     <li>熊二</li>
     <li>光头强</li>
 </ul>

在这里插入图片描述

要除去li元素小圆点通过 list-style:none

圆角边框

通过border-radius属性设置
如果是正方形要变为圆形把数值修改为高度或者宽度的一半即可，或者直接写成50％
该属性可以跟四个值分别代表左上角，右下角，右下角，左下角

height 设置元素的高度
line-height 设置行高
max-height 设置元素的最大高度
width 设置元素的宽度

display（显示）与visibility（可见性）

visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，
display:none属性会使这个对象彻底消失不显示，也不再占用位置。

position(定位)

position: relative;相对定位
position: absolute;绝对定位
position: fixed;固定定位
position:static：默认值
position: inheri ；规定应该从父元素继承 position 属性的值。

z-index的属性

z-index auto ： number
number为无单位的整数，也可以用负数
z-index的值越大，则越显示在最上层，适用于定位元素(position：relative或absolute)，用来确定元素在垂直于显示屏方向上的层叠次序，也被称作Z轴，我想大家应该都用过Photoshop处理相片或图片，这也是由若干个层构成的。

overflow的属性

overflow：visible 内容不会被剪裁，会呈现在元素框之外
overflow：hidden 内容会被修剪，其余内容是不可见的
overflow：scroll 内容会被修剪，其余内容会以滚动条的形式被查看
overflow：auto 内容会被剪裁，其余内容会以滚动条的形式被查看
overflow：inherit 规定应该从父元素继承overflow属性的值

float的属性

float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。

 <style>
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
        .right {
            float: left;
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="left">喜羊羊</div>
    <div class="right">美羊羊</div>
</body>

在这里插入图片描述

CSS3背景

background-clip 规定背景的绘制区域
background-origin 规定背景图片的定位区域
background-size 规定背景图片的尺寸

CSS3渐变

background-image：linear-gradient线性渐变
从左到右的渐变
background-image：linear-gradient(to right ， color1,color2)
从右到左的渐变
background-image：linear-gradient(to left ， color1,color2)
从左下角到右上角，将direction写成to right to
从左上角十点半，135度
background-image：linear-gradient(135deg，color1,color2)

CSS3过渡可通过transition：时间来控制

column-rule-style属性指定了列与列间的边框昂视

column-rule-width 属性规定了两列的边框厚度

column-count 属性制定了需要分割的列数

喜乐ll

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css知识总结二

无序列表<ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul>要除去li元素小圆点通过 list-style:none圆角边框通过border-radius属性设置如果是正方形要变为圆形把数值修改为高度或者宽度的一半即可，或者直接写成50％该属性可以跟四个值分别代表左上角，右下角，右下角，左下角...
复制链接

扫一扫