02_CSS-CSDN博客

本文链接：https://blog.csdn.net/qq_42430409/article/details/126579285

1.CSS选择器

标签选择器

p {
    color: aqua;
}
<p>0</p>

id选择器

#p1{
    color: blue;
}
<p id="p1">1</p>

类名选择器

.p2{
    color: blueviolet;
}
<p class="p2">2</p>

注：每一个标签可以有多个class

<p class="p2 p1">2</p>

通配符选择器

* {
    padding: 0%;
    margin: 0%;
}

后代选择器

.box p{
	color: brown;
}
<div class="box">
	<p>3</p>
</div>

交集选择器

p.p3{
    color: chartreuse;
}
 <p class="p3">4</p>

并集选择器

t1,t2{
    color: gold;
}
<t1>5</t1>
<br>
<t2>5</t2>

CSS3新增属性选择器

在这里插入图片描述

input[type=text]{
    color:pink;
}

CSS3新增结构伪类选择器

在这里插入图片描述

(n)中n可以是关键字even偶数,odd奇数;也可以是一个公式:比如2n,n+5等

nth-child(n)与nth-of-type(n)的区别是执行流程不同。

-child是先看-child(n)再看div(先寻找序号，在寻找类型)

-type是先看div再看-type(n)(先寻找类型，再寻找序号)

section div:nth-child(1){
    background-color: aqua;
}
section p:nth-child(1){
    background-color: gray;
}
section div:nth-of-type(1){
    background-color: pink;
}

<section>
    <p>1</p>
    <p>1</p>
    <div>2</div>
    <div>3</div>
</section>

伪元素选择器

在这里插入图片描述

body::before{
    content:"你" ;
}
body::after{
    content: "好";
}
<body>
    <div>1</div>
</body>

2.选择器的权重

id选择器>class类名选择器>标签选择器

#p1{
    color: gold;
}
p{
    color: green;
}
.p2{
    color: hotpink;
}
<!-- 最后是黄色 -->
<p id="p1" class="p2">1</p>

3.选择器选择原则

权重数原则

当都指向目标标签时

id>class>标签

第一个：2,1,2

第二个：1,2,2

所以最后颜色是红色

#box1 div.box2 #box3 p{
	color: red;
}
.box1 #box2 div.box3 p{
	color: royalblue;
}
<div id="box1" class="box1">
    <div id="box2" class="box2">
        <div id="box3" class="box3">
            <p>1</p>
        </div>
    </div>
</div>

就近原则

当没有指向目标标签时，谁离得近显示谁的

所以最后颜色是蓝色

#b1 #b2{
    color: red;
}
.b1 .b2 .b3{
    color: royalblue;
}
<div id="b1" class="b1">
    <div id="b2" class="b2">
        <div id="b3" class="b3">
            <p>2</p>
        </div>
    </div>
</div>

注：如果所有原则都相同，则后书写的覆盖先书写的

4.内墙法解决浮动影响问题

①子元素撑高父盒子的高度

②margin问题

*{
    margin: 0;
    padding: 0;
}
.box1,.box2{
    width: 800px;
    border: 5px solid red;
}
.box1{
    margin-bottom: 20px;
}
.box2{
    border-color: blue;
}
.box1 p{
    width: 80px;
    height: 100px;
    margin: 0 5px;
    float: left;
    background-color: cyan;
}
.box2 p{
    width: 80px;
    height: 100px;
    margin: 0 5px;
    float: left;
    background-color: orange;
}
.cl{
    clear: both;
}
<div class="box1">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <div class="cl"></div>
</div>
<div class="box2">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <div class="cl"></div>
</div>

注：也可以使用伪类或者直接添加overflow:hidden属性

