css学习笔记

最新推荐文章于 2024-07-13 11:50:40 发布
最新推荐文章于 2024-07-13 11:50:40 发布
阅读量693 收藏 18
点赞数 14
分类专栏： Java编程 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45563821/article/details/140250396
版权

学习视频链接：黑马程序员pink老师

CSS属性书写顺序

  1. 布局定位属性：display/position/float/clear/visibility/overflow（建议第一个写display，这个关系到显示模式）
  2. 自身属性：width/height/margin/padding/border/background
  3. 文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
  4. 其它属性：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient…

CSS三大特性

CSS有三大特性，即层叠性、继承性、优先级。

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。

层叠性原则：

  • 样式冲突，遵循就近原则。那个样式结构近，就执行那个样式。
  • 样式不冲突，不会层叠。

继承性

子标签会继承父标签的某些样式，如文本颜色、字号和行高等。

  • 恰当地使用继承可以简化代码，降低CSS样式的复杂性；
  • 子元素可以继承父元素的样式（text-，font-，line-等元素开头以及color属性可以继承）。
/*行高的继承性*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        body {
            color: aqua;
            /* font: 12px/24px 'Microsoft YaHei'; */
            font: 12px/1.5 Microsoft YaHei; /*1.5 表示当前元素文字大小font-size的1.5倍*/
        }
        div {
            /*子元素继承了父元素body的行高1.5倍*/
            font-size: 12px;
            /*div中的行高为12 * 1.5 */
        }
        p {
            /*子元素继承了父元素body的行高1.5倍*/
            font-size: 14px;
            /* p中的行高为14 * 1.5 */
        }
    </style>
</head>
<body>
    <div>这是一个div</div>
    <p>这是一个段落标签</p>
    <ul>
        <!--
            当前li标签未设置文字大小，则会继承父元素的文字大小
            此时li标签文字大小为12px（继承body），行高为12 * 1.5
        -->
        <li>未指定文字大小</li>
    </ul>
</body>
</html>
  • 行高可以跟单位，也可不跟单位。
  • body行高1.5的写法可以让子元素根据自己文字大小自动调整行高。

优先级

当同一个元素指定多个选择器，就会产生出现优先级。

  • 若选择器相同，则执行层叠性；
  • 若选择器不同，则根据选择器权重执行。

选择器权重

选择器选择器权重
继承 或 *0，0，0，0
元素（标签）选择器0，0，0，1
类选择器，伪类选择器0，0，1，0
ID选择器0，1，0，0
行内样式 style=""1，0，0，0
!important 重要的无穷大

!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 继承 或 *

权重叠加

如果是复合选择器，则会出现权重叠加，需要计算权重。

复合选择器

在CSS中，根据选择器的类型将其分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对几倍呢选择器进行组合形成的。

  • 复合选择器可以更准确、更高效地选择目标元素（标签）；
  • 复合选择器是由两个或多个基础选择器通过不同的方式组合形成的；
  • 常用的复合选择器包括后代选择器、子选择器、并集选择器、伪类选择器等。

后代选择器

后代选择器又称包含选择器，可以选择父元素里面的子元素。

其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

元素1 元素2 {
	样式声明
}

上述语法表示选择元素1里面的所有元素2（后代元素）。

  • 元素1和元素2中间用空格隔开；
  • 元素1是父级，元素2是子级，最终选择的是元素2；
  • 元素2只要是元素1的后代即可。
  • 元素1和元素2可以是任意基础选择器。

子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。

元素1>元素2 {
	样式声明
}

上述语法表示选择元素1里面的所有直接后代（子元素）元素2。

  • 元素1和元素2中间用>隔开；
  • 元素1是父级，元素2是子级，最终选择的是元素2;
  • 元素2必须是元素1的直接后代，后代的后代不是直接后代。

并集选择器

并集选择器可以选择多组标签，同时为它们定义相同的样式。通常用于集体声明。

并集选择器是各选择器通过英文逗号链接而成，任何形式的选择器都可以作为并集选择器的一部分。

元素1,元素2,元素3 {
	样式声明
}
  • 元素之间使用,隔开；
  • 并集选择器通常用于集体声明。

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是用:表示，例如：:hover、:first-child 。

链接伪类选择器

注意事项：为了确保生效，需按照LVHA的顺序声明：:link :visited :hover :active。

a {
	color: blue;
}
/*未访问时的状态*/
a:link {
    color: gray;
}
/*已访问过的状态*/
a:visited {
    color: green;
}
/*鼠标经过时的状态*/
a:hover {
	color: red;
}
/*鼠标按下去时的状态*/
a:active {
    color: yellow;
}

:focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素。

元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示。例如<div>自已占一行，一行可以放多个<span>。

HTML元素一般分为块元素和行内元素两种类型。

块元素

块级元素特点：

  • 独占一行；
  • 高度、宽度、外边距以及内边距都可以设置；
  • 宽度默认为容器（父级宽度）的100%；
  • 块级元素是一个容器和盒子，里面可以放行内或者块级元素。

行内元素

<span>标签是最典型的行内元素。

行内元素的特点：

  • 相邻行内元素在一行上，一行可以显示多个；
  • 高度、宽度直接设置是无效的；
  • 宽度默认为本身内容的宽度；
  • 行内元素只能容纳文本或其它行内元素。

注意

  • 链接里不能在放链接；
  • 特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下显示模式更为安全。

行内块元素

在行内元素中有几个特殊的标签：<img />、<input />、<td>，它们同时具有块元素和行内元素的特点。

行内元素的特点：

  • 和相邻行内元素（行内块）在一行上，但是它们之间会有空白间隙。一行可以显示多个（行内元素特点）；
  • 默认宽度就是它本身内容的宽度（行内元素特点）；
  • 高度、宽度、外边距以及内边距都可以设置（块级元素特点）。

