CSS3

idea

穿透

方式一

css

.div{
    width: auto;
    :deep(.nva){
        width: auto;
    }
}

方式二

css

::v-deep{
   .nva{
       width: auto;
    }
}

布局

css

/* 创建三个相等的列，它们彼此相邻浮动 */
.column {
  float: left;
  width: 33.33%;
}

/* 在列后清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* 响应式布局 - 使三列堆叠，而不是在较小的屏幕（宽度为 600 像素或更小）上并排 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

特异性

每个选择器在特异性层次结构中都有其位置。以下四种类别定义了选择器的特异性级别：

行内样式 - 行内（内联）样式直接附加到要设置样式的元素。实例：<h1 style="color: #ffffff;">。
ID - ID 是页面元素的唯一标识符，例如 #navbar。
类、属性和伪类 - 此类别包括 .classes、[attributes] 和伪类，例如：:hover、:focus 等。
元素和伪元素 - 此类别包括元素名称和伪元素，比如 h1、div、:before 和 :after。

html

<!DOCTYPE html>
<html>
    <head>
    <style>
        div#a {background-color: green;}
        #a {background-color: yellow;}
        div[id=a] {background-color: blue;}
    </style>
    </head>
    <body>

        <div id="a">这是一个 div</div>

    </body>
</html>

CSS 组合器

组合器

鼠标箭头变为-手型

cursor: pointer;

盒子隐藏

将元素隐藏，但是在网页中该占的位置还是占着,使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

css

visibility:hidden

将元素的显示设为无，即在网页中不占任何的位置,使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”。

css

display:none

-webkit

前缀为“-webkit-”的属性，能够在以webkit为内核的浏览器中正常使用

-webkit常用于代表chrome、safari私有属性；

针对不同的浏览器，规定其内核名称让它们可以对这些新增属性进行解析

属性	描述
-moz-	firefox浏览器私有属性
-ms-	IE浏览器私有属性
-webkit-	chrome、safari私有属性
-o-	Opera私有属性

如果前面为空代码全局，如果前面有某个元素的css选择器代表改元素的对于内容 1、输入框

css

::-webkit-input-placeholder {}

2、阻止input出现黄色背景

css

input:-webkit-autofill {
    background-color: #fff !important;
    -webkit-box-shadow: inset 0 0 0 1000px white !important;
}

3、清除input[type=”number”]侧边的箭头

css


/* chrome */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
-webkit-appearance: none!important;
margin: 0;
}

/* Firefox */
input[type=number]{
-moz-appearance: textfield;
}

或

css

input::-webkit-inner-spin-button { -webkit-appearance: none; }

4、禁用选择文本

css

* {
  -webkit-user-select: none;   
  -moz-user-select: none;    
  -ms-user-select: none;
  user-select: none;
}

CSS 伪类

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的 `<input>` 元素。
:disabled	input:disabled	选择每个被禁用的 `<input>` 元素。
:empty	p:empty	选择没有子元素的每个`<p>`元素。
:enabled	input:enabled	选择每个已启用的 `<input>` 元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个 `<p>`元素。
:first-of-type	p:first-of-type	选择作为其父的首个 `<p>` 元素的每个`<p>` 元素。
:focus	input:focus	选择获得焦点的 `<input>` 元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的 `<input>` 元素。
:invalid	input:invalid	选择所有具有无效值的 `<input>` 元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 "it" 开头的 `<p>` 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个 `<p>` 元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个 `<p>` 元素的每个 `<p>` 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not(p)	选择每个非 `<p>` 元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个 `<p>` 元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个`<p>`元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个`<p>`元素的每个`<p>`元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个`<p>`元素的每个`<p>`元素。
:only-of-type	p:only-of-type	选择作为其父的唯一`<p>`元素的每个`<p>`元素。
:only-child	p:only-child	选择作为其父的唯一子元素的`<p>`元素。
:optional	input:optional	选择不带 "required" 属性的 `<input>` 元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的 `<input>` 元素。
:read-only	input:read-only	选择指定了 "readonly" 属性的 `<input>` 元素。
:read-write	input:read-write	选择不带 "readonly" 属性的 `<input>` 元素。
:required	input:required	选择指定了 "required" 属性的 `<input>` 元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的 `<input>` 元素。
:visited	a:visited	选择所有已访问的链接。

