- 博客(44)
- 收藏
- 关注
RSS订阅原创 CSS box-sizing 理解与运用
box-sizing 属性允许我们在元素的总宽度和高度中包括内边距（填充）和边框。假如不指定 CSS box-sizing 属性默认情况下，元素的宽度和高度是这样计算的：width + padding + border = 元素的实际宽度 height + padding + border = 元素的实际高度这意味着：当设置元素的宽度/高度时，该元素通常看起来比设置的更大（因为元素的边框和内边距已被添加到元素的指定宽度/高度中）。.div1 { width: 300px; he
2022-03-01 16:35:14
353
1
原创 CSS 过渡 transition
CSS 过渡允许在给定的时间内平滑地改变属性值。下表列出了所有 CSS 过渡属性：属性 描述 transition 简写属性，用于将四个过渡属性设置为单一属性。 transition-delay 规定过渡效果的延迟（以秒计）。 transition-duration 规定过渡效果要持续多少秒或毫秒。 transition-property 规定过渡效果所针对的 CSS 属性的名称。 transition-timing-function 规定过渡
2022-03-01 16:05:43
440
原创 CSS 3D转换 transform
通过 transform 属性，可以使用以下 3D 转换方法：rotateX() rotateY() rotateZ()看着下面这个3维坐标系，就能很好的理解 x，y，z轴的旋转rotateX() 方法rotateX() 方法使元素绕其 X 轴旋转给定角度：rotateY() 方法rotateY()方法使元素绕其 Y 轴旋转给定角度：rotateZ() 方法rotateZ()方法使元素绕其 Z 轴旋转给定角度：CSS 转...
2022-03-01 15:44:48
286
转载 CSS transform-origin
一、transform-origin属性介绍transform-origin属性表示在对元素进行变换的时候，设置围绕哪个点进行变化的。默认情况，变换的原点在元素的中心点，即是元素X轴和Y轴的50%处，如下图所示：我们没有使用transform-origin改变元素原点位置的情况下，CSS变换进行的旋转、移位、缩放等操作都是以元素自己中心（变换原点）位置进行变换的。但很多时候需要在不同的位置对元素进行变换操作，我们就可以使用transform-origin来对元素进行原点位置改变，使元素原.
2022-03-01 15:34:01
9207
原创 CSS 2D 转换 transform translate() rotate() scale() skew() matrix()
CSS transforms 属性允许 移动、旋转、缩放和倾斜元素。translate() rotate() scaleX() scaleY() scale() skewX() skewY() skew() matrix()translate() 方法translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。下面的例子把 <div> 元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素：rotate()
2022-03-01 15:20:08
252
原创 CSS Web 字体 font-face
font-face它允许网页开发者为其网页指定在线字体。通过这种作者自备字体的方式，font-face可以消除对用户电脑字体的依赖。font-face不仅可以放在在CSS的最顶层, 也可以放在@规则 的条件规则组中。语法@font-face { [ font-family: <family-name>; ] || [ src: <src>; ] || [ unicode-range: <unicode-range>; ] || [...
2022-03-01 12:27:10
177
原创 CSS 文本效果 text-overflow，word-wrap，word-break，writing-mode，text-align-last，text-justify
CSS 文字溢出 (text-overflow)CSS text-overflow 属性规定应如何向用户呈现未显示的溢出内容。下面的例子展示了将鼠标悬停在元素上时如何显示溢出的内容：CSS 字换行（Word Wrapping）CSSword-wrap属性使长文字能够被折断并换到下一行。CSS 换行规则 (word-break)CSSword-break属性指定换行规则。CSS 书写模式 (writing-mode)CSSwri...
2022-03-01 11:56:30
290
原创 CSS 如何使用 text-shadow 和 box-shadow 阴影效果
CSS 文字阴影text-shadowCSS text-shadow 属性为文本添加阴影。最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：接下来，为阴影添加颜色：然后，向阴影添加模糊效果：下面的例子展示了带有黑色阴影的白色文本：下面的例子展示了红色的霓虹发光阴影：多个阴影如需在文本中添加多个阴影，您可以添加以逗号分隔的阴影列表。下面的例子展示了红色和蓝色的霓虹灯发光阴影：下面的例子展示了带有黑色、蓝色和深蓝色阴影的白色文本：...
2022-02-28 23:01:04
2340
原创 CSS 渐变背景 之 线性渐变
CSS 渐变 可以显示两种或多种指定颜色之间的平滑过渡。CSS 定义了两种渐变类型：线性渐变（向下/向上/向左/向右/对角线） 径向渐变（由其中心定义）这里讲径向渐变CSS 径向渐变径向渐变由其中心定义。如需创建径向渐变，还必须定义至少两个色标。background-image: radial-gradient(shape size at position, start-color, ..., last-color);值 描述 shape 确定圆的.
2022-02-28 17:31:06
1506
原创 CSS 渐变背景 之 线性渐变 linear-gradient
CSS 渐变 可以显示两种或多种指定颜色之间的平滑过渡。CSS 定义了两种渐变类型：线性渐变（向下/向上/向左/向右/对角线） 径向渐变（由其中心定义）这里先讲线性渐变线性渐变语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);线性渐变 - 从上到下（默认）下面的例子显示了从顶部开始的线性渐变。它从红色开始，过渡到黄色：#grad { backgrou
2022-02-28 16:19:07
7115
原创 HTML CSS 如何设置颜色
RGBA 颜色RGBA 颜色值是 RGB 颜色值的扩展，带有 alpha 通道 - 该通道规定颜色的不透明度。RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。 alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。HSL 颜色HSL 指的是色相、饱和度和亮度（Hue、Saturation 以及 Lightness）。HSL 颜色值是这样规定的：hsl(hue, saturation, lightness)。..
2022-02-28 14:50:18
671
原创 CSS background 高级背景教学
多重背景通过 background-image 属性为一个元素添加多幅背景图像。不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。下面的例子有两幅背景图像，第一幅图像是花朵（与底部和右侧对齐），第二幅图像是纸张背景（与左上角对齐）：#example1 { background-image: url(flower.gif), url(paper.gif); background-position: right bottom, left top; back
2022-02-28 14:34:22
401
原创 CSS3 border-image 边框图像
语法：border-image ： none | <image> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}1、none:是border-image的默认值，如果取值为none时，表示边框无背景图片；2、<image>：设置border-image的背景图片，这个跟background-image
2022-02-28 11:44:00
424
原创 background： 属性的子属性顺序
background的子属性顺序为：background-color，background-image，background-repeat，background-attachment，background-position,background-size。实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好。比如：background:lightblue url(w3.png) no-repeat center fixed.
2022-02-27 14:59:29
2461
原创 CSS 圆角属性 border-radius 用法
border-radius 属性定义元素角的半径。通过border-radius 属性，可以实现任何元素的“圆角”样式。例如：border-radius 属性实际上是以下属性的简写属性：border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius指定每个角border-radius属性可以接受一到四个值。规则如下：四个值 .
2022-02-27 14:34:03
2367
原创 CSS 特异性 specificity
什么是特异性？如果有两条或两条以上指向同一元素的冲突 CSS 规则，则浏览器将遵循一些原则来确定哪一条是最具体的，并因此胜出。将特异性（specificity）视为得分/等级，能够确定最终将哪些样式声明应用于元素。通用选择器（*）具有较低的特异性，而 ID 选择器具有较高的特异性特异性层次每个选择器在特异性层次结构中都有其位置。以下四种类别定义了选择器的特异性级别：行内样式- 行内（内联）样式直接附加到要设置样式的元素。实例：<h1 style="color: #ffff.
2022-02-25 16:51:22
353
原创 CSS 单位
CSS 单位CSS 有几种表示长度的不同单位。许多 CSS 属性接受“长度”值，诸如 width、margin、padding、font-size 等。长度是一个后面跟着长度单位的数字，诸如 10px、2em 等。实例使用 px（像素）设置不同的长度值：h1 { font-size: 60px;}p { font-size: 25px; line-height: 50px;}数字和单位之间不能出现空格。但是，如果值为 0，则可以省略单位。对于某些 CSS
2022-02-25 16:16:33
64
原创 CSS 计数器 counter
带计数器的自动编号CSS 计数器就像“变量”。变量值可以通过 CSS 规则递增（将跟踪它们的使用次数）。如需使用 CSS 计数器，我们将使用以下属性：counter-reset- 创建或重置计数器 counter-increment- 递增计数器值 content- 插入生成的内容 counter()或counters()函数 - 将计数器的值添加到元素如需使用 CSS 计数器，必须首先使用 counter-reset 创建它。下面的例子为页面（在 body 选择器中）创...
2022-02-25 16:01:09
483
原创 HTML 中 ＜lable＞ 标签的用法
<label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果你在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。单击文本，例如单击文字 M
2022-02-25 14:13:29
1414
原创 CSS 中的 属性选择器
css属性选择器的作用是：为带有特定属性的 HTML 元素设置样式CSS [attribute] 选择器[attribute] 选择器用于选取带有指定属性的元素。下例选择所有带有 target 属性的 <a> 元素；a[target] { background-color: yellow;}CSS [attribute="value"] 选择器[attribute="value"] 选择器用于选取带有指定属性和值的元素。下例选取所有带有 targe
2022-02-23 17:41:54
1840
原创 CSS 中的 Sprite 雪碧图 图像精灵 简单入门
CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。CSS 雪碧图应用原理：只有一张大的合并图， 每个小图标节点如何显示单独的小图标呢？其实就是 截取 大图一部分显示，而这部分就是一个小图标。使用雪碧图的好处：1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原
2022-02-23 17:05:07
263
原创 用 css 创建一个图片库（含响应式布局）
效果：点击图片跳转：html部分：css部分：响应式的图片库分辨率100%：分辨率50%：分辨率150%（小于1000px）：分辨率200%（小于700px）：代码如下：css部分：html部分：...
2022-02-23 16:25:19
466
原创 CSS 如何制作下拉菜单
下拉菜单.dropdown类使用position:relative，当我们希望将下拉内容放置在下拉按钮的正下方（使用position:absolute）时，需要使用该类。.dropdown-content类保存实际的下拉菜单内容。默认情况下它是隐藏的，并将在悬停时显示（请看下文）。请注意，min-width设置为 160px。可随时更改此设置。提示：如果您希望下拉内容的宽度与下拉按钮的宽度一样，请将宽度设置为 100％（设置overflow:auto可实现在小屏幕上滚动...
2022-02-23 14:50:47
3488
原创 CSS 固定导航栏（fixed）和粘性导航栏（sticky）
垂直式水平式注意：固定定位在移动设备上可能无法正常工作。粘性式注意：Internet Explorer、Edge 15 和更早版本不支持粘性定位。 Safari 需要 -webkit- 前缀（请参见上面的例子）。必须指定top、right、bottom或left至少之一，以使粘性定位起作用。...
2022-02-22 15:20:18
1591
原创 CSS 水平导航栏
有两种创建水平导航栏的方法：使用行内或浮动列表项。行内列表项构建水平导航栏的一种方法是，将 <li> 元素指定为 inline：li { display: inline;}display: inline; 默认情况下，<li> 元素是块元素。在这里，我们删除每个列表项之前和之后的换行符，这样它们才能显示在一行。浮动列表项创建水平导航栏的另一种方法是浮动 <li> 元素，并为导航链接规定布局：注释：背景色被添加到链接以显示链接区域
2022-02-22 15:09:46
2634
原创 CSS 不透明度 / 透明度
opacity属性指定元素的不透明度/透明度。透明图像opacity 属性的取值范围为 0.0-1.0。值越低，越透明：透明悬停效果opacity 属性通常与 :hover 选择器一同使用，这样就可以在鼠标悬停时更改不透明度：透明盒使用opacity属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读：使用 RGBA 的透明度如果不希望对子元素应用不透明度，如上面的例子，使用 RGBA 颜色...
2022-02-22 11:50:14
1055
原创 CSS clear 属性和 content 属性
clear属性定义和用法clear 属性规定元素的哪一侧不允许其他浮动元素。说明clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。content 属性定义和用法
2022-02-22 11:11:46
137
原创 CSS 伪类
伪类用于定义元素的特殊状态。它可以用于：1.设置鼠标悬停在元素上时的样式2.为已访问和未访问链接设置不同的样式3.设置元素获得焦点时的样式锚伪类/* 未访问的链接 */a:link { color: #FF0000;}/* 已访问的链接 */a:visited { color: #00FF00;}/* 鼠标悬停链接 */a:hover { color: #FF00FF;}/* 已选择的链接 */a:active { color: #0000F
2022-02-15 19:48:40
81
原创 CSS 组合器
CSS 中有四种不同的组合器：后代选择器 (空格)：后代选择器匹配属于指定元素后代的所有元素。 子选择器 (>)：子选择器匹配属于指定元素子元素的所有元素。 相邻兄弟选择器 (+)：相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。 通用兄弟选择器 (~)：通用兄弟选择器匹配属于指定元素的同级元素的所有元素。效果：...
2022-02-14 22:34:47
242
1
原创 CSS如何实现水平和垂直对齐
居中对齐元素要使块元素（例如 <div> ）水平居中，请使用 margin: auto;。设置元素的宽度将防止其延伸到容器的边缘。然后，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配：注意：如果未设置 width 属性（或将其设置为 100％），则居中对齐无效。居中对齐文本如果仅需在元素内居中文本，请使用 text-align: center;：居中对齐图像如需居中图像，请将左右外边距设置为 auto，并将其设置为块元素：左...
2022-02-14 18:31:43
1220
原创 CSS中的 display：inline-block
display: inline-block 与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。 与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边 display 的一种常见用法：
2022-02-14 14:53:26
2706
原创 CSS中的 overflow:hidden 清除浮动的影响
我们都知道"overflow:hidden"可以溢出隐藏，即当内容元素的高度大于其包含块的高度时，设置该属性即可把内容区域超出来的部分隐藏，使内容区域完全包含在该包含块中。然而"overflow:hidden"还有另外一个特殊的用途，那就是清除包含块内子元素的浮动。我们先来看一个实例：// css.parent{ width:300px; background:#ddd; border:1px solid;} .child1{ width:100px; height
2022-02-14 14:43:06
1867
原创 HTML 中的 链接和锚
我们通过使用 <a> 标签在 HTML 中创建链接。有两种使用 <a> 标签的方式：1.通过使用 href 属性 - 创建指向另一个文档的链接：<a href="http://www.w3school.com.cn/">Visit W3School</a>使用 Target 属性，你可以定义被链接的文档在何处显示。<a href="http://www.w3school.com.cn/" target="_blank">Vi
2022-02-14 14:29:23
153
原创 CSS中的 flow 和 clear 属性
CSS float 属性规定元素如何浮动。CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。float 属性float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。float 属性可以设置以下值之一：left - 元素浮动到其容器的左侧right - 元素浮动在其容器的右侧none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。inherit - 元素继承...
2022-02-13 17:36:11
388
原创 CSS中的 overflow 属性
overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。overflow 属性可设置以下值：visible- 默认。溢出没有被剪裁。内容在元素框外渲染 hidden- 溢出被剪裁，其余内容将不可见 scroll- 溢出被剪裁，同时添加滚动条以查看其余内容 auto- 与scroll类似，但仅在必要时添加滚动条注意：overflow 属性仅适用于具有指定高度的块元素。...
2022-02-13 15:45:16
1935
原创 CSS 中 position 属性
position 属性规定应用于元素的定位方法的类型。有五个不同的位置值：static relative fixed absolute sticky元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。HTML 元素默认情况下的定位方式为 static（静态）。静态定位的元素不受 top、bottom、left 和 right 属性
2022-02-13 15:34:12
74
原创 CSS中的 clip 属性
一个 绝对定位 或 固定定位 元素通过使用属性clip可以改变剪裁区域的形状，但并不改变元素本身的宽高属性absolute或者flexclip:rect(top,right,bottom,left)中的值不是边偏移，而是距元素左上角的距离。具体来说，就是top和bottom是表示距离元素上边界的距离；left和right是距离元素元素左边界的距离。这里元素的边界指元素边框外侧。...
2022-02-13 15:17:41
605
原创 width max-width margin:auto
设置块级元素的 width 将防止其延伸到其容器的边缘。然后，可以将外边距设置为 auto，以将元素在其容器中水平居中。元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配当浏览器窗口小于元素的宽度时，浏览器会将水平滚动条添加到页面。在这种情况下，使用 max-width 可以改善浏览器对小窗口的处理。为了使网站在小型设备上可用，这一点很重要...
2022-02-13 11:18:43
253
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人