元素显示模式转换

特殊情况下，需要使用到元素模式的转换。

  • 转换为块元素 display: block;
  • 转换为行内元素 display: inline;
  • 转换为行内块display: inline-block;

字体属性

CSS Fonts（字体）属性用于定义字体系列、大小、粗细、和文字样式。

属性表示
font-size字号
font-family字体
font-weight字体粗细
font-style字体样式
font字体连写

字体系列

css使用font-family属性定义文本的字体系列。

  • 各种字体之间必须使用英文状态下的逗号隔开；
  • 一般情况下，如果有空格隔开的多个单词组成的字体，需要加引号。

常见的字体：

body {
    font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; 
}

字体大小

css使用font-size属性来定义字体大小。

  • px（像素）大小是网页中常用的单位（谷歌浏览器默认的文字大小为16px）；
  • 可给body指定整个页面文字的大小。

字体粗细

css使用font-weight属性设置文本字体的粗细。

属性值描述
normal默认值，不加粗
bold粗体
100-900400等同于normal，700等同于bold（数字属性后没有单位）

文字样式

css使用font-style属性设置文本的风格。

属性值作用
normal默认值，标准的字体样式
italic斜体

字体符合属性

字体属性可将上述样式综合来写。

body {
    font: font-style font-weight font-size/line-height font-family;
}
  • 使用font属性时，必须按照上述语法格式中的顺序书写，不能更换顺序，并且每个属性间以空格隔开；
  • 不需要设置的属性可以省略（使用默认值），但必须要保留font-size和font-family属性，否则font属性将不起作用。

文本属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

文本颜色

color属性用于定义文本的颜色。

表示属性值
预定义的颜色值如red、green、blue等
十六进制如#FF0000
RGB代码rgb(255,0,0)或rgb(100%,0%,0%)

对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式。

div {
    /*
    	left：左对齐（默认值；right：右对齐；center：居中对齐。
    */
    text-align: cneter;
}

装饰文本

text-decoration属性规定添加到文本的装饰。可以给文本添加下划线、删除线、上划线等。

属性值描述
none默认，没有装饰线
underline下划线
overline上划线
line-through删除线

文本缩进

text-indent属性用来指定文本的首行的缩进。

/*段落文字首行缩进10px*/
p {
    text-indent: 10px;
}
/*段落文字首行缩进2字符*/
p {
    text-indent: 2em;
}

em是一个相对单位，就是当前元素（font-size）1个文字的大小，若当前元素未设置大小，则会按照父元素的1个文字大小。

行间距

line-height属性用于设置行间的距离（行高）。

行间距由上间距、文本高度、下间距组成。当文本高度与行高相同时，上间距和下间距都为0。

p {
    line-height: 20px;
}

背景

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

背景颜色

background-color属性定义了元素的背景颜色。

background-color: 颜色值;

一般情况下元素背景颜色默认值是transparent（透明），也可手动指定背景颜色为透明色。

background-color: transparent;

背景图片

background-image属性描述了元素的背景图像。

/*
	url(图片路径) 
	括号里的路径不需要加引号
	none 默认的 无背景图
*/
background-image: none | url(url)

背景平铺

background-repeat属性可以对背景图像进行平铺。

background-repeat: repeat | no-repeat | repeat-x | repeat-y
参数值作用
repeat默认，背景图像在纵向和横向上平铺
no-repeat背景图像不平铺
repeat-x背景图像在横向上平铺
repeat-y背景图像在纵向上平铺

背景图片位置

background-position属性可以改变图片在背景中的位置。

/*
	x代表x坐标，y代表y坐标
	可以使用方位名词或精确单位
*/
background-position: x y;
参数值说明
length百分数/由浮点数字和单位标识符组成的长度值
positiontop|center|bottom|left|right 方位名词

参数是方位名词

  • 如果指定的两个值都是方位名词，则两个值前后顺序无关，例如left top与top left效果一样。
  • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

参数是精确单位

  • 如果参数是精确坐标，那么第一个是x坐标，第二个是y坐标；
  • 如果只指定一个数值，那该数值一定是x坐标，另一个是垂直居中。

参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。

背景图像固定

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment: scroll | fixed

scroll：背景图像随对象内容滚动。

fixed：背景图像固定。

背景复合写法

/*
	background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
*/
background: transparent url(image.jpg) repeart-y fixed top;

背景色半透明

background: rgba(0,0,0,0.3);
  • 最后一个参数是alpha透明度，取值范围在0-1之间；
  • 最后一个参数可以把0省略掉，例如：background: rgba(0,0,0,.3);；
  • 背景半透明是指盒子背景半透明，盒子里面的内容不受影响；

盒子模型

盒子模型组成

