web--03

最新推荐文章于 2024-08-14 20:13:10 发布

江水三千里

最新推荐文章于 2024-08-14 20:13:10 发布

阅读量81

点赞数 1

文章标签：前端 css css3

本文链接：https://blog.csdn.net/qq_74825263/article/details/131645354

版权

文本相关样式

<style>   
     div {
            height: 200px;
            background-color: pink;
            /*缩进 em为字体大小*/
            text-indent: 2em; 
            /* 文本水平对齐方式 */
            text-align: center;
            /*去除水平线*/
            text-fecoration:none;
            /*防溢出*/
            overflow: auto; 
            /* 行高  单行文本垂直居中   行高=元素高度*/
            line-height: 200px;
        }
</style>

list--列表

/*去除无序列表前的标志*/
list-style:none;
/*空心圆*/
list-style:circl;

元素显示模式转换

元素分为:行内元素,块元素,行内块元素

<style>
        .box {
            /* 行内元素无法设置宽、高        转换为行内块元素 */
            /* display: none;隐藏元素，脱离文档流 */
            display: none;
            /* display: inline-block;  将元素转换为行内块元素 */
            /* display: inline;  行内元素 */
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        span {
            display: inline-block;
            /* display: block;  块元素 */
            width: 300px;
            height: 300px;
            /*固定*/
            backgroundd-attachment:fixed;
            /*左上方移动*/
            backgroundd-position:top left
            background-color: rgb(15, 105, 66);
             }
    </style>

边框

/*边框宽度*/
border-width: 2px;
/*边框的形状*/
border-style: dashed;
/*边框的颜色*/
border-color: black;
/*边框的幅度*/
border-radius: 10px;
/*合子左上编成50%*/
border-top-left-radius: 50%;
/*合并相邻边框*/
table
{border-collapse: collapse;}

阴影

/*边框阴影*/
box-shadow: 20px 20px 10px 10px black; 
/*负值为上方*/
/*字体阴影*/
text-shadow:

轮廓线

outline: none;/*取消轮廓线*/
outline-style: groove;/*轮廓线风格*/

防拖拽

textarea{
resize: none;——防拖拽
vertical-align: top;
vertical-align: middle;——改变文字对齐方式
vertical-align: bottom;
}

隐藏元素

.box1 {
            /*脱离文档流，原来的位置不再保留 */
             display: none; 
            visibility: hidden;/*元素隐藏，位置保留  */
            opacity: 0; 
            background-color: pink;
        }

定位

/*绝对定位,不保留原来位置子绝父相   
父亲没有相对定位，继续向上找，谁有相对定位，
以谁作为参考移动如果都没找到，则相对于浏览器进行定位*/
position:absolute:
/*相对于浏览器距离*/
top:      left:

/* 固定定位:相对于可视区域进行定位 */
 position: fixed;

/*粘性定位*/
.one {
            position: sticky;
            top: 0;
            background-color: pink;
      }
<body>
  <p class="one">xxxxxx</p>

江水三千里

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
web--03

元素分为:行内元素,块元素,行内块元素。
复制链接

扫一扫