前端--CSS提升篇

最新推荐文章于 2024-08-04 22:15:18 发布
最新推荐文章于 2024-08-04 22:15:18 发布
阅读量655 收藏 10
点赞数 20
文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wmy030921/article/details/139927129
版权

一，CSS3结构性伪类选择器：

  • :nth-child(n) 对指定序号的子元素设置样式（从前往后数）。参数可以使数字（1、2、3）、关键字（odd、even）、公式（2n、2n+3 :使用公式时,n从0开始），参数的索引起始值时1，而不是0。

  • :nth-last-child(n) 对指定序号的子元素设置样式（从后往前数）。参数同上。

  • :nth-of-type(n) 匹配指定序号的同一种类型的子元素（从前往后数）。参数同上。

  • :nth-last-of-type(n) 匹配 指定序号的同一种类型的子元素（从后往前数）。参数同上。

    <style>
        /* 更加精准，用后代nav li */
        
        .nav li:nth-child(3) {
            color: red;
        }
        /* Odd奇数 even偶数 */
        
        .nav li:nth-child(Odd) {
            color: greenyellow;
        }
        
        .nav li:nth-child(even) {
            color: blue;
        }
        /* 2n+1 2n 4n 4n+1 n:从0开始 */
        
        .nav li:nth-child(2n+1) {
            color: purple;
        }
        
        .main p:nth-child(4) {
            color: red;
        }
        /* :nth-of-type() 匹配指定序号的同一种类型的子元素（从前往后数）。参数同上*/
        
        .main p:nth-of-type(3) {
            color: yellow;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>li元素1</li>
        <li>li元素2</li>
        <li>li元素3</li>
        <li>li元素4</li>
        <li>li元素5</li>
        <li>li元素6</li>
        <li>li元素7</li>
        <li>li元素8</li>
    </ul>
    <div class="main">
        <span>你好呀</span>
        <p>p元素1</p>
        <p>p元素2</p>
        <!-- 目标元素 -->
        <p>p元素3</p>
        <p>p元素4</p>
        <p>p元素5</p>
    </div>
</body>

二， 元素的显示与隐藏：

 <style>
        .father {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            border: 1px solid red;
        }
        
        .father div {
            width: 100px;
            height: 100px;
        }
        
        .son1 {
            background-color: red;
        }
        
        .son2 {
            /* 元素的显示与隐藏 */
            background-color: blue;
            /* 隐藏后不再显示与占位置 */
            display: none;
            /* 隐藏之后占位 */
            visibility: hidden;
        }
        
        .son3 {
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son1">son1</div>
        <div class="son2">son2</div>
        <div class="son3">son3</div>
    </div>
</body>

 

 <style>
        .father {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            border: 1px solid red;
        }
        /*本来son元素是隐藏的，当鼠标悬停在father元素上时，使son元素显示display:block;隐藏display:none  */
        
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
            /* 元素隐藏 */
            display: none;
        }
        
        .father:hover .son {
            /* 当鼠标悬停在father元素上时，使son元素显示display:block;隐藏display:none  */
            display: block;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>

三，过渡： transition

1.过渡,可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片

transition: 要过渡的属性  花费时间  运动曲线  何时开始;
如果有多组属性变化，还是用逗号隔开。

 

属性描述CSS
transition简写属性，用于在一个属性中设置四个过渡属性。3
transition-property规定应用过渡的 CSS 属性的名称。3
transition-duration定义过渡效果花费的时间。默认是 0。3
transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。3
transition-delay规定过渡效果何时开始。默认是 0。3

 

如果想要所有的属性都变化过渡， 写一个all 就可以

transition-duration 花费时间 单位是 秒 s 比如 0.5s 这个s单位必须写 ms 毫秒

运动曲线 默认是 ease

何时开始 默认是 0s 立马开始

<style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 过度 */
            /* transition: 要过度的属性 花费的时间 运动曲线（ease 缓慢开始） 何时开始 */
            /* linear 匀速 */
            /* ease 逐渐慢下来 */
            /* ease-in 加速  */
            /*ease-out  减速 */
            /* ease-in-out 先加速后减速*/
            /* transition: width 1s linear 3s; */
            /* transition: width 1s, height 1s; */
            transition: all 1s ease-in-out;
        }
        
        .box:hover {
            width: 1000px;
            height: 400px;
        }
    </style>
</head>

<body>
    <div class="box">box</div>
</body>

四，变形：transform

transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

transform 变换 变形的意思

1.移动translate(x,y)

translate 移动平移的意思

使用translate方法来将文字或图像在水平方向和垂直方向上分别移动。

translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）

 <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            transition: all 1s;
            margin: 100px auto;
        }
        
        .box:hover {
            /*  transform: translate(x,y) */
            transform: translatey(-50px);
        }
    </style>
