本篇文章给大家谈谈深入浅出：CSS与CSS3基础应用技巧解析，以及对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
padding 不会扩大盒子的大小：如果你不给它高度和宽度，它不会扩大盒子的大小。
2:保证金
margins可以使盒子水平居中，但必须满足两个条件
1：盒子必须指定宽度（带）
2：将框的左右边距设置为auto
3: 行内元素、行内块元素水平居中
将text-align:center 添加到其父元素
4: 保证金合并
当使用margin 定义块级元素的垂直边距时，可能会发生边距合并。
主要有两种情况
1：合并相邻块级元素的垂直边距
当两个相邻的块级元素（星兄弟关系）相遇时，
如果上面的元素有下边距，下面的元素有上边距，
那么它们之间的垂直距离就不是margin-bottom+matgin-top之和，
两者之间哪个更大？这种现象称为相邻会计要素的垂直边际合并。
解决办法：尝试只给一个盒子添加margin值
2：嵌套块级元素垂直边距的折叠
对于两个具有嵌套关系（父子关系）的块级元素，父元素有边距，子元素也有边距。这时父元素会以更大的margin值折叠。
解决方案
1：上边框可以由父元素定义
2：可以为父元素定义padding
3：可以给父元素添加overflow:hidden
5: 清晰的内外边缘
* {
保证金：0；
填充：0；
}
6:opacity:该属性可以设置不透明度，值从0.0（完全透明）到1（不透明），默认为1
7：box-shadow 盒子阴影
语法：box-shadow:h-shadow v-shadow 模糊扩散颜色插入
h-shadow 必需，水平阴影位置，允许负值
v-shadow 必需，垂直阴影位置，允许负值
模糊可选模数距离（虚拟或湿）
传播可选的阴影大小
颜色可选阴影颜色
inset 可选，将外部阴影（开始）更改为内部阴影
宽度()=a;
内部宽度（）=a+填充；
外宽度()=a+内边距+边框；
外宽度(true)=a+padding+border+margin;
8：定位
1：相对定位：相对定位是指元素移动时，是相对于原来的位置。
语法：选择器{position:relative}
1.1:保留原来的位置，不偏离标准。其最典型的应用就是对父亲进行绝对定位。
2：绝对定位
选择器{position:absolute}
2.1: 相对于父元素，如果没有祖先元素或者祖先元素没有定位，浏览器会以标准（Document）
2.2: 如果祖先元素具有定位（相对、绝对、固定），则将使用最近的定位元素作为参考点来移动位置。
2.3：绝对定位不合标准
2.4：修复了版本核心的定位
2.4.1：让固定定位框left:50%走到浏览器可见区域的一半（也可以看作页面的中心）
2.4.2：让固定定位框margin-left为页面中心宽度的一半，避开页面中心平均宽度的位置。
3：粘性定位
选择器{position:sticky;
顶部：10px
}
3.1: 参考浏览器可视窗口移动元素
3.2：粘性定位占据原来的位置
3.3：必须添加top、left、right、bottom之一才有效。
3.4: 为行内元素添加绝对定位或固定定位，可以直接设置高度和宽度。
3.5：为块级元素添加绝对定位或固定定位。如果未指定宽度或高度，则默认大小为内容大小·1
9：显示隐藏
能见度能见度
visible:visible 元素可见
visibility:hidden元素被隐藏
可见性隐藏元素后，它继续占据其原始位置。
溢出溢出
Overflow:auto 在需要时添加滚动条
Overflow:hidden 溢出部分隐藏
Overflow:scroll 总是添加滚动条
10：HTML5新特性
1.1：html5中新的语义标签
: 头标签
: 导航标签
:内容标签
：定义文档的某个区域
：侧边栏标签
:尾部标签
1.2: 多媒体标签
声音的：
视频：
语法
共同属性
autoplay autoplay 视频自动播放（谷歌浏览器需要静音才能解决自动播放问题）
控件控件显示播放控件
width plxels（像素）设置播放器宽度
高度plxels（像素）高度
循环播放循环播放
自动（预载）
preload none（不应该加载视频）指定是否预加载视频，如果qutoplay可用，则忽略视频
, src url地址
海报imgurl 加载等待屏幕图像
静音静音静音播放
您的浏览器不支持video标签
11：html5新表单属性
必填必填内容必须为空
占位符提示文本形式提示信息
自动对焦自动对焦自动对焦
自动竞争关闭/打开当用户开始在字段中输入时，浏览器应根据先前输入的值显示字段中填写的选项。
默认开启，autocomplete="on" 关闭自动完成
12 种移动布局：
元视口标签
财产
width width 设置视口宽度，可以设置device-width特殊值
initial-scale 初始缩放比例，大于0的数字
Maximum-Scale 最大缩放比例，大于0的数字
minim-scale 最小缩放比例，大于0的数字
user-scalable 用户是否可以缩放，yse 或no（1 或0）
CSS3属性选择器
E[att] 选择具有att属性的E元素
E[att="val"] 选择att 属性且值等于val 的E 元素
E[att^="val"] 选择具有att 属性且值以val 开头的E 元素
E[att$="val"] 选择具有att 属性且值以val 结尾的E 元素
E[att*="val"] 选择具有att 属性且值包含的E 元素
结构伪类选择器-选择n个元素
E：first-child匹配父元素中的第一个子元素E
E:last-child 匹配父元素中的最后一个E 元素
E:nth-child(n) 匹配父元素中的第n个子元素
E：first-of-type 指定类型的第一个
E:last-of-type 指定类型的最后一个
E:nth-of-type 指定类型E 的第n 个
区别： nth-child：所有盒子都将被排序。执行的时候，先看：nth-child(1)，然后再回去看店面div。
nth-of-type: 将按序列号排列指定的盒子。执行时，先查看div指定的元素，然后返回查看：nth-of-type(1)
nth-child：排序选择父元素的所有子元素，首先找到第n个子元素，然后检查是否匹配。
nth-of-type：排序选择父元素指定的子元素，先匹配E然后根据E找到第N个子元素
第n 个孩子(n):
1:n 可以是数字、关键字和公式
2：如果n是数字，则选择第n个子元素，里面的数字从1开始。
3：n可以是关键字：even、odd
4：n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但第00个元素或超过该数的元素个数将被忽略）
2n 个偶数
2n+1 奇数
5n 5,10,15.
n+5 从第5个（含第5个）开始到最后
-n+5 前5个（包括第5个）.
14：微量元件选择器
伪元素选择器可以帮助我们使用css而不是HTML标签创建新的标签元素，从而简化HTM结构
:before 在元素内部之前插入内容
:after 在元素内部之后插入内容
语法：element:before{}
1:before和after必须有内容属性
2：before在父元素前面创建元素，after在父元素后面插入
3：伪元素选择器与标签选择器相同，权重为1
4：对于行内元素，不能设置宽度和高度。
div:之前{
内容："我"
}
15：字体图标
1：轻量级：一个字体图标比一系列图像还要小。字体加载后，图标将立即渲染，减少服务器请求。
2：灵活性：本质是文字，可以改变颜色，产生阴影，透明效果，随意旋转
3：兼容性：支持几乎所有浏览器
4：无法替代精灵图技术
16:"三角练习
1：设置一个盒子，宽度和高度设置为0
2：给四个边添加边框，比如做一个向下的三角形，然后将剩下的三个边的背景色设置为透明，然后分别设置border-top-color的颜色。
17：垂直对齐属性
css的vertical-align属性常用于设置图像、表单（内联块）和文本的垂直对齐方式。
官方解释：用于设置元素的垂直对齐方式，但仅适用于行内元素和行内块元素。
语法：垂直对齐：基线|顶部|中间|底部
基线默认情况下，元素放置在父元素的基线上
top 将元素的顶部与行中最高元素的顶部对齐
middle 将此元素放置在父元素的中间
底部将元素的顶部与行中最低元素的顶部对齐
18：单行文本、省略号显示的好处
1：首先强制文本显示在一行
空白：nowrap； （默认正常自动换行）
2：隐藏多余的部分
溢出：隐藏
3: 使用省略号替换文本的多余部分。
文本溢出：省略号
19: 多行文本好处，省略号显示
1: 溢出：隐藏；
2:文本溢出：省略号
3: 弹性膨胀箱模型展示
显示：-webkit-box；
4：限制块元素中显示的文本行数
-webkit-line-clamp:2
5: 设置或检索可缩放框对象的子元素的排列
-webkit-box-orient:vertical；
1:css3盒子模型
在css3中，盒子模型可以通过box-sizing来指定。有两个值：1：context-box、border-box。这改变了我们计算盒子大小的方式。
可以分为两种情况
box-sizing:content-box 盒子大小为width + padding + border （之前默认）
box-sizing:border-box 盒子尺寸为宽度
如果我们把盒子模型改成box-sizing:border-box，那么padding和border就不会扩大盒子（前提是padding和border不会超过widyh宽度）
以后直接设置为*{即可
框尺寸：边框框
}
2:css3过滤器过滤器
过滤器css 属性将图形效果（例如模糊或颜色偏移）应用于元素
filter: function() 例如：filter:blur(5px); Blur模糊处理，值越大越模糊
3:css3 计算函数
calc() 函数允许您在声明CSS 属性值时执行一些计算。
宽度：calc(100% - 80px);
可以使用括号中的+-*/来进行计算
4:css3 过多
要通过transitioniion: 进行转换的属性运动曲线何时开始所花费的时间
注意：通常搭配：hover
1：属性：就是你要改变的css属性，包括松散高度、背景颜色、内外边距。如果你想让所有属性都发生过度的改变，就写all
2：所用时间：单位为秒（单位必须写），如0.5s
3: 运动曲线：默认缓动（可省略）
4: 何时启动：单位为秒（单位必须写）。您可以设置延迟触发时间。默认为0s（可省略）
5：谁做得太过分，谁就会受到惩罚
5：2D转换
5.1 2D转换运动平移
2D移动是2D变换中的一种移动，可以改变元素在页面上的位置，类似于定位
5.1: 语法
transform:translate(x,y);或者单独写
变换：translateX(n);
变换：translateY(n);
5.1:要点
定义2D变换中的运动，沿X轴和Y轴的运动
Translate最大的优点就是不影响其他元素的位置。
translate中的百分比单位是相对于自身元素的translate:(50%,50%)。
对内联标签没有影响
5.2 2D转换旋转rotate
2D旋转是指使元素在2位平面内瞬时或逆时针旋转。
5.2: 语法
平移：旋转（度）
Rotate后面跟的是度数，单位是deg，如rotate(45deg)
当角度为正时，顺时针方向；当角度为负时，逆时针方向。
默认旋转中心点为元素的中心点
5.2:2D变换设置中心点transform-origin
我们可以设置元素的中心点
5.2: 语法
变换-origin:x y
请注意，以下参数x 和y 用空格分隔。
xy默认转换中心点为元素中心点(50% 50%)
您还可以为x y 设置像素或方向名词（上、下、左、右中心）
5.3:2D转换缩放
语法transform:scale(x,y);
注：1：xy以逗号分隔
2：transform:scale(1,1)将尺寸加倍，相当于不缩放。
3：transform:scale(2,2)，宽度和高度放大2倍
4：transform:scale(2) 相当于(2,2)
5：transform:Scale(0.5,0.5):缩小
6：scale缩放最大优点：可以设置变换中心点进行缩放，默认是在中心点缩放，并且不影响其他盒子
5.4:2D转换综合写法
1：同时使用多个变换，格式为：transform:translate()rotate()scale()
2: 顺序会影响变换效果。首先旋转会改变坐标轴的方向。
3：同时具有位移和其他所有属性，并将位移放在前面。
6：动画
1：0%动画开始，100%动画完成
2：在@keyframes中指定某种css样式，创建当前样式逐渐变为新样式的动画效果。
3：动画可以随意改变多种风格和次数
使用百分比来指定更改时间。您还可以使用from to ，其相当于0% 100%。
6.2：动画的常用属性
财产
@keyframes指定动画
所有动画的简写属性，除了animation-play-stste属性
Animation-name 指定东华1号的名称（必填）
animation-duration指定东华完成一个循环所需要的时间（必填）
animation-timing-function 动画速度曲线，默认ease
animation-delay 动画什么时候开始？默认值为0
animation-iteration-count 动画播放次数，默认1，无限
animation-direction 在下一个循环中反向播放动画。默认为正常、交替和反向播放。
animation-play-state 指定动画是正在运行还是已暂停。默认为运行和暂停。
animation-fill-mode 指定动画结束后的状态，保持向前，向后返回起点
动画速记属性
animation: 动画名称、时长、运动曲线、何时开始、播放次数、是否反转、动画开始或结束状态
6:3D转换
3D变换我们主要研究3D位移和3D变换
主要知识点
1:3D 位移：translate3d(x,y,z)
2:3D 旋转：rotate3d(x,y,z)
3:透视：透视
4:3D 渲染：变换样式
6.1:3D位移
语法：translate:translateX(100px):仅在X轴上移动
translate:translateY(100px): 只在Y轴上移动
translate:translateZ(100px):只在Z轴上移动（注：translateZ一般使用pxd单位）
transform:translate3d(x,y,z)：xyz分别指要移动的轴方向的距离
6.2：透视透视
1: 如果需要3d效果就需要3d
2: 透视写在被观察元素的父框上
d: 是视距，
z:z轴，z轴越大，我们看到的物体就越大（注：视角越小，距屏幕的距离越小，物体就越大）
6.3:3D旋转
沿X轴transform:rotateX(45deg)
沿Y轴transform:rotateY(45deg)
沿Z轴transform:rotateZ(45deg)
Transform:rotate3d(x,y,z,45deg) 沿自定义轴由0 和1 表示
6.4:3D 渲染变换样式
控制子元素是否开启三维环境
transform-style:flat 子元素默认不启用3D 空间
变换样式：保留-3d；子元素启用三维空间
代码，但会影响子框
移动开发
1：流体布局
第二张图：
因为手机的像素和电脑的像素不一样，所以同一张图片放在手机上会出现模糊的情况。
，那么将使用双图
例如：我们需要一个div，div内部需要一张50*50的图片。如果我们直接放一张50*50的图片
然后手机上就模糊了，它给你放大一倍。这时我们直接放一张100*100的图片，然后手动将图片的宽高缩小2倍，然后再次显示。
2：弹性布局
以下6个属性由父元素设置
1：flex-direction：设置主轴方向
2：justify-content:设置子元素在主轴上的排列方式
3：flex-wrap:设置子元素是否换行
4：align-content:设置子元素在侧面的排列方式（多行）
5:align-items: 设置子元素在侧面的排列方式（单行）
6：flex-flow:复合属性，相当于同时设置flex-direction和flex-wrap
2.1:flex-direction决定主轴方向
财产
说明 row 默认值从左到右 row-reverse 从右到左 column 从上到下 column-reverse 从下到上 2.2:justify-content 设置主轴上子元素的排列方式 属性 说明 flex-start 默认值从头部开始，如果主轴是x轴，则从左到右显示 flex-end 从尾部开始排列 center 在主轴居中对齐（如果x轴是主轴，则水平居中） space-around 平分剩余空间 space-between 先两边贴边，再平分剩余空间 2.3:flex-wrap 设置子元素是否换行 默认情况下，项目都在一条线上，默认不换行，如果装不开，会缩小子元素的宽度，放到子元素上 属性 说明 nowrap 默认值，不换行 wrap 换行 2.4：align-items 设置侧周上子元素排列方式（单行） 属性值 说明 flex-start 从上到下 flex-end 从下到上 center 加在一起居中（垂直居中） strech 拉伸 2.5：align-content 设置侧轴上子元素的排列方式（多行） 属性值 说明 flex-start 默认值在侧轴的头部开始排列 flex-end 在侧轴的尾部开始排列 center 在侧轴的中间开始排列 space-around 子项在侧轴平分剩余空间 space-between 子项在侧轴先分布两头，再平分剩余空间 strech 设置子项元素高度平分父元素高度 2.6：flex 布局子项常见属性 flex 子项目占得分数 align-self 控制子项目在自己的侧轴的排列方式 order 属性定义子项目的排列顺序（前后顺序） 3：rem布局 1：em与rem区别 em是相对于父元素的字体大小来说，rem是相对于html字体大小来说 2：媒体查询 媒体查询（Media Query） 1：使用@media查询，可以针对不同媒体类型定义不同样式 2：@media可以针对不同屏幕尺寸设置不同样式 3：当你重置浏览器大小的过程，页面也会根据浏览器的宽度和高度重新渲染页面 语法规范 @media mediatype and|not|only(media feature){ css-Code; } 1:用@media开头 注意@符号 2：mediatype 媒体类型 3：关键字 and not only 4:media feature 媒体特性 必须要有小括号 mediatype查询类型 all 用于所有设备 print 用于打印机和打印预览 scree 用于电脑屏幕，手机，平板电脑 关键字 and可以将多个媒体特性连接到一起，相当于且 not排除某个媒体类型，相当于非，可以省略 only指定某个特定的媒体类型，可以省略 媒体特性 width 定义输出设备中页面可见区域的宽度 min-width 定义输出设备中页面最小的可见区域宽度 max-width 定义输出设备中页面最大可见区域宽度 为了防止混乱媒体查询一般按照从小到大或者从大到小的顺序的来，一般我们我们喜欢从小到大来写，这样代码更简洁 引入资源 当样式比较繁多时，我们可以针对不同的媒体使用不同的stylesheets(样式表) 原理，就是直接在link中判断设备尺寸，然后引用不用的css文件 语法规范 例如 4：Less基础 1: Lsee变量 语法基础 @变量名：值 变量名规范 必须以@为前缀 不能包含特殊符号 不能以数字开头 大小写敏感 //例如定义一个粉色变量 @color：pink； body{ bgc:@color; } 2:Less编译 需要把less编译成css文件，安装 Easy less 1：嵌套 .head{ width:200px; height:200px; a{ color:red; } } 2:如果有伪类，交集选择器，伪元素选择器，我们内层选择器前加& .head{ width:200px; height:200px; a{ color:red; &:hover{ color:blue; } } } 3：less计算 1:乘号（*）除 （/） 2：运算符中间左右有个空格隔开1px + 5 3:对于两个不同单位的值之间的运算，运算符结果的值取第一个值得单位 4：如果两个值之间只有一个单位，则运算符结果就取该单位 4:remm适配方案 1：动态设置html-size大小 1：假设设计稿是750px 2：假设我们的屏幕划分为15等分（划分标准不同，可以是20等分，也可能是10等份） 3：每一份作为html字体大小，这里就是50px 4:那么在320px设备的时候，字体大小为320/15就是21.33px 5:用我们页面元素的大小除以不同的html字体大小就会发现他们比例还是相同的 6：比如我们以750为标准设计稿 7：一个100*100页面元素在750屏幕下，就是100/50转换为是2rem * 2rem比例是1:1关于深入浅出：CSS与CSS3基础应用技巧解析，的介绍到此结束，希望对大家有所帮助。
【深入浅出：CSS与CSS3基础应用技巧解析】相关文章：
2.米颠拜石
3.王羲之临池学书
8.郑板桥轶事十则
用户评论
最近在学前端，css基础确实很关键！
有17位网友表示赞同！
想要做一个有风格的网页布局，CSS是必备技能啊。
有13位网友表示赞同！
学习CSS3可以使网站更加炫酷有趣哦~
有11位网友表示赞同！
我一直想尝试用CSS3来制作一些动画效果，现在终于开始学了!
有20位网友表示赞同！
不知道CSS3有没有什么特别好用的新属性？
有5位网友表示赞同！
从静态页面到动态交互页面，CSS都能帮到我们。
有16位网友表示赞同！
我听说最近有一些新的css框架很流行，想看看能不能用在项目里。
有8位网友表示赞同！
感觉学习CSS的时候最难的是配色和布局调试。
有8位网友表示赞同！
以前只知道HTML,现在开始深入学习CSS了，希望能有更丰富的页面设计！
有16位网友表示赞同！
找了一些教程来学习CSS基础，希望能够尽快上手
有7位网友表示赞同！
终于找到一个比较全面的CSS教程了，准备认真跟着学习一下。
有15位网友表示赞同！
感觉学明白CSS的语法规则就很重要了，这样才能更好地运用它。
有20位网友表示赞同！
希望能通过学习CSS掌握一些页面美化技巧，让网站看起来更舒服！
有13位网友表示赞同！
我需要把我的个人博客页面做成一个更加专业和美观的样式！
有17位网友表示赞同！
在网页开发的过程中，CSS起着非常重要的作用啊!
有17位网友表示赞同！
我已经开始尝试运用CSS来创建一些简单的网页布局了。
有11位网友表示赞同！
最近学习了很多关于CSS的知识，可以用来制作更酷炫的页面设计!
有5位网友表示赞同！
CSS3确实比以前的CSS灵活很多！
有13位网友表示赞同！
感觉学习CSS是一个很长期的过程，需要不断地练习和积累经验！
有9位网友表示赞同！
学习CSS不仅仅是为了代码编写，更有利于我们更好地理解网页的结构和布局。
有14位网友表示赞同！