CSS3学习笔记
关注
分享
扫一扫
文章平均质量分 64
小豪boy
这个作者很懒，什么都没留下…
展开
-
CSS面试题
一、布局1. 盒子模型的宽度如何计算？<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒模型</title> <style> #box1 {原创 2021-10-17 10:45:49 · 211 阅读 · 0 评论 -
Sass入门
一、Sass官网：Sass中文网。二、VSCode 插件 Live Sass CompilerVisual Studio Code插件Live Sass Compiler可将Sass或Scss实时编译为CSS。1. 安装打开VSCode编辑器，然后按ctrl+P，键入ext install live-sass 。2.用法/快捷方式 Watch Sass从状态栏单击以打开实时编译，然后Stop Watching Sass从状态栏单击以停止实时编译。 按F1或..原创 2021-10-11 20:31:27 · 143 阅读 · 0 评论 -
动画的定义和调用
动画的定义可以使用@keyframes来定义动画，keyframes表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀。动画的调用定义动画之后，就可以使用animation属性调用动画。/*动画名字总时长缓动效果延迟*/animation:r1slinear0s;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...原创 2021-09-05 17:01:00 · 613 阅读 · 0 评论 -
过渡的使用方法
1.过渡的基本使用transition过渡transition过渡属性是CSS3浓墨重彩的特性，过渡可以为一个元素在不同样式之间变化自动添加“补间动画”。transition属性有4个要素。/* 什么属性要过渡 动画时长 变化速度曲线 延迟时间 */transition: width 1s linear 0s;过渡要定义在元素的开始状态上，而不是结束状态上。哪些属性可以参与过渡所有数值类型的属性，都可以参与过渡，比如width、height、left、top、bor..原创 2021-09-03 21:55:02 · 1472 阅读 · 0 评论 -
3D旋转
将transform属性的值设置为rotateX()或者rotateY()，即可实现绕横轴、纵轴旋转。/* 绕横轴旋转 */transform: rotateX(30deg); /* 绕纵轴旋转 */transform: rotateY(30deg);<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>First HTML .原创 2021-09-03 18:45:53 · 126 阅读 · 0 评论 -
2D变形
旋转变形将transform属性的值设置为rotate()，即可实现旋转变形。transform: rotate(45deg);若角度为正，则顺时针方向旋转，否则逆时针方向旋转。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>First HTML Web</title> <style>原创 2021-09-03 16:35:05 · 131 阅读 · 0 评论 -
背景的渐变
线性渐变盒子的background-image属性可以用linear-gradient()形式创建线性渐变背景。/* 渐变方向 开始颜色 结束颜色 */background-image: linear-gradient(to right, blue, red);<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>First原创 2021-09-02 22:24:12 · 119 阅读 · 0 评论 -
盒子的阴影
box-shadow属性box-shadow属性用来实现盒子的阴影。/* x偏移 y偏移 模糊量 颜色 */box-shadow: 10px 20px 30px rgba(0,0,0,.4);<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>First HTML Web</title> <styl原创 2021-09-01 17:03:38 · 121 阅读 · 0 评论 -
圆角的设置
border-radius属性border-radius属性的值通常为px单位，表示圆角的半径。border-radius: 10px;单独设置四个圆角border-radius属性可以单独设置四个圆角。border-radius: 10px 20px 30px 40px;也可以使用小属性。属性 意义 border-top-left-radius 左上角 border-top-right-radius 右上角 border-bottom-le原创 2021-09-01 16:40:25 · 793 阅读 · 0 评论 -
边框的三要素
border属性border属性需要三个要素。/* 依次是线宽度、线型、线颜色 */border: 1px solid red;线型线型值 意义 solid 实线 dashed 虚线 dotted 点状线 边框的三要素小属性四个方向的边框四个方向边框的三要素小属性属性 意义 border-top-width 上边框宽度 border-top-style 上边框线型 border-top-color原创 2021-08-31 12:08:39 · 480 阅读 · 0 评论 -
背景相关属性设置
background-color属性background-color属性表示背景颜色。 背景颜色可以用十六进制、rgb()、rgba()表示法表示。 padding区域是有背景颜色的。background-image属性background-image属性用来设置背景图片，图片路径要写到url()圆括号中，可以是相对路径，也可以是http://开头的绝对路径。background-image: url(images/bg1.jpg);如果样式表是外链的，那么要书写从CSS出..原创 2021-08-31 11:55:54 · 1079 阅读 · 0 评论 -
定位的使用
相对定位相对定位：盒子可以相对自己原来的位置进行位置调整，称为相对定位。位置描述词left 向右移动；right向左移动；top 向下移动；bottom 向上移动。 值可以为负数，即往规定方向相反移动。相对定位的性质相对定位的元素，会在“老家留坑”，本质上仍然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成“影子”，不会对页面其他元素产生任何影响。<!DOCTYPE html><html lang="en"><..原创 2021-08-28 12:13:57 · 200 阅读 · 0 评论 -
浮动的使用
浮动的最本质功能：用来实现并排。float: left;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>First HTML Web</title> <style> div { width: 100px; height: 100px.原创 2021-08-27 21:41:05 · 438 阅读 · 0 评论 -
行内元素和块级元素
display属性display属性类型 是否能并排显示 是否能设置宽高 当不设置width属性时 举例 块级元素 否 是 width自动撑满 div、section、header、h系列、li、ul等 行内元素 是 否 width自动收缩 a、span、em、b、u、i等 <!DOCTYPE html><html lang="en"><head> <meta c原创 2021-08-26 18:24:13 · 277 阅读 · 0 评论 -
认识盒模型
所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型”。 width、height不是盒子总宽高。 盒子的总宽度 = width + 左右padding + 左右border。width属性width属性表示盒子内容的宽度。 width属性表示盒子内容的宽度。width属性的单位通常是px，移动端开发也会涉及百分数、rem等单位。 当块级元素（div、h系列、li等）没有设置width属性时，它将自动撑满，但这并不意味着w..原创 2021-08-26 16:55:48 · 119 阅读 · 0 评论 -
继承性的说明
文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后代所有标签中生效。 color font- 开头的 list- 开头的 text- 开头的 line- 开头的 因为文字相关属性有继承性，所以通常会设置body标签的字号、颜色、行高等，这样就能当做整个网页的默认样式了。就近原则在继承的情况下，选择器权重计算失效，而是“就近原则”。<!DOCTYPE html><html lang="en"><head> <...原创 2021-08-26 14:50:09 · 71 阅读 · 0 评论 -
段落和行相关属性
text-indent属性text-indent属性定义首行文本内容之前的缩进量，缩进两个字符应该写作：<!-- em表示字符宽度 -->text-indent: 2em;line-heightline-height属性用于定义行高。 line-heigh属性的单位可以是以px为单位的数值。line-height: 30px; line-heigh属性也可以是没有单位的数值，表示字号的倍数，这是最推荐的写法。line-height: 1.5; line.原创 2021-08-26 12:06:31 · 203 阅读 · 0 评论 -
字体属性设置
font-family属性font-family属性用于设置字体。font-family: "微软雅黑";字体可以是列表形式，一般英语字体放到前面，后面的字体是前面的字体的“后备”字体。<!-- 字体名称中有空格，必须用引号包裹 -->font-family: serif, "Times New Roman", "微软雅黑";字体通常必须是用户计算机中已经安装好的字体，所以一般来说设置为微软雅黑和宋体较多，设置成其他字体较少 。 如何设置为用户电脑中没有的字体呢？那就必原创 2021-08-26 11:43:08 · 716 阅读 · 0 评论 -
常用文本样式属性
1.color属性color 属性可设置文本内容的前景色。 color 属性主要可以用英语单词、十六进制、rgb()、rgba()等表示法。 英语单词表示法，比如color: red; 仅仅用于学习时临时设置一下颜色，工作时基本不用这样的形式，因为追求精确。十六进制表示法十六进制表示法是所有设计软件中都通用的颜色表示法，设计师给我们的设计图上面标注的颜色，通常为十六进制表示。 比如：colo...原创 2021-08-26 11:07:24 · 1257 阅读 · 0 评论 -
CSS层叠性和选择器权重计算
1.层叠性CSS全名叫做“层叠式样式表”，层叠性是它很重要的性质。层叠性：多个选择器可以同时作用于同一个标签，效果叠加。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>First HTML Web</title> <style> p { ...原创 2021-08-25 23:43:37 · 211 阅读 · 0 评论 -
CSS选择器
传统CSS2.1选择器1.标签选择器标签选择器也称元素选择器、类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有该种标签。标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅。标签选择器“覆盖面”非常大，所以通常用于标签的初始化原创 2021-08-24 15:54:21 · 318 阅读 · 0 评论 -
CSS3的书写位置
内嵌式在学习CSS时，最常使用内嵌式，顾名思义，内嵌在.html文件中。在<head></head>标签对中，书写<style></style>标签对，里面书写CSS语句。外链式可以将CSS单独存为.css文件，然后使用<link>标签引入它。外链式的优点：多个html网页，可以共用一个css样式表文件导入式导入式是最不常见的样...原创 2021-08-24 15:14:28 · 138 阅读 · 0 评论 -
css3简介
CSS（cascadingstylesheet，层叠式样式表）是用来给HTML标签添加样式的语言。CSS3是CSS的最新版本，增加了大量的样式、动画、3D特效和移动端特性等。css的本质CSS就是样式的“清单”，要书写合适的选择器，然后把指定元素的样式“一条一条罗列”出来。CSS没有加减乘除、与或非、循环、选择、判断，CSS不是“编程”，就是简单直接的罗列样式。前端三层 语言 功能 结构层...原创 2021-08-24 15:06:21 · 374 阅读 · 0 评论