css部分笔记

伪类选择器

注:顺序不可随意更换

:link未访问的链接

:visited已访问的链接

:hover鼠标移动到链接上

:active选定的链接

点击查看代码 
       /*:link未访问的链接*/
        a:link{
            font-size: 20px;
        }
        /*:visited已访问的链接*/
        a:visited{
            font-size: 20px;
            color: purple;
        }
        /*:hover鼠标移动到链接上*/
        a:hover{
            font-size: 20px;
            color: red;
        }
        /*:active选定的链接，点击时的颜色*/
        a:active{
            font-size: 20px;
            color: #00bf00;
        }

结构伪类选择器

下面的n都是可以是一个数字1234，一个关键字odd/even，或者一个公式2n / 2n+1 /3n+1 等/暂不支持次方

①E:nth-child(n) :匹配属于当前父类型E的第 N 个子元素，父子可以类型不同 (就是当前爸爸的第几个儿子)

E:first-child :选取属于其父元素的首个子元素的指定选择器

E:last-child :选取属于其父元素的最后一个子元素的指定选择器

E:nth-last-child(n) ：选择器匹配E元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
（即匹配属于当前父类型E的倒数第 N 个子元素，父子可以类型不同 (就是当前爸爸的倒数第几个儿子) ）

标签显示模式

块级元素和行内元素

块级元素：

  • 从新行开始
  • 可改变宽度，高度，外行距，内行距。
  • 宽度默认100%
  • 可容纳内联元素和其他块元素

行内元素：

  • 不会自动换行
  • 宽和高无效，但水平方向上的padding和margin可以设置。
  • 仅能容纳文本或其他行内元素

行内块元素：行内元素中的特殊标签<img> <input/> <td>可以对他们进行宽高和对齐设置

  • 和相邻行内元素在同一行上，但之间会有空白缝隙
  • 默认宽度是它本身内容的宽度
  • 高度，宽度，外边距以及内边距都可以控制

显示模式转换

块级转换成行内标签显示模式：display:inline;
行内转换为块级标签显示模式：display:block;
将行内元素转变为行内块元素显示模式:display:inline-block;

css复合选择器

交集选择器

由两个选择器组成，第一个为标签选择器，第二个为class选择器

点击查看代码 
 .pink {
            color: pink;
        }
        /*要设置颜色为粉色，字号为30px*/
  p.pink {
            font-size: 30px;
        }

并集选择器

多个不同的的标签拥有相同的样式，通常用于集体声明，选择器之间用“，”隔开

点击查看代码 
 div,
 p,
 h3,
 .shiliu {
            color: red;
        }

.one,p,#test{color:red}表示这三个选择器都会被执行为红色

后代选择器

用来选择元素或元素的后代，写法将外层标签写在前面，内层标签写在后面，中间用空格隔开。
.class p {color:red}class中的p标签为红色
div p {color:red}div里的p标签会变为红色

子代选择器

仅用来选择子代
.class>p {color:red}

属性选择器

选取标签带有某些特殊属性的选择器
1.
仅改变百度，京东的颜色

点击查看代码 ``` Title 百度 京东 微博 淘宝 网易 ```
2.

仅将文本框中的文字改变颜色

点击查看代码 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[type=text] {
            color: grey;
        }
    </style>
</head>
<body>
<input type="text" value="文本框">
<input type="text" value="文本框">
<input type="submit">
<input type="submit">
<input type="reset">
<input type="reset">
</body>
3.

div[class ^=font] 将属性名前缀为font的标签改为蓝色
div[class $=f01] 将属性名后缀为f01的标签颜色改为紫色
div[class *=jd] 将属性名中任意位置含有jd的标签颜色改为棕色

点击查看代码 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div[class^=font] {
            color: #1c9ef4;
        }
        div[class$=f01] {
            color: purple;
        }
        div[class*=jd] {
            color: #7d0000;
        }
    </style>
</head>
<body>
<div class="font01">属性选择器1</div>
<div class="font02">属性选择器2</div>
<div class="font03">属性选择器3</div>
 
<div class="sxxzq-f01">属性选择器4</div>
<div class="side-f01">属性选择器5</div>
 
<div class="change-jd-01">属性选择器6</div>
<div class="jd-llhkj-nav">属性选择器6</div>
</body>

伪元素选择器（：：）

  • E::first-letter 文本的第一个字或单词
  • E::first-line 文本的第一行
  • E::selection 可改变鼠标长按选中的文本样式
<style>
        p::first-letter {
            color: #1c9ef4;
            font-size: 30px;
        }
        p::first-line {
            color: purple;
        }
        p::selection {
            color: yellow;
        }
