有哪些好的做h5的网站,金融集团网站模板,设计网站如何推广方案,学院网页设计重拾前端基础知识#xff1a;CSS3 前言边框圆角阴影图片 背景渐变文本字体多列动画与过渡2D 转换3D 转换过渡动画 网格布局弹性盒子#xff08;重点#xff09;父元素设置子元素设置 响应式设计设置 Viewport构建响应式网格视图12栅格媒体查询 案例讲解图片按钮分页 浏览器支… 重拾前端基础知识CSS3 前言边框圆角阴影图片 背景渐变文本字体多列动画与过渡2D 转换3D 转换过渡动画 网格布局弹性盒子重点父元素设置子元素设置 响应式设计设置 Viewport构建响应式网格视图12栅格媒体查询 案例讲解图片按钮分页 浏览器支持 前言
CSS3 是 CSS 的第三个主要版本引入了许多新的特性和功能用于增强样式设计和布局的能力。
边框
圆角
border-radius 是一个用来设置元素边框圆角的 CSS 属性如果指定四个值则分别对应左上角、右上角、右下角和左下角的圆角半径。
!DOCTYPE html
html
headtitle网页标题/titlestyle/style
/head
bodyp styleborder: 1px solid red;border-radius: 5px;实线边框。/p
/body
/html如图所示 阴影
box-shadow 是 CSS3 中引入的属性。它是在 CSS3 中新增加的用于创建阴影效果的属性用来提供更丰富的页面样式设计选项。
语法如下 box-shadow: h-shadow v-shadow blur spread color inset; h-shadow水平阴影的位置。正值表示阴影位于元素右侧负值表示阴影位于元素左侧。v-shadow垂直阴影的位置。正值表示阴影位于元素下方负值表示阴影位于元素上方。blur模糊半径。该值越大阴影越模糊、扩散。spread扩散半径。该值不设置时默认为 0表示阴影形状与元素大小相同。当设置为正值时阴影会扩大而当设置为负值时阴影会缩小。color阴影的颜色。可以使用颜色名称或十六进制值。inset可选属性用于指定阴影是否在元素内部。如果设置了该值阴影将出现在元素内部而不是外部。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{width:300px;height:100px;background-color:yellow;box-shadow: 10px 10px 5px #888888;}/style
/head
bodydiv/div
/body
/html如图所示 图片
border-image 是 CSS3 引入的一项功能用于设置元素边框的图像样式。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{border: 10px solid black;width: 150px;border-image:url(123456.jpg) 30% stretch;}/style
/head
bodydiv边框图片/div
/body
/html如图所示 stretch属性会平铺round属性会重复环绕。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{border: 10px solid black;width: 150px;border-image:url(123456.jpg) 30% round;}/style
/head
bodydiv边框图片/div
/body
/html如图所示 border-image 属性允许你通过一个图像来替换元素的普通边框样式。这个图像会被切割成九个区域分别对应边框的四个角、四个边和中间区域。你可以通过 border-image-source 属性指定使用的图像通过 border-image-slice 属性调整图像的切割方式通过 border-image-width 属性设置边框图像的宽度通过 border-image-repeat 属性控制图像的重复方式以及通过 border-image-outset 属性设置图像的扩展区域。 背景
background-image 属性可以为一个元素添加多幅背景图像。不同的背景图像用逗号隔开并且图像会彼此堆叠。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{background-image: url(./flower.gif), url(./paper.jpg);background-position: left top, left top;background-repeat: no-repeat, repeat;padding: 15px;}/style
/head
bodydiv背景图片/div
/body
/html如图所示 你可以使用background 简写属性来指定。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{background:url(./flower.gif) left top no-repeat,url(./paper.jpg) left top no-repeat;padding: 15px;}/style
/head
bodydiv背景图片/div
/body
/htmlbackground-size 属性允许您指定背景图像的大小。
!DOCTYPE html
html
headtitle网页标题/titlestyle.a{border: 1px solid black;height: 300px;width: 200px;background: url(./flower.gif) no-repeat;background-size: 150px 150px;}/style
/head
bodydiv classa背景图片/div
/body
/html如图所示 你也可以使用使用两个关键字之一来指定背景图像的大小contain 或 cover。
!DOCTYPE html
html
headtitle网页标题/titlestyle.a{border: 1px solid black;height: 300px;width: 200px;background: url(./flower.gif) no-repeat;background-size: cover;}.b{border: 1px solid black;height: 300px;width: 200px;background: url(./flower.gif) no-repeat;background-size: contain;}/style
/head
bodydiv classa背景图片/divdiv classb背景图片/div
/body
/html如图所示 background-origin 属性用于指定背景图像的起始位置即确定背景图像相对于元素框的位置。它有以下几个可能的取值 1padding-box背景图像的起始位置从元素的内边距区域padding area开始。 2border-box背景图像的起始位置从元素的边框区域border area开始。 3content-box背景图像的起始位置从元素的内容区域content area开始。
!DOCTYPE html
html
headtitle网页标题/titlestyle.box {width: 300px;height: 200px;padding: 20px;border: 5px dotted #000;background-image: url(./123456.jpg);background-size: cover;background-repeat: no-repeat;}.origin-padding {background-origin: padding-box;}.origin-border {background-origin: border-box;}.origin-content {background-origin: content-box;}/style
/head
bodydiv classbox origin-paddingPadding Box Origin/divdiv classbox origin-borderBorder Box Origin/divdiv classbox origin-contentContent Box Origin/div
/body
/html如图所示
background-clip 属性用于指定背景图像的裁剪区域即决定元素的哪个部分会显示背景图像。有以下几个取值
1border-box背景图像将显示在元素的边框区域border area内包括边框和内边距区域。 2padding-box背景图像将显示在元素的内边距区域padding area内不包括边框。 3content-box背景图像将显示在元素的内容区域content area内不包括内边距和边框。
!DOCTYPE html
html
headtitle网页标题/titlestyle.box {width: 300px;height: 200px;padding: 20px;border: 5px dotted #000;background-image: url(./123456.jpg);background-size: cover;background-repeat: no-repeat;}.clip-padding {background-clip: padding-box;}.clip-border {background-clip: border-box;}.clip-content {background-clip: content-box;}/style
/head
bodydiv classbox clip-paddingPadding Box Clip/divdiv classbox clip-borderBorder Box Clip/divdiv classbox clip-contentContent Box Clip/div
/body
/html如图所示
渐变
CSS 渐变CSS gradients是一种用来创建平滑过渡的背景效果的技术。通过 CSS 渐变您可以在元素的背景中实现从一种颜色到另一种颜色的过渡效果或者在不同颜色之间创建复杂的过渡效果。
CSS 渐变有两种类型线性渐变linear gradient和径向渐变radial gradient。
线性渐变Linear Gradient
线性渐变通过定义一个方向沿着这个方向进行颜色的过渡 background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 默认情况下线性渐变从上到下
!DOCTYPE html
html
headtitle网页标题/titlestyle#grad1 {height: 200px;background-color: red; /* 浏览器不支持时显示 */background-image: linear-gradient(#e66465, #9198e5);}/style
/head
bodydiv idgrad1/div
/body
/html如图所示 从左到右多一个参数to right。
!DOCTYPE html
html
headtitle网页标题/titlestyle#grad1 {height: 200px;background-color: red; /* 浏览器不支持时显示 */background-image: linear-gradient(to right,#e66465, #9198e5);}/style
/head
bodydiv idgrad1/div
/body
/html如图所示 你可以通过指定水平和垂直的起始位置来制作一个对角渐变。
!DOCTYPE html
html
headtitle网页标题/titlestyle#grad1 {height: 200px;background-color: red; /* 浏览器不支持时显示 */background-image: linear-gradient(to bottom right,#e66465, #9198e5);}/style
/head
bodydiv idgrad1/div
/body
/html如图所示 下面的实例演示了如何设置多个颜色节点
!DOCTYPE html
html
headtitle网页标题/titlestyle#grad1 {height: 200px;background-color: red; /* 浏览器不支持时显示 */background-image: linear-gradient(#e66465, #9198e5,red,yellow);}/style
/head
bodydiv idgrad1/div
/body
/html如图所示 如需添加透明度我们使用 rgba() 函数来定义色标。 rgba() 函数中的最后一个参数可以是 0 到 1 的值它定义颜色的透明度0 表示全透明1 表示全彩色无透明。
径向渐变Radial Gradient
径向渐变以一个中心点为起点向外辐射呈放射状进行颜色的过渡。 background-image: radial-gradient(shape size at position, start-color, ..., last-color); 默认情况下颜色节点均匀分布
!DOCTYPE html
html
headtitle网页标题/titlestyle#grad1 {height: 200px;background-color: red; /* 浏览器不支持时显示 */background-image: radial-gradient(red, yellow, green);}/style
/head
bodydiv idgrad1/div
/body
/html如图所示 你可以设置不同间距的色标
!DOCTYPE html
html
headtitle网页标题/titlestyle#grad1 {height: 200px;background-color: red; /* 浏览器不支持时显示 */background-image: radial-gradient(red 5%, yellow 15%, green 30%);}/style
/head
bodydiv idgrad1/div
/body
/html如图所示 shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse椭圆。
!DOCTYPE html
html
headtitle网页标题/titlestyle#grad1 {height: 200px;background-color: red; /* 浏览器不支持时显示 */background-image: radial-gradient(circle,red 5%, yellow 15%, green 30%);}/style
/head
bodydiv idgrad1/div
/body
/html如图所示 文本
CSS3中包含几个新的文本特征比如文字阴影、文本溢出、整字换行、换行规则以及书写模式等。
文字阴影
text-shadow 属性用于在文本周围创建阴影效果。
text-shadow 属性的值由阴影水平偏移量、阴影垂直偏移量、阴影模糊半径、阴影颜色组成。
!DOCTYPE html
html
headtitle网页标题/titlestyle#grad1 {text-shadow: 5px 5px 5px red;}/style
/head
bodydiv idgrad1文本阴影/div
/body
/html如图所示 文本溢出
text-overflow 用于控制当文本溢出容器时的显示方式。以下是 text-overflow 属性的常见取值
1clip默认值表示当文本溢出容器时直接裁剪并隐藏溢出部分。 2ellipsis表示当文本溢出容器时显示省略号…并通过鼠标悬停来显示完整文本内容。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{width: 100px;border: 1px solid black;overflow: hidden;}/style
/head
bodydiv styletext-overflow: clip;testtesttesttesttesttesttesttesttesttest/divdiv styletext-overflow: ellipsis;testtesttesttesttesttesttesttesttesttest/div
/body
/html如图所示 整字换行
word-wrap属性用于指定文本溢出其容器时的处理方式。这个属性可以控制是否允许长单词或URL地址在没有空格的情况下换行以确保文本能够适应其容器的宽度。word-wrap属性的可用取值为
1normal默认值不允许长单词或URL地址在中间换行这可能导致内容溢出其容器。 2break-word允许长单词或URL地址在中间换行以避免内容溢出其容器。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{width: 100px;border: 1px solid black;}/style
/head
bodydiv styleword-wrap: normal;testtesttesttesttesttesttesttesttesttest/divdiv styleword-wrap: break-word;testtesttesttesttesttesttesttesttesttest/div
/body
/html如图所示
换行规则
word-break属性用于指定如何处理单词换行。它控制当一个单词太长而无法适应其包含元素的宽度时如何断行和分割这个单词。有以下几个可选值
1normal默认值在正常的单词断开规则下换行。 2break-all允许单词在任意字符处断开换行。 3keep-all尽可能地不将单词断开换行。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{width: 100px;border: 1px solid black;}/style
/head
bodydiv styleword-break: normal;testtesttesttesttesttesttesttesttesttest/divdiv styleword-break: break-all;testtesttesttesttesttesttesttesttesttest/divdiv styleword-break: keep-all;testtesttesttesttesttesttesttesttesttest/div
/body
/html如图所示 书写模式
writing-mode属性用于指定文本的书写模式即文本是从左到右水平书写还是从上到下垂直书写。这个属性通常用于处理非常规的文本方向如竖排文字或横排文字。有以下几个常用取值
1horizontal-tb默认值文本水平排列从左到右从上到下。 2vertical-rl文本垂直排列从右到左。 3vertical-lr文本垂直排列从左到右。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{width: 100px;border: 1px solid black;}/style
/head
bodydiv stylewriting-mode: horizontal-tb;锄禾日当午汗滴禾下土/divdiv stylewriting-mode: vertical-rl;锄禾日当午汗滴禾下土/divdiv stylewriting-mode: vertical-lr;锄禾日当午汗滴禾下土/div
/body
/html如图所示 字体
font-face 用于加载自定义字体文件并在网页中应用这些字体。通过 font-face 规则您可以在网页中使用非标准字体如特定的字体文件而无需依赖用户计算机中已安装的字体。 不同的字体格式TrueType 字体 (TTF)、OpenType 字体 (OTF)、Web 开放字体格式 (WOFF)、Web 开放字体格式 (WOFF 2.0)、SVG 字体/形状、嵌入式 OpenType 字体 (EOT) !DOCTYPE html
html
headtitle网页标题/titlestylefont-face {font-family: myfamily;src: url(./Wood-2-1.ttf);}div{font-family: myfamily;}/style
/head
bodydivhello world/div
/body
/html如图所示 使用font-weight属性可以将字体设置粗体。
!DOCTYPE html
html
headtitle网页标题/titlestylefont-face {font-family: myfamily;src: url(./Wood-2-1.ttf);}div{font-family: myfamily;font-weight: bold;}/style
/head
bodydivhello world/div
/body
/html如图所示 多列
多列布局multicolumn layout允许将文本内容分成多个列显示这在网页设计中可以用来创建更流畅、更易于阅读的页面布局。
通过使用 column-count、column-width、column-gap 等属性您可以控制多列布局的列数、列宽、列间距等样式。
创建多列
column-count 属性指定了需要分割的列数。
!DOCTYPE html
html
headtitle网页标题/titlestylediv {column-count:3;}/style
/head
bodydiv最近一直看小说.../div
/body
/html如图所示 多列中列与列间的间隙
column-gap 属性指定了列与列间的间隙。
!DOCTYPE html
html
headtitle网页标题/titlestylediv {column-count:3;column-gap: 10px;}/style
/head
bodydiv最近一直看小说.../div
/body
/html如图所示 列边框
column-rule-style 属性指定了列与列间的边框样式column-rule-width 属性指定了两列的边框厚度column-rule-color 属性指定了两列的边框颜色
!DOCTYPE html
html
headtitle网页标题/titlestylediv {column-count:3;column-rule-style: solid;column-rule-width: 10px;column-rule-color: red;}/style
/head
bodydiv最近一直看小说.../div
/body
/html如图所示 column-span 用来控制多列布局中跨列显示的属性。当设置了 column-span: all; 时元素可以横跨多列显示而不受列边界的限制。
!DOCTYPE html
html
headtitle网页标题/titlestyle.column-span-example{column-count:2;-moz-column-count:2; /* Firefox */-webkit-column-count:2; /* Safari and Chrome */}.column-span-example p {column-span: all; /* 允许段落横跨所有列 */-webkit-column-span:all; /* Safari and Chrome */}/style
/head
bodydiv classcolumn-span-exampleptest/pcontent content content content content content content content content content content content content content content content content content content content content/div
/body
/html如图所示 column-width 用来控制多列布局中列宽的属性。通过设置 column-width 属性您可以指定每列的宽度或者让浏览器自动计算列宽度。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{column-width: 100px;}/style
/head
bodydiv最近一直看小说.../div
/body
/html如图所示 动画与过渡
CSS 支持创建动画效果和过渡效果使页面元素可以在不同状态之间平滑地过渡或呈现动画效果。
2D 转换
CSS3 提供了一系列的 2D 转换属性可以通过这些属性对元素进行平移、缩放、旋转和倾斜等操作从而实现各种视觉效果。
transform定义元素的转换效果。可以使用多个转换函数组合使用例如平移、缩放和旋转。以下是一些常用的 CSS3 2D 转换属性
translate()将元素沿 x 和 y 轴平移指定的距离。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{width: 300px;height: 100px;background-color: yellow;border: 1px solid black;transform: translate(50px,100px);}/style
/head
bodyspan原来的位置/spandiv2d/div
/body
/html如图所示
scale()按照指定的比例对元素进行缩放。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{width: 300px;height: 100px;background-color: yellow;border: 1px solid black;transform: scale(0.5,0.5);}/style
/head
bodyspan原来的位置/spandiv2d/div
/body
/html如图所示 除此之外还有scaleX()和scaleY()方法增加或减少元素的宽度和增加或减少元素的高度。
rotate()按照指定角度对元素进行旋转。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{width: 300px;height: 100px;background-color: yellow;border: 1px solid black;transform: rotate(20deg);/*顺时针旋转 20 度*/}/style
/head
bodydiv2d/div
/body
/html如图所示 skew()按照指定角度对元素进行倾斜。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{width: 300px;height: 100px;background-color: yellow;border: 1px solid black;transform: skew(20deg, 10deg);/* 元素沿 X 和 Y 轴倾斜给定角度 */}/style
/head
bodydiv2d/div
/body
/html如图所示 另外skewX() 方法和skewY() 方法使元素沿 X 轴倾斜给定角度和使元素沿 Y 轴倾斜给定角度。
matrix() 方法把所有 2D 变换方法组合为一个。 matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) !DOCTYPE html
html
headtitle网页标题/titlestylediv{width: 300px;height: 100px;background-color: yellow;border: 1px solid black;transform: matrix(1, -0.3, 0, 1, 0, 0);}/style
/head
bodydiv2d/div
/body
/html如图所示
3D 转换
CSS3 也提供了一系列的 3D 转换属性可以通过这些属性对元素进行立体化的变换实现更加逼真的三维效果。
也是使用transform属性以下是一些常用的 CSS3 3D 转换属性
translate3d()将元素沿 x、y 和 z 轴平移指定的距离。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{width: 300px;height: 100px;background-color: yellow;border: 1px solid black;transform: translate3d(50px, 50px, 0);}/style
/head
bodydiv3d/div
/body
/html如图所示
scale3d()按照指定的比例对元素进行三维缩放。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{width: 300px;height: 100px;background-color: yellow;border: 1px solid black;transform: scale3d(0.5, 0.5, 1);}/style
/head
bodydiv3d/div
/body
/html如图所示
rotateX()、rotateY()、rotateZ()按照指定角度对元素进行绕 x、y、z 轴的旋转。
!DOCTYPE html
html
headtitle网页标题/titlestylediv{width: 300px;height: 100px;background-color: yellow;border: 1px solid black;transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);}/style
/head
bodydiv3d/div
/body
/html如图所示
perspective定义元素的透视效果使元素在 3D 空间中产生远近效果。
!DOCTYPE html
html
headtitle网页标题/titlestyle#div1{position: relative;height: 150px;width: 150px;margin: 50px;padding:10px;border: 1px solid black;perspective:150;-webkit-perspective:150; /* Safari and Chrome */}#div2{padding:50px;position: absolute;border: 1px solid black;background-color: yellow;transform: rotateX(45deg);-webkit-transform: rotateX(45deg); /* Safari and Chrome */}/style
/head
bodydiv iddiv1div iddiv2HELLO/div/div
/body
/html如图所示 过渡
CSS3 过渡transition允许你在状态改变时以平滑的方式过渡属性的值。通过使用过渡你可以在鼠标悬停、焦点变化或任何其他事件发生时使元素从一个状态平滑地过渡到另一个状态。
要实现这一点必须规定两项内容
指定要添加效果的CSS属性指定效果的持续时间。
!DOCTYPE html
html
headtitle网页标题/titlestylediv {width: 100px;height: 100px;background: red;transition: width 2s;}div:hover{width: 200px;}/style
/head
bodydiv过渡/div
/body
/html如图所示 如果添加多个属性可以逗号,隔开
!DOCTYPE html
html
headtitle网页标题/titlestylediv {width: 100px;height: 100px;background: red;transition: width 2s, height 2s, transform 2s;}div:hover{width: 200px;}/style
/head
bodydiv过渡/div
/body
/html你可以使用 linear 1s表示延迟一秒。
!DOCTYPE html
html
headtitle网页标题/titlestylediv {width: 100px;height: 100px;background: red;transition: width 2s linear 1s;}div:hover{width: 200px;}/style
/head
bodydiv过渡/div
/body
/html下表列出了所有的过渡属性
属性描述transition简写属性用于在一个属性中设置四个过渡属性。transition-property规定应用过渡的 CSS 属性的名称。transition-duration定义过渡效果花费的时间。默认是 0。transition-timing-function规定过渡效果的时间曲线。默认是 “ease”。transition-delay规定过渡效果何时开始。默认是 0。
动画
CSS3 可以创建动画它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。
keyframes 是用于创建动画的关键帧keyframe规则的CSS规则。通过 keyframes 规则您可以控制动画在不同阶段的样式变化。您可以定义动画从开始到结束的关键帧并在其中定义不同的样式然后将该动画应用于元素。
当在 keyframes 创建动画把它绑定到一个选择器否则动画不会有任何效果。
!DOCTYPE html
html
headtitle网页标题/titlestylediv {width: 100px;height: 100px;background: red;animation-name: myframes;}keyframes myframes {from {background:red;}to {background:yellow;}}/style
/head
bodydiv/div
/body
/html如图所示 在上面的例子中通过使用关键字 “from” 和 “to”代表 0开始和 100完成我们设置了样式何时改变。通过使用百分比您可以根据需要添加任意多个样式更改。
animation-duration 属性定义需要多长时间才能完成动画默认值是 0s。
!DOCTYPE html
html
headtitle网页标题/titlestylediv {width: 100px;height: 100px;background: red;animation-name: myframes;animation-duration: 4s;}keyframes myframes {0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}
}/style
/head
bodydiv/div
/body
/html如图所示 使用animation-delay属性规定动画开始的延迟时间。
!DOCTYPE html
html
headtitle网页标题/titlestylediv {width: 100px;height: 100px;background: red;/*简写*/animation: myframes 2s;animation-delay: 2s;}keyframes myframes {from {background:red;}to {background:yellow;}}/style
/head
bodydiv/div
/body
/html如图所示 animation-iteration-count 属性指定动画应运行的次数。
!DOCTYPE html
html
headtitle网页标题/titlestylediv {width: 100px;height: 100px;background: red;animation: myframes 2s;animation-iteration-count: 3;}keyframes myframes {from {background:red;}to {background:yellow;}}/style
/head
bodydiv/div
/body
/html如图所示
animation-direction 属性指定是向前播放、向后播放还是交替播放动画。可接受以下值
normal - 动画正常播放向前。默认值reverse - 动画以反方向播放向后。alternate - 动画先向前播放然后向后。alternate-reverse - 动画先向后播放然后向前。
!DOCTYPE html
html
headtitle网页标题/titlestylediv {width: 100px;height: 100px;background: red;animation-name: myframes;animation-duration: 4s;animation-direction:reverse;}keyframes myframes {0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}
}/style
/head
bodydiv/div
/body
/html如图所示 你可以通过animation-timing-function 属性规定动画的速度曲线。可接受以下值
ease - 指定从慢速开始然后加快然后缓慢结束的动画默认linear - 规定从开始到结束的速度相同的动画ease-in - 规定慢速开始的动画ease-out - 规定慢速结束的动画ease-in-out - 指定开始和结束较慢的动画cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值
下面介绍简写方法。 animation: name duration timing-function delay iteration-count direction fill-mode; div {animation: example 5s linear 2s infinite alternate;
}网格布局
网格布局Grid Layout是一种用于网页布局的 CSS 技术可以将页面分割成行和列并让元素放置到这些行和列的交叉点上。通过网格布局你可以更灵活地控制页面布局实现复杂的多列布局而无需依赖传统的盒模型和浮动布局。
display 属性
将 display 属性设置为 grid 或 inline-grid 后它就变成了一个网格容器这个元素的所有直系子元素将成为网格元素。
!DOCTYPE html
html
headtitle网页标题/titlestyle.grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr; /* 定义三列每列宽度相等 */grid-template-rows: auto; /* 自动设置行高 */grid-gap: 10px; /* 设置网格间距为 10px */}.grid-item {background-color: #f0f0f0;padding: 20px;text-align: center;}/style
/head
bodydiv classgrid-containerdiv classgrid-item1/divdiv classgrid-item2/divdiv classgrid-item3/divdiv classgrid-item4/divdiv classgrid-item5/divdiv classgrid-item6/div/div
/body
/html如图所示 设置display: inline-grid;示例如下
!DOCTYPE html
html
headtitle网页标题/titlestyle.grid-container {display: inline-grid;grid-template-columns: 1fr 1fr 1fr; /* 定义三列每列宽度相等 */grid-template-rows: auto; /* 自动设置行高 */grid-gap: 10px; /* 设置网格间距为 10px */}.grid-item {background-color: #f0f0f0;padding: 20px;text-align: center;}/style
/head
bodydiv classgrid-containerdiv classgrid-item1/divdiv classgrid-item2/divdiv classgrid-item3/divdiv classgrid-item4/divdiv classgrid-item5/divdiv classgrid-item6/div/div
/body
/html如图所示 网格轨道
通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的列和行。
1grid-template-columns 是网格布局中用于定义网格列的属性它可以指定每一列的大小、数量、比例等信息。通过设置 grid-template-columns你可以创建灵活的网格布局实现不同页面设计需求。
!DOCTYPE html
html
headtitle网页标题/titlestyle.grid-container {display: grid;grid-template-columns: 100px 1fr 1fr; /* 定义三列第一列宽度为100px第二列和第三列按比例分配 */}.grid-item {background-color: #f0f0f0;padding: 20px;text-align: center;}/style
/head
bodydiv classgrid-containerdiv classgrid-item1/divdiv classgrid-item2/divdiv classgrid-item3/divdiv classgrid-item4/divdiv classgrid-item5/divdiv classgrid-item6/div/div
/body
/html如图所示 2grid-template-rows 是网格布局中用于定义网格行的属性它可以指定每一行的大小、数量、比例等信息。通过设置 grid-template-rows你可以创建灵活的网格布局实现不同页面设计需求。
!DOCTYPE html
html
headtitle网页标题/titlestyle.grid-container {display: grid;grid-template-rows: 100px 200px; /* 定义两行第一行高度为100px第二行高度为200px */}.grid-item {background-color: #f0f0f0;padding: 20px;text-align: center;}/style
/head
bodydiv classgrid-containerdiv classgrid-item1/divdiv classgrid-item2/divdiv classgrid-item3/divdiv classgrid-item4/divdiv classgrid-item5/divdiv classgrid-item6/div/div
/body
/html如图所示
fr单位
fr 是 CSS Grid 中用于定义网格轨道grid track的长度单位表示可用空间即剩余空间的比例。
例如如果将以下样式应用于一个有 3 列的网格容器 grid-template-columns: 1fr 2fr 1fr; 那么第一列和第三列都将占据可用空间的 1/4而第二列将占据可用空间的 1/2。这是因为 1fr 表示可用空间的 1 份2fr 表示可用空间的 2 份因此第二列将占据可用空间的 2/4即 1/2。
网格间距
网格间距Column Gap指的是两个网格单元之间的网格横向间距或网格纵向间距。
grid-column-gap 属性是用于在 CSS Grid 布局中设置列之间的间距的属性。这个属性可以帮助您控制网格容器中不同列之间的空白间隔。
!DOCTYPE html
html
headtitle网页标题/titlestyle.grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr; /* 定义两行第一行高度为100px第二行高度为200px */grid-column-gap: 10px;}.grid-item {background-color: #f0f0f0;padding: 20px;text-align: center;}/style
/head
bodydiv classgrid-containerdiv classgrid-item1/divdiv classgrid-item2/divdiv classgrid-item3/divdiv classgrid-item4/divdiv classgrid-item5/divdiv classgrid-item6/div/div
/body
/html如图所示
grid-row-gap 是用于在 CSS Grid 布局中设置行之间的间距的属性。这个属性可以帮助您控制网格容器中不同行之间的空白间隔。
!DOCTYPE html
html
headtitle网页标题/titlestyle.grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr; /* 定义两行第一行高度为100px第二行高度为200px */grid-row-gap: 10px;}.grid-item {background-color: #f0f0f0;padding: 20px;text-align: center;}/style
/head
bodydiv classgrid-containerdiv classgrid-item1/divdiv classgrid-item2/divdiv classgrid-item3/divdiv classgrid-item4/divdiv classgrid-item5/divdiv classgrid-item6/div/div
/body
/html如图所示 grid-gap 属性是 grid-row-gap 和 grid-column-gap 属性的简写
!DOCTYPE html
html
headtitle网页标题/titlestyle.grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr; /* 定义两行第一行高度为100px第二行高度为200px */grid-gap: 10px 10px;}.grid-item {background-color: #f0f0f0;padding: 20px;text-align: center;}/style
/head
bodydiv classgrid-containerdiv classgrid-item1/divdiv classgrid-item2/divdiv classgrid-item3/divdiv classgrid-item4/divdiv classgrid-item5/divdiv classgrid-item6/div/div
/body
/html如图所示
网格行Grid Lines
列之间的线称为列线column lines。使用grid-column-start属性和grid-column-end属性。
!DOCTYPE html
html
headtitle网页标题/titlestyle.grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr; /* 定义两行第一行高度为100px第二行高度为200px */grid-gap: 10px 10px;}.grid-container div {background-color: #f0f0f0;padding: 20px;text-align: center;}.grid-item1{grid-column-start: 1;grid-column-end: 3;}/style
/head
bodydiv classgrid-containerdiv classgrid-item11/divdiv classgrid-item22/divdiv classgrid-item33/divdiv classgrid-item44/divdiv classgrid-item55/divdiv classgrid-item66/div/div
/body
/html如图所示
行之间的线称为行线row lines。使用grid-row-start 属性和 grid-row-end 属性。
!DOCTYPE html
html
headtitle网页标题/titlestyle.grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr; /* 定义两行第一行高度为100px第二行高度为200px */grid-gap: 10px 10px;}.grid-container div {background-color: #f0f0f0;padding: 20px;text-align: center;}.grid-item1{grid-row-start: 1;grid-row-end: 3;}/style
/head
bodydiv classgrid-containerdiv classgrid-item11/divdiv classgrid-item22/divdiv classgrid-item33/divdiv classgrid-item44/divdiv classgrid-item55/divdiv classgrid-item66/div/div
/body
/html如图所示 grid-area 属性是一个用于简洁定义网格项位置的属性它结合了 grid-row-start, grid-column-start, grid-row-end 和 grid-column-end 这四个属性。
!DOCTYPE html
html
headtitle网页标题/titlestyle.grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr; /* 定义两行第一行高度为100px第二行高度为200px */grid-gap: 10px 10px;}.grid-container div {background-color: #f0f0f0;padding: 20px;text-align: center;}.grid-item1{grid-area: 2 / 1 / 3 / 3;}/style
/head
bodydiv classgrid-containerdiv classgrid-item11/divdiv classgrid-item22/divdiv classgrid-item33/divdiv classgrid-item44/divdiv classgrid-item55/divdiv classgrid-item66/div/div
/body
/html如图所示 grid-template-areas 属性是用于在网格布局中定义网格区域的属性。通过使用 grid-template-areas你可以使用自定义的区域名称来表示网格项的位置。
!DOCTYPE html
html
headtitle网页标题/titlestyle.container {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px;gap: 10px;grid-template-areas:header header sidebarmain main sidebar;}.item {padding: 10px;text-align: center;}.header {grid-area: header;background-color: lightblue;}.sidebar {grid-area: sidebar;background-color: lightcoral;}.main {grid-area: main;background-color: lightgreen;}/style
/head
bodydiv classcontainerdiv classitem headerHeader/divdiv classitem sidebarSidebar/divdiv classitem mainMain Content/div/div
/body
/html如图所示
弹性盒子重点
CSS3 弹性盒 Flexible Box 或 flexbox是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示 父元素设置
使用display: flex;属性后把容器转换为弹性布局上下文弹性布局中必须有一个 display 属性设置为 flex 的父元素。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{display: flex;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示 flex-direction属性
flex-direction属性用于设置 Flex 容器中主轴的方向。它决定了 Flex 项目是如何排列的。flex-direction 属性有以下几个可能的取值
1row默认值。主轴为水平方向起点在左端。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{flex-direction: row;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示 2row-reverse主轴为水平方向起点在右端。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{display: flex;flex-direction: row-reverse;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示
3column主轴为垂直方向起点在顶部。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{display: flex;flex-direction: column;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示 4column-reverse主轴为垂直方向起点在底部。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{display: flex;flex-direction: column-reverse;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示 flex-wrap属性
flex-wrap属性用于指定 Flex Box 容器中的项目是否换行的 CSS 属性。flex-wrap 属性有以下几个可能的取值
1nowrap默认值项目不换行会尽量在一行内显示即使溢出容器。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;width: 300px;display: flex;flex-wrap: nowrap;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示 2wrap项目在需要时换行显示第一行在上方第二行在下方。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;width: 300px;display: flex;flex-wrap: wrap;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示 3wrap-reverse项目在需要时换行显示但是第一行在下方第二行在上方。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;width: 300px;display: flex;flex-wrap: wrap-reverse;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示
flex-flow属性
flex-direction 和 flex-wrap 两个属性的缩写形式用于同时设置 Flex Box 容器中项目的排列方向和换行方式。通过 flex-flow 属性您可以简洁地指定这两个属性的取值从而控制项目在容器中的布局方式。
语法 flex-flow: flex-direction flex-wrap; !DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;width: 300px;display: flex;flex-flow: row wrap;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示
justify-content属性
justify-content属性用于在 Flex 容器中沿主轴方向对齐 Flex 项目的位置。它决定了 Flex 项目在主轴上的分布方式。justify-content 属性有以下几个可能的取值
1flex-start默认值。Flex 项目靠主轴起点对齐。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;display: flex;justify-content: flex-start;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示
2flex-endFlex 项目靠主轴终点对齐。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;display: flex;justify-content: flex-end;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示
3centerFlex 项目在主轴上居中对齐。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;display: flex;justify-content: center;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示
4space-betweenFlex 项目平均分布在主轴上首个项目在起点最后一个项目在终点中间的项目之间留有相等的空白间距。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;display: flex;justify-content: space-between;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示 5space-aroundFlex 项目平均分布在主轴上项目之间和两端都留有相等的空白间距。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;display: flex;justify-content: space-around;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示 6space-evenlyFlex 项目平均分布在主轴上包括两端和项目之间都留有相等的空白间距。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;display: flex;justify-content: space-evenly;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示 align-items属性
align-items属性用于指定 Flex Box 容器中项目在交叉轴上的对齐方式的 CSS 属性。交叉轴是与主轴垂直的轴对于默认的水平布局来说交叉轴就是垂直轴。align-items 属性可以接受以下几种取值
1stretch默认值项目被拉伸以适应容器。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;height: 200px;display: flex;align-items: stretch;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示
2flex-start项目向交叉轴的起始位置对齐。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;height: 200px;display: flex;align-items: flex-start;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示
3flex-end项目向交叉轴的结束位置对齐。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;height: 200px;display: flex;align-items: flex-end;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示 4center项目在交叉轴上居中对齐。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;height: 200px;display: flex;align-items: center;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示
5baseline项目以其基线对齐。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;height: 200px;display: flex;align-items: baseline;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示
align-content属性
属性是用于指定多行或多列 Flex Box 中项目在交叉轴上的对齐方式的 CSS 属性。与 align-items 属性不同align-content 属性适用于多行或多列排列的 Flex Box即当容器中的项目无法全部放在一行或一列中时。
align-content 属性可以接受以下几种取值
1stretch默认值项目被拉伸以适应容器。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;flex-wrap: wrap;align-content: stretch;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示 当 flex-wrap 属性的值为 wrap 或 wrap-reverse 时Flex Box 容器中的项目可能会出现多行或多列的情况此时 align-content 属性才会生效。 2flex-start项目向交叉轴的起始位置对齐。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;flex-wrap: wrap;align-content: flex-start;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示 3flex-end项目向交叉轴的结束位置对齐。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;flex-wrap: wrap;align-content: flex-end;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示
4center项目在交叉轴上居中对齐。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;flex-wrap: wrap;align-content: center;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示 5space-between项目在交叉轴上平均分布首个项目对齐容器起始位置最后一个项目对齐容器结束位置。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;flex-wrap: wrap;align-content: space-between;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示 6space-around项目在交叉轴上分布各项目周围有相等的空间。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;flex-wrap: wrap;align-content: space-around;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-itemflex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示 子元素设置
order 属性
order 属性是用于指定 Flex Box 容器中单个项目在主轴上的顺序的 CSS 属性。默认情况下Flex Box 容器中的项目按照它们在 HTML 中出现的顺序来排列但是通过设置 order 属性您可以随意更改项目的顺序。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}.flex-item:first-child {order: 3;}.flex-item:nth-child(2) {order: 1;}.flex-item:last-child {order: 2;}/style
/head
bodydiv classflex-containerdiv classflex-item flex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示
flex-grow 属性
flex-grow 属性是 Flex 布局中用来设置 Flex 项目在分配多余空间时的放大比例的属性。它定义了 Flex 项目相对于其它 Flex 项目在扩展空间时的增长比例。默认情况下所有 Flex 项目的 flex-grow 值为 0即它们不会扩展以填充剩余空间。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;width: 50%;display: flex;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}.flex-item:nth-child(2) {flex-grow: 1;}/style
/head
bodydiv classflex-containerdiv classflex-item flex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示
flex-shrink 属性
flex-shrink 属性是 Flex 布局中用来设置 Flex 项目在空间不足时的缩小比例的属性。它定义了 Flex 项目相对于其他 Flex 项目在缩小空间时的收缩比例。默认情况下所有 Flex 项目的 flex-shrink 值为 1即它们会等比例缩小以适应容器空间。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;width: 300px;display: flex;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-item flex item 1/divdiv classflex-item styleflex-shrink: 0flex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示
flex-basis 属性
flex-basis 属性是用于指定 Flex Box 容器中项目的初始尺寸主轴上的尺寸的 CSS 属性。它定义了项目在分配多余空间之前的理想大小可以帮助控制项目在主轴上的初始大小。
flex-basis 属性可以接受以下几种取值
1length指定一个固定的长度值比如像素px、百分比%等。 2auto项目的大小由其内容决定。这是默认值。 3content与 auto 类似项目的大小也由其内容决定。 4initial设置为项目的初始大小默认值。 5inherit继承父元素的 flex-basis 值。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;display: flex;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-item flex item 1/divdiv classflex-item styleflex-basis: 200pxflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示 flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;display: flex;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}/style
/head
bodydiv classflex-containerdiv classflex-item flex item 1/divdiv classflex-item styleflex: 0 0 200pxflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/htmlalign-self 属性
align-self 属性是用于指定单个 Flex Box 项目在交叉轴上的对齐方式的 CSS 属性。与 align-items 属性不同align-self 属性适用于单个项目可以覆盖容器级别上的对齐设置。
align-self 属性可以接受以下几种取值
1flex-start项目向交叉轴的起始位置对齐。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}.flex-item:nth-child(2) {align-self: flex-start;}/style
/head
bodydiv classflex-containerdiv classflex-item flex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示 2flex-end项目向交叉轴的结束位置对齐。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}.flex-item:nth-child(2) {align-self: flex-end;}/style
/head
bodydiv classflex-containerdiv classflex-item flex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示 3center项目在交叉轴上居中对齐。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}.flex-item:nth-child(2) {align-self: center;}/style
/head
bodydiv classflex-containerdiv classflex-item flex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示
4baseline项目在交叉轴上与其它项目的基线对齐。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}.flex-item:nth-child(2) {align-self: baseline;}/style
/head
bodydiv classflex-containerdiv classflex-item flex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示
5stretch项目被拉伸以适应容器。
!DOCTYPE html
html
headtitle网页标题/titlestyle.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}.flex-item:nth-child(2) {align-self: stretch;}/style
/head
bodydiv classflex-containerdiv classflex-item flex item 1/divdiv classflex-itemflex item 2/divdiv classflex-itemflex item 3/div /div
/body
/html如图所示 响应式设计
CSS 可以通过媒体查询和相对单位如百分比、em、rem来实现响应式设计使网页能够适应不同的设备和屏幕尺寸。
设置 Viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下
meta nameviewport contentwidthdevice-width, initial-scale1.01width 属性用于设置视口的宽度可以是固定的像素值也可以是特殊的值如 device-width设备的宽度。 2height 属性用于设置视口的高度通常不需要设置因为视口高度会随着设备宽高比的变化而自动调整。 3initial-scale 属性用于设置初始缩放比例默认值为 1.0。 4minimum-scale 和 maximum-scale 属性用于设置缩放的最小和最大值。 5user-scalable 属性用于控制用户是否可以手动缩放网页一般建议将其设置为 no以避免用户对网页进行不必要的缩放操作。
如图所示 构建响应式网格视图
首先确保所有 HTML 元素的 box-sizing 属性设置为 border-box。这样可以确保元素的总宽度和高度中包括内边距填充和边框。
!DOCTYPE html
html
headtitle网页标题/titlemeta nameviewport contentwidthdevice-width, initial-scale1.0 style* {box-sizing: border-box;}.header {border: 1px solid red;padding: 15px;}.menu {width: 25%;float: left;padding: 15px;border: 1px solid red;}.main {width: 75%;float: left;padding: 15px;border: 1px solid red;}/style
/head
bodydiv classheaderh1header/h1/divdiv classmenuh1menu/h1/divdiv classmainpmain/p/div
/body
/html如图所示
12栅格
12栅格系统是一种常见的网页布局系统通常用于响应式设计。在这种系统中页面被分成12列开发者可以根据需要将内容放置在这些列中从而实现灵活的布局。
!DOCTYPE html
html
headtitle网页标题/titlemeta nameviewport contentwidthdevice-width, initial-scale1.0 style.container {display: grid;grid-template-columns: repeat(12, 1fr);gap: 10px;}.item {padding: 10px;border: 1px solid #ccc;}.full-width {grid-column: span 12;}.half-width {grid-column: span 6;}/style
/head
bodydiv classcontainerdiv classitem full-widthFull Width Content/divdiv classitem half-widthHalf Width Content/divdiv classitem half-widthHalf Width Content/div/div
/body
/html如图所示 媒体查询
media 是 CSS 中用于媒体查询的规则它允许你根据设备的不同特性或特定的媒体类型来应用不同的样式。通过 media 规则你可以针对不同的屏幕尺寸、设备类型或打印等场景定义不同的样式规则。
!DOCTYPE html
html
headtitle网页标题/titlestyle/* 默认样式 */p {font-size: 16px;}/* 在小屏幕下修改样式 */media screen and (max-width: 600px) {p {font-size: 14px;}}/* 在大屏幕下修改样式 */media screen and (min-width: 1200px) {p {font-size: 18px;}}/style
/head
bodypmedia示例/p
/body
/html如图所示
案例讲解
下面介绍css处理的一些案例
图片
使用CSS处理图片比如圆角图片、椭圆图片、缩略图图像等。
圆角图片
使用 border-radius设置图片圆角、椭圆图片
!DOCTYPE html
html
headtitle网页标题/titlestyleimg{border-radius: 5px;}/style
/head
bodyimg src./123456.jpg alttitle
/body
/html如图所示 创建椭圆图片
!DOCTYPE html
html
headtitle网页标题/titlestyleimg{border-radius: 50%;}/style
/head
bodyimg src./123456.jpg alttitle
/body
/html如图所示
缩略图图像
!DOCTYPE html
html
headtitle网页标题/titlestyleimg{border: 1px solid #ddd;padding: 5px;}/style
/head
bodyimg src./123456.jpg alttitle
/body
/html如图所示 响应式图像
响应式图片会自动适配各种尺寸的屏幕。
!DOCTYPE html
html
headtitle网页标题/titlestyleimg{border: 1px solid #ddd;width: 100%;height: auto;}/style
/head
bodyimg src./123456.jpg alttitle
/body
/html如图所示 图片居中
!DOCTYPE html
html
headtitle网页标题/titlestyleimg{display: block;margin: auto;width: 50%;}/style
/head
bodyimg src./123456.jpg alttitle
/body
/html如图所示 图片滤镜
filter 属性用为元素添加可视效果 (例如模糊与饱和度) 。
以下是一些常见的 filter 属性值及其效果
模糊blur
!DOCTYPE html
html
headtitle网页标题/titlestyleimg{filter: blur(5px);}/style
/head
bodyimg src./123456.jpg alttitle
/body
/html如图所示 对比度contrast
!DOCTYPE html
html
headtitle网页标题/titlestyleimg{filter: contrast(10%);}/style
/head
bodyimg src./123456.jpg alttitle
/body
/html如图所示 亮度brightness
!DOCTYPE html
html
headtitle网页标题/titlestyleimg{filter: brightness(50%);}/style
/head
bodyimg src./123456.jpg alttitle
/body
/html如图所示
饱和度saturate
!DOCTYPE html
html
headtitle网页标题/titlestyleimg{filter: saturate(60%);}/style
/head
bodyimg src./123456.jpg alttitle
/body
/html如图所示 反色invert
!DOCTYPE html
html
headtitle网页标题/titlestyleimg{filter: invert(100%);}/style
/head
bodyimg src./123456.jpg alttitle
/body
/html如图所示 灰度grayscale
!DOCTYPE html
html
headtitle网页标题/titlestyleimg{filter: grayscale(100%);}/style
/head
bodyimg src./123456.jpg alttitle
/body
/html如图所示 色调旋转hue-rotate
!DOCTYPE html
html
headtitle网页标题/titlestyleimg{filter: hue-rotate(90deg);}/style
/head
bodyimg src./123456.jpg alttitle
/body
/html如图所示
透明度opacity
!DOCTYPE html
html
headtitle网页标题/titlestyleimg{filter: opacity(40%);}/style
/head
bodyimg src./123456.jpg alttitle
/body
/html如图所示 你可以使用opacity属性单独设置。
按钮
你可以通过css设置按钮样式
!DOCTYPE html
html
headtitle网页标题/titlestyle.btn{border: none;background-color: rgb(6, 79, 236);border-radius: 10px;width: 100px;height: 50px;color: white;cursor: pointer;}.btn2{border: none;background-color: rgb(6, 79, 236);border-radius: 50px;width: 100px;height: 50px;color: white;cursor: pointer;}.btn3{border: 1px solid rgb(148, 61, 235);background-color: white;width: 100px;height: 50px;cursor: pointer;}.btn4{border: 1px solid rgb(148, 61, 235);background-color: white;width: 100px;height: 50px;cursor: pointer;}.btn4:hover{background-color: rgb(148, 61, 235);color: white;}/style
/head
bodybutton普通按钮/button!-- 圆角按钮 --button classbtn圆角按钮/button!-- 药丸按钮 --button classbtn2药丸按钮/button!-- 边框按钮 --button classbtn3边框按钮/button!-- 边框悬停按钮 --button classbtn4边框悬停按钮/button
/body
/html如图所示 分页
如果查询的数据太多可以使用分页来缓解数据压力。下面介绍使用css创建分页
!DOCTYPE html
html
headtitle网页标题/titlestyleli {display: inline;}li a{text-decoration: none;}/style
/head
bodyul classpaginationlia href#«/a/lilia href#1/a/lilia classactive href#2/a/lilia href#3/a/lilia href#4/a/lilia href#5/a/lilia href#6/a/lilia href#7/a/lilia href#»/a/li/ul
/body
/html如图所示 将li标签由垂直方向改为水平方向后再来美化分页
!DOCTYPE html
html
headtitle网页标题/titlestyleli {display: inline;}li a{/*隐藏下划线*/text-decoration: none;padding: 8px 16px;}/*未选中悬浮的背景色*/li a:hover:not(.active) {background-color: #ddd;}li a.active {background-color: #4CAF50;color: white;
}/style
/head
bodyul classpaginationlia href#«/a/lilia href#1/a/lilia classactive href#2/a/lilia href#3/a/lilia href#4/a/lilia href#5/a/lilia href#6/a/lilia href#7/a/lilia href#»/a/li/ul
/body
/html如图所示
浏览器支持
为了适应不同浏览器支持可以在属性前面加上浏览器内核识别码。比如-webkit-Safari 与 Chrome, -ms-IE 或 -moz-Firefox。
div{border-image:url(border.png) 30 30 round;-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and Chrome*/-moz-border-image:url(border.png) 30 30 round; /* Firefox*/
}
