css 实用属性穿透样式及修改原生标签样式

潇、然

已于 2024-02-27 14:49:38 修改

阅读量1.3k

点赞数 1

分类专栏： H5 文章标签： vue.js

于 2022-08-09 18:52:36 首次发布

本文链接：https://blog.csdn.net/weixin_43512977/article/details/126235965

版权

H5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

深度选择器（穿透）

<style scoped>
.a :deep(.b) {

}
</style>

插槽选择器

<style scoped>
:slotted(div) {
  color: red;
}
</style>

全局选择器

<style scoped>
:global(.red) {
  color: red;
}
</style>

CSS 中的 v-bind()

<div class="name">张胜男</div>

const color = ref("red");

.name {
  color: v-bind("color");
}

CSS Modules

<template>
  <p :class="$style.red">This should be red</p>
</template>

<style module>
.red {
  color: red;
}
</style>

自定义注入名称

<template>
  <p :class="classes.red">red</p>
</template>

<style module="classes">
.red {
  color: red;
}
</style>

修改原生 input 样式

在这里插入图片描述


input:focus {
	border: none;
	outline: none;
}

input::-webkit-input-placeholder {
	font-size: 14px;
	color: #929397;
}
/* 修改 checkbox */
input[type=checkbox] {
	cursor: pointer;
	position: relative;
}

input[type=checkbox]::after {
	position: absolute;
	top: 0;
	background-color: #fff;
	color: #fff;
	width: 14px;
	height: 14px;
	display: inline-block;
	visibility: visible;
	padding-left: 0px;
	text-align: center;
	content: ' ';
	box-sizing: border-box;
	border-radius: 2px 2px 2px 2px;
	border: 1px solid #D6D6D6;
}

input[type=checkbox]:checked::after {
	content: "";
	background-color: var(--primary);
	border-color: var(--primary);
	background-color: var(--primary);
}

input[type=checkbox]:checked::before {
	content: '';
	position: absolute;
	top: 1px;
	left: 5px;
	width: 3px;
	height: 8px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	z-index: 1;
}
/* 修改 checkbox */

文本换行符换行

p{
	white-space: pre-wrap;
}

:not

给列表添加下边框，去除最后一个样式
常规写法

.list {
    border-bottom: 1px solid #ccc;
}
.list:last-of-type {
    border-bottom: none;
}

:not 写法

.list:not(:last-of-type) {
    border-bottom: 1px solid #ccc;
}

保持图片宽高比

img{
	aspect-ratio: 4/3;
}

宽度自适应

div{
	width: fit-content;
}

在这里插入图片描述

¥ ¥

css

CSS初识

CSS(Cascading Style Sheets)通常被称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。它就是包含一个或多个规则的文本文件。

盒模型

盒模型分为： W3C标准盒子、IE盒子

W3C标准盒子（content-box）：又称内容盒子，是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是正常盒模型content-box。它所说的width一般只包含内容，不包含padding与margin，并且盒子的大小会以内容优先，自动扩展，子元素可以撑开父元素.
可以理解为现实生活中的气球，大小可以随内容的变化而变化。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-71EBgAAB-1687162000185)(css_files/1.jpg)]

盒子总宽度 = margin + border + padding + width

IE盒子（border-box）：又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。一般在IE浏览器中默认为这种怪异盒模型，但是由于其自身的特殊性，手机页面中也有使用怪异盒模型。怪异盒模型中，父元素的盒模型确定，子元素无法撑开父元素的盒模型。
可以理解为现实生活中的铁箱子，大小不能被内容改变。
在这种盒模型下，我们所说的元素的 width ，实际上包含了 content + padding + border
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O7RNEzLw-1687162000187)(css_files/2.jpg)]

盒子总宽度 = margin + width

CSS特性

层叠性
这是浏览器处理冲突的一个能力,如果一个属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

继承性
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

优先性
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题：
继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

选择器

id 、class 和标签选择器
特殊性(Specificity)
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准具体规范入如下：
specificity用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
且数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，所以不会存在10个div能赶上一个类选择器的情况。

继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值	∞ 无穷大

优先总结：

使用了 !important声明的规则。
内嵌在 HTML 元素的 style属性里面的声明。
使用了 ID 选择器的规则。
使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
使用了元素选择器的规则。
只包含一个通用选择器的规则

