CSS3基本知识点总结
这两天总结了一下CSS3中的基本知识点,没有做到很全面,因为之前也记过一些笔记,就没有再整理成文档。这里我会把之前的笔记拍照贴出来,基本都是一些很零碎的小知识点,需要大家平时多敲代码,多翻看笔记,以加深记忆,从而对CSS熟练运用。
本文档参考了以下网站,如详细了解,请移步:
https://www.w3cschool.cn/css3/htkn4flf.html
http://www.runoob.com/css3/css3-tutorial.html
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html(Flex布局)
- CSS3边框
边框属性:
border-radius:创建圆角边框
box-Shadow:附加一个或者多个下拉框的阴影
border-image(不支持IE):使用图像创建一个边框
- CSS3圆角
可以使用CSS3 圆角制作器来制作一个css3圆角,可以直接生成代码。
指定border-radius的每个圆角:
如果只指定一个值,则生成四个圆角;若在每个角上指定,则使用如下规则:
四个值:四个值分别指定左上角、右上角、右下角、左下角。
三个值:第一个值为左上角,第二个值为右上角和左下角,第三个值为右下角。
两个值:第一个值为左上角和右下角,第二个值为右上角和左下角。
一个值:四个圆角值相同。
创建椭圆边角:
border-radius: 50px/15px;
border-radius: 50%;
圆角属性:
border-radius |
所有四个边角属性的缩写 |
border-top-left-radius |
左上角的弧度 |
border-top-right-radius |
右上角的弧度 |
border-bottom-left-radius |
左下角的弧度 |
border-bottom-right-radius |
右下角的弧度 |
- CSS3背景
四种背景属性:
background-image:添加背景图片。不同的背景图像和图像用逗号隔开。
background-size:指定背景图像的大小,可指定像素或者百分比的大小,是相对于父元素的宽度和高度的百分比的大小。
background-origin:指定了背景图像的位置区域
background-clip:背景裁剪属性是从指定位置开始绘制。
- CSS3渐变
渐变可以让我们在两个或者多个颜色之间显示平稳的过渡。
两种类型的渐变:
Linear Gradients:线性渐变-向下/向上/向左/向右/对角方向
Radial Gradients:径向渐变,由它们的中心定义
线性渐变:
语法:background:linear-gradient(direction, color-stop1, color-stop2, …);
线性渐变默认情况是从上到下。
从左到右的线性渐变:
#grad {
background: -webkit-linear-gradient(left, red, blue);
background: -o-liner-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red, blue);/*标准语法*/
}
从左上角开始到右下角的渐变:
设置方向为:left top/bottom right/to bottom right(标准语法下)
使用角度对方向进行设置:
这里的角度是指水平线和渐变线之间的角度。So 0deg将创建一个从下到上的渐变,90deg将创建一个从左到右的渐变。
使用透明度:
支持透明度,用于创建减弱变淡的效果。
为了添加透明度,使用rgba()函数来定义颜色结点。rgba()函数中的最后一个参数可以是从0到1的值,它定义了颜色的透明度:0表示完全透明,1表示完全不透明。
重复的线性渐变:
repeating-linear-gradient()函数用于重复的线性渐变。
径向渐变:
我们可以指定渐变的中心、形状(圆形或者椭圆形)、大小,默认情况下,渐变的中心是center(表示在中心点),渐变的形状是ellipse(表示椭圆形),渐变的大小是farthest-corner(表示到最远的角落)。
语法: background: radial-gradient(center, shape size, start-color, …, last-color);
颜色结点分布不均匀的径向渐变:
#grad{
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
}
Size参数定义了渐变的大小,可以是以下四个值:
closest-side/farthest-side/closest-corner/farthest-corner
重复的径向渐变:
Reperting-radial-gradient()函数用于重复径向渐变。
- CSS3文本效果
包含属性:
text-shadow:适用于文本阴影,可以指定是水平阴影还是垂直阴影、模糊的距离以及阴影的颜色。
box-shadow:适用于盒子阴影。同上。可以在::after和::before两个伪元素中添加阴影效果。
text-overflow:文本溢出属性指定应向用户如何显示溢出内容
有两个属性:ellipsis(以省略号的形式隐藏内容)和clip(直接截断内容)
word-wrap:强制换行,但是单词中间不换行
word-break:单词可进行拆分然后换行
- CSS3字体
@font-face规则,若使用,首先定义字体的名称,然后指向该文字字体。
通过font-family属性来引用字体的名称。
列举出所有的字体描述和里面的@font-face规则定义
描述符 |
值 |
描述 |
font-family |
name |
必需,规定字体的名称。 |
src |
URL |
必需,定义字体文件的URL |
font-strench |
normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
可选,定义如何拉伸字体,默认值是nomal |
font-style |
nomal Italic oblique |
可选,定义字体的样式 |
font-weight |
nomal bold 100 200 ...... 900 |
可选,定义字体的粗细 |
unicode-range |
unicode-range |
可选,定义字体支持的UNICODE字符范围 |
- CSS3 2D转换
2D变换方法:
translate():平移
rotate():在一个给定度数顺时针旋转的元素
scale()
skew()
matrix()
- CSS3过渡
为了添加某种效果可以从一个样式转变到另一个的时候,无需使用flash动画或JavaScript,只需要鼠标移动到上面就可以。
我们要实现这样的效果,必须规定两项内容:
指定要添加效果的CSS属性和效果的持续时间
所有的过渡属性:
transition:简写属性,用于在一个属性中设置四个过渡属性
transition-property:规定应用过渡的CSS属性的名称
transition-duration:定义过渡效果花费的时间,默认是0
transition-timing-function:规定过渡效果的时间曲线,默认是‘ease‘
transition-delay:规定过渡时间何时开始,默认是0
div {
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
}//等价于div{ transition: width 1s linear 2s; }
- CSS3动画
创建动画,可以取代许多网页动画图像,Flash动画和JavaScript.
CSS3@keyframes规则
该规则是创建动画。@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
当@keyframes创建动画时,把它绑定到一个选择器,否则不会有任何效果。
指定至少两个CSS3的动画属性绑定向一个选择器:规定动画的名称和动画的时长。
div {
width: 100px;
height: 100px;
background: red;
animation: myfirst 5s;
}
@keyframes myfirst {
from { background: red;}
to { backgroung: yellow;}
}
我们可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间,或用关键词“from”和“to”,等同于0%和100%。0%是动画的开始,100%是动画的完成。
所有的动画属性:
- CSS3多列
多列属性:
column-count:指定元素的列数应分为几列。
div {
-moz-column-count:3;/*Firefox*/
}
column-gap:指定的列之间的差距
column-rule:设置列之间的宽度、样式和颜色
column-rule-color:指定的列之间颜色规则
column-rule-style:指定的列之间的样式规则
column-rule-width:指定的列之间的宽度规则
column-width:指定列的宽度
column-span:指定一个元素应该横跨多少列
columns:缩写属性设置列宽和列数
column-fill:指定如何填充列
- CSS3用户界面
新增加了一些新的用户界面特性来调整元素尺寸、框尺寸和外边框。
用户界面属性:
resize:指定一个元素是否应该由用户去调整大小
box-sizing:允许以确切的方式定义适应某个区域的具体内容
outline-offset:对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。轮廓与边框不同,轮廓不占用空间,而且可能是非矩形。
- CSS3盒子模型
所有HTML元素可以看作盒子。CSS盒模型本质上是一个盒子,封装周围的HTML元素,包括:边距、边框、填充和实际内容。
不同部分的说明:
Margin:外边距,清除边框外的区域,外边距是透明的。
Border:边框,围绕在内边距和内容外的边框。
Padding:内边距,清除内容周围的区域,内边距是透明的。
Content:盒子的内容,显示文本和图像。
总元素的宽度 = 宽度 + 左填充(padding) + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
两种盒模型的比较:
盒模型分为W3C的标准盒模型和IE盒模型。
标准盒模型的宽度就是content的宽度,高度是content的高度,而IE盒模型的宽度是content+padding+border的总和。
切换盒模型的方法:设置box-sizing属性。
box-sizing: content-box //W3C盒子模型
box-sizing:border-box //IE盒子模型
- CSS3弹性盒子(Flex Box)
说明:弹性盒子模型这一重点知识阮一峰老师讲的很详细,图文结合很容易理解,文章开头我附加了阮一峰老师这部分内容的链接。除了一些基本的语法之外,还有很多实用的实例。一定要掌握这一部分的知识点,面试中会经常问到。
是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
弹性盒子由弹性容器和弹性子元素组成。弹性容器通过设置display属性的值为flex或inline-flex(行内元素设置为Flex布局)将其定义为弹性容器。
注:设为了Flex布局以后,子元素的float、clear和virtical-align属性将失效。
弹性容器内包含一个或多个弹性子元素。
注意:弹性容器外及弹性子元素内是正常渲染的,弹性盒子只定义了弹性元素的如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示,默认情况每个容器只有一行。
修改排列方式:rtl(right to left)
body { direction: rtl; }
弹性容器上的属性共有6个:
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
①flex-direcion:决定了主轴的方向(即弹性子元素在父容器中的排列方向)。
语法:flex-direction: row | row-reverse | column | column-reverse
row:横向从左到右排列。默认的排列方式。
row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面)
column:纵向排列。
column-reverse:反转纵向排列,从后往前排,最后一项排在最上面。
②flex-wrap:默认情况下,项目都排在一条线上,该属性定义如果一条轴线排不下,如何换行。
语法:flex-wrap: nowrap | wrap | wrap-reverse
③flex-flow:该属性是flex-direction属性和flex-wrap属性的简写形式,默认值是row nowrap。
④justify-content:定义了项目在主轴上的对齐方式,把弹性项沿着弹性容器的主轴线对齐。
语法:justify-content: flex-start | flex-end | center | space-between | space-around
flex-start:左对齐
flex-end:右对齐
center:居中
space-between:两端对齐,项目之间的间隔都是相等的
space-around:每个项目两侧的间隔相等,所以项目之间的间隔比项目与边框的间隔大一倍。
⑤align-items:定义项目在交叉轴上如何对齐。
语法:align-items: flex-start | flex-end | center | baseline | strench
baseline:项目的第一行文字的基线对齐
strench(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
⑥align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
语法:align-content: flex-start | flex-end | center | space-between | space-around | strench(默认值)
弹性子元素上的6个属性:
order
flex-grow
flex-shrink
flex-basis
flex
align-self
①order :定义弹性子元素的排列顺序。数值越小,排列越靠前,默认为0。
语法:order: <integer>
②flex-grow:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
语法:flex-grow: <number>
③flex-shrink:定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。负值对该属性无效。
语法:flex-shrink: <number>
④flex-basis:定义了在分配多余空间之前,项目占据的主轴空间。默认值为auto
⑤flex属性是flex-grow、flex-shrink、flex-basis的简写,默认值是 0 1 auto。建议优先使用这个属性。该属性有两个快捷值: auto(1 1 auto) 和none(0 0 auto)。
⑥align-self:允许单个弹性子元素有与其他子元素不一样的对齐方式。可覆盖align-items属性,默认值为auto,表示继承弹性容器的align-items属性,如果没有父元素,则等同于strench。
- CSS3多媒体查询
CSS中我们可以根据不同的媒体类型(包括显示器、便携设备、电视机等)来设置不同的样式规则。
在CSS3中根据设置自适应显示。
媒体查询可用于检测很多事情:
Viewport(视图)的宽度和高度
设备的宽度和高度
朝向(智能手机横屏,竖屏)
分辨率
CSS3基本知识点总结相关推荐
- CSS(CSS3)知识点学习
文章目录 一.CSS的发展历程 二.CSS网页的美容师 三.CSS初识 1.书写位置 (1)内部样式表(内嵌式) (2)内联样式(行内式) (3)外部样式表(外链式) (4)三种样式表总结 2.CSS ...
- HTML5+CSS、CSS3基础知识点总结
一.选择器 选择器分为基础选择器和复合选择器两大类. 基础选择器由单个选择器组成 基础选择器包括:标签选择器.类选择器.id 选择器和通配符选择器(*) 标签选择器 优点 标签选择器可以把某一标签全部 ...
- CSS3基础知识点 一点通
一.初步了解 Css3: 1.CSS 指层叠样式表(3级) (Cascading Style Sheets) 2.CSS 用于控制网页的样式和布局. 3.CSS3 是最新的 CSS 标准. 二.新增特 ...
- css3基础知识点--过渡效果
CSS3中元素从一种样式转变到另一个的时候,为了使这个过程显得不那么唐突,可以加入一些效果,包括过渡时间.延时时间.过渡的运动方式等,这时就可以用过渡,无需使用flash动画或者JS. 这个过渡有动画 ...
- CSS3学习笔记总结,你值得拥有(呕心沥血之作,涵盖CSS3所有知识点)
目录 简介 边框 圆角 背景 渐变 文本效果 字体 2D转换 3D转换
- html5与css3入门知识点精炼
<meta name = "keywords" content="----"/>(网页搜索时要输入的关键字) <meta name = &qu ...
- 原创:CSS3技术-雪碧图自适应缩放与精灵动画方案
花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理 原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值 问题很明显, ...
- 想学好前端 H5 CSS3 的小朋友们康康我~
嗨喽,各位亲爱的 CSDN 小伙伴们,欢迎来到实力至上主义的教室(简单为喜欢的动漫打个小广告). 以下呢是我对前端 H5 & CSS3 常用知识点历时两个多月的倾心整理,内容简练,通俗易懂(比 ...
- 11、CSS3选择器及属性
目录 一.CSS3概念知识点 1.概念 2.优点 3.渐进增强和优雅降级 二.CSS3选择器 *1.层级选择器 2.属性选择器(常用于表单) 3.结构伪类选择器 4.目标伪类选择器(用于锚记效果) * ...
最新文章
- 苹果Siri团队被合并,由谷歌前高管直接领导
- java线程安全性_Java并发-线程安全性
- python处理excel视频-从零基础开始用Python处理Excel数据 视频教程
- BottomNavigationBar使用详解
- Spring + JDK Timer Scheduler Example--reference
- ACK容器服务发布virtual node addon,快速部署虚拟节点提升集群弹性能力
- printf输出颜色和ANSI控制码(高亮,下划线,闪烁,光标位置,清屏等)
- CI框架json无法Unicode转中文解决方案
- Python 字符串大小写转换
- android日记本实训报告,实训笔记
- 全国计算机演示文稿,全国计算机等级考试二级office演示文稿题目[文].pdf
- 钉钉人脸识别,戴个太阳帽就找不到人脸
- Filmage Screen for Mac 专业录屏软件用这个就足够
- 官方FastReport 2021最新中文开发者指南
- win10下面安装MTK USB VCOM 驱动
- 参加西湖论剑2021
- HHKB-BT 入门指北
- 计算机发展史评课议课稿,历史课评课稿
- 四小时学python爬虫爬取信息系列(第一天)
- IEEP部署企业级网络工程-网络故障-环路故障
热门文章
- 表单序列化serialize()和serializeArray()的区别以及后台接收
- SpringBoot+Vue实现个人信息以及头像数据联动
- Unity AssetBundle 依赖打包以及Manifest文件的使用(六)
- 无线网络破解,破解wap密码
- 每日一题-机器人的运动范围
- 2015生命之旅---第三站象山之行
- 韩山师范学院计算机考试,韩山师范学院大一计算机考试题库中的选择题-1 (必考)...
- java 泛域名_Apache和Tomcat 实现泛域名解析的尝试
- 新网 php泛域名,如何设置泛域名解析?
- 关于vs2022 C6031 “scanf返回值被忽略”的解决办法