盒子模型（Box Model）就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个装东西的容器。

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括边框、外边距、内边距和实际内容。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F8ATwZfW-1720397187624)(https://i-blog.csdnimg.cn/direct/9f5681196815477a8722740def1072f1.jpeg)]

边框

border可以设置元素的边框。边框由边框宽度（粗细）、边框样式、边框颜色三部分组成。

边框会影响盒子的大小。

border: border-width || border-style || border-color

border-width单位通常使用px。

border-style：none（无边框）|hidden（隐藏边框）|solid（实线）|dashed（虚线）|dotted（点线）|double（双线边框）|…

border: 1px solid blue;   /*对于顺序没有要求*/

表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

border-collapse: collapse;
  • collapse：合并。
  • **border-collapse: collapse;**表示相邻边框合并在一起。

内边距

padding属性用于设置内边距，即边框与内容之间的距离。

值的个数表达含义
padding: 5px;上下左右都有5像素的内边距
padding: 5px 10px;上下是5像素，左右是10像素
padding: 5px 10px 20px;上5像素，左右10像素，下20像素
padding: 5px 10px 20px 30px;上5像素，右10像素，下20像素，左30像素

设置内边距之后，也影响了盒子实际大小。如果盒子本身未指定width/height属性，则设置padding不会撑开盒子大小。

外边距

margin属性用于设置外边距，即控制盒子与盒子之间的距离。

margin属性简写的方式同内边距的表示一致。

外边距可以让块级盒子水平居中，但必须满足以下两个条件：

  • 盒子必须指定了width；
  • 盒子左右的外边距都设置为auto。
margin: 0 auto;

注：以上方式只适合与块级元素水平居中，行内块元素或行内元素水平居中给其父元素添加text-align: center;即可。

外边距合并

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素存在下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直间距不是margin-bottom与margin-top之和，而是两个值中最大的一个。取两个值中较大的那个值这种现象被称为相邻块元素垂直外边距的合并。

所以尽量只给一个盒子添加margin值。

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案

  • 可以为父元素定义上边框；
  • 可以为父元素定义上内边距；
  • 可以为父元素添加overflow: hidden。

清除内外边距

网页元素大多带有默认的内外边距，er’qie不同浏览器默认的也不一致。因此在布局前，需要清除网页元素的内外边距。

* {
    margin: 0; /*清除外边距*/
    padding: 0; /*清除内边距*/
}

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。

圆角边框

border-radius属性用于设置元素的外边框圆角。

border-radius: length;

radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果。

  • 参数值可以是数值，也可以是百分比；
  • 如果是正方形，想要设置为圆，把数值修改为高度或者宽度的一半即可，或者直接写成50%；
  • 如果是个矩形，设置为高度的一半即可；

以上写法是一个简写属性，它可以跟四个值，分别表示左上角、右上角、右下角、左下角。

border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

盒子阴影

box-shadow属性可以为盒子添加阴影。

box-shadow: h-shadow v-shadow blur spread color inset;
值描述
h-shadow必须，水平阴影的位置，允许为负值
v-shadow必须，垂直阴影的位置，允许为负值
blur可选，模糊距离
spread可选，阴影的尺寸
color可选，阴影的颜色
inset可选，将外部阴影（outset）改为内部阴影
  • 默认的是外阴影（outset），但是不可以写外阴影，否则导致阴影失效；
  • 盒子阴影不占用空间，不会影响其它盒子的排列。

文字阴影

text-shadow属性将阴影应用于文本。

text-shadow: h-shadow v-shadow blur color;
值描述
h-shadow必须，水平阴影的位置，允许为负值
v-shadow必须，垂直阴影的位置，允许为负值
blur可选，模糊距离
color可选，阴影的颜色

传统网页布局的三种方式

网页布局的本质：用CSS来摆放盒子，把盒子摆放到相应的位置。

CSS提供了三种传统布局方式（盒子如何进行排列顺序）；

  • 普通流（标准流）
  • 浮动
  • 定位

标准流

标准流（普通流、文档流），所谓标准流，就是标签按照规定好默认方式排列。

  1. 块级元素会独占一行，从上向下顺序排列。

    常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table

  2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则会自动换行。

    常用元素：span、a、i、em等

标准流是最基本的布局方式。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或另一个浮动框的边缘。

选择器 {
    float: 属性值;
}
属性值描述
none元素不浮动（默认值）
left元素向左浮动
right元素向右浮动

浮动的特性

  1. 浮动元素会脱离标准流（脱标）；
  2. 浮动的元素会一行显示并且元素顶部对齐；
  3. 浮动的元素会具有行内块元素的特性。

特性一

  1. 脱离标准普通流的控制（浮）移动到指定位置（动），俗称脱标。
  2. 浮动的盒子不再保留原先的位置。

特性二

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。

注：浮动的元素是互相贴在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

特性三

浮动元素会具有行内块元素的特性。

任何元素都可以浮动，无论原来是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

  • 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。
  • 浮动的盒子中间是没有缝隙的，是紧挨在一起的。

浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置，网页布局一般采用的策略：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局的第一准则。

浮动布局注意点

1、浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

2、一个元素浮动了，理论上其余的兄弟元素也要浮动。

一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其它兄弟也应该浮动，以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

清除浮动

选择器 {
    clear: 属性值;
}
属性值描述
left不允许左侧有浮动元素（清除左侧浮动的影响）
right不允许右侧有浮动元素（清除右侧浮动的影响）
both同时清除左右两侧浮动的影响

清除浮动的策略：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其它盒子。

为什么需要清除浮动？

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

  • 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。
清除浮动本质
  • 清除浮动的本质是清除浮动元素造成的影响
  • 如果父盒子本身有高度，则不需要清除浮动
  • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
清除浮动方法
  • 额外标签法也称为隔墙法，是W3C推荐的做法
  • 父级添加overflow属性
  • 父级添加after元素
  • 父级添加双伪元素

额外标签法

额外标签法会在浮动元素末尾添加一个空的标签。例如：<div style="clear:both"></div>，或者其他标签（如<br/>等）。

父级添加overflow

给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。

  • 优点：代码简洁
  • 缺点：无法显示溢出的部分

:after伪元素法

:after方式是额外标签法的升级版。是给父元素添加以下样式：

/*
	假设clearfix为父元素的一个类名
*/
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix { /*IE6、7专有*/
    *zoom: 1;
}
  • 优点：没有增加标签，结构更简单
  • 缺点：照顾低版本浏览器

双伪元素清除浮动

也是给父元素添加样式，样式如下：

/*
	假设clearfix为父元素的一个类名
*/
.clearfix:before,.clearfic:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

定位

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。

定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其它盒子。

定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移

定位模式用于指定一个元素在文档中的定位方式。

边偏移则决定了该元素的最终位置。

定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为以下四个：

值语义
static静态定位
relative相对定位
absolute绝对定位
fixed固定定位

边偏移

边偏移就是定位盒子移动到最终位置。有top、bottom、left和right 4个属性。

边偏移属性示例描述
toptop: 80px顶端偏移量，定义元素相对于其父元素上边线的距离
bottombottom: 80px底部偏移量，定义元素相对于其父元素下边线的距离
leftleft: 80px左侧偏移量，定义元素相对于其父元素左边线的距离
rightright: 80px右侧偏移量，定义元素相对于其父元素右边线的距离

静态定位

静态定位是元素的默认定位方式，勿定位的意思。

选择器 {
    position: static;
}
  • 静态定位按照标准流特性摆放位置，它没有边偏移
  • 静态定位在布局时很少用到

相对定位

相对定位是元素在移动位置的时候，相对与它原来的位置来说的。

选择器 {
    position: relative;
}

相对定位的特点

  • 它是相对于自己原来的位置来移动的（移动位置时参照点是原来它本身的位置）
  • 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）

绝对定位

绝对定位是元素在移动位置时，相对于它祖先元素而言的。

选择器 {
    position: absolute;
}

绝对定位的特点

  • 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
  • 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素作为参考点来移动位置
  • 绝对定位不再占有原先的位置

子绝父相

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

  1. 子级绝对定位，不会占用位置，可以放到父盒子里面的任何一个地方，不会影响其它的兄弟盒子。
  2. 父盒子需要加定位限制子盒子在父盒子内显示。
  3. 父盒子布局时，需要占用位置，因此父盒子只能是相对定位。

相对定位经常用来作为绝对定位的父级。

因为父级需要占用位置，因此使用相对定位；子盒子不需要占用位置，则使用绝对定位。

子绝父相不是永远不变的，如果父元素不需要占用位置，子绝父绝也存在。

固定定位

固定定位是元素固定于浏览器可视区的位置。

主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

选择器 {
    position: fixed;
}

固定定位特点

  1. 以浏览器的可视窗口为参照点移动元素

    • 跟父元素没有任何关系
    • 不随着滚动条的滚动而滚动

  2. 固定定位不再占有原来的位置

固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

固定定位小技巧：固定在版心右侧位置。

例如 回到顶部 样式，固定定位贴着版心（内容区域）右侧对齐。

  1. 让固定定位的盒子left: 50%，放到浏览器可视区（可看作版心）的一半位置。
  2. 让固定定位的盒子margin-left：版心宽度的一半距离。多走版心宽度的一半位置。

粘性定位

粘性（sticky）定位可以被认为是相对定位和固定定位的混合。

选择器 {
    position: sticky;
    top: 10px;
}

粘性定位的特点

  • 以浏览器的可视窗口为参照点移动元素（固定定位特点）
  • 粘性定位占有原先的位置（相对定位特点）
  • 必须添加top、left、right、bottom中的一个才有效

与页面滚动搭配使用，兼容性较差，IE不支持。

定位叠放次序

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）。

选择器 {
    z-index: 1;
}
  • 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
  • 如果属性值相同，则按照书写顺序，后来居上
  • 数字后面不能加单位
  • 只有定位的盒子才有z-index属性

定位拓展

绝对定位的盒子居中

加了绝对定位的盒子不能通过margin: 0 auto;水平居中，但是可以通过以下计算方法实现水平和垂直居中。

  1. left: 50%;让盒子的左侧移动到父级元素的水平中心位置。
  2. margin-left: -盒子本身宽度的一半px;让盒子向左移动自身宽度的一半。

定位特殊特性

绝对定位和固定定位类似于浮动。

  • 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
  • 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素的都不会出发外边距合并的问题。

绝对定位和固定定位会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住标准流盒子里面的文字（图片）。

但是绝对定位（固定定位）会压住下面标准流所有的内容。

浮动之所以不会压住文字，是因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素。

元素的显示与隐藏

本质：让一个元素在页面中隐藏或者显示出来。

  • display显示隐藏，但是不保留原来位置
  • visibility显示隐藏，但是保留原来的位置
  • overflow溢出显示隐藏，但是只对于溢出的部分进行处理
display属性

display属性用于设置一个元素应如何显示。

  • **display: none;**隐藏元素
  • **display: block;**除了转换为块级元素之外，同时还有显示元素的意思

display隐藏元素后，不再占有原来的位置。

visibility可见性

visibility属性用于指定一个元素应可见还是隐藏。

  • **visibility: visible;**元素可见
  • **visibility: hidden;**元素隐藏
参数说明
inherit继承上一个父对象的可见性
visible对象可视
hidden对象隐藏
collapse主要用来隐藏表格的行或列，隐藏的行或列可被其它内容使用

visibility隐藏元素后，继续占有原来的位置。

如果隐藏元素想要原来的位置，就用visibility: hidden

如果隐藏元素不想要原来的位置，就用display: none

overflow溢出

overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

属性值描述
visible不剪切内容也不添加滚动条
hidden不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll不管超出内容否，总是显示滚动条
auto超出自动显示滚动条，不超出不显示滚动条

一般情况下，溢出的内容都不显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，需慎用overflow: hidden; ，因为它会隐藏多余的部分。

高级技巧

精灵图

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

精灵图的使用

使用精灵图核心：

  1. 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
  2. 这个大图片也称为sprites 精灵图 或者雪碧图。
  3. 移动背景图片位置，此时可以使用background-position。
  4. 移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同。
  5. 因为一般情况下都是往上往左移动，所以数值是负值。
  6. 使用精灵图时需要精确测量，每个小背景图片的大小和位置。

综上，使用精灵图核心总结：

  • 精灵图主要针对小的背景图片使用。
  • 主要借助于背景位置来实现（background-position）。
  • 一般情况下精灵图都是负值。（网页中的坐标：x轴右边是正值，左边是负值；y轴下是正值，上是负值。）

字体图标

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。

精灵图有诸多优点，但是缺点也很明显、

  1. 图片文件还是比较大的。
  2. 图片本身放大和缩小会失真。
  3. 一旦图片制作完毕，需要更换非常复杂。

字体图标（iconfont）的出现很好地解决了上述问题。

字体图标可以为前端提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

字体图标的优点

  • 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
  • 灵活性：本质其实就是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等。
  • 兼容性：几乎支持所有的浏览器。

注意：字体图标不能替代精灵图技术，只是对工作中图标部分技术的提升和优化。

总结：

  1. 若遇到一些结构和样式比较简单的小图标，就是字体图标。

    若遇到一些结构和样式复杂一点的小图片，就用精灵图。

CSS三角

使用div标签实现一个red颜色的三角形。

div {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border: 10px solid transparent;
    border-left-color: red;
}

鼠标样式

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

li {
    cursor: pointer;
}
属性值描述
default箭头，默认
pointer小手
move移动
text文本
not-allowed禁止

轮廓线 outline

给表单添加outline: 0;或者outline: none;样式之后，就可以去掉默认的蓝色边框。

input {
    outline: none;
}

防止拖拽文本域 resize

实际开发中，文本域右下角是不可以拖拽的。

textarea {
    resize: none;
}

文本域标签放在一行，不然文本域中会存在间隙。

vertical-align属性

vertical-align属性经常用于设置图片或者表单（行内块元素）和文字垂直对齐。（用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效）

vertical-align: baseline | top | middle | bottom
值描述
baseline默认，元素放置在父元素的基线上
top把元素的顶端与行中最高元素的顶端对齐
middle把此元素放置在父元素的中部
bottom把元素的顶端与行中最低的元素的顶端对齐

解决图片底部默认空白缝隙问题

图片和文字默认是基线对齐的，所以图片底部会存在空白缝隙。

解决方法

  • 给图片添加vertical-align: middle | top | bottom等。
  • 把图片转换为块级元素display: block;。

溢出的文字 省略号显示

单行文本溢出 省略号显示

单行文本溢出显示省略号，必须满足三个条件：

  1. 先强制一行内显示文本。

    white-space: nowrap;  /*默认normal自动换行*/

  2. 超出的部分隐藏。

    overflow: hidden;

  3. 文字用省略号替代超出的部分。

    text-overflow: ellipsis;

多行文本溢出显示省略号

多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）

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

常见布局技巧

margin负值运用

  1. 让盒子margin往左侧移动-1px，此时正好压住相邻盒子边框。
  2. 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位【保留位置】，如果有定位，则加z-index）。

CSS三角强化

width: 0;
height: 0;
/*只保留右边的边框有颜色*/
border-color: transparent red transparent transparent;
/*样式都是实现*/
border-style: solid;
/*上边框宽度要大，右边框宽度稍小，其余边框为0*/
border-width: 22px 8px 0 0;

CSS初始化

不同浏览器对一些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，需要对CSS进行初始化。

CSS初始化就是重设浏览器样式，也称为CSS reset。

/*把所有的标签内外边距清零*/
* {
    margin: 0;
}
/*em 和 i 斜体的文字不倾斜*/
em,i {
    font-style: normal;
}
/*去除li的小圆点*/
li {
    list-style: none;
}
img {
    /*border: 0; 兼容低版本浏览器，若图片外包含了链接存在边框的问题*/
    border: 0;
    /*消除图片底侧存在缝隙的问题*/
    vertical-align: middle;
}
button {
    /*当鼠标经过button按钮时，鼠标变成小手*/
    cursor: pointer;
}
a {
    color: #666;
    text-decoration: none;
}
a:hover{
    color: #c81623;
}
button,input {
    font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif
}
body {
    /*抗锯齿性，让文字显示更加清晰*/
    -webkit-font-smoothing:antialiased;
	background-color:#fff;
	font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
	color:#666
}
.hide,.none {
    display:none
}
/*清除浮动*/
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0;
}
.clearfix {
    *zoom: 1;
}

