陌生又熟悉的CSS属性

最新推荐文章于 2023-02-24 17:35:34 发布

_小婷子

最新推荐文章于 2023-02-24 17:35:34 发布

阅读量360

点赞数 1

分类专栏：前端 CSS 文章标签： css3

Ting

本文链接：https://blog.csdn.net/weixin_46722764/article/details/115080130

版权

前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

1. 实现三角形

  <div class="top-triangle"></div>
  <div class="star"></div>
  <style>
  	.top-triangle{
		width:0;
		height:0;
		border:20px solid transparent;/*边全部设为透明*/
		border-bottom-color:red;/*相反方向设为自己所需颜色*/
	}
	 .star{
        width: 0;
        border: 10px solid;
        border-color: #f30 transparent transparent;
    }	
  </style>

2. 单行文本超出显示省略号

 <div class="single-ellipsis">单行文本超出显示省略号</div>、
  <style>
  	.single-ellipsis{
		width:50px;
		white-space:nowrap;
		text-overflow:ellipsis;
		overflow:hidden;
	}
  </style>

3. 多行文本超出只显示一行

  <div class="multiline-ellipsis">多行文本超出，多行文本超出，多行文本超出，多行文本超出，多行文本超出，多行文本超出，多行文本超出</div>
  <style>
  .multiline-ellipsis{
		width:100px;
		display:-webkit-box;
		word-break:break-all;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:1/*显示几行*/
		overflow:hidden;
		text-overflow:ellipsis;
	}
  </style>

word-space: nowrap （不换行）
word-break: normal break-all（本行单词内换行） keep-all（半角空格或连字符处换行）
word-wrap: normal break-word（新起一行放单词，新的一行放不下在换行）

4. 设置滚动条样式

/*滚动条整体样式*/
::webkit-scrollbar:{
	width:12px;
}
/*滑轨背景颜色*/
::webkit-scrollbar-track{
	background: #F0F0F5;
    border-radius:10px;
}
/*滑块颜色*/
::webkit-scrollbar-thumb{
 	border-radius:10px;
    background:#D5D8DF;
}

::-webkit-scrollbar （滚动条整体部分，可以设置宽度）
::-webkit-scrollbar-thumb （滚动的滑块）
::-webkit-scrollbar-track （外层轨道）
::-webkit-scrollbar-track-piece （内层滚动槽）
::-webkit-scrollbar-button （滚动条两端的按钮）
::-webkit-scrollbar-corner （横轴和纵轴相交的区域）
::-webkit-resizer （定义右下角拖动块的样式）

5. flex和grid布局: place-content/place-item

<div class="content">
	<div class="item"></div>
</div>
<style>
/*
 	place-content是justify-content和align-content的简写属性
 	place-items是justify-items和align-items的简写属性
*/
/*第一种flex居中*/
.content{
	display:flex;
	/*
	align-items: center;
    justify-content: center;
    */
  	place-content: center;
    place-items: center;
}
/*第二种flex居中*/
.content{
	display:flex;
}
.item{
	margin:auto
}
/*第三种grid居中:place-content和place-items都可以，任选其一*/
.content{
	display:grid;
	/*place-content: center;*/ 
    place-items: center;
}
</style>

7.padding
padding-top，padding-bottom设置百分比,百分比按父元素的宽度来计算

<!--CSS 画一个大小为父元素宽度一半的正方形？-->
 <div class="box1">
 	 <div class="box2">box2</div>
 </div>
 <style>
 	.box1{
        width: 400px;
        height: 600px;
        background: red;
    }
    .box2{
        width: 50%;
        height: 0;/*如果不写height的话，正方形内文字会溢出，溢出的高度正好就是文字所占空间的高度*/
        padding-top: 50%; /*如果box2里有内容，padding-top：内容在正方形外面，padding-bottom：内容在正方形里面*/
        background: blue;
    }
 </style>

<section>
    <!--双重嵌套，外层 relative，内层 absolute-->
    <style>
        .outer3{
            width: 50%;
            padding-top: 50%;
            height: 0;
            background: #0CCAFE;
            position: relative;
        }
        .inner3{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: brown;
        }
    </style>
    <div class="outer3">
        <div class="inner3"> </div>
    </div>
</section>

8. 伪类

:is()和:where()：在多个不同的div中给同一标签设置相同的属性可简化

<!--
:is(section, article, aside, nav) h1 {
  font-size: 25px;
}
相当于
section h1, article h1, aside h1, nav h1 {
  font-size: 25px;
}
-->
<body>
	<header  class="header">
	    <p class="p"></p>
	</header>
	<main class="main">
	    <p class="p">100周年</p>
	</main>
</body>
<style>
    .p {
        color: blue;
        font-size: 20px;
    }
    :where(.header, .main) .p {
        color: red;
    }
    /*上面两个权重一样*/
    :is(.header, .main) .p {
        color: purple;
    }
    /* :where和:is的作用和如下代码一样*/
    .header .p,
    .main .p {
        color: green;
    }
    /*上面两个权重一样*/
    /*总结:is()比:where()的权重高*/
</style>

:not()和:has()
:not()：在卡片排序时希望之间有间隔，可设第一张没有margin-top或最后一张没有margin-bottom
:has()：子元素匹配父元素（目前浏览器还不支持）

<body>
	<div class="list">
	    <div class="block">
	    	 <h1>Title</h1>
		</div>
	    <div class="block"></div>
	</div>
</body>
<style>
    .block{
        width: 100px;
        height: 50px;
        background: #1A6CE0;
    }
    .block:not(:last-child){
        margin-bottom: 20px;
    }
    .block:has(h1) {
        border-color: red;
    }
</style>

:empty(),:blank()：当数据为空时，避免出现之前的正常的样式

<div class="grid">
    <div>
        <p>Has error message</p>
        <div class="error">Whoops! Something went wrong!</div>
    </div>

    <div>
        <p>No errors</p>
        <div class="error"></div>
    </div>
</div>
<style>
    .error {
        background-color: pink;
        padding: 0.5em 0.75em;
    }
    .error:empty {
        padding: 0;/*使默认的框消失*/
    }
</style>

9. 其他

/*flex: 1 0 auto相当于flex-grow，flex-shrink和flex-basis的缩写*/
.main {
    flex: 1 0 auto;/*相当于下面三行内容*/
    flex-grow: 1; /*容器有剩余空间时，main区域会扩展*/
    flex-shrink: 0; /*容器有不足空间时，main区域不会收缩*/
    flex-basis: auto; /*main区域高度的基准值为main内容自动高度*/

	flex: 1;/*多列每一项都为1 可以实现均分*/
	min-inline-size: 300px;/*最小宽度 相当于min-width*/
}

10. 实现文字可以竖着呈现的

writing-mode: horizontal-tb（默认）vertical-rl（从右向左）/vertical-lr（从左向右）;

11. 不可选中文本复制粘贴
user-select: none（不可选中文本，不可粘贴复制）/all（可选择整个元素）

12. 裁剪背景
background-clip: boder-box/padding-box/content-box/text

_小婷子

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
陌生又熟悉的CSS属性

实现三角形 <div class="top-triangle"></div> <style> .top-triangle{ width:0; height:0; border:20px solid transparent;/*边全部设为透明*/ boder-bottom-color:red;/*相反方向设为自己所需颜色*/ } </style>单行文本超出显示省略号 <div class="single.
复制链接

扫一扫