css及css3学习

css~css3

前言：
（1）css的复合选择器总结
（2） flex布局
（3）过渡属性
（4）变形属性

复合选择器

后代选择器：用于选择后代元素（可以是子孙后代）

Flex布局
*CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式, display 属性的值flex 或 inline-flex将其定义为弹性容器。

direction`属性：修改弹性子元素排列方式rtl（right-to-left）
flex-direction属性：

 row：横向从左到右排列（左对齐），默认的排列方式。row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。column：纵向排列。column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

justify-content属性:
flex-start:

center:

flex-end:

space-around:

space-between:
align-items(作用于纵轴，也就是y轴)：

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
flex-wrap属性：

nowarp:

wrap

wrap-reverse -反转 wrap 排列。
align-content属性（对比align-items属性）：
flex-start :

initial:

space-around:

inherit,space-between,flex-end…
过渡属性（transition）
transition-property:规定应用过渡的 CSS 属性的名称 eg：width，height，将鼠标悬停在一个div元素上，逐步改变表格的宽度或高度。
transition-duration：定义过渡花费的时间，默认是 0。
transition-timing-function ：

 linear:匀速过渡；ease：慢快慢的过渡效果；ease-in：以慢速开始的过渡效果；ease-out:以慢速结束的过渡效果；ease-in-out:以慢速开始以及结束的过程；

transition-delay ：规定过渡从何时开始，默认为0，即是过渡开始前会停顿的时间。
变形属性
2D转换

matrix(n,n,n,n,n,n)  使用六个值的矩阵。
translate(x,y)       沿着 X 和 Y 轴移动元素。
translateX(n)        沿着 X 轴移动元素。
translateY(n)        沿着 Y 轴移动元素。
scale(x,y)           改变元素的宽度和高度。
scaleX(n)            改变元素的宽度。
scaleY(n)            改变元素的高度。
rotate(angle)        在参数中规定角度。
skew(x-angle,y-angle)沿着 X 和 Y 轴都倾斜转换。
skewX(angle)         沿着 X 轴倾斜转换。
skewY(angle)         沿着 Y 轴倾斜转换。```css

3D转换

matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)   使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)
translateX(x)          仅使用用于 X 轴的值。
translateY(y)          仅使用用于 Y 轴的值。
translateZ(z)          仅使用用于 Z 轴的值。
scale3d(x,y,z)         缩放转换。
scaleX(x)              定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)              定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)              定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)  定义 3D 旋转。
rotateX(angle)         定义沿 X 轴的 3D 旋转。
rotateY(angle)         定义沿 Y 轴的 3D 旋转。
rotateZ(angle)         定义沿 Z 轴的 3D 旋转。
perspective(n)         定义 3D 转换元素的透视视图

css及css3学习相关推荐

狂神css3笔记,【CSS】CSS3学习笔记（一）——选择器
✨CSS 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...
Java学习-14 CSS与CSS3美化页面及网页布局
Java学习-14 CSS与CSS3美化页面及网页布局 1. CSS简介什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示控制 HTML 元素, ...
HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
菜鸟教程-css3学习笔记
学习链接是: https://www.runoob.com/css3/css3-tutorial.html ############################################## ...
和css3实例教程_最好CSS和CSS3教程
和css3实例教程级联样式表(CSS) (Cascading Style Sheets (CSS)) CSS is an acronym for Cascading Style Sheets. It ...
前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介二.css语法规范三.css代码风格四.css选择器的作用五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...
千峰HTML5+CSS3学习笔记
千峰HTML5+CSS3学习笔记文章目录千峰HTML5+CSS3学习笔记写在前面 1. 前言 2. HTML 3. CSS 3.1 选择器 3.2 CSS属性 4. 盒子模型 4.1 溢出属性 ...
【CSS3】CSS3 学习笔记（1w字+）
CSS3 学习笔记一 l CSS 基础 (一)CSS 介绍 1.CSS 教程 2.CSS 编写规范 (二)CSS 基础语法二 l CSS 选择器 (一)元素选择器 (二)选择器分组(多个选择器 ...
加载动画php,CSS3学习之页面加载动画（二）
本篇文章给大家分享6种css3的页面加载动画.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 在之前的文章[CSS3学习之页面加载动画(一)]中已经分享了四个CSS3的加载动画,今天 ...

css及css3学习

css~css3

css及css3学习相关推荐

最新文章

热门文章