.clearfix::after{
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

5.定位

相对定位

不脱离文档流，元素原来占有空间不会被其他元素填充

根据原来位置进行定位

.box1 {
    background-color: red;
    width: 500px;
    height: 50px;
}
.box2 {
    background-color: gold;
    width: 500px;
    height: 50px;
    position: relative;
    top:100px;
}
.box3 {
    background-color: green;
    width: 500px;
    height: 50px;
}
<div>
    <!-- 相对定位 -->
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
</div>

绝对定位

脱离了文档流，如果空隙大，可以被别的元素占有

且如果父级没有进行定位则根据html位置进行定位

还有fixed也是绝对定位，但是是对于浏览器窗口的绝对定位

.box4 {
    background-color: aqua;
    width: 500px;
    height: 50px;
}
.box5 {
    background-color: blueviolet;
    width: 500px;
    height: 50px;
    position: absolute;
    top:400px;

}
.box6 {
    background-color: tan;
    width: 500px;
    height: 50px;
}
<div style="margin-top: 100px;">
    <!-- 绝对定位 -->
    <div class="box4">box4</div>
    <div class="box5">box5</div>
    <div class="box6">box6</div>
</div>

6.多列

.box {
    column-count: 3;
    column-gap: 40px;
    column-rule-style: solid;
}
<div class="box">
    当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>

7.sticky粘贴

使用后需要进行定位否则无效，当元素移动到指定位置时固定不动

nav{
    position:sticky;
    top: 50px;

}
p{
    background-color:aqua;
    width: 50px;
    text-align: center;
    float: left;
    margin-left: 20px;
}
div{
    height: 1000px;
}
<div></div>
<nav>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</nav>
<div></div>

8.使用边框绘画三角形

.triangle{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-left-color: #000;
    margin: 100px;
}
<div class="triangle"></div>

9.鼠标样式

在这里插入图片描述

li{
    cursor: pointer;
}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

10.用户界面

取消表单轮廓即文本域拖拽

/*取消表单轮廓*/
input{
    outline:none;
}
/*取消文本域拖拽*/
textarea{
    resize:none;
}

解决图片底部有一点空白

img{
	vertical-align:bottom;
}

溢出文字进行省略号显示

单行

/*强制一行内显示文本*/
white-space:nowrap;
/*超出部分隐藏*/
overflow:hidden;
/*文字使用省略号进行代替*/
text-overflow:ellipsis;

多行

overflow:hidden;
text-overflow:ellipsis;
/*弹性伸缩盒子模型显示*/
display:-webkit-box;
/*限制一个块元素显示的文本和行数*/
-webkit-line-clamp:2;
/*设置或检索伸缩盒子对象的子元素的排列方式*/
-webkit-box-orient:vertical;

11.CSS3新增盒子模型

在这里插入图片描述

.box1 {
    width: 200px;
    height: 200px;
    background-color: aqua;
    border: 20px solid black;
    padding: 10px;
    box-sizing: content-box;
}
.box2 {
    width: 200px;
    height: 200px;
    background-color: pink;
    border: 20px solid black;
    padding:10px;
    box-sizing: border-box;
}
<div class="box1"></div>
<br />
<div class="box2"></div>

12.CSS3其他特性

模糊

在这里插入图片描述

属性计算

在这里插入图片描述

13.CSS过渡

在这里插入图片描述

div {
    width: 200px;
    height: 200px;
    background-color: burlywood;
    transition: width 2s ease 1s;
}
div:hover {
    width: 400px;
}
<div></div>
/*如果要进行多个过渡:transition:width 2s,height 2s*/
/*所有属性变化:transition:all 2s*/

14.CSS变形

2D

在这里插入图片描述

translate

在这里插入图片描述

.translate {
    width: 200px;
    height: 200px;
    background-color:black;
    transform:translate(100px,0);
}
 <div class="translate"></div>

**注translate不会影响到其他元素的位置 **

rotate

在这里插入图片描述

.rotate {
    margin: 100px;
    width: 200px;
    height: 200px;
    background-color: aqua;
    transform-origin: 0 0;
    transition: all 2s;

}
.rotate:hover{
    transform: rotate(360deg);
}
<div class="rotate"></div>

设置转换中心点

在这里插入图片描述

 /* transform-origin: x y;*/
 transform-origin: 200 200;

scale

在这里插入图片描述

.scale{
    margin: 100px;
    width: 200px;
    height: 200px;
    background-color:orange;
    transform-origin: 0 0;
    transition: all 2s;
}

.scale:hover{
    transform: scale(2);
}
<div class="scale"></div>

在这里插入图片描述

3D

透视

使用transform: translate3d(x, y, z);（z轴是物体距离屏幕的距离z轴越大，物体越大,反之同理）

在被观察对象的父盒子上添加perspective:xpx（x越小看见的越大，x越大看见的越小,相当于近大远小x为距离）

body {
    perspective: 500px;
}
.a {
    width: 200px;
    height: 200px;
    background-color: brown;
    transform: translate3d(400px, 100px, 100px);
}
<div class="a"></div>

旋转

在这里插入图片描述

body {
    perspective: 500px;
}
.a {
    margin: 300px;
    width: 200px;
    height: 200px;
    background-color: brown;
    transform: translate3d(400px, 100px, 100px) ;
    transition: all 1s;
}
.a:hover{
    /*同理rotateY,ratateZ和自定义*/
    transform: rotateX(180deg);
}
<div class="a"></div>

3D呈现

在这里插入图片描述

.b {
    margin-left: 50%;
    perspective: 500px;
    position: relative;
    width: 200px;
    height: 200px;
    background-color: aqua;
    transition: all 1s;
    /*保持子盒子3D，写在父盒子中*/
    transform-style: preserve-3d;
}
.b:hover{
    transform: rotateY(90deg);
}
.c {
    width: 200px;
    height: 200px;
    background-color: black;
    transform: rotateX(60deg);
}
<div class="b">
      <div class="c"></div>
</div>

15.动画

使用keyframes定义

在这里插入图片描述

.keyframes{
    width: 100px;
    height: 100px;
    background-color:orange;
}
@keyframes move{
    0%{
        transform: translate(0);
    }
    100%{
        transform: translate(500px,500px);
    }
}
<div class="keyframes"></div>

使用动画

在这里插入图片描述

animation-name: move;
animation-duration: 2s;

常用属性

在这里插入图片描述

速度曲线细节

在这里插入图片描述

16.私有前缀

在这里插入图片描述

17.背景缩放

在这里插入图片描述

18.flex布局

父项

在这里插入图片描述

flex-direction

在这里插入图片描述

justify-content

在这里插入图片描述

flex-wrap

在这里插入图片描述

align-items

单行

在这里插入图片描述

align-content

多行

在这里插入图片描述

flex-flow

是flex-direction和flex-wrap的复合写法

flex-flow:row wrap

子项

在这里插入图片描述

flex

设置项目占用份数

align-self

控制子项自己在侧轴上的排列方式

order

定义项目的排列顺序，数值越小，排名越靠前

注：和z-index不一样，z-index是拥有定位的项目覆盖顺序的优先级

代码示例

div {
    width: 30%;
    height: 250px;
    background-color: pink;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    align-content: space-around;
}
div span {
    width: 30%;
    height: 50px;
    background-color: purple;
}
section {
    display: flex;
    width: 30%;
    height: 250px;
    background-color: pink;
}
section span:nth-child(2n-1) {
    width: 20%;
    height: 100%;
    background-color: burlywood;
}
section span:nth-child(2) {
    flex: 1;
    background-color: chartreuse;
}
section .self:nth-child(n){
    flex: 1;
    height: 30%;
}
section .self:nth-child(2){
    align-self: flex-end;
    order: -1;
}
<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
</div>
<hr />
<section>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</section>
<hr />
<section>
    <span class="self">1</span>
    <span class="self">2</span>
    <span class="self">3</span>
</section>

19.rem

根据文字大小设置盒子大小

与em相似，不过em是从父亲盒子寻找，而rem直接从根(html)文字大小寻找

html {
    font-size: 30px;
}
section {
    font-size: 20px;
}
.em {
    height: 10em;
    width: 10em;
    background-color: pink;
}
.rem {
    height: 10em;
    width: 10em;
    background-color: pink;
}
<section>
    <div class="em">1</div>
</section>
<hr />
<div class="rem">2</div>

20.媒体查询

根据不同设备及条件使用不同的css

@media screen and (max-width:1000px) {
    body{
        background-color: pink;
    }
}
@media  screen and (max-width:800px) {
    body{
        background-color: blueviolet;
    }
}
@media  screen and (max-width:500px) {
    body{
        background-color:aqua;
    }
}