CSS3简介

CSS3 简介提起 CSS 我们不会太陌生，我们 Web 页面的样式离不开它，而 CSS3 是 CSS 技术升级版本。对于 CSS3 我们在前端开发的工作中有大量的应用，它主要就是对普通 CSS 样式的一种补充。如果说 HTML 标签是页面的骨架， CSS 是页面的皮肤， 那么 CSS3 就是页面的灵魂， 它丰富了页面的交互和显示效果。1. 什么是 CSS3 ？它其实是 CSS 不停升级的演变，早...

2022/10/25 16:23:43 阅读:54次

border 边框

border 边框有时候在页面中需要做一些分割来区分不同的区域，这个属性不但可以用来给元素添加一个边框，也可以作为不同区域的分割线。1. 官方解释CSS 的 border 属性是一个用于设置各种单独的边界属性的简写属性。 border 可以用于设置一个或多个以下属性的值： border-width、border-style、border-color。2. 慕课解释任何一个 h5 标签通过添加一个...

2022/10/25 16:23:42 阅读:55次

borderImage 边框图片

border-image 边框图片这个属性的兼容性不是很好，所以在正常的前端开发工作中很难用到，但是在不考虑兼容性的情况下，它无疑的一个很强大的属性，因为它可以自定义漂亮的边框，而不在是单调的线条。1. 官方解释CSS 属性允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单，也不用在某些情况下使用九宫格了。使用 border-image 时，其将会替换掉 border-style 属性所...

2022/10/25 16:23:43 阅读:50次

border-radius 圆角

border-radius 圆角如果想要把元素边界变得圆润，不妨试试这个属性。1. 官方定义通过 CSS3，您能够创建圆角边框并且不需使用设计软件，比如 PhotoShop。2. 慕课解释通过给一个 html 元素标签的样式增加一条 border-radius 属性，让这个元素的边角由直角边变成圆弧。3. 语法它的用法遵循 css 通用的：左上、 右上 、右下 、左下 的原则。border-rad...

2022/10/25 16:23:43 阅读:55次

box-shadow 阴影

box-shadow 阴影使用这个属性可以让页面更有立体感，给元素添加一个阴影，使得元素看起来是悬浮在原来的位置，下面就看看它的用法吧。1. 官方定义box-shadow 属性向框添加一个或多个阴影。2. 慕课解释通过 box-shadow 可以给任意 H5 元素添加阴影，可以是一个，如果用,号隔开可以添加多个。3. 语法 box-shadow:h-shadow v-shadow blur...

2022/10/25 16:23:43 阅读:54次

box-sizing 盒类型

box-sizing 盒类型它主要用来告诉浏览器怎么计算元素的展示宽高的。1. 官方定义box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。2. 慕课解释在开发过程中，当有一个 固定宽高的元素带有 boder 或 padding 的时候，它在 IE 中展示和 Chrome 中是不同的，如果我们不设置这个属性，那么在 IE浏览器中它的实际宽高是小于 Chrome 浏览器的这是为什...

2022/10/25 16:23:43 阅读:50次

gradients 渐变

Gradients 渐变在以前遇到渐变的背景，我们只能选择使用图片，而现在通过 gradients 这个属性就可以实现颜色的渐变。它的实现是通过浏览器生成的，可以当成是矢量图形。学会它只需要几个字符就可以生成一个很大的渐变图形。不过值得注意的是虽然它是一个颜色，但是使用它之后就不能再使用背景图片了。1. 官方定义CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。...

2022/10/25 16:23:43 阅读:103次

text-justify 对齐

text-justify这个属性不怎么常用，因为它的兼容性不好，只兼容 IE 浏览器，它主要是给对齐属性text-align:justify做一个补充。1. 官方定义改变字与字之间的间距使得每行对齐。2. 慕课解释这个属性主要用来页面文字的排版，如果我们一个段落不设置任何属性，那么它的每一行有长有短，很不美观，通过这个属性，可以让每一行都能实现左右对齐。我们首先要设置text-align:just...