</style>
  • E::before 和 E::after
    在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须结合content属性使用
    注：这两种是在div盒子内部的前后插入元素
div::before {
            content: "我";
            font-size: 30px;
        }
div::after {
            content: "22岁";
        }

伪元素概念:
之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查
注意：

  • 伪元素:before和:after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。
  • 伪元素不占位置

（插补：在写样式时注意权重问题）

css的书写规范

  1. 选择器与{}之间必须包含空格
    例如：div
  2. 属性名和冒号之间不能有空格，但冒号和属性值之间必须有空格
    例如：font-size: 30px;
  3. 选择器的规范，并集选择器中包含的多个选择器，每个选择器必须独占一行
    例如：
点击查看代码 
 div,
 p,
 h3,
 .shiliu {
            color: red;
        }
  1. 选择器的嵌套尽量不超过3级
    例如：
点击查看代码 
.main>ul>li>a{
            color:green;
        }
可改为：
 
.main>li>a{
            color:green;
        }
  1. 属性必须另起一行
  2. 属性定义后要加分号

css背景

1. 背景颜色

background-color: ;

2. 背景图片

background-image: url("");

3. 背景平铺：

background-repect: repect-x;
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。

4. 图片背景位置：图片在盒子里的位置

background-position: top left;

值 描述
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right		 如果您仅规定了一个关键词，那么第二个值将是"center"。
默认值：0% 0%。
x% y% 第一个值是水平位置，第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果您仅规定了一个值，另一个值将是 50%。
xpos ypos 第一个值是水平位置，第二个值是垂直位置。
左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
如果您仅规定了一个值，另一个值将是50%。
您可以混合使用 % 和 position 值。
center y% 可以混搭，此处表示水平居中，垂直位置为y%

5. 背景附着

background-attachment: ;

值 描述
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。

6. 背景简写

background: 颜色 图片地址 背景平铺 背景滚动 背景位置
background: red url("图片.jpg") repeat-x scroll center center;

7. 背景透明

background: rgba(0,0,0,0.3);
最后一个参数值为透明度，介于0~1之间

8.背景缩放

background-size: ;

值 描述
100px 100px 设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
50% 50% 以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
cover (常用) 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
(图片可能超出背景区域)
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
(图片一定在背景区域内)

注：为了使图片不失真，尽量只改变一个参数

9. 多背景图片

(1). 每组属性用逗号分隔。
(2). 如果背景图片之间存在重叠，前面的背景图会覆盖在后面的背景图上。
(3). 为避免背景颜色被遮挡，背景颜色通常定义在最后一行。

点击查看代码 
div{
        width: 1000px;
        height: 700px;
        background: url("一梦.jpg") no-repeat left top,
                    url("一梦.jpg") no-repeat right 100% hotpink;
    }

10. 凹凸文字

使用多个文字阴影叠加得来的效果，每组属性用逗号分隔。
凸起效果：text-shadow: 1px 1px 1px black, -1px -1px 1px white;
凹陷效果：text-shadow: -1px -1px 1px black, 1px 1px 1px white;

11. 文本的修饰

text-decoration： ；

值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。(链接默认会带有下划线)
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。

渐变效果

放在background-image中使用

线性渐变

线性渐变：linear-gradient（）

.jb01 {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-image: linear-gradient(red, blue);
            /* 默认顺序从上到下 */
            border: 1px solid black;
        }
 
        .jb02 {
            width: 200px;
            height: 200px;
            margin: 20px auto;
            background-image: linear-gradient(to right, red 20%, yellow 60%, blue 100%);
            /* 从左到右渐变（还可用度数，从左就是90deg），红色从20%（也可加长度）开始渐变。黄色从60%开始渐变 */
            border: 1px solid black;
        }

径向渐变

（按圆或椭圆渐变）：radial-gradient（）

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

值 描述
shape 定义渐变的形状。
可能的值：
ellipse（默认）
circle
size 定义渐变的尺寸（可用数字表示，椭圆要定义两个数字）。
可能的值：
farthest-corner（默认）
closest-side
closest-corner
farthest-side
position 定义渐变的位置。默认值是 "center"。
start-color, ..., last-color 色标是您要在其间呈现平滑过渡的颜色。该值由一个颜色值组成，其后是一个可选的停止位置（0％ 到 100％ 之间的百分比值，或沿渐变轴的长度值）。

重复性渐变

repeating-linear-gradient（）

background-image: repeating-linear-gradient(to right, red 10px, yellow 30px, blue 50px);

css的三大特性

1. 层叠性

样式冲突：就近原则，哪个样式离结构更近，就执行那个。
样式不冲突就不会层叠