</head>

<body>
    <div class="box">box</div>
</body>

2.缩放：scale(x,y)  (0-1） 

transform:scale(0.8,1);
/*可以对元素进行水平和垂直方向的缩放。*/

 注意: scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而 任何大于1的值，作用是让元素放大。

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）

<style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 过度 */
            transition: all 1s;
            margin: 100px auto;
        }
        
        .box:hover {
            /* 缩放scale（0-1） */
            /* 缩小：(0-1)  1不变大也不缩小   扩大：大于1 */
            /* transform: scale(0.5, 2); */
            /* 如果书写一个值，那么x和y方向都是这个值 */
            transform: scale(1.1);
        }
    </style>
</head>

<body>
    <div class="box">box</div>
</body>

3.旋转：rotate（deg）

语法意义
rotate(angle)定义 2D 旋转，在参数中规定角度。

 可以对元素进行旋转，正值为顺时针，负值为逆时针；

transform:rotate(45deg);

<style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 过度 */
            transition: all 1s;
            margin: 100px auto;
        }
        
        .box:hover {
            /* deg是度数 */
            /* 正值为顺时针，负值为逆时针 */
            /* transform: rotate(60deg); */
            transform: rotate(-60deg);
        }
    </style>
</head>

<body>
    <div class="box">box</div>
</body>

4. 动画：animation

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

4.1,定义动画

@keyframes 动画名称 {
  from{ 开始位置 } 
  to{  结束  }
}

@keyframes 动画名称 {
    0%
    55%
     ....
    100%
}
/* 关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意*/

4.2，调用动画

 animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;

 

animation-iteration-count:infinite;  无限循环播放
animation-play-state:paused; 暂停动画

animation-direction:alternate;(动画交替反向运行)alternate-reverse;(动画反向交替运行)reverse(动画反向);

animation-fill-mode: forwards(动画完成后,保持最后状态); 
animation-fill-mode: backwards;(动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。)
animation-fill-mode: both;(动画遵循 forwards 和 backwards 的规则。)