::first-line 元素

::first-line 伪元素用于向文本的首行添加特殊样式

css

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

::first-letter 元素

::first-letter 伪元素用于向文本的首字母添加特殊样式。

css

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

伪元素和 CSS 类

伪元素可以与 CSS 类结合使用

<p class="intro">这是一段简介！</p>

css

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

CSS - ::before 元素

::before 伪元素可用于在元素内容之前插入一些内容。下面的例子在每个 <h1> 元素的内容之前插入一幅图像：

css

h1::before {
  content: url(smiley.gif);
}

CSS - ::after 元素

::after 伪元素可用于在元素内容之后插入一些内容。下面的例子在每个 <h1> 元素的内容之后插入一幅图像：

css

h1::before {
  content: url(smiley.gif);
}

CSS - ::selection 元素

::selection 伪元素匹配用户选择的元素部分。

以下 CSS 属性可以应用于 ::selection：

color
background
cursor
outline

transition (渐变属性)

css

transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;

第一个属性：all就是要变换多个属性，不想麻烦就写all就完了第二个属性：过度动画的时间第三个属性：

属性	描述
linear	匀速
ease	快启动，慢停止，物理原则
ease-in	先慢，后快
ease-out	先快，后慢
ease-out	先慢，再快，再慢停止

CSS 不透明度 / 透明度

opacity 属性的取值范围为 0.0-1.0。值越低，越透明：

css

img {
  opacity: 0.5;
}
img:hover {
  opacity: 0.5;
}

使用 RGBA 子元素应用不受影响

css

div {
  background: rgba(76, 175, 80, 0.3) /* 不透明度为 30% 的绿色背景 */
}

CSS 属性选择器

[attribute]

选择器用于选取带有指定属性的元素

带有 target 属性的 <a> 元素

css

a[target] {
  background-color: yellow;
}

[attribute="value"] 选择器用于选取带有指定属性和值的元素。

下例选取所有带有 target="_blank" 属性的 <a> 元素

css

a[target="_blank"] { 
  background-color: yellow;
}

[attribute~="value"]

选择器选取属性值包含指定词的元素

下例选取 title 属性包含 "flower" 单词的所有元素

html

<!DOCTYPE html>
<html>
    <head>
    <style>
    [title~=flower] {
    border: 5px solid yellow;
    }
    </style>
    </head>
    <body>

        <h1>CSS [attribute~="value"] 选择器</h1>
        <p>title 属性包含 "flower" 的所有图像会有黄色边框。</p>

        <img src="/i/photo/klematis.jpg" title="klematis flower" width="150" height="113">
        <img src="/i/photo/flower.gif" title="flower" width="224" height="162">
        <img src="/i/photo/tree.png" title="tree" width="200" height="358">

    </body>
</html>

[attribute|="value"]

选择器用于选取指定属性以指定值开头的元素。

下例选取 class 属性以 "top" 开头的所有元素：

注释：值必须是完整或单独的单词，比如 class="top" 或者后跟连字符的，比如 class="top-text"。

html

<!DOCTYPE html>
<html>
    <head>
    <style>
        [class|=top] {
        background: yellow;
        }
    </style>
    </head>
    <body>

        <h1>CSS [attribute|="value"] 选择器</h1>

        <h1 class="top-header">Welcome</h1>
        <p class="top-text">Hello world!</p>
        <p class="topcontent">Are you learning CSS?</p>

    </body>
</html>

[attribute^="value"]

选择器用于选取指定属性以指定值开头的元素。

下例选取 class 属性以 "top" 开头的所有元素：

提示：值不必是完整单词！