点击查看代码 
div{
        color: blue;
        font-size: 14px;
    }
div{
        color: pink;
    }
上述样式为颜色为pink，字体为14px

2. 继承性

子元素有默认继承父元素样式的特点
可以继承的常见属性：

1、color

2、font开头的元素：font-style、font-weight、font-size、font-family

3、text开头的元素：text-indent、text-align

4、line开头的元素：line-height

5、...

注意点：可以通过调试工具判断样式是否可以继承

3. 优先级

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式

优先级公式：继承 < 通配符选择器 < 标签选择器 < 伪类选择器 = 类选择器 < id选择器 < 行内样式 < !important
color: red!important;
权重可以叠加

盒子模型

盒子的概念：

1、页面中的每一个标签，都可以看做是一个盒子，通过盒子的视角更方便经行布局
2、浏览器在渲染(显示)网页时，会将网页中的元素看作是一个个的矩形区域，我们也形象的称之为盒子

盒子模型：

css中规定盒子分别由：内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成，这就是盒子模型。

盒子边框（border）

作用：设置边框粗细、边框样式、边框颜色效果

单个属性：

作用 属性名 属性值
边框粗细 border-width 数字+px
边框样式 border-style 实线solid、虚线dashed、点线dotted、双实线double
边框颜色 border-color 颜色选取
点击查看代码 
border-top: 1px blueviolet solid;  上边框
border-bottom: 1px red solid;      下边框
border-left: 3px blue solid;       左边框
border-right: 3px green solid;     右边框

合并细线表格

border-collapse: collapse表示边框合并在一起

值 描述
separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit 规定应该从父元素继承 border-collapse 属性的值。

圆角矩形

border-radius: 10px;
border-radius: 50%;50%则为圆

值 描述
length 定义圆角的形状。
% 以百分比定义圆角的形状。
inherit 规定应该从父元素继承 border-collapse 属性的值。

border-radius: 10px 40px;左上和右下为10px，右上和左下为40px

值 描述
一个值 四角
两个值 左上角和右下角
左下角和右上角
三个值 左上角 右上角和左下角 右下角
四个值 左上角 右上角 右下角 左下角（顺时针）

内边距（padding）

值 描述
padding:20px; 上下左右内边距都为20px
padding:20px 30px; 上下 ， 左右
padding:20px 30px 40px; 上 ，左右 ，下
padding:20px 30px 40px 50px; 上，右，下，左（顺时针）
padding-left: 20px; -right右 -top上 -bottom下

外边距及盒子居中对齐（margin）

值 描述
margin:20px; 上下左右外边距都为20px
margin:20px 30px; 上下 ， 左右
margin:20px 30px 40px; 上， 左右， 下
margin:20px 30px 40px 50px; 上，右，下，左（顺时针）
margin-left: 20px; -right右 -top上 -bottom下
左右外边距设置为auto，可实现块级元素的水平居中 （必须是块级元素，并指定宽度）

文字水平居中text-align:center;
盒子水平居中margin:0px auto;
box-sizing:border-box;padding，border不撑开盒子，宽度包含在width中

外边距折叠现象：

合并现象

场景：垂直布局的块级元素，上下的margin会合并(margin-bottom和margin-top合并在一起，而不是叠加 )

结果：最终两者距离为margin的最大值

解决方法：避免就好，只给其中一个盒子设置margin即可

塌陷现象

场景：互相嵌套的块级元素，父子元素紧贴的margin-top会合并作用在父元素上

结果：导致父元素一起往下移动

解决方法：

1、给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）（不推荐）

2、给父元素设置overflow：hidden

3、转换成行内块元素

4、设置浮动

5、用双伪元素清除法可以解决margin的塌陷问题

css3盒模型

盒子阴影

文字阴影：text-shadow：水平距离 垂直距离 模糊 阴影颜色
盒子阴影：box-shadow:水平距离 垂直距离 模糊距离 阴影尺寸(影子大小) 阴影颜色 内/外阴影（内阴影为inset，默认为外阴影）
直接添加两个阴影box-shadow:(第一个阴影格式)，（第二个阴影格式）中间用，隔开

值 描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

浮动（float）

最开始的作用：文字环绕图片效果

img{
float：right；（图片在右边，文字环绕）
}

现在的作用：网页布局，让块级元素在同一行显示

场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右

属性名：float <a name="float"></a>

属性名 效果
left 左浮动
right 右浮动
none 不浮动

浮动的元素总是招离他最近的父级元素对齐，但不会超出内边距的范围

两个盒子浮动，给他们都加左浮动，他们是顶对齐

