前端开发学习笔记

CSS 定位及图片整合应用

position 属性规定元素的定位类型

值	描述
absolute 绝对定位	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可使用“z-index”属性进行图片、文本层叠控制。
fixed 固定定位	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative相对定位	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

absolute会脱离正常的文档流，relative不会脱离正常的文档流

实例

定位 h2 元素：

h2
  {
  position:absolute;
  left:100px;
  top:150px;
  }

精灵图的使用

使用上图边距(300pxX300px)达到让每个表情在不同位置出现

可利用背景图片定位实现效果：

<style type="text/css">
ul {
			list-style: none;
		}
	ul li {
			float: left;
			margin-right: 10px;
		}
		ul li div {
			width:100px; height:100px;
		}
         ul li.a1 div {
			background: url(images/timg.jpg) 0 0;
		}
		ul li.a2 div {
			background: url(images/timg.jpg) -100px                0;
		}
 </style>


<ul>
   <li class="a1">
   1
      <div></div>     
  </li>
  <li class="a2">
  2
      <div></div>
  </li>
</ul>

注
background: url(images/timg.jpg) -100px 0; 
背景链接后的数值为基于该背景图中不同内容的定位值(需根据图片大小修改)

语义化标签

HTML 
<header>...</header>  <!--头部―->
<footer>...</footer>  <!--尾部―->
<nav>...</nav>        <!--导航-->
<article>...</article><!--文章(通常指数踞内容）-->
<aside> . ..</aside>  <!--，侧边栏–->
<main>. ..</main>     <!--网页主体-->
<section>...</section><!--区块、片段类似于div容器――>

input标签可设定type值更改输入框的作用
<input type="email" > 邮箱
<input type="url"> 超链接 
<input type="number"> 数字
<input type="password"> 密码

overflow属性与BFC

实现元素隐藏
1.opacity:0 设置透明度0，视觉上隐藏
2.visibility:hidden 将元素隐藏，不影响网页中占有的位置
3.display:none 将元素从网页移除
4.transform：scale(0) 对元素进行缩放
4.position:-2000px 将元素移出视图区，不影响网页中占有的位置

transform属性scale缩放
1、scale(x,y) 对元素进行缩放
X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数
Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。
例：transform:scale(2,2.5);
 
2、 scaleX(<number>) 元素只在X轴（水平方向）缩放元素。
默认值是1，基点一样在元素的中心位置。可以通过transform-origin来改变基点
例：transform:scaleX(2);
 
3、 scaleY(<number>) 元素只在Y轴（垂直方向）缩放元素。
基点一样在元素的中心位置。可以通过transform-origin来改变基点。
例：transform:scaleY(2);

BFC触发条件以及规则
触发条件：

1.float的值不为none

2.overflow的值不为visible

3.display的值为table-cell、tabble-caption和inline-block之一

4.position的值不为static或则releative中的任何一个

规则：

1.浮动的元素会被父级计算高度（父级触发了BFC）

2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）

3.margin不会传递给父级（父级触发了BFC），两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）

 

巧妙用法：

清除浮动；

非浮动元素盖住浮动元素，可依靠触发BFC来解决

margin合并情况，在其中一个元素父级触发BFC，将不会合并margin

阴影效果

-webkit-appearance:none; //取消复选框默认样式
xxx::after{
content:"";
...
}//伪元素
background:linear-gradient(to top/right/bottom/left;开始颜色;结束颜色)；//背景颜色渐变
box-shadow:水平位置 垂直位置 模糊度 扩大范围 阴影颜色 阴影方向（默认向外）//图形阴影

添加文本阴影  text-shadow

例

过渡效果

transion: 过渡方向 过渡时间 过渡方式 延迟时间;
语法：
transition: property duration timing-function delay;

transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。
提示：过渡效果通常在用户将鼠标指针浮动到元素上时发生。
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）

transition-timing-function 属性规定过渡效果的速度曲线。
该属性允许过渡效果随着时间来改变其速度。

transition-delay 属性规定过渡效果何时开始。
transition-delay 值以秒或毫秒计。

贝塞尔曲线：又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线
input[type='checkbox']:checked{}//伪类选择器，选择选中的元素

语法：

transition: property duration timing-function delay;

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

语法：

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

过渡方式：

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性	chrom	edge	firefox	Safari	opera
transition	26.04.0 -webkit-	10.0	16.04.0 -moz-	6.1 3.1 -webkit-	12.110.5 -o-

transform&&响应式

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
移动效果
transform:translateX(x)/translateY(y)/translateZ(z);
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
translateX(x)定义转换，只是用 X 轴的值。
translateY(y)定义转换，只是用 Y 轴的值。
translateZ(z)定义 3D 转换，只是用 Z 轴的值。
例:transform: translate(50px,100px);//把元素从左侧移动 50 像素，从顶端移动 100 像素。
transform: translateX(50px);把元素沿X轴移动 50 像素
缩放效果
transform:scaleX(x)/scaleX(y)/scaleZ(z)/scale(x,y);
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleX(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
例:transform: scale(2,4);把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
 transform: scaleX(2);沿x轴转换为原始尺寸的 2 倍
旋转效果
transform:rotateX(angle)/rotateY(angle)/rotateZ(angle);
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
例:transform: rotateX(120deg);//沿x轴旋转120度
transform: skew(30deg,20deg);//围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度

语法

transform: none|transform-functions;

值	描述
none	定义不进行转换。

透视

transform：perspective(500px) rotate(20deg);
perspective要写在前面

响应式网页

页面的设计与开发根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整称之为响应式 Web 设计。
例：
@media screen and (max-width: 600px) {
...
}//小于 600 px 时改为以下布局 

Viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

帧动画

关键帧 @keyframe

inline-block 设置span标签display属性为inline-block时两个span标签用回车换行时两个span效果中间有间隙，去掉换行则没有。
vertical-align 必须作用在inline-block属性下用来调整对齐方式

透明度 opacity 设置整个元素透明度 
opacity:1;//完全不透明
opacity:0;//完全透明

background:rgba(117,0,0,0.5);

flex布局方式

flex-direction
属性规定灵活项目的方向。
注意：如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。
语法
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

属性值

值	描述
row	默认值。灵活的项目将水平显示，正如一个行一样。
row-reverse	与 row 相同，但是以相反的顺序。
column	灵活的项目将垂直显示，正如一个列一样。
column-reverse	与 column 相同，但是以相反的顺序。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

justify-content
用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
提示：使用 align-content 属性对齐交叉轴上的各项（垂直）。
CSS 语法
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

属性值

值	描述
flex-start	默认值。项目位于容器的开头。
flex-end	项目位于容器的结尾。
center	项目位于容器的中心。
space-between	项目位于各行之间留有空白的容器内。
space-around	项目位于各行之前、之间、之后都留有空白的容器内。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

align-content
属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。
提示：使用 justify-content 属性对齐主轴上的各项（水平）。
注意：容器内必须有多行的项目，该属性才能渲染出效果。
语法
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

默认值

值	描述
stretch	默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。
center	元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）
flex-start	元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。
flex-end	元素位于容器的结尾。各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。
space-between	元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’flex-start’。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。
space-around	元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’center’。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

flex-grow
属性用于设置或检索弹性盒子的扩展比率。。
注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。
语法
flex-grow: number|initial|inherit;

属性值

值	描述
number	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

flex-hrink
属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。
语法
flex-shrink: number|initial|inherit;

属性值

值	描述
number	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

posted @ 2021-03-04 17:22 AUSER 阅读(122) 评论(0) 收藏举报

刷新页面返回顶部

AUSER