position 定位

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky	粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

absolute 和 relative 子绝父相

flex

Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

.box{ display: flex; }
行内元素也可以使用 Flex 布局。
.box{ display: inline-flex; }

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器的属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction属性决定主轴的方向（即项目的排列方向）。

flex-wrap属性默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行

justify-content属性定义了项目在主轴上的对齐方式。

align-items属性定义项目在交叉轴上如何对齐。

项目的属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

css变量的基本使用

body{
	--color:#fc0;
}
div{
	color:var(--color) 
	color: var(--color, #7f583f);  var的第二个参数，表示默认值，即--second-color如果找不到，那么就用第二个值
}

渐变色

.active {
	background: linear-gradient(90deg, #fff, red);
}

一行文本溢出隐藏

.abc{
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

两行文本溢出隐藏

.abc{
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 
}

吸顶 position: sticky

<div style="position: sticky;top: 20px;left: 0;right: 0;">吸顶</div>

CSS设置背景图宽度100%，高度自适应

参考


.newcenter{
    width: 100%;
    background: url('../../assets/img/newcenter.png') no-repeat;
    background-size: 100% auto; 
}
 
.newcenter:before{
    content: ""; 
    display: block; 
    padding-top: 100%; 
}
/* 不过需要先确定背景图的长宽比,然后padding-top的值就位百分比的值 */

grid 网格布局

.main{
	display: grid;
	<!-- 定义列  3列  -->
	grid-template-columns: repeat(3,1fr);
	grid-template-columns: 100px 100px 100px;
	grid-template-columns: 100px 100px auto;
	<!-- 定义行 -->
	grid-template-rows: 100%;
	<!-- 间距 -->
	grid-column-gap: 10px;
}

calc

.main {width:300px;}
.main div{ width: calc(100% / 3); }

gap 间隙

gap是row-gap和column-gap的简写属性，而且gap可以接受一个值也可以接受两个值，当gap只有一个值时，表示row-gap和column-gap的值相同；当gap有两个值时，其中第一个值是row-gap，第二个值是column-gap。

.main{ gap: 20px; }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0LAoQKtQ-1687162000188)(css_files/1.jpg)]

all 取消其父元素的继承样式改为初始值 (重置)

.main{ all: initial; }

aspect-ratio

.main{ aspect-ratio: 3/1; } /*表示当前div的长、宽比为3:1 */

max() / min()

max 在两者之间取最大；min 函数在两者之间取最小。

width: max(50vw, 300px);
width: min(50vw, 300px);

clamp(MIN, VAL, MAX)

clamp 函数会在定义的三个值之间，取中间的那个值，是大小在中间，不是位置在中间

.main{ width: clamp(150px, 100px, 200px); }

禁止文本选择

.main{
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

触摸并按住触摸目标时候可禁止或显示系统默认菜单

.main{ -webkit-touch-callout: none }

background-image 可以设置多个图

.main{
	background-image: url(img/bg_flower.gif), url(img/2.jpg);/*写在前面的背景图会在上面*/
	background-position: right bottom, left top;/*默认为left top*/
	background-repeat: no-repeat, repeat;/*默认为repeat*/
	background-size:60px 100px;/*宽，高*/
	background-origin: content-box / padding-box / border-box ;
	background-clip: content-box / padding-box / border-box ;
}

外边距折叠

常规流布局时，盒子都是垂直排列，两者之间的间距各自的外边距所决定，但不是二者外边距之和。
比如：两个垂直排列的盒子，外边距都是10px ，但是最后的结果是10 px 而不是两者之和20px

块的上外边距 (margin-top)和下外边距 (margin-bottom)有时合并 (折叠) 为单个边距，其大小为单个边距的最大值 (或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。

没有内容将父元素和后代元素分开
- 父元素有文字内容
- 父元素添加边框(上边框)
- 父元素 flex 布局
- 父元素使用内边距
- 父元素使用 position 定位
- 子元素使用 transform
- 子元素使用 float 浮动
同一层相邻元素之间
- 使用 transform
- 使用 float 浮动
- 父元素使用 position 定位
- 父元素 flex 布局