section {
            width: 500px;
            height: 300px;
            background-color: pink;
        }
        section div:first-child{
            width: 200px;
            height: 200px;
            background-color: #1c9ef4;
            float: left;
        }
        section div:last-child{
            width: 200px;
            height: 230px;
            background-color: #9998e0;
            float: left;
        }

浮动的特点：

1、浮动元素会脱离标准流（简称：脱标），在标准流中不占位置（相当于从地面飘到了空中）

2、浮动元素比标准流高出半个级别，可以覆盖标准流中的元素

3、浮动找浮动，下一个浮动元素会在上一个浮动元素后面 左右浮动（会飘到同一行）

4、浮动元素会收到上面元素边界的影响（上面的盒子如果是块级元素，会独占一行，那么下面的盒子九无法浮动到上面，如果把上面的元素display属性改为行内元素或行内块元素，那么下面浮动的盒子就会飘到上面盒子同一行）

5、浮动元素有特殊的显示效果：添加浮动，元素具有行内块的特性，行内元素也可加浮动

可以设置宽高(能够给行内元素设置宽高)

注意点：

浮动的元素不能通过text-align：center或者 margin：0 auto来让浮动元素本身水平居中（浮动元素里面的内容是可以居中的）

清除浮动带来的影响

影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

原因：子元素浮动后脱标-->不占位置，父级元素如果没有设置宽高，那么默认高度为0，下面的盒子会跑到上面去

目的：需要父元素有高度，从而不影响其他网页元素的布局

清除方法一——直接设置父元素高度。

优点：简单粗暴，方便

缺点：有些布局中不能固定父元素高度，如：新闻列表，京东推荐模块

清除方法二——额外标签法

操作：

1、在父元素内容的最后添加一个块级元素，

2、给添加的块级元素设置 clear：both

缺点：会在页面中添加额外的标签，会让页面的HTML结构变的复杂，现在实际开发中很少使用了

清除方法三——单伪元素清除法

操作：用伪元素代替了额外标签

基本写法：

clearfix::after{
    content:"";
    display:block;
    clear:both;
}

补充写法：

.clearfix::after{
content:'';
display:block;
clear:both;
/*补充代码：在网页中隐藏伪元素*/
height:0;
visibility:hidden;
}

优点：项目中使用，直接给标签加类即可清除浮动

清除方法四——双伪元素清除法

操作：

after:清除浮动

before:解决盒子margin塌陷问题

.clearfix::before,
.clearfix::after{
content:'';
display:table;
}
.clearfix::after{
clear:both;
}

优点：项目中使用，直接给标签加类即可清除浮动

也可以解决margin的塌陷问题

清除方法五——给父元素设置overflow

操作：

直接给父元素设置 overflow:hidden

优点：方便

补充 块级格式上下文(BFC)

块级格式上下文 是Web页面的可视CSS渲染的一部分，是盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

创建BFC的方法：

1、html标签是BFC盒子

2、浮动元素是BFC盒子

3、行内块元素是BFC盒子

4、overflow属性取值不是 visible。如 aotu、hidden。。。

.。。。

BFC盒子的创建特点

1、BFC盒子会默认包裹住内部子元素（标准流、浮动），这样即使父元素不设置高度，包裹住子元素后也会有高度——>应用：清除浮动

2、BFC盒子本身与子元素之间不存在margin的塌陷问题——>应用：解决margin的塌陷

3、。。。

定位

元素的定位属性主要包括边偏移和定位模式两部分

边偏移

top：20px；  （距离其 父元素的上边线 的距离）
bottom：20px （距离其 父元素的下边线 的距离）
left:20px;   （距离其 父元素的左边线 的距离）
right:20px;  （距离其 父元素的右边线 的距离）

一般上下只定义一个，左右只定义一个

定位模式（position）

选择器{position：属性值；}
常见属性值：

定位方式 属性值
静态定位 static
相对定位 relative
绝对定位 absolute
固定定位 fixed

静态定位

介绍：静态定位是默认值，就是之前认识的标准流，可以不写

position：static；

注意点：对边偏移无效

一般用来清楚定位

相对定位

介绍：自恋型定位，相对于自己之前的位置进行移动

position：relative;

特点：

1、需要配合方位属性（边偏移）实现移动

2、相对于自己原来位置(没有移动前)进行移动

3、之前的位置继续保留（不脱标）

应用场景：

1、配合绝对定位组cp（子绝父相）

2、用于小范围的移动

绝对定位

介绍：拼爹型定位，相对于非静态定位的父元素进行移动

position：absolute；

特点：

1、需要配合方位属性实现移动

2、默认相对于整个浏览器可视区域进行移动（默认）

3、在页面中不占位置——>完全脱标（下面的盒子会补上，占用原本绿盒子的位置）

