-
盒模型
- 模型分为盒子模型和内容模型,
- 内容模型就是 宽高 = content
- 盒子模型就是宽高= content + padding + border
// css html { box-sizing: border-box; } *,*::before,*::after { box-sizing: inherit; } .box { display: inline-block; width: 150px; height: 150px; padding: 10px; background: tomato; color: white; border: 10px solid red; } .content-box { box-sizing: content-box; } // html <div class="box">border-box</div> <div class="box content-box">content-box</div>
-
清除浮动
- 无需借助辅助元素进行浮动的清除。
- 注意:这仅在使用float布局时才有用。实际场景中请考虑使用Flexbox布局或者网格布局
// css .clearfix { border: solid 1px red; } .clearfix:after { content: ''; display: block; clear: both; } .floated { float: left; margin-left: 20px; } // html <div class="clearfix"> <div class="floated">a</div> <div class="floated">b</div> <div class="floated">c</div> </div>
-
不变宽高比
- width:50% 只设置父级元素的宽度
- ::before 为父级元素定义一个伪元素
- padding-top:100% 设置伪元素的内上边距,这里的百分比的值是按照宽度计算的,所以会呈现为一个响应式的元素块
- float: left 浮动元素会生成一个块级框,使百分比的内边距生效
- 此方法还允许将内容正常放置在元素内
// css .constant-width-to-height-ratio { background: #eee; width: 50%; } .constant-width-to-height-ratio::before { content: ''; padding-top: 100%; float: left; background: tomato; } .constant-width-to-height-ratio::after { content: ''; display: block; clear: both; background: yellow; } // html <div class="constant-width-to-height-ratio"> <p>aaa</p> </div>
-
让图片在容器中显示的更舒适
- object-fit:contain 容器内显示整个图像,并且保持宽高比
- object-fit:cover 用图像填充容器,并保持宽高比
- object-position:[x][y] 对图像的显示部位进行调整
// css .image { background: #eee; border: 1px solid #eee; width: 200px; height: 200px; } .image-contain { object-fit: contain; object-position: center; } .image-cover { object-fit: cover; object-position: right top; } // html <div> <img class="image image-contain" src="./preview.jpeg"> <img class="image image-cover" src="./preview.jpeg"> </div>
-
使最后一项占满剩余高度
// css .container { height: 500px; display: flex; flex-direction: column; } .container > div:first-child { flex: 1; background: tomato; } // html <div class="container"> <div>a</div> <div>b</div> <div>c</div> </div>
-
使用transform居中子元素
// css .parent { border: 1px solid #eee; height: 250px; position: relative; width: 250px; } .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } // html <div class="parent"><div class="child">center</div></div>
-
自定义文本选择的样式
// css ::selection { background: aquamarine; color: black }; .custom-text-selection::selection { background: deeppink; color: white; }; // html <p class="custom-text-selection">Select some of the word</p>
-
:not 伪类选择器
:not
伪选择器对于设置一组元素的样式非常有用,同时保留最后一个(指定的)元素的样式
// css .css-not-selector-shortcut { display: flex; } ul { padding-left: 0; } li { list-style-type: none; margin: 0; padding: 0 0.75rem; } li:not(:last-child) { border-right: 2px solid #eee; } // html <div class="container"> <div>a</div> <div>b</div> <div>c</div> </div>
-
重置所有样式
all
属性允许您将所有样式(继承或不继承)重置为默认值
// css .reset-all-styles { all: initial; } // html <p class="reset-all-styles">aaa</p>
-
内容无法选取
// css .unselectable { user-select: none; } // html <p class="unselectable">this is a content </p>
-
计算函数 Calc()
- 允许加法,减法,乘法和除法
- 可以为表达式中的每个值使用不同的单位(例如,像素和百分比)
- 允许嵌套calc()函数
// css width: calc(100% + 48px);
-
css 自定义变量
- 包含要重用的特定值的CSS变量
// css custom-variables { --some-color: #da7800; --some-keyword: italic; --some-size: 1.25em; --some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray; color: var(--some-color); font-size: var(--some-size); font-style: var(--some-keyword); text-shadow: var(--some-complex-value); } // html <p class="custom-variables">CSS is awesome!</p>
-
屏外隐藏元素
- 删除所有边框
- 使用 clip 隐藏元素
- 设置宽高为1px
- 使用margin:-1px取消元素的高度和宽度
- 隐藏元素的溢出
- 移除所有的padding
- 绝对定位元素,使其不占用DOM中的空间
// css .offscreen { border: 0; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;; padding: 0; position: absolute; } // html <a class="button">Learn <span class="offscreen"> ablout </span></a>
链接:
参考文档