CSS小知識

$\color{#f44336}{持續學習中...}$

文本溢出使用省略號代替

<style>
.text {
    border: 1px solid red;
    width: 200px;
 	/* ===================== */
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis
	/* =====================*/
}
</style>
<div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit consectetur ab at, esse, eveniet tenetur expedita iste aliquid assumenda eum quam inventore porro. Sed animi, provident facilis dignissimos expedita necessitatibus.
</div>

字之間空格保留

<style>
.text {
    border: 1px solid red;
    width: 200px;
    /* white-space: pre; /* 空格保留*/ 
    white-space: pre-wrap; /*空格換行都保留*/
}
</style>
<div class="text">
    good            
    morning
</div>

box-shadow使用當前文字顏色

<style>
.text {
    width: 200px;
    height: 200px;
    background: orange;
    color: red;
    box-shadow: 5px 5px 5px currentcolor; /*因此這個陰影是紅色的*/
}
</style>
<div class="text">
    chenjiang
</div>
</style>

animation實現過渡回彈

<style>
.ball {
    width: 100px;
    height: 100px;
    background: orange;
    border-radius: 50%;
    animation-name: ball;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    /*alternate可以實現緩慢的回彈, alternate-reverse反向運動並且可以緩慢回彈*/
    animation-direction: alternate-reverse; /**/
    /*加速後減速*/
    animation-timing-function: ease-in-out;
}

@keyframes ball {
    to {
   		transform: translateY(-300px)
    }
}
</style>
<div class="ball"></div>

文字兩端對齊

text-align-last: justify

使用浮動過後父元素無法感知高度

因爲浮動的元素脫離了文檔流, 父元素就無法感知具體的高度, 如果在最後面清除浮動, 所以就知道清除浮動的那個元素的位置, 從而可以自動設置父元素的高度

<style>
main {
    width: 500px;
    border: 2px solid red;
	/* 單獨使用這個也可以清除浮動
	overflow: auto;
	*/
}
/* 使用僞類來清除浮動
main::after{
	content: '';
	clear: both;
	display: block;
}
*/
div {
    width: 200px;
    height: 200px;
}

div:nth-of-type(1) {
    background: #000;
    float: left
}

div:nth-of-type(2) {
    background: orange;
    float: left
}
.clearfix{
    clear: both;
    border: 2px solid blue;
}
</style>
<main>
    <div></div>
    <div></div>
    <article class="clearfix"></div>
</main>

使用margin-right: auto實現自動撐滿空間

<style>
    * {
        padding: 0;
        margin: 0;
    }

    nav {
        width: 1200px;
        background: #ddd;
        margin: 0 auto;
        display: flex;
    }

    li {
        list-style-type: none;
    }

    ul:nth-child(1) {
        display: flex;
        margin-right: auto;
    }

    ul:nth-child(1) li {
        margin-right: 50px;
    }

    ul:nth-child(2) li {
        width: 50px;
        height: 50px;
        background: purple;
        border-radius: 50%;
    }
</style>

<nav>
    <ul>
        <li>123123</li>
        <li>123123</li>
        <li>123131</li>
    </ul>
    <ul>
        <li></li>
    </ul>
</nav>

浮動控制文本環繞排版

<style>
    * {
        padding: 0;
        margin: 0;
    }
    section{
        width: 500px;
        height: 300px;
        border: 1px solid red;
    }
    .rect{
        width: 100px;
        height: 100px;
        background: blue;
        float: left;
        /* 文字環繞圖片 */
        /* shape-outside: url(pic.png); */
        /* clip-path: circle(); */
        clip-path: ellipse(50% 60%);
        /* shape-outside: circle(); */
        shape-outside: ellipse(50% 60%);
    }
</style>

<section>
    <div class="rect">
		<!-- <img src="pic.png" alt=""> -->
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut similique, quia? Dignissimos ad at explicabo neque ex. Error deserunt, illo voluptatum. Possimus vero, magni optio corporis aspernatur impedit sit beatae!</p>
</section>

flex佈局子元素高度佔滿交叉軸

<style>
    * {
        padding: 0;
        margin: 0;
    }
    section {
        width: 100vh;
        height: 500px;
        border: 1px solid red;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        /* 交叉軸拉伸, 限制就是寬度, 因爲設置成column了 */
        /* 拉伸高度或者寬度, 取決於主軸在哪裏 */
        align-items: stretch;
    }
    div {
        /* flex-grow: 1; */
        /* flex-basis: 100px; */ /* 設置主軸的長度 */
        flex: 1;
        /*設置主軸的長度, 現在就是高度, 平分高度*/
        background: #000;
    }
</style>

<section>
    <div></div>
    <div></div>
    <div></div>
</section>

通過定位設置寬高

<style>
    *{
        padding: 0;
        margin: 0;
    }
    article{
        width: 500px;
        height: 500px;
        border: 2px solid #7e21f3;
        position: relative;
    }
    div{
        /*沒有設置寬高, 然後通過定位, 就會自動拉伸到指定的位置*/
        position: absolute;
        left: 100px;
        top: 100px;
        bottom: 100px;
        right: 100px;
        background: #21f3e7;
    }
</style>
</head>
<article>
    <div></div>
</article>

背景上面放一個遮罩層

1. 使用background樣式實現
   
   
2. 常規方法, 可以創建一個背景是黑色透明的div定位到背景上面