4、普通盒子的左右定位使用margin：auto；但对绝对定位无效。
定位的盒子想要水平或垂直居中：

  • 1.首先left：50%（top：50%）；
  • 2.然后走自己外边距负一半值。
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;

注：

  • 若父级没有定位，位置以浏览器为准，并且不占之前位置
  • 若父级有定位，依据最近的 已经定位的 父元素进行定位

子绝父相

子级是绝对定位的话，父级要用相对定位

子绝父相的好处：
父元素是相对定位，则对网页布局影响最小（虽然子绝父绝也可以，但是绝对定位是脱标的，所以下面的元素会补位上来，会对网页布局造成一定的影响）
父级加相对定位，可以控制父级位置，子级加绝对定位，随着父级定位且不占位置。

固定定位

介绍：死心眼型定位，与父级没有关系，只相对于浏览器移动
（绝对定位absolute 的特殊形式）

position:fixed;
固定定位的盒子一定要写宽和高，除非有内容撑开

特点：

1、需要配合方位属性实现移动

2、相对于浏览器可视区域进行移动

3、在页面中不占位置——>完全脱标，不随滚动条滚动

应用场景：让盒子固定在屏幕中的某个位置，如 头部标题 侧边栏

叠加次序

多个盒子叠加，想要调整重叠定位元素的堆叠次序，可以对定位元素应用z-index层叠等级属性。(只有相对，绝对，固定定位有此属性)

不同布局方式元素的层级关系

定位 > 浮动 > 标准流

不同定位之间的层级关系

相对、绝对、固定默认层级相同

此时写在下面的元素层级更高，会覆盖上面的元素

更改定位元素的层级

场景：改变定位元素的层级

属性名： z-index：0；

属性值：正整数，负数或0

数字越大，层级越高

定位模式的转换

元素添加绝对定位和固定定位后，会转换为行内块模式。
一些行内元素添加了绝对定位，固定定位，浮动后可以不用转换模式，直接给高度和宽度。

显示与隐藏

display 显示

值 描述
none 此元素不会被显示，不保留位置，但没有被删除
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值） 
<style>
    div:hover img {
        display: block;
    }
</style>
 
<body>
    <div>二维码
        <img src="imges/erweima.webp" alt="">
    </div>
</body>

visibility 可见性

visibility：hidden；（对象隐藏，但仍保留位置）
visibility：visible；（对象可视）

overflow溢出

若当前对象的内容超出指定高度及宽度时如何管理内容

  • visible：默认 不剪切内容也不显示滚动条
  • auto：超出自动显示滚动条
  • hidden：超出不部分隐藏掉
  • scroll：不管内容超出与否，总显示滚动条

css高级技巧

用户界面设置

鼠标样式cursor

<body>
    <ul>
        <li style="cursor: default;">箭头</li>
        <li style="cursor: pointer;">小手</li>
        <li style="cursor: text;">文本</li>
        <li style="cursor: move;">移动</li>
    </ul>
</body>
<style>
        li{
            cursor: pointer;
        }
</style>
<body>
    <ul>
        <li>小手</li>
    </ul>
</body>

轮廓outline

outline:width style color（类 边框）
outline: 1px solid red;

边框线在轮廓线里面

但一般是去掉轮廓线
outline：0；

防止拖拽文本域resize

文本域：

resize：none；防止文本域的拖拽

垂直对齐vertical-align

认识基线

基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）

文字对齐问题

场景：解决行内/行内块元素垂直对齐问题，对于块级元素无效

问题：图片和文字默认的是基线对齐，想要的效果为中线对齐

属性名：vertical-align

属性值 效果
baseline 默认，基线对齐
top 顶线对齐
middle 中线对其
bottom 底线对齐

vertical-align 可以解决的问题：

1、解决行内元素和行内块元素同一行时高度不一致，没有完全对齐问题（如：文本框text和表单按钮button 无法对齐），也可以设置浮动（float）解决

2、input 和 图片 无法对齐问题

3、div中的文本框，默认无法贴顶问题（input 标签垂直对齐方式有关）

4、div标签不设高度由图片撑开，此时图片下面会存在额外间隙问题（因为默认图片会和文字基线对齐）

  • 解决方法一：给图片设置垂直对齐方式：vertical-align：top / middle;
  • 方法二：转换成块级元素 display：block

5、使用line-height让img标签垂直居中问题

溢出的文字隐藏

work-break自动换行

主要处理英语单词

属性 效果
normal 使用浏览器默认换行规则
break-all 允许单词内换行
keep-all 只能在 半角空格 或 连字符- 处换行（整个单词都不在框内）

white-space