<style>
        /* 元素移动 */
        /* 1.transform:translateX
           2.margin-left
           3.定位
        */
        
        @keyframes move {
            from {
                /* transform:translateX(0); */
                /* left: 100px; */
            }
            to {
                /* transform: translateX(600px); */
                left: 600px;
            }
        }
        
        .car {
            /* 调用动画 */
            /* anomation:动画名称 动画时间 运动曲线 */
            /* infinite:无限的，小车就会一直走 播放次数 */
            /* animation: move 2s linear infinite; */
            animation: move 2s linear;
            /* 规定动画之外的状态 */
            /* forwards:动画完成后，保持最后状态 */
            animation-fill-mode: forwards;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <img src="img/xiaoqiche.png" alt="" width="100" class="car">
</body>

 案例：小汽车走一个来回

<style>
        @keyframes move {
            0% {}
            49% {
                transform: translateX(1000px);
            }
            50% {
                transform: translateX(1000px) rotateY(180deg);
                ;
            }
            99% {
                transform: translateX(0px) rotateY(180deg);
            }
            100% {
                transform: rotateY(180deg);
            }
        }
        
        .car {
            /* 调用动画 */
            animation: move 7s linear;
        }
    </style>
</head>

<body>
    <img src="img/xiaoqiche.png" alt="" width="100" class="car">
</body>

五，传统布局与flex布局对比

1.传统布局

  • 兼容性好

  • 布局繁琐

  • 局限性，不能在移动端很好的布局

2. flex布局

  • 操作方便，布局极其简单，移动端使用比较广泛

  • pc端浏览器支持情况比较差

  • IE11或更低版本不支持flex或仅支持部分

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

任何一个容器都可以指定为 Flex 布局。(芸芸众生皆平等)

.box {
    display: flex;
}

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

3.基本概念

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

  • 父盒子是：flex container

  • 子元素是：flex item

  • 总结原理：就是给父盒子添加flex属性，来控制子盒子的位置和排列方式

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

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

<style>
        .wrap {
            width: 600px;
            height: 200px;
            border: 1px solid red;
            margin: 100px auto;
            /* 使wrap元素父元素成为弹性盒子 */
            /* 如果子元素宽度不够，将自动缩小 */
            /* 如果父元素宽度剩余，子元素按照自身的大小显示 */
            display: flex;
        }
        
        .wrap div {
            width: 100px;
            height: 150px;
            background-color: pink;
            margin-left: 10px;
        }
        /* 对于子元素来说，什么样的标签元素都是一样的 */
        
        .wrap span {
            width: 100px;
            height: 150px;
            background-color: pink;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>

        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
        <span class="item">item4</span>
        <span class="item">item5</span>
        <span class="item">item6</span>
        <span class="item">item7</span>
        <span class="item">item8</span>
    </div>
</body>

 

4. 容器的属性

4.1，flex-direction属性（主轴的方向）

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

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

它可能取有4个值：

  • row（默认值）：主轴为水平方向，起点在左端。

  • row-reverse：主轴为水平方向，起点在右端。

  • column：主轴为垂直方向，起点在上沿。

  • column-reverse：主轴为垂直方向，起点在下沿。

<style>
        .wrap {
            width: 600px;
            height: 200px;
            border: 1px solid red;
            margin: 100px auto;
            /* 设置父元素为弹性盒子 */
            display: flex;
            /* 主轴的方向 */
            /* row 水平 */
            /* column 垂直 */
            flex-direction: column;
        }
        
        .wrap span {
            width: 100px;
            height: 150px;
            background-color: pink;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
        <span class="item">item4</span>
        <span class="item">item5</span>
        <span class="item">item6</span>
    </div>
</body>

4.2 flex-wrap属性（如何换行）

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

.box{
  flex-wrap: nowrap（默认） | wrap | wrap-reverse;
}

它可能取三个值。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

lex-flow（flex-direction属性和flex-wrap属性的简写）

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

 .box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

<style>
        .wrap {
            width: 700px;
            height: 500px;
            border: 1px solid red;
            margin: 100px auto;
            /* 设置父元素为弹性盒子 */
            display: flex;
            /* 换行 */
            /* nowrap 不换行 */
            /* wrap-reverse */
            flex-wrap: wrap;
        }
        
        .wrap span {
            width: 200px;
            height: 150px;
            background-color: pink;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
        <span class="item">item4</span>
        <span class="item">item5</span>
        <span class="item">item6</span>
    </div>
</body>

4.3 justify-content属性（主轴上的对齐方式）

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

.box {
  justify-content: flex-start(默认值) | flex-end | center | space-between | space-around;
}

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

  • flex-start（默认值）：左对齐

  • flex-end：右对齐

  • center： 居中

  • space-between：两端对齐，项目之间的间隔都相等。

  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

<style>
        .wrap {
            width: 800px;
            height: 200px;
            border: 1px solid red;
            margin: 100px auto;
            /* 设置父元素为弹性盒子 */
            display: flex;
            /* 主轴上的对齐方式 */
            /* 默认：左对齐 */
            justify-content: flex-start;
            /* 右对齐 */
            justify-content: flex-end;
            /* 主轴上的对齐:居中 */
            justify-content: center;
            /* 两端对齐 */
            justify-content: space-between;
            /* 两侧相等对齐 */
            justify-content: space-around;
        }
        
        .wrap div {
            width: 180px;
            height: 200px;
            background-color: pink;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
    </div>
</body>

 4.4，align-items属性（交叉轴如何对齐）

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

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

  • flex-start：交叉轴的起点对齐。

  • flex-end：交叉轴的终点对齐。

  • center：交叉轴的中点对齐。

  • baseline: 项目的第一行文字的基线对齐。

  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度，元素被拉伸以适应容器。

<style>
        .wrap {
            width: 800px;
            height: 300px;
            border: 1px solid red;
            margin: 100px auto;
            /* 设置父元素为弹性盒子 */
            display: flex;
            /* 主轴上的对齐方式 */
            /* 两端对齐 */
            justify-content: space-between;
            /* 交叉轴的对齐方式 */
            /* 居中 */
            align-items: center;
        }
        
        .wrap div {
            width: 180px;
            height: 200px;
            background-color: pink;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
    </div>
</body>

 4.5，嵌套的元素水平垂直居中

<style>
        .wrap {
            width: 800px;
            height: 300px;
            border: 1px solid red;
            margin: 100px auto;
            /* 设置父元素为弹性盒子 */
            display: flex;
            /* 主轴上的对齐方式 */
            /* 居中对齐 */
            justify-content: center;
            /* 交叉轴的对齐方式 */
            /* 居中 */
            align-items: center;
        }
        
        .wrap div {
            width: 180px;
            height: 200px;
            background-color: pink;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="item">item1</div>
    </div>
</body>

 

 

 

 

 

 

 

 

 

 

 

 

祎2祎
关注
  • 20
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css进阶
weixin_46726946的博客
03-22 240
学习css进阶历程
前端基础知识总结---CSS篇
Web前端开发工程师
09-09 2340
本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！ 目录 1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ 2.CSS 选择符有哪些？ 3.::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。 4.伪类与伪元素的区别 5.CSS 中哪些属性可以继承？ 6.CSS 优先级算法如何计算？ 7.关于伪类 LVHA 的解释? 8.CSS3 新增伪类有那些？ 9.如何居中 div？ 10.disp
CSS进阶
KevinJee_
01-09 145
css选择器二 4、id选择器 通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。 举例： #box{color:red} ...... <p id="box">这是一个段落标签</p> <!-- 对应以上一条样式，其它元素不允许应用此样式 --> &lt...
前端开发学习——CSS进阶
最新发布
2302_80311379的博客
08-04 964
ul、li、dl、dt、dd、form、header、nav、footer等。1、块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等。属性值（颜色取值）：关键字、rgb表示法、rgba表示法、十六进制等。注意点：交集选择器中如果有标签选择器，一定要把标签选择器放在最前面。作用：根据HTML标签嵌套关系，选择父元素后代中满足条件的元素。作用：根据HTML标签嵌套关系，选择父元素子代中满足条件的元素。、b、u、i、s、strong、ins、em、del等。
Web-前端html+css从入门到精通 230. PostCSS插件使用（下）.zip
05-23
在本课程中，我们将深入... PostCSS插件使用（下）"这节课程将带领你深入PostCSS的世界，通过实例学习如何有效地利用插件，提升你的前端开发技能。通过学习，你将能够熟练地运用这些工具，编写出更具现代性的CSS代码。
Web-前端html+css从入门到精通 132. BFC规范（上）.zip
05-23
在Web前端开发中，HTML和CSS是构建网页的基础，它们共同决定了页面的结构与样式。BFC（Block Formatting Context，块级格式化上下文）是CSS布局中的一个重要概念，对于理解和解决网页布局问题有着至关重要的作用。本...
Web-前端html+css从入门到精通 133. BFC规范（下）.zip
05-23
在Web前端开发中，HTML和CSS是构建网页的基石，而BFC（Block Formatting Context，块格式化上下文）则是CSS布局中一个至关重要的概念。本篇将深入探讨BFC规范，帮助初学者从入门到精通，理解并掌握这一关键知识点。 ...
前端开源库-css-shorthand-properties
08-30
CSS的效率和可维护性是前端开发者关注的重要方面，其中，CSS的`shorthand properties`（速记属性）就是提升编码效率的利器。本篇文章将深入探讨CSS速记属性的概念、优势以及常见的速记属性类型。 CSS速记属性允许...
2014年辛星Web前端教程贺岁版：CSS经典应用提升篇
2014年辛星web前端教程贺岁版是针对Web前端开发者的教学资料，专注于CSS的常用效果，作为该系列的第三本教材。这个版本是在原有夏季版的基础上进行扩充和升级，旨在提供更为全面、实用的学习内容，弥补了早期版本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值