2022/10/25 16:23:43 阅读:64次

text-overflow 文字超出

text-overflow 文字超出该属性主要用来定义当文字超出元素限定范围内之后，为了防止页面混乱，对超出元素范围的文字做的一个处理。1. 官网定义text-overflow 属性规定当文本溢出包含元素时发生的事情。2. 慕课解释text-overflow 用于设置当文字内容超过所在元素设定的范围时候的展示效果。3. 语法.demo{ text-overflow: clip|ellipsi...

2022/10/25 16:23:43 阅读:49次

text-shadow 文本阴影

text-shadow 文本阴影它可以给任意的字符设置一个或多个阴影。1. 官方定义text-shadow 属性向文本设置阴影。2. 慕课解释text-shadow 一共接受 4 个参数，前两个是阴影的位置通过 x，y坐标系来设定，第三个参数设定模糊的大小，最后一个参数设定阴影的颜色。3. 语法.demo{ text-shadow: h-shadow v-shadow blur color...

2022/10/25 16:23:44 阅读:60次

word-break 文本打断

word-break 文本打断这个属性主要用来处理英文单词，在超出一行之后如何换到下一行的规则。1. 官方定义word-break 属性规定自动换行的处理方法。2. 慕课解释一段英文段落，在其文本所在的元素边缘通常都会把整个单词另起一行，而这个属性可以打破这种排版方式，让这个段落的英文单词都是分开的，同汉字一样，在元素的边缘只是最后一个字母换行。3. 语法word-break: normal|br...

2022/10/25 16:23:43 阅读:73次

word-wrap 文本换行

word-wrap 换行在了解这个属性前，首先要说的是它只用于英文。1. 官方定义word-wrap 属性允许长单词或 URL 地址换行到下一行。2. 慕课解释当一个英文单词，或者一段很长且中间没有空格的英文字母的文本超出文本所在元素边缘时候，直接将超出的部分换行，而不是把这个连续的文本直接全部另起一行。3. 语法word-wrap: normal|break-word;.demo{ wor...

2022/10/25 16:23:43 阅读:65次

letter-spacing 字间距

letter-spacing 字间距当我们需要扩大或者减少字符之间的距离时候，会用到这个属性。如果我们需要调整字符间的距离可以用到这个属性。1. 官方定义letter-spacing 属性增加或减少字符间的空白（字符间距）。2. 慕课解释该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其他字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。这个属性...

2022/10/25 16:23:44 阅读:80次

perspective 透视

perspective 透视透视距离和透视位置可以更好地观察拥有 3D 效果的元素。1. 官方解释perspective 属性定义 3D 元素距视图的距离，以像素计算。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允...

2022/10/25 16:23:44 阅读:63次

transform 2D 空间转换

transform 2D 平面转换在以前我们改变元素的位置需要设置 left 、 right 这类的属性，它对其它元素有很大的影响，现在通过 transform 就可以实现任意空间的改变了。1. 官方解释CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。2. 慕课解释transfrom 这个属性可以改变一个目标元素在页面中...

2022/10/25 16:23:44 阅读:52次

transform 3D 空间转换

transform 3D 空间转换transform 这个属性的强大之处在于它可以把一个二维的空间转化成一个三维的空间，给视觉设计师更多的发挥空间，也给用户带来更好的视觉体验。1. 官方定义transform 属性向元素应用 3D 转换。属性允许我们对元素进行旋转、缩放、移动或倾斜。2. 慕课解释当给元素使用 transform 之后，它就可以在它原来所在的位置变成一个向任意空间变换的元素，这里可...

2022/10/25 16:23:44 阅读:56次

transition 过渡

transition 过渡如果想做出细腻的过渡效果，那么这个属性可能会满足你的需求。这个属性简单的来说就是用来模拟需要变化的属性，从开始到结束数值之间的过渡。1. 官方定义transition 属性是一个简写属性，用于设置四个过渡属性：transition-propertytransition-durationtransition-timing-functiontransition-delay2....

2022/10/25 16:23:44 阅读:61次

animation 动画

animation 动画animation 是动画，而 transition 是过渡，它们用法很相似，但实际又不大相同，可以说 animation 是 transition 的升级版，它可以创建一个持续的自动执行动画。1. 官方定义animation 属性是一个简写属性，它是下面属性的缩写：animation-nameanimation-durationanimation-timing-funct...

2022/10/25 16:23:44 阅读:50次

columns 字符分割

columns 字符分割这个属性主要用来对字符进行横向分割排版，例如报纸的版面。1. 官方定义columns属性是一个简写属性，用于设置列宽和列数。2. 慕课解释columns 是 column-width每列宽度，column-count 每列的列数这两个属性的缩写，当列宽和列数的乘积大于元素的宽度时候就不会在分开自动合成一列。当他们的乘积小于元素的外宽的时候，每列的实际宽度可能大于column...

2022/10/25 16:23:44 阅读:45次

flex 弹性盒子布局

flex 弹性盒子布局介绍flex 布局可以说是目前为止最好用的布局方式，但是目前还稍微有一点受到兼容性的影响，它对 IE9 不兼容，但是在未来随着 IE9 逐渐被淘汰，我相信，它一定会在布局这块大放异彩，因为它实现了太多我们曾经不能实现的布局效果，而且只要简单的几个属性就可以搞定！1. 官方解释一种弹性盒模型布局方式。2. 慕课解释flex 布局也叫弹性布局，它的特点是可以实现子元素的自适应屏幕...

2022/10/25 16:23:44 阅读:50次

flex order 顺序

flex order 排序一般情况下浏览器会把元素从左到右或者从上到下排列，如果我们想要更改它们的排列顺序该如何做呢？使用order就可以轻松的修改。数字越大越往后，数字越小越在前。1. 官方定义order 属性设置或检索弹性盒模型对象的子元素出现的順序。2. 慕课解释子元素可以通过设置 order 数值的大小来设定在页面中出现的顺序，数值小的在前，数值大的在后。3. 语法.item-child{...

2022/10/25 16:23:45 阅读:49次

flex: grow、shrink、basis

flex 弹性盒子display:flex 和接下来我们介绍的这个 flex 是有区别的，前者是修改display实现弹性和模型的，而 flex 仅仅是弹性盒模型下 flex-grow、flex-shrink 和 flex-basis三个的缩写属性，用来定义和模型内部的子元素在浏览器重的展示形式。 下面我们主要讲这三个属性。1. 官方定义属性用于设置或检索弹性盒模型对象的子元素如何分配空间。fle...

2022/10/25 16:23:45 阅读:46次

flex-direction 排列方向

flex-direction 排列方向弹性和模型中内部的子元素的排列方向可以通过这个属性修改，那么我们就一起看下它的使用吧。1. 官方定义flex-direction 属性规定项目的排列方向。2. 慕课解释flex-direction 用来调整主轴的方向，我们知道主轴默认是水平方向且从左到右，而我们可以通过这个属性设置主轴的方向，即项目是水平方向从左到右还是垂直方向从上到下或者从下到上排列。3....

2022/10/25 16:23:45 阅读:47次

justify-content (轴内)对齐方式

justify-content (轴内)对齐方式justify-content 属性可以改变项目在容器中的对齐方式。1. 官方定义justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。2. 慕课解释justify-content 它主要用来设置每行里面项目的排列规则,一共有 5 种设置。3. 语法justify-content: flex-start|flex-...

2022/10/25 16:23:45 阅读:45次

flex-wrap 换行

flex-wrap 换行flex-wrap 主要通过在外层容器中设置它里面的子项目是否可以换行。默认情况下项目是不换行的。1. 官方定义flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。2. 慕课解释默认情况下，设置了 display:flex 的容器是不会换行的，这时候如果我们希望它换行就可以通过 flex-wrap设置超出宽度换行，也可以设置它如何换...

2022/10/25 16:23:45 阅读:51次

align-items 竖直方向对齐方式

align-items 竖直方向对齐方式align-items 属性可以改变项目在容器中的对齐方式。1. 官方定义align-items 属性定义flex 子项在 flex 容器的当前行的侧轴（纵轴）方向上的对齐方式。2. 慕课解释align-items 主要用来设置一行内，当项目大小不一致时候的对齐方式。提示： 子项目含有一个 align-self 属性可重写父级容器 align-items...

2022/10/25 16:23:45 阅读:49次

align-content

align-content 多轴对齐这个属性可以改变项目在容器中的对齐方式。1. 官方定义align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。2. 慕课解释align-content 是当容器内部的元素换行之后，我们如何设置他们所有在水平方向上排列的，这里要说的是它是一个多轴的统一设置。3. 语法align-content: stretch|...

2022/10/25 16:23:45 阅读:42次

Grid 布局简介

Grid 与 Flex 布局有一定的相似性，但是功能更加强大，学习起来也有不少难度，不过相信下面的内容会帮你更快的掌握 Grid。1. 官方定义通过设置 display: grid; 可以定义一个 CSS 网格。然后使用 grid-template-rows 和 grid-template-columns 属性来定义网格的 columns 和 rows。使用这些属性定义的网格被描述为 显式网格...

2022/10/25 16:23:45 阅读:40次

Grid 行和列

grid-template|auto/rows(行)|columns (列)开始学习 Grid 要做的第一件事情就是划格子，本章主要给大家讲解如何画格子。掌握好这个掌握好这个技能是学习 Grid 布局的基础。1. 官方定义grid-template-columns 该属性是基于 网格列. 的维度，去定义网格线的名称和网格轨道的尺寸大小。grid-template-rows 该属性是基于 网格行 的...

2022/10/25 16:23:45 阅读:49次

media 媒体查询

@media 媒体查询这个属性通常是用在不同屏幕下可以设置不同的样式，它多用在响应式页面中。1. 官方定义@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。2. 慕课解释@media 通常被人们称为媒体查询，其实就是响应式，它通过设定后面的参数来实现在不同的浏览器可视尺寸下的展示效果。它不仅仅可以用来设置 CSS 样式，也可以设置...

2022/10/25 16:23:45 阅读:43次

only 元素选择

only-child & only-of-type在前端开发页面的过程中需要对一些特定类型的元素赋予特殊的样式，通常我们不会在 HTML 标签上一个个去增加 class 去设置特殊的样式，这时候通过元素选择伪类就能解决这类问题。本章主要介绍 only-child 和 only-of-type 这两个伪类。1. 官方定义only-child 匹配属于父元素中唯一子元素。only-of-ty...

2022/10/25 16:23:45 阅读:48次

before && after 位置

before && after这两个伪类元素功能很相似，都是在元素内部插入新的内容。下面一起看下他们的区别和用法。1. 官方定义before：元素的内容之前插入新内容。after：元素的内容之后插入新内容。2. 慕课解释before 和 after 的功能就是在元素的内部的原有内容之前，或者之后插入新的内容。3. 语法.demo:before{}.demo:after{ }解...

2022/10/25 16:23:45 阅读:39次

nth 类型元素选择器

nth 元素选择当我们要一组 class 同名，或者连续的一组元素的其中一个，或者某种规律的元素添加单独样式的时候，不妨看看这类的元素选择器。1. 官方定义nth-child(n) 选择器匹配属于其父元素的第 N 个子元素；nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，从最后一个子元素开始计数；nth-of-type(n) 选择器匹配属于父元素的特定类型的...

2022/10/25 16:23:45 阅读:42次

calc 计算属性

calc 计算属性calc 这个属性可以达到什么效果呢？通过计算函数，可以在不刷新浏览器的情况下，实时的让属性值发生变化，我们一起看看 calc 的使用吧。1. 官方定义calc() 函数用于动态计算长度值。2. 慕课解释calc()可以按照我们写的公式，在浏览器中进行计算，使用的时候，要注意：运算符的前后都需要保留一个空格，例如：width: calc(100% - 20px)； 中，- 号前...

2022/10/25 16:23:45 阅读:37次