设置或检索对象内文本显示方式

属性 效果
normal 默认处理
nowrap 强制在同一行内显示所有文本，直到 文本结束 或遇到 br标签 才换行

text-overflow文字溢出

前提是：

  1. 文本强制一行显示 添加white-space: nowrap;
  2. 再添加overflow属性 overflow：hidden；

text-overflow：clip / ellipsis

属性 效果
clip 不显示忽略标记（...），只是简单的裁剪
ellipsis 当文本溢出后显示 忽略标记（...）

css精灵技术（sprite）

处理网页背景图像的方式

场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图

优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度

精灵图的使用（从一张大图中选择一张小图）：

1、创建一个盒子

2、量取小图片大小，将小图片的宽高设置给盒子

3、将精灵图设置为盒子的背景图片

4、通过测量小图片左上角坐标，设置给盒子的background-position:-x -y（因为图片是向上移动，因此x,y都为负值）

字体图标（iconfont）

一些网页的小图标，看似是图片，实际是字体。

图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。字体图标(iconfont)就解决了我们的问题。

优点：

  • iconfont跟图片一样可以改变透明度、旋转度…
  • 由于其本质是文字，可以很随意的改变颜色、产生阴影、透明效果等等…
  • 占用空间更小，加载更快，但携带的信息并没有减少
  • 几乎支持所有的浏览器

字体图标使用流程


上传生成字体包

当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件， 而且需要生成的是兼容性的适合各个浏览器的。

推荐网站： http://icomoon.io

icomoon字库

IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。 内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。
步骤：下载 -> 解压 -> 将font文件复制到项目中去（其他文件也不要删）

推荐网站： http://www.iconfont.cn/

阿里icon font字库

这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。 一个字，免费，免费！！

第一步：在样式里面声明字体： 告诉别人我们自己定义的字体

放在css的style标签中

@font-face {
   font-family: 'icomoon';/* “icomoon”可改，但下面要对应" */
   src:  url('fonts/icomoon.eot?7kkyc2');
   src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
     url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
     url('fonts/icomoon.woff?7kkyc2') format('woff'),
     url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }

第二步：使用字体

span {
        font-family: "icomoon";
        /* 这里要和上面声明的名字相同 */
        font-size: 100px;
        /* 还可以像字体一样设置大小 */
        color: skyblue
        /* 修改颜色 */
}

第三步：添加结构

将箭头指示的东西，粘贴到标签里

<body>
    <span></span>
</body>
或者
 
<style>
 div::before {
            font-family: "icomoon";
            content: "\e900";
        }
</style>
 
<body>
    <div></div>
</body>

追加新图标到原来库里面

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做

把压缩包里面的selection.json 从新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可。

滑动门

使各种特殊形状的背景能够随着元素中文本内容的多少而变化

它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。

核心技术

核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏

一般的经典布局都是这样的：

<style>
        * {
            margin-top: 0;
            padding: 0;
        }
 
        a {
            display: inline-block;
            background: url(imges/推拉门.png) no-repeat;
            height: 100px;
            /* 没有宽时图片不显示 */
            padding-left: 60px;
        }
 
        span{
            display: inline-block;
            background: url(imges/推拉门.png) no-repeat right;
            height: 100px;
            padding-right: 50px;
            right: 0;
            line-height: 100px;
        }
    </style>
    <li>
      <a href="#">     
        <span>导航栏内容</span>     
      </a>     
    </li>

总结：

  1. a 设置 背景左侧，padding撑开合适宽度。

  2. span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。

  3. 之所以a包含span就是因为 整个导航都是可以点击的。

过渡（transition）

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

通常和 :hover搭配使用

transition: 要过渡的属性 花费时间 运动曲线 何时开始;（前两个必写。）如果有多组属性变化，用逗号隔开

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

运动曲线示意图：（linear ， ease ， ease-in ， ease-out ， ease-in-out）

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: width 0.5s ease 0.1s, height 0.5s ease-in 0.1s;
        }
 
        div:hover {
            width: 400px;
            height: 300px;
        }
</style>

注：

  • transition写在div中，若写在：hover中鼠标移出则没有恢复动画效果
  • 谁做过渡，样式写到谁里面
  • 如果想要所有的属性都变化过渡，写一个 all 就可以了

2D变形（transform）

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

通常和 :hover搭配使用

移动 translate(x, y)

可以改变元素的位置，x、y可为负值；

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

transform：translateX(x)仅水平方向移动（X轴移动）

transform：translateY(Y)仅垂直方向移动（Y轴移动）

transform:translate(-50%,-50%);  /* 走的自己的一半 */

定位居中：

div{
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);  /* 走的自己的一半 ，替代了原来的margin:;写法*/
}

