网站的内部链接如何做,网站建设直通车关键词设置,网络公司起名,如何做网络推广CSS真题合集#xff08;二#xff09; 11. css3新增特性12. css3动画12.1 关键帧动画 (keyframes)12.2 animation12.3 transition12.4 transform 13. grid网格布局13.1 使用display: grid或display: inline-grid的HTML元素。13.2 定义网格13.3 13.4 自动填充和自动放置13.4 对… CSS真题合集二 11. css3新增特性12. css3动画12.1 关键帧动画 (keyframes)12.2 animation12.3 transition12.4 transform 13. grid网格布局13.1 使用display: grid或display: inline-grid的HTML元素。13.2 定义网格13.3 13.4 自动填充和自动放置13.4 对齐和间距 14. flex弹性布局14.1 容器属性14.2 项目属性 15. em/px/rem/vh/vw区别15.1 px (像素)15.2 em15.3 rem15.4 vh15.5 vw 16. 预处理器17. CSS提高性能的方法 11. css3新增特性
一、选择器
属性选择器用于选择具有特定属性的元素如 [attrvalue]。
#myId { /* 这其实是一个 ID 选择器但为了演示属性选择器我们可以这样写 */ /* 样式 */
} /* 或者使用属性选择器 */
[idmyId] { color: red;
}伪类选择器为特定状态的元素添加样式如 :hover、:active、:visited。伪元素选择器选择特定部分的元素如 ::before、::after。多重选择器使用逗号分隔来同时选择多个元素如 element1, element2。
.class1, .class2 { color: red;
}二、盒模型
box-sizing 属性改变了默认的CSS盒模型使其更容易进行布局。resize 属性允许用户调整元素的大小。box-shadow 属性为元素添加阴影效果。opacity 属性设置元素的不透明度。
三、颜色
新增的颜色设置方式如 RGBA、HSL 和 HSLA以及新增的 opacity 属性来控制透明度。
四、背景
background-size允许您更改背景图像的大小。background-repeat使您能够更改背景图像的重复行为。background-position允许您在水平和垂直方向上移动背景图像。background-image允许多背景图像同时使用background-clip用于确定背景画区通常情况背景都是覆盖整个元素。 background-clip:border-box;背景从border开始显示。background-clip: padding-box;背景从padding开始显示background-clip: content-box; 背景显content区域开始显示background-clip:no-clip;默认属性等同于border-box
!DOCTYPE html
html langen
head
meta charsetUTF-8
title/title
style .example { border: 10px solid black; padding: 20px; background-color: yellow; background-clip: padding-box; } .example-border-box { border: 10px solid black; padding: 20px; background-color: yellow; background-clip: border-box;} .example-content-box { border: 10px solid black; padding: 20px; background-color: yellow; background-clip: content-box; }
/style
/head
body div classexampleone/div div classexample-border-boxtwo/div div classexample-content-boxthree/div
/body
/htmlbackground-origin这个属性用于确定背景图像的定位原点即背景图像相对于元素的哪个部分进行定位。 padding-box默认值背景图像相对于内边距边缘进行定位。这意味着背景图像不会延伸到边框下面但会填充到内边距区域。border-box背景图像相对于边框边缘进行定位。这会导致背景图像延伸到边框下面。content-box背景图像相对于内容边缘进行定位。这会导致背景图像仅填充内容区域不会延伸到内边距或边框下面。这个属性通常与 background-position 一起使用以精确地控制背景图像在元素中的位置。同时background-clip 属性也可以与 background-origin 一起使用以控制背景图像在元素中的哪些部分可见。
!DOCTYPE html
html langen
head
meta charsetUTF-8
title/title
style .example { width: 200px; height: 200px; border: 10px solid black; padding: 20px; background-image: url(./13214324.jpg); background-repeat: no-repeat; background-origin: content-box; background-clip: border-box;}
/style
/head
body
// 假设你有一个带有边框和内边距的 div 元素并希望背景图像从内容区域开始定位但希望图像能够延伸到边框下面即图像在内边距区域是可见的但也会覆盖边框div classexample/div
/body
/html五、边框和阴影
border-radius为边框添加圆角。box-shadow为元素添加阴影效果。
六、文字效果
text-shadow为文本添加阴影效果。text-overflow处理溢出文本的显示方式。word-wrap控制文本的换行行为 normal / break-alltext-decoration设置文本上的装饰效果 none默认值表示没有文本装饰。underline在文本下方添加一条线。overline在文本上方添加一条线。line-through在文本中间添加一条穿过文本的线删除线。
七、布局和流式布局
Flexbox用于一维布局的CSS3新布局模型。Grid用于二维布局的CSS3新布局模型。多列布局CSS3 提供了一种创建多列文本或布局的方法类似于报纸的排版。
八、动画和过渡
transform可以对HTML元素进行旋转、缩放、平移等操作。transition用于在元素从一种样式过渡到另一种样式时创建平滑的过渡效果。animation用于在CSS中创建复杂的动画序列。
九、响应式设计
媒体查询根据设备的屏幕尺寸、分辨率等特性来应用不同的CSS样式实现响应式设计。
十、其他特性
线性渐变和径向渐变支持更复杂的背景效果。字体图标使用字体图标来显示图标解决图片失真和加载速度问题。
12. css3动画
12.1 关键帧动画 (keyframes)
keyframes example { 0% {background-color: red; left:0px; top:0px;} 25% {background-color: yellow; left:200px; top:0px;} 50% {background-color: blue; left:200px; top:200px;} 100% {background-color: green; left:0px; top:200px;}
}12.2 animation
- animation-name: 指定要绑定到选择器的关键帧名称。
- animation-duration: 定义动画完成一个周期需要多少秒或毫秒。
- animation-delay: 定义动画开始前等待的时间。
- animation-iteration-count: 定义动画应该播放多少次。
- animation-direction: 定义是否应该轮流反向播放动画。
- animation-play-state: 控制动画是否正在运行或已暂停。
- animation-timing-function: 定义动画的速度曲线。
- animation-fill-mode: 规定对象动画时间之外的状态。12.3 transition transition: property duration timing-function delay; property: 指定应用过渡的 CSS 属性名称如 width、background-color 等。你也可以使用 all 来指定所有属性。duration: 指定过渡效果花费的时间如 2s 或 500ms。timing-function: 指定过渡效果的时间曲线如 ease、linear、ease-in、ease-out、ease-in-out 或使用贝塞尔曲线函数 cubic-bezier()。delay: 可选。指定过渡效果开始前的延迟时间。 !DOCTYPE html
html langen
head
meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1.0
titleCSS Transition Example/title
style .box { width: 100px; height: 100px; background-color: red; transition: width 2s ease; } .box.expanded { width: 200px; }
/style
/head
body div classboxHover me/div script // 使用 JavaScript 来添加或移除类以触发过渡效果这里仅作演示实际上可以直接通过 CSS 伪类如 :hover document.querySelector(.box).addEventListener(click, function() { this.classList.toggle(expanded); });
/script /body
/html12.4 transform
translate(): 移动元素。rotate(): 旋转元素。scale(): 缩放元素。skew(): 倾斜元素。translate3d(): 在 3D 空间中移动元素。rotateX(), rotateY(), rotateZ(): 分别绕 X 轴、Y 轴和 Z 轴旋转元素。scale3d(): 在 3D 空间中缩放元素。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS/titlestyle.box {width: 100px;height: 100px;transform: translate(50px, 100px);background-color: blueviolet;color: #ffffff;}.box2 {width: 100px;height: 100px;transform: rotate(45deg);margin: 80px 142px;background-color: burlywood;color: #ffffff;}.box3 {width: 100px;height: 100px;transform: scale(2);/* 放大到原来的两倍 */background-color: aqua;color: #ffffff;}.box4 {width: 100px;height: 100px;transform: skew(30deg, 20deg);/* X 轴倾斜 30 度Y 轴倾斜 20 度 */color: #ffffff;background-color: antiquewhite;margin-left: 110px;}.box3D { width: 100px;height: 100px;color: #ffffff;background-color: aquamarine;transform: rotateX(45deg) rotateY(30deg); transform-origin: center; /* 转换原点为元素的中心 */ margin-left: 50px;}/style
/headbodydiv styledisplay: flex;div classbox移动元素/divdiv classbox2旋转元素/divdiv classbox3缩放元素/divdiv classbox4倾斜元素/divdiv classbox3D3D元素/div/div
/body/html属性含义transition过度用于设置元素的样式过度和animation有着类似的效果但细节上有很大的不同transform(变形)用于元素进行旋转、缩放、移动或倾斜和设置样式的动画并没有什么关系就相当于color一样用来设置元素的“外表’translate(移动)只是transform的一个属性值即移动animation(动画)用于设置动画属性他是一个简写的属性包含6个属性
13. grid网格布局
是CSS3引入的一种强大的二维布局系统它允许你轻松地将元素放置在复杂的网格上而无需使用浮动、定位或其他复杂的CSS技巧。Grid布局非常适合创建复杂的页面布局如网页和应用程序界面。
13.1 使用display: grid或display: inline-grid的HTML元素。
13.2 定义网格
行Rows和列Columns使用grid-template-rows和grid-template-columns属性定义网格的行和列。
.container { display: grid; grid-template-rows: 100px 200px; grid-template-columns: 1px 1px 1px;
}13.3
grid-row-start / grid-row-end / grid-column-start / grid-column-end指定项目应该占据的网格线的位置。grid-row / grid-column是前两个属性的简写。span关键字指定项目应该跨越多少行或列。
.item1 { grid-row: 1 / 3; /* 跨越两行 */ grid-column: 1 / span 2; /* 跨越两列 */
}13.4 自动填充和自动放置
grid-auto-rows / grid-auto-columns指定隐式网格的行和列的大小。grid-auto-flow控制隐式网格的创建顺序行优先或列优先。
13.4 对齐和间距
使用justify-items、align-items、justify-content和align-content属性来对齐网格项目和网格线。使用grid-gap或gap属性来添加网格行和列之间的间距。 !DOCTYPE html
html langen
head
meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1.0
titleCSS Grid 布局案例/title
link relstylesheet hrefstyle.css
/head
body
div classcontainer header classheaderHeader/header main classmainMain Content/main aside classsidebarSidebar/aside footer classfooterFooter/footer
/div
/body
/html// fr表示 Grid容器中的剩余空间的一等份 例如1fr表示剩余空间的100%而0.5fr表示剩余空间的50%。
.container { display: grid; /* 定义网格的列和行 */ grid-template-columns: 1fr 3fr 1fr; /* 三列中间列宽为其他两列的三倍 */ grid-template-rows: auto 1fr auto; /* 三行中间行占据剩余空间 */ /* 网格间距 */ grid-gap: 10px; /* 对齐方式 */ justify-content: center; /* 水平居中对齐 */ align-content: stretch; /* 垂直方向填满容器 */ height: 100vh; /* 容器高度为视口高度 */ } .header { grid-column: 1 / span 3; /* 跨越三列 */ background-color: #f8f9fa; padding: 10px; } .main { grid-column: 2; /* 占据第二列 */ grid-row: 2; /* 占据第二行 */ background-color: #e9ecef; padding: 20px; } .sidebar { grid-column: 3; /* 占据第三列 */ grid-row: 2; /* 占据第二行 */ background-color: #dee2e6; padding: 20px; } .footer { grid-column: 1 / span 3; /* 跨越三列 */ background-color: #f8f9fa; padding: 10px; }14. flex弹性布局
14.1 容器属性
display 设置为flex或inline-flex来定义容器为Flex容器。 flex-direction 控制子元素在主轴上的排列方向。可选值有row水平、row-reverse水平反向、column垂直和column-reverse垂直反向。 justify-content 控制子元素在主轴上的对齐方式。可选值有flex-start、flex-end、center、space-between、space-around和space-evenly。 align-items 控制子元素在侧轴上的对齐方式。可选值有stretch、flex-start、flex-end、center和baseline。 flex-wrap 控制子元素是否换行。可选值有nowrap不换行、wrap换行和wrap-reverse反向换行。 align-content 当存在多行或多列时控制各行或列之间的对齐方式。可选值与align-items类似。
14.2 项目属性
order 控制项目的排列顺序数值越小排列越靠前。 flex-grow 定义项目的放大比例默认为0。如果存在剩余空间flex-grow值越大的项目会占据更多的剩余空间。 flex-shrink 定义项目的缩小比例默认为1。当空间不足时flex-shrink值越大的项目会缩小得越多。 flex-basis 定义项目在主轴上占据的空间大小默认值为auto。 flex 是flex-grow、flex-shrink和flex-basis的简写属性。 align-self 允许单个项目有与其他项目不一样的对齐方式可覆盖容器的align-items属性。
!DOCTYPE html
html langen
head
meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1.0
titleflex/title
link relstylesheet hrefstyle.css
/head
body nav classnavbar a href# classnav-item首页/a a href# classnav-item关于/a a href# classnav-item服务/a /nav
/body
/html.navbar { display: flex; justify-content: space-around; /* 均匀分布 */ align-items: center; /* 垂直居中 */ background-color: #333; /* 背景色 */ color: #fff; /* 文字颜色 */ } .nav-item { padding: 10px; /* 内边距 */ text-decoration: none; /* 去除下划线 */ color: inherit; /* 继承父元素文字颜色 */ } /* 响应式布局 */ media (max-width: 600px) { .navbar { flex-direction: column; /* 改为垂直方向 */ } }15. em/px/rem/vh/vw区别
15.1 px (像素)
像素是屏幕上的固定单位一个像素对应屏幕上的一个物理点尽管这在高密度显示器上可能不是完全准确的。使用像素单位时元素的尺寸是固定的不会随视窗大小或字体大小的变化而变化。
15.2 em
em 是一个相对单位它基于元素的字体大小。默认情况下1em 等于元素的字体大小通常默认为16px但这取决于浏览器的设置和用户的偏好。如果元素的字体大小被改变那么使用 em 的所有属性也会按比例改变。它可以用于实现基于文本的布局和响应式设计。
15.3 rem
rem 也是一个相对单位但与 em 不同它是基于根元素html的字体大小。这意味着无论在哪个元素中1rem 总是等于根元素的字体大小。rem 常用于在整个页面上创建一致的尺寸和间距。
15.4 vh
vh 是一个视窗单位表示视窗高度的百分比。1vh 等于视窗高度的 1%。无论视窗的大小如何变化使用 vh 的元素总是保持与视窗高度成比例的大小。这对于创建全屏或响应式布局特别有用。
15.5 vw
vw 也是一个视窗单位表示视窗宽度的百分比。1vw 等于视窗宽度的 1%。类似地无论视窗的宽度如何变化使用 vw 的元素总是保持与视窗宽度成比例的大小。vw 常用于创建与视窗宽度成比例的布局和元素。 px 是固定的不随任何因素变化。 em 基于当前元素的字体大小。 rem 基于根元素的字体大小。 vh 和 vw 基于视窗的高度和宽度因此是响应式的。
16. 预处理器
Sass基于Ruby的CSS预处理器也支持Node.js版本。Sass有两种语法缩进语法Indented Syntax和SCSSSassy CSS。Less基于JavaScript的CSS预处理器通常与Node.js一起使用。Stylus另一种CSS预处理器具有类似CSS的语法并增加了变量、嵌套、混合等功能。
17. CSS提高性能的方法
减少请求和文件大小
合并CSS文件通过合并多个样式表来减少HTTP请求的数量。例如如果页面加载10个1k的CSS文件那么合并为一个10k的文件通常会比单独加载更快。压缩CSS使用在线压缩工具如YUI Compressor或构建工具如Webpack来减小CSS文件的大小。使用CSS Sprites将多个小图标合并成一个大图并通过CSS来控制显示区域从而减少网络请求和提高加载速度。
选择器和属性优化
使用简洁的选择器避免使用过于复杂的选择器减少匹配时间和提高渲染速度。避免使用通配符选择器通配符选择器*会匹配所有元素消耗大量计算资源。使用ID选择器代替类选择器ID选择器比类选择器更具体匹配速度更快。减少嵌套避免CSS嵌套过深最好不要超过三层。
书写规范和最佳实践
避免使用importimport会阻塞页面的加载并且会增加页面的请求次数。尽量使用标签代替。避免使用!important!important会覆盖其他所有样式增加计算时间和降低渲染速度。使用缩写属性如使用margin代替margin-top、margin-right、margin-bottom、margin-left以减少样式表的大小。
避免性能瓶颈
避免使用过多的浮动浮动元素会影响其他元素的布局和渲染使用过多会导致页面渲染速度变慢。避免使用滤镜效果滤镜效果会消耗大量计算资源降低页面的渲染速度。避免使用CSS表达式CSS表达式会增加计算负担并降低性能。
拆分和缓存
拆分出公共CSS文件对于大型项目可以将公共样式提取到单独的CSS文件中以便在多个页面之间缓存。利用浏览器缓存通过设置正确的HTTP缓存头或使用版本控制如文件名中的哈希值确保浏览器缓存有效的CSS文件。
使用预处理器和工具
使用CSS预处理器如Sass、Less等它们提供了变量、嵌套、Mixin等功能使代码更易于组织和维护。使用PostCSS等工具PostCSS是一个用于转换CSS代码的工具可以与各种插件一起使用来优化CSS性能。
优化图片和其他资源确保与CSS相关的图片和其他资源也经过优化以减少加载时间。 CSS真题合集一