Unicode编码字体

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时出现乱码的问题。

例如：

  • 黑体\9ED1\4F53
  • 宋体\5B8B\4F53
  • 微软雅黑5FAE\8F6F\96C5\9ED1

HTML5的新特性

新增的语义化标签

  • <header>头部标签
  • <nav>导航标签
  • <article>内部标签
  • <section>定义文档某个区域
  • <aside>侧边栏标签
  • <footer>尾部标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FZDLccIw-1720397187627)(https://i-blog.csdnimg.cn/direct/ec3023c6da094ad89f5bcc5ee72bb266.png)]

注

  • 这种语义化标准主要是针对搜索引擎的
  • 这种新标签页面中可以使用多次
  • 在IE9中，需要把这些元素转换为块级元素

新增的多媒体标签

视频<video>

当前<video>元素支持三种视频格式（mp4、webm、ogg），但尽量使用mp4格式。

<video src="文件地址" controls="controls"></video>

音频<audio>

当前<audio>元素支持三种音频格式（mp3、wav、ogg）。

<audio src="文件地址" controls="controls"></audio>

新增的input类型

属性值说明
type=“email”限制用户输入必须为Email类型
type=“url”限制用户输入必须为url类型
type=“date”限制用户输入必须为日期类型
type=“time”限制用户输入必须为时间类型
type=“month”限制用户输入必须为月类型
type=“week”限制用户输入必须为周类型
type=“number”限制用户输入必须为数字类型
type=“tel”手机号码
type=“search”搜索框
type=“color”生成一个颜色选择表单

新增的表单属性

属性值说明
requiredrequired表单拥有该属性表示其内容不能为空，必填
placeholder提示文本表单的提示信息，存在默认值将不显示
autofocusautofocus自动聚焦属性，页面加载完成自动聚焦到指定表单
autocompleteoff/on当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示在字段中填写的选项。默认已经打开，如autocomplete=“on”，关闭autocomplete=“off”。需要放在表单内，同时加上name属性，同时成功提交。
multiplemultiple可以多选文件提交

可以通过以下设置方式修改placeholder里面的字体颜色：

input::placeholder {
    color: red;
}

CSS3的新特性

新增选择器

属性选择器

属性选择器可以根据元素特定属性的来选择元素，这样就可以不用借助类或id选择器。

选择符简介
E[alt]选择具有alt属性的E元素
E[att=“val”]选择具有att属性且属性值等于val的E元素
E[att^=“val”]匹配具有att属性且只以val开头的E元素
E[att$=“val”]匹配具有att属性且值以val结尾的E元素
E[att*=“val”]匹配具有att属性且值中含有val的E元素

结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素。

选择符简介
E:first-child匹配父元素中的第一个子元素E
E:last-child匹配父元素中最后一个E元素
E:nth-child(n)匹配父元素中的第n个子元素E
E:first-of-type指定类型E的第一个
E:last-of-type指定类型E的最后一个
E:nth-of-type(n)指定类型E的第n个

**nth-child(n)**选择某个父元素的一个或多个特定的子元素。

  • n可以是数字、关键字和公式
  • n如果是数字，就是选择第n个子元素，里面数字
  • n可以是关键字：even偶数，odd奇数
  • n可以是公式：常见的公式如若n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略
公式取值
2n偶数
2n+1奇数
5n5 10 15…
n+5从第5个开始（包含第5个）到最后
-n+5前5个（包含第5个）…

nth-child(n)会把所有的盒子都排列序号。执行时先看第一个:nth-child(1)，之后回去看前面。

nth-of-type(n)会把指定元素的盒子排列序号，执行顺序也是先看:前面指定的元素，之后回去看:nth-of-type(n)。

  • 结构伪类选择器一般用于选择父级里面的第几个孩子
  • nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
  • nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后在根据E找第n个孩子
  • 关于nth-child(n)里的n是从0开始计算的
  • 若是无序列表，使用nth-child较多
  • 类选择器、属性选择器、伪类选择器权重为10

伪元素选择器

伪元素选择器可以利用CSS创建新标签元素，而不需要HTML，从而简化HTML结构。

选择符简介
::before在元素内部的前面插入内容
::after在元素内部的后面插入内容

注：

  • before和after创建一个元素，但是属于行内元素
  • 新创建的这个元素在文档树中是找不到的，故称之为伪元素
  • 语法：element::before {}
  • before和after必须有content属性
  • before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
  • 伪元素选择器和标签选择器一样，权重为1

CSS3盒子模型

CSS3中可以通过box-sizing来指定盒模型，有2个值：context-box、border-box，这样计算盒子大小的方式就发生了改变。

  • **box-sizing: content-box; **盒子大小为width+padding+border（之前默认的计算方式）
  • **box-sizing: border-box;**盒子大小为width

如果盒子模型修改为box-sizing: border-box;，那padding和border就不会撑大盒子（前提padding和border不会超过width宽度）。

图片变模糊

CSS3滤镜filter

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

filter: 函数();

例如：

filter: blur(5px); /*blur模糊处理，数值越大越模糊*/

CSS3 calc函数

**calc()**此CSS函数在声明CSS属性值时执行一些计算。

width: calc(100% - 80px);

括号里面可以使用+ - * /来进行计算。

CSS3过渡

过渡（transition）是CSS3中具有颠覆性的特征之一，在不使用Flash或Javascript的情况下，当元素从一种样式变化为另一种样式时为元素添加效果。

过渡动画：是从一个状态 渐渐的过渡到另外一个状态。

经常同:hover一起搭配使用。

transition: 要过度的属性 花费时间 运动曲线 何时开始;
  • 属性：想要变化的css属性，宽度高度 背景颜色 内外边距皆可。若想要所有的属性都过度，使用all即可
  • 花费时间：单位是秒（必须有单位），例如0.5s
  • 运动曲线：默认是ease（可以省略）
  • 何时开始：单位是秒（必须有单位）可以设置延迟触发时间，默认0s（可省略）
div {
    width: 100px;
    height: 100px;
    background-color: red;
    /*多属性过渡，用逗号隔开*/
    transition: width .5s ease 1s,htight .5s ease 1s;
}
div:hover {
    width: 200px;
    height: 200px;
}

2D转换

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。

转换可以简单理解为变形。

  • 移动：translate
  • 旋转：rotate
  • 缩放：scale

2D转换是改变标签在二维平面上的位置和形状的一种技术。

移动translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

transform: translate(x,y); 
/*可分开写*/
transform: translateX(n);
transform: translateY(n);
  • 定义2D转换中的移动，沿着X和Y轴移动元素
  • translate最大的优点：不会影响到其它元素的位置
  • translate中的百分比单位是相对于自身元素 translate: (50%,50%);
  • 对行内标签没有效果

旋转rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

transform: rotate(度数);
  • rotate里面是度数，单位是deg，例如 rotate(45deg)
  • 角度为正时，顺时针；为负时，逆时针
  • 默认旋转的中心点时元素的中心点

转换中心点transform-origin

transform-origin: x y;
  • 参数x和y用空格隔开
  • x、y默认转换的中心点时元素的中心点(50% 50%)
  • 可给x、y设置像素或方位名词（top、bottom、left、right、center）

缩放scale

transform: scale(x,y);
  • 参数x、y用逗号隔开
  • transform: scale(1,1);宽和高都放大一倍，相对于没有放大
  • transform: scale(2,2);宽和高都放大了2倍
  • transform: scale(2);只写一个参数，第2个参数则和第一个参数一样，相当于scale(2,2)
  • transform: scale(0.5,0.5);缩小
  • scale缩放最大的优势是可以设置转换中心点缩放，默认以中心点缩放，而且不影响其它盒子

2D转换综合写法

同时使用多个转换，其格式如下：

transform: translate() rotate() scale() ...;
  • 上述顺序的写法会影响转换的效果。（先旋转会改变坐标轴方向）
  • 同时有位移和其它属性时，需将位移放到最前

动画

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

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

基本使用

制作动画分为两步：

  1. 先定义动画
  2. 在使用（调用）动画

1、用keyframes定义动画（类似定义类选择器）

@keyframes 动画名称 {
    /*开始状态*/
    0% {
        transform: translateX(0); 
    }
    /*结束状态*/
    100% {
        transform: translateX(480px);
    }
}

动画序列

  • 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
  • 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
  • 动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数
  • 用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%

2、元素使用动画

div {
    width: 200px;
    height: 200px;
    background-color: red;
    /*调用动画*/
    animation-name: 动画名称;
    /*持续时间*/
    animation-duration: 2s;
}

常用属性

属性描述
@keyframes规定动画
animation所有动画属性的简写属性，除了animation-play-state属性
animation-name规定@keyframes动画的名称（必须）
animation-duration规定动画完成一个周期所花费的秒或毫秒，默认是0（必须）
animation-timing-function规定动画的速度曲线，默认是ease
animation-delay规定动画何时开始，默认是0
animation-direction规定动画是否在下一个周期逆向播放，默认是normal，alternate逆播放
animation-iteration-count规定动画被播放的次数，默认是1，还有infinite
animation-play-state规定动画是否正在运行或暂停，默认是正在运行running，暂停pause
animation-fill-mode规定动画结束后状态，保持forwards回到起始backwards

属性简写

animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
  • 简写属性里面不包含animation-play-state
  • 暂停动画：animation-play-state: puased; 经常和鼠标经过等其它配合使用
  • 想要动画返回来，不是直接跳回来：animation-direction: alternate;
  • 盒子动画结束后，停在结束位置：animation-fill-mode: forwards;

速度曲线细节

animation-timing-function：规定动画的速度曲线，默认是ease。

值描述
linear动画从头到尾的速度是相同的，匀速
ease默认，动画以低速开始，然后加快，在结束前变慢
ease-in动画以低速开始
ease-out动画以低速结束
ease-in-out动画以低速开始和结束
steps()指定了时间函数中的间隔数量（步长）

3D转换

  • 3D位移（移动）：translate3d(x,y,z)
  • 3D旋转：rotate3d(x,y,z)
  • 透视：perspective
  • 3D呈现：transfrom-style

特点

  • 近大远小
  • 物体后面遮挡不可见

三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-APB9wTRZ-1720397187628)(https://i-blog.csdnimg.cn/direct/8d285bdca4a445ed8acfc8023bb539cb.png)]

  • x轴：水平向右 x右边是正值，左边是负值
  • y轴：垂直向下 y下面是正值，上面是负值
  • z轴：垂直屏幕 往外面是正值，往里面是负值

3D移动translate3d

3D移动是在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。

  • translform: translateX(100px)：仅仅在x轴上移动
  • transform: translateY(100px)：仅仅在y轴上移动
  • transform: translateZ(100px)：仅仅在z轴上移动（一般使用px单位）
  • transform: translate3d(x,y,z)：其中x、y、z分别指要移动的轴的方向上的距离

透视perspective

在2D平面产生近大远小视觉立体，但是只是效果二维。

  • 如果想在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）。
  • 透视，也称为视距：视距就是人的眼睛到屏幕的距离。
  • 距离视觉点越近的，在电脑平面成像越大，越远成像越小。
  • 透视的单位是像素。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VCzB0HeS-1720397187628)(https://i-blog.csdnimg.cn/direct/d5f18b07abc546648d3c38b82642a2a2.png)]

透视写在被观察元素的父盒子上面的

d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。

z：就是z轴，物体距离屏幕的距离，z轴越大（正值），看到的物体就越大。

translateZ

transform: translateZ(100px)：仅仅是在z轴上移动。有了透视，就能清楚地看到translateZ引起的变化了。

3D旋转rotate3d

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。

  • transform: rotateX(45deg)：沿着x轴正方向旋转45度
  • transform: rotateY(45deg)：沿着y轴正方向旋转45度
  • transform: rotateZ(45deg)：沿着z轴正方向旋转45度
  • transform: rotate3d(x,y,z,deg)：沿着自定义轴旋转，deg为旋转的角度；x、y、z表示旋转轴的矢量，是表示是否希望沿着该轴旋转
/*沿着x轴旋转45度*/
transform: rotate3d(1,0,0,45deg);
/*沿着x轴和y轴的对角线旋转45度*/
transform: rotate3d(1,1,0,45deg);

左手准则

x轴 rotateX

  • 左手的手拇指指向x轴的正方向
  • 其余手指的弯曲方向就是该元素沿着x轴旋转的（正）方向

y轴 rotateY

  • 左手的手拇指指向y轴的正方向
  • 其余手指的弯曲方向就是该元素沿着y轴旋转的方向（正值）

z轴 rotateZ（不需要透视，平面上旋转）

  • 左手的手拇指指向z轴的正方向
  • 其余手指的弯曲方向就是该元素沿着z轴旋转的方向（正值）

3D呈现transform-style

  • 控制子元素是否开启三维立体环境
  • transform-style: flat;默认，子元素不开启3d立体空间
  • transform-style: preserve-3d;子元素开启立体空间
  • 代码写给父级，但是影响的是子盒子

浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，新版本的浏览器无须添加。

私有前缀

  • -moz-：代表Firefox浏览器私有属性
  • -ms-：代表IE浏览器私有属性
  • -webkit-：代表safari、chrome私有属性
  • -o-：代表Opera私有属性
/*圆角边框*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
lskj
关注
  • 14
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS学习笔记
m0_58761900的博客
09-18 3045
5.1 边框:border 5.2 内边距：padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局：flex 7.2 水平方向的排列方式：justify-content 7.3 垂直方向的排列方式：align-items
CSS 学习笔记
weixin_42098295的博客
05-06 1258
定位（Positioning）：static, relative, absolute, fixed, sticky。组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)。媒体查询（Media Queries）：根据不同的屏幕尺寸或设备特性应用不同的样式。属性选择器：根据元素属性选择，如 [type="text"]。Grid：二维布局模型，提供网格系统，进行更复杂的布局设计。伪元素选择器：如 ::before, ::after。
css学习笔记1
qq_42236791的博客
12-12 914
HTML（结构）、CSS（表现）、行为（JavaScript）CSS的全称：层叠样式表（Cascading Style Sheets）。CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽高等。简单理解：CSS可以美化HTML，让HTML更漂亮。核心思想：HTML搭建结构，CSS添加样式，实现了：结构与样式的分离。
EPICS工具CSS学习笔记
qq_43456972的博客
10-13 2203
控制系统工作室(CSS)是一项实现控制系统相关的应用，主要针对的是操作员界面。它是基于目前的软件技术（Java、Eclipse），并特别强调了互操作性。 使用Centos7.0系统作为EPICS环境开发，搭建了CSS基础的控件操作，并成功运行。
CSS学习笔记目录
wz_1992的博客
05-30 432
CSS学习笔记之基础教程（一） CSS学习笔记之基础教程（二） CSS学习笔记之中级教程（一） CSS学习笔记之中级教程（二） CSS学习笔记之中级教程（三） CSS学习笔记之高级教程（一） CSS学习笔记之高级教程（二） CSS学习笔记之高级教程（三） CSS学习笔记之高级教程（四）
前端css基础学习笔记
a_big_panda的博客
01-22 906
例如： 效果：例如：效果：例如：效果：选择页面中对应的标签（找她），方便后续设置样式（改她）例如：效果：例如：效果：注意：一个id选中多个标签也有效果，但不符合规范，规范是一个id选择器只选中一个标签例如：效果：例如：效果：例如：效果：注意点：例如：效果：例如：效果：注意：注意：例如：效果：例如：效果：注意：例如：效果：例如：效果：注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置例如：效果：注意：开发中会使用text-decoration：none；清除a标签默认的下
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
基于CSS两种菜单创建方式
最新发布
sunbeacher的博客
07-13 681
HTML多种场景下需要菜单的实现，这里提供两种方式： （1）基于CSS的POPUP式菜单 特征：按需显示POPUP菜单，但布局是浮动的。 （2）覆盖式弹出菜单。 特征：按需显示菜单，菜单以弹出窗口模式显示，会覆盖下面的内容
CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）
朝阳39的博客
07-09 622
仅对已定位的元素（）有效，默认值为0，可以为负值。
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 1245
title>充电效果
css画半圆&&画圆弧
M1512415的博客
07-12 146
【代码】css画半圆&&画圆弧。
CSS关于居中的问题
热爱WebGIS的博客
07-10 640
由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感。我们可以用百分比来表示，子元素相对父元素移动 50%的距离后，再根据子元素的外边距进行调整。值是写死的，如果 son 的宽度发生改变，子元素也无法水平居中。是写死的，如果父元素的宽度发生改变，子元素就无法水平居中了。子绝父相，子元素设置以下属性，也能进行水平垂直居中。子元素 y 轴移动的距离是父子元素高度差的一半，子元素 x 轴移动的距离是父子元素宽度差的一半。子元素相对父元素移动 50%的距离后，使用。
html&css基础
antyuki的博客
07-09 769
/
CSS技巧专栏：一日一例 2.纯CSS实现 多彩边框按钮特效
uu0216的博客
07-09 898
content:attr(alt); 通过attr函数 获取本标签的alt值，之所以要这么做，是因为after生成的填充色的图层，会覆盖到按钮上面，导致按钮上写的文字不可见。所以，我们要通过content来输出按钮上的文字。这样写，也是为了让样式和内容脱离。这样我们在html的代码上，给 button 控件写上 alt文字，就可以通过css获取这个文字并输出了。这样，也方便后台程序通过程序动态修改 alt标签输出 的文字，达到修改按钮文字的目标，而不需要去手动修改css文件中的文字。
CSS上下悬浮特效
m0_56164131的博客
07-09 473
要实现一个上下悬浮的特效，可以使用CSS的@keyframes规则和动画属性。
CSS【详解】边框 border，边框-圆角 border-radius，边框-填充 border-image，轮廓 outline
朝阳39的博客
07-10 1049
template > < div class = " border-dashed " > 1:1的虚线 </ div > </ template > < style scoped > .border-dashed {< template > < div class = " border-dashed " > 1:1的虚线 </ div > </ template > < style scoped > .border-dashed {
移动端CSS的学习笔记。
01-19
移动端CSS的学习笔记。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值