缩放 scale(x,y)

transform：scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）

transform：scaleX(x)元素仅水平方向缩放（X轴缩放）

transform：scaleY(y)元素仅垂直方向缩放（Y轴缩放）

<style>
        div {
            width: 400px;
            margin: 100px auto;
            overflow: hidden;
            /* 溢出的不显示 */
        }
 
        img {
            /* img做动画。因此过渡一定要加到img中 */
            transition: all 0.5s;
        }
 
        div:hover img {
            /* 一定要标注是div里面的img产生效果 */
            transform: scale(1.2);
        }
    </style>
</head>
 
<body>
    <div>
        <img src="imges/qiche.jpg" alt="" width="400px">
    </div>
</body>

旋转 rotate(deg)

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

deg代表度数

transform:rotate(45deg)；

transform-origin可以调整元素转换变形的原点

如果是4个角，可以用 left top之类，

如果想要精确的位置， 可以用 px 像素。

div {
            transform-origin: left top;
            transform: rotate(45deg);
        }
        /* 改变元素原点到左上角，然后进行顺时旋转45度 */
 
 div {
            transform-origin: 10px 10px;
            transform: rotate(45deg);
        }
        /* 改变元素原点到x 为10  y 为10，然后进行顺时旋转45度 */

注：调整中心点，不能在：hover中调整

仅仅定义上面的图片有隐藏的效果，因此达到翻面效果

backface-visibility: hidden;

倾斜 skew(deg, deg)

向左倾斜为正值，向右倾斜为负值
向上倾斜为正值，向下倾斜为负值

transform:skew(30deg,0deg);

该实例通过skew方法把元素水平方向上倾斜30度，垂直方向保持不变。

可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

3D变形（transform）

左手法则

x左边是负的，右边是正的

y 上面是负的， 下面是正的

z 里面是负的， 外面是正的

1、rotateX()

就是沿着 x 立体旋转.

img {
  transition:all 0.5s ease 0s;
}
img:hove {
  transform:rotateX(180deg);
}

2、rotateY()

沿着y轴进行旋转

img {
  transition:all 0.5s ease 0s;
}
img:hover {
  transform:rotateY(180deg);
}

3、rotateZ()

沿着z轴进行旋转

