如何做网站结构分析,张家港建设局官方网站,网站开发者排名,网页制作教程实例1.CSS中的var( )
var() 函数用于插入自定义属性#xff08;也称为CSS变量#xff09;的值。
var(--main-bg-color,20rpx)
设置一个CSS变量的值#xff0c;但是如果 --main-bg-color 变量不存在#xff0c;它将默认返回 20rpx。
CSS变量必须在一个有效的CSS规则#xf…1.CSS中的var( )
var() 函数用于插入自定义属性也称为CSS变量的值。
var(--main-bg-color,20rpx)
设置一个CSS变量的值但是如果 --main-bg-color 变量不存在它将默认返回 20rpx。
CSS变量必须在一个有效的CSS规则如选择器内定义否则它们不会被识别。如果你在 :root 伪类中定义了 --main-bg-color那么你可以在任何后代元素中使用 var() 函数来引用它。
:root {--main-bg-color: #fff; /* 定义一个名为 --main-bg-color 的CSS变量值为 #fff */
}.element {background-color: var(--main-bg-color); /* 使用 var() 函数来引用 CSS 变量 */
}我们首先在 :root 伪类中定义了 --main-bg-color 变量然后在一个名为 .element 的类中使用 var() 函数来设置背景颜色。
如果你在JavaScript中动态设置CSS变量你可以这样做
document.documentElement.style.setProperty(--main-bg-color, #fff);这个方法将动态设置 --main-bg-color 变量的值。请确保在执行这个操作的时候DOM已经完全加载否则可能不会生效。 2.display:flex justify-content 用于设置或检索弹性盒子元素在主轴横轴方向上的对齐方式。/* 对齐方式 */justify-content: center; /* 居中排列 */justify-content: start; /* 从行首开始排列 */justify-content: end; /* 从行尾开始排列 */justify-content: flex-start; /* 从行首起始位置开始排列 */justify-content: flex-end; /* 从行尾位置开始排列 */justify-content: left; /* 一个挨一个在对齐容器得左边缘 */justify-content: right; /* 元素以容器右边缘为基准一个挨着一个对齐, *//* 基线对齐 */justify-content: baseline;justify-content: first baseline;justify-content: last baseline;/* 分配弹性元素方式 */justify-content: space-between; /* 均匀排列每个元素首个元素放置于起点末尾元素放置于终点 */justify-content: space-around; /* 均匀排列每个元素每个元素周围分配相同的空间 */justify-content: space-evenly; /* 均匀排列每个元素每个元素之间的间隔相等 */justify-content: stretch; /* 均匀排列每个元素auto-sized 的元素会被拉伸以适应容器的大小 *//* 溢出对齐方式 */justify-content: safe center;justify-content: unsafe center;/* 全局值 */justify-content: inherit;justify-content: initial;justify-content: unset;
flex-direction 属性规定灵活项目的方向。row默认值。灵活的项目将水平显示正如一个行一样。
row-reverse 与 row 相同但是以相反的顺序。
column 灵活的项目将垂直显示正如一个列一样。
column-reverse 与 column 相同但是以相反的顺序。
initial 设置该属性为它的默认值。请参阅 initial。
inherit 从父元素继承该属性。请参阅 inherit。
align-items 属性定义flex子项在flex容器的当前行的侧轴纵轴方向上的对齐方式。stretch默认值。元素被拉伸以适应容器。 如果指定侧轴大小的属性值为auto则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸但同时会遵照min/max-width/height属性的限制。
center 元素位于容器的中心。 弹性盒子元素在该行的侧轴纵轴上居中放置。如果该行的尺寸小于弹性盒子元素的尺寸则会向两个方向溢出相同的长度。
flex-start 元素位于容器的开头。弹性盒子元素的侧轴纵轴起始位置的边界紧靠住该行的侧轴起始边界。
flex-end 元素位于容器的结尾。弹性盒子元素的侧轴纵轴起始位置的边界紧靠住该行的侧轴结束边界。
baseline 元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条则该值与flex-start等效。其它情况下该值将参与基线对齐。
initial 设置该属性为它的默认值。请参阅 initial。
inherit 从父元素继承该属性。请参阅 inherit。 3.linear-gradient()
linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。创建一个线性渐变需要指定两种颜色还可以实现不同方向指定为一个角度的渐变效果如果不指定方向默认从上到下渐变。
/* 从上到下蓝色渐变到红色 */
linear-gradient(blue, red);/* 渐变轴为45度从蓝色渐变到红色,顺时针的转动 */
linear-gradient(45deg, blue, red);/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);/* 从下到上从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);/* 从左侧开始的线性渐变从红色开始转为黄色 */
linear-gradient(to right, red , yellow);/* 从左上角到右下角的线性渐变 */
linear-gradient(to bottom right, red , yellow);/* 90度线性渐变顺时针的90度 */
linear-gradient(90deg, red, yellow);/* -90度线性渐变顺时针的90度 */
linear-gradient(-90deg, red, yellow);/* 多个终止色的线性渐变 */
linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);/* 使用了透明度的线性渐变 */
linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));/* 从下到上的线性渐变 */
linear-gradient(180deg, #0066cc 0%, #0066cc 50%, #f8f8f8 50%, #f8f8f8 100% ); 4.flex-shrink: 1
按照给的比例进行划分份数。
flex-shrink的默认值为1如果没有显示定义该属性将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
A、B、C 显式定义了 flex-shrink 为 1D、E 定义了 flex-shrink 为 2所以计算出来总共将剩余空间分成了 7 份其中 A、B、C 占 1 份D、E 占 2 份即1:1:1:2:2
.box { flex-shrink: 1;
}.box1 { flex-shrink: 2;
}div classbox stylebackground-color:red;A/div
div classbox stylebackground-color:lightblue;B/div
div classbox stylebackground-color:yellow;C/div
div classbox1 stylebackground-color:brown;D/div
div classbox1 stylebackground-color:lightgreen;E/div5.vertical-align
vertical-align 属性设置一个元素的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中这个属性会设置单元格框中的单元格内容的对齐方式。
值描述baseline默认。元素放置在父元素的基线上。sub垂直对齐文本的下标。super垂直对齐文本的上标top把元素的顶端与行中最高元素的顶端对齐text-top把元素的顶端与父元素字体的顶端对齐middle把此元素放置在父元素的中部。bottom使元素及其后代元素的底部与整行的底部对齐。text-bottom把元素的底端与父元素字体的底端对齐。length将元素升高或降低指定的高度可以是负数。%使用 line-height 属性的百分比值来排列此元素。允许使用负值。inherit规定应该从父元素继承 vertical-align 属性的值。 vertical-align:middle; 6.CSS position
position属性指定一个元素静态的相对的绝对或固定的定位方法的类型。
值描述absolute 生成绝对定位的元素相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 left, top, right 以及 bottom 属性进行规定。 fixed 生成固定定位的元素相对于浏览器窗口进行定位。 元素的位置通过 left, top, right 以及 bottom 属性进行规定。 relative 生成相对定位的元素相对于其正常位置进行定位。 因此left:20 会向元素的 LEFT 位置添加 20 像素。 static默认值。没有定位元素出现在正常的流中忽略 top, bottom, left, right 或者 z-index 声明。sticky 粘性定位该定位基于用户滚动的位置。 它的行为就像 position:relative; 而当页面滚动超出目标区域时它的表现就像 position:fixed;它会固定在目标位置。 注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。 inherit规定应该从父元素继承 position 属性的值。initial设置该属性为默认值详情查看 CSS initial 关键字。 position:absolute;left:100px;top:150px;