html

<!DOCTYPE html>
<html>
    <head>
    <style>
        [class^="top"] {
        background: yellow;
        }
    </style>
    </head>
    <body>

        <h1>CSS [attribute^="value"] 选择器</h1>

        <h1 class="top-header">Welcome</h1>
        <p class="top-text">Hello world!</p>
        <p class="topcontent">Are you learning CSS?</p>

    </body>
</html>

[attribute$="value"]

选择器用于选取指定属性以指定值结尾的元素。

下例选取 class 属性以 "test" 结尾的所有元素：

提示：值不必是完整单词！

html

<!DOCTYPE html>
<html>
    <head>
    <style> 
        [class$="test"] {
        background: yellow;
        }
    </style>
    </head>
    <body>

        <h1>CSS [attribute$="value"] 选择器</h1>

        <div class="first_test">The first div element.</div>
        <div class="second">The second div element.</div>
        <div class="my-test">The third div element.</div>
        <p class="mytest">This is some text in a paragraph.</p>

    </body>
</html>

[attribute*="value"]

选择器选取属性值包含指定词的元素。

下例选取 class 属性包含 "te" 的所有元素：

提示：值不必是完整单词！

html

<!DOCTYPE html>
<html>
    <head>
    <style> 
        [class*="te"] {
        background: yellow;
        }
    </style>
    </head>
    <body>

        <h1>CSS [attribute*="value"] 选择器</h1>

        <div class="first_test">The first div element.</div>
        <div class="second">The second div element.</div>
        <div class="my-test">The third div element.</div>
        <p class="mytest">This is some text in a paragraph.</p>

    </body>
</html>

设置表单样式

css

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

水平居中的几种方式

利用margin: 250px auto;
利用定位：

方法一

css

.parent {
    position: relative;
}
.child{
    position:absolute;
    /* 水平垂直居中 */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

方法二

css


.parent {
  position: relative;
}
 
.child {
  width: 50%; /* 或者其他宽度 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Flex布局

css

.div{
    /* 父容器开启flex布局 */
    display: flex;
    /* 水平垂直居中 */
    justify-content: center;
    align-items: center;
}

过度 transition

将鼠标悬停在一个 div 元素上，逐步(10s)改变表格的宽度从 100px 到 300px：

ease-in 加速，
ease-out 减速，
ease-in-out 先加速后减速，
linear 匀速，
ease 与 ease-in-out

css

div
{
	width:100px;
	height:100px;
	background:red;
	transition:width 10s;
	-webkit-transition:width 10s; /* Safari */
}

div:hover
{
	width:300px;
}

CSS3 ​

穿透 ​

布局 ​

特异性 ​

CSS 组合器 ​

鼠标箭头变为-手型 ​

盒子隐藏 ​

-webkit ​

CSS 伪类 ​

::first-line 元素 ​

::first-letter 元素 ​

伪元素和 CSS 类 ​

CSS - ::before 元素 ​

CSS - ::after 元素 ​

CSS - ::selection 元素 ​

transition (渐变属性) ​

CSS 不透明度 / 透明度 ​

CSS 属性选择器 ​

[attribute] ​

[attribute~="value"] ​

[attribute|="value"] ​

[attribute^="value"] ​

[attribute$="value"] ​

[attribute*="value"] ​

设置表单样式 ​

水平居中的几种方式 ​

过度 transition ​

CSS3

穿透

布局

特异性

CSS 组合器

鼠标箭头变为-手型

盒子隐藏

-webkit

CSS 伪类

::first-line 元素

::first-letter 元素

伪元素和 CSS 类

CSS - ::before 元素

CSS - ::after 元素

CSS - ::selection 元素

transition (渐变属性)

CSS 不透明度 / 透明度

CSS 属性选择器

[attribute]

[attribute~="value"]

[attribute|="value"]

[attribute^="value"]

[attribute$="value"]

[attribute*="value"]

设置表单样式

水平居中的几种方式

过度 transition