img {
  transition:all .25s ease-in 0s;
}
img:hover {
  /* transform:rotateX(180deg); */
  /* transform:rotateY(180deg); */
  /* transform:rotateZ(180deg); */
  /* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}

透视(perspective)

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

  • 透视原理： 近大远小 。

  • 浏览器透视：把近大远小的所有图像，透视在屏幕上。

  • perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置

perspective：500px；视距越小，3D效果越明显

perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

div {
            perspective: 500px;
        }
 
        img {
            transition: all 2s ease 0s;
        }
 
        img:hover {
            transform: rotateY(180deg);
        }

移动（translate）

transform:translateX(10px);

translateX(x)

仅水平方向移动**（X轴移动）

主要目的实现移动效果

translateY(y)

仅垂直方向移动（Y轴移动）

translateZ(z)

transformZ的直观表现形式就是大小变化
实质是XY平面相对于视点的远近变化

translateZ 的值越大，物体离视点越近，物体就越大。

综合写法：

transform:translate3d(x,y,z);
注：其中，x和y可以是长度值，也可以是百分比，（百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；）z只能设置长度值

开门案例

<style>
        section {
            width: 233px;
            height: 155px;
            border: 1px solid;
            background: url(imges/kecheng.png) no-repeat;
            margin: 100px auto;
            position: relative;
            perspective: 500px;
        }
 
        .right,
        .left {
            position: absolute;
            width: 50%;
            height: 100%;
            background-color: brown;
        }
 
        .left {
            left: 0;
            border-right: 1px solid #000;
            transition: all 0.5s;
            transform-origin: left;
            /* 调整中心点，不能再：hover调整 */
        }
 
        .right {
            right: 0;
            border-left: 1px solid #000;
            transition: all 0.5s;
            transform-origin: right;
        }
 
        .right::before,
        .left::before {
            width: 20px;
            height: 20px;
            border: 1px solid pink;
            border-radius: 50%;
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
 
        .right::before {
            left: 5px
        }
 
        .left::before {
            right: 5px;
        }
 
        section:hover .right {
            transform: rotateY(120deg);
        }
 
        section:hover .left {
            /* 若鼠标放到left元素上变换，则不稳定 */
            transform: rotateY(-120deg);
        }
    </style>
</head>
 
<body>
    <section>
        <div class="right"></div>
        <div class="left"></div>
    </section>
</body>

动画（animation）

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

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

值 描述
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，默认0s
animation-timing-function 规定动画的速度曲线。默认ease
animation-delay 规定在动画开始之前的延迟。默认0s
animation-iteration-count 规定动画应该播放的次数。默认1；infinite为一直播放
animation-direction 规定是否应该轮流反向播放动画 normal正常；reverse反方向；alternate先正后反；alternate-reverse先反后正。
animation-play-state paused 规定动画已暂停。running 规定动画正在播放。
animation-fill-mode 规定动画在播放之前或之后，其动画效果是否可见

定义动画的步骤

  • 通过@keyframes定义动画；
  • 将这段动画通过from to 或者百分比，分割成多个节点；然后各节点中分别定义各属性；
  • 在指定元素里，通过 animation 属性调用动画。
div {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation: go 2s ease 0s 2 alternate;
            /* 引用动画 */
            /* infinite无限循环 */
            /* 一般情况下只用前两个属性 */
        }
 
        /* @keyframes go {
            定义动画
            from {起始点
                transform: translateX(0);   
            }
 
            to { 结束点
                transform: translateX(600px);  
            }
        } */
 
        @keyframes go {
            0% {
                transform: translate3d(0, 0, 0);
            }
 
            25% {
                transform: translate3d(400px, 0, 0);
            }
 
            50% {
                transform: translate3d(400px, 400px, 0);
            }
 
            75% {
                transform: translate3d(0, 400px, 0);
            }
 
            100% {
                transform: translate3d(0, 0, 0);
            }
 
        }
    </style>

伸缩布局（css3）

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

方向：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

伸缩布局三等份

自由度高，既可以平分宽度，还可以固定宽度

section {
            width: 80%;
            height: 200px;
            border: 1px solid pink;
            margin: 100px auto;
            /* 父级盒子添加flex */
            display: flex;
            /* 伸缩布局模式 */
        }
 
        div {
            height: 100%;
            flex: 1;
            /* 子盒子添加份数 */
            margin: 0 5px;
        }
 
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
</body>

min-width：280px：最小宽度为280px，小于则不缩放。
max-width：1280px：最大宽度为1280px，大于则不缩放。

flex-direction调整主轴方向（默认为水平方向）

flex-direction: column 垂直排列
flex-direction: column-reverse反转垂直排列
flex-direction: row 水平排列
flex-direction: row-reverse反转水平排列

justify-content调整主轴对齐

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配，也会在发生内容溢出时影响项目的对齐

写法：justify-content: flex-start;放在父类中

属性值 含义
flex-start 从主轴的头部开始排
flex-end 从主轴的尾部开始排
center 在主轴上居中对齐
space-between 左右贴近父盒子，中间的平均分布空白间隙（左右没有空隙）
space-around 平分主轴上的剩余空间 （每个子元素两边都有空隙）相当于左右外边距

align-items调整垂直对齐

类似上个样式

写法：align-items: flex-start;

属性值 含义
flex-start 上对齐
flex-end 底对齐
center 垂直居中
stretch 拉伸子元素高度以适应父容器（子元素没有高度的前提下）

flex-wrap控制是否换行

flex-wrap: nowrap;

值 描述
nowrap 默认值。规定弹性项目不会换行。(会压缩)
wrap 规定弹性项目会在需要时换行。
wrap-reverse 规定弹性项目会在需要时换行，以反方向。（最后一块在上，其他几块在下）
*initial 将此属性设置为其默认值。
*inherit 从其父元素继承此属性。

align-content多行垂直对齐

针对多行使用，而align-items只针对一行使用

使用时

  • 必须对父元素设置display：flex；
  • 排列方式为横向排列flex-direction：row wrap；并设置换行
值 描述
stretch 默认值。行拉伸以占据剩余空间。
center 朝着弹性容器的中央对行打包。
flex-start 朝着弹性容器的开头对行打包。
flex-end 朝着弹性容器的结尾对行打包。
space-between 行均匀分布在弹性容器中。
space-around 行均匀分布在弹性容器中，两端各占一半。

flex-flow

flex-flow 属性是以下属性的简写属性：

  • flex-direction 调整主轴方向（默认为水平方向）
  • flex-wrap 控制是否换行

flex-flow：flex-direction flex-wrap；（排列方向 换不换行）

order

用css来控制盒子的前后顺序。

用整数来定排列顺序，数值小在前，可为0和负数，默认为0

order：0；给子元素此属性

posted @   准备开始  阅读(74)  评论(0)  编辑  收藏  举报
相关博文：
· JS-API-BOM
· 移动端WEB开发流式布局
· HTML+CSS笔记
· CSS：浮动
· 前段（三）
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