随笔分类 - 前端基础
摘要：圆角矩形介绍 在 中通过 属性可以实现元素的圆角矩形。 属性值一共有 个，左上、右上、右下、左下。 属性值规则如下：第一个值为左上、第二个值为右上、第三个值为右下、第四个值为左下。 假如 属性值都是一致的我可以设置一个属性值即可。 圆角矩形实践 圆角矩形基本使用方式 如果我们的 属性值一致实践。 如
阅读全文
摘要：文本阴影介绍 在 中使用 属性设置文本阴影，该属性一共有 个属性值如：水平阴影、垂直阴影、（清晰度或模糊距离）、阴影颜色。 属性值说明，在文本阴影实践中：第一个值是设置阴影水平方向移动，第二个值是设置阴影垂直方向移动，第三个值是设置阴影模糊距离，第四个值是设置阴影颜色。 属性值可以设置为负数。 文本
阅读全文
摘要：结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果。 结构伪类选择器属性说明表 属性 | 描述 | E:first child | 匹配E元素的第一个子元素。 E:last child | 匹配E元素的最后一个子元素。 E:nth child(n) | 匹配E元素的第n个子元素。 E:nth
阅读全文
摘要：z index属性介绍 只有设置了定位我们才会使用到该 属性，如： 、`相对定位 绝对定位`。 定位元素默认的 属性值是 。 如果 个定位的元素都没有设置 属性，后者会覆盖到前者。 如果 个定位的元素都设置了 属性，并且数值一样大还是后者会覆盖到前者。 属性的属性值大的就会覆盖小，就是设置元素的层级
阅读全文
摘要：CSS中定位介绍 属性在英文单词中表示 的意思，在 中主要作用设置元素的定位。 中一共有 种定位如下： 属性值 | 描述 | fixed | 设置固定定位。 relative | 设置相对定位。 absolute|设置绝对定位。 固定定位实践 在实践固定定位之前我们先看看代码结构是什么样子的呢。 代
阅读全文
摘要：border属性介绍 属性设置元素边框。 边框 个要素如：粗细、线型、颜色。 边框线型属性值说明表如： 属性指| 描述 | none |定义无边框。 hidden |与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 dotted |定义点状边框。在大多数浏览器中呈
阅读全文
摘要：CSS中盒子模型介绍 什么是盒子？ 盒子是用来存储物品，我们可以将盒子理解为酒盒，酒盒有什么组成的呢？ 有酒可以喝、有填充物保护酒防止酒被摔坏、纸盒子。 我们怎么理解 中的盒子呢， 中盒子有什么组成的呢？有内容、内边距、边框、外边距。 中盒子的主要属性有 种如： 宽度、 高度、 内边距、 边框、 外
阅读全文
摘要：浮动基本介绍 在标准文档流中元素分为2种， 和`行内元素`，如果想让一些元素既要有块级元素的特点也同时保留行内元素特点，只能让这些元素脱离标准文档流即可。 浮动可以让元素脱离标准文档流，可以实现让多个元素排在同一行，并且可以设置宽高度。 其实浮动是通过 属性来实现的。 属性值说明表： 属性值 |描述
阅读全文
摘要：标准文档流介绍 我们在制作 网页的时候，都必须遵循一个 的规则如：从左至右、从上至下规则。 让我们进入 网页的标准文档流基本原理实践。 代码块 结果图 标准文档流要注意的事项 空白折叠现象。 高矮不齐，底部对齐。 让我们进入空白折叠现象实践。 代码块 结果图 注意：咦结果图之间怎么有了空白的缝隙呢？
阅读全文
摘要：css背景样式属性介绍 背景样式就是自定义 标签的背景颜色或背景图像。 背景属性说明表 属性名 | 属性值|描述 | | background color | f00、red、rgb(255,0,0)|设置背景颜色。 background image |url(背景图片路径)|设置背景图像。 bac
阅读全文
摘要：CSS中的选择器优先级与!important权重使用 选择器要高于标签选择器。 选择器要高于 选择器。 标签选择器是优先级最低的选择器。 的属性它的权重值优先级最高的，大于所有的选择器。 标签选择器和.class选择器 让我们进入标签选择器和 选择器谁的优先级高实践，实践内容如：将 页面中的 标签设
阅读全文
摘要：CSS样式继承介绍 外层元素身上的样式会被内层元素所继承。 当内层元素身上的样式与外层的元素身上的样式相同时内层元素样式会覆盖外层元素样式。 并不是所有的样式都能够继承，只有文本与字体样式属性才能够被继承，其余的样式属性不可以被继承。 CSS样式继承实践 外层元素身上的样式会被内层元素所继承，这句话
阅读全文
摘要：属性选择器介绍 属性选择器可以根据元素的属性及属性值来选择元素。 属性选择器有什么好处呢，如：可以通过标签的属性名和属性值来匹配对应的元素。 是英文单词 的简写，中文意思就是 或`属性名`。 是英文单词 的简写，中文意思就是 或`属性值`。 属性选择器必须使用 中括号。 属性选择器说明表 属性名 |
阅读全文
摘要：伪类选择器介绍 伪类选择器就是用来给超级链接设置不同的状态样式。 超级链接分为 种状态如：正常状态、访问过后状态、鼠标放上状态、激活状态。 伪类选择器说明表 选择器|描述 | ：link | 向未被访问的超级链接添加样式,正常状态。 ：visited | 向已经被访问的超级链接添加样式，访问过后状态
阅读全文
摘要：列表样式属性 在 中有 种列表、无序列表和有序列表，在工作中无序列表比较常用，无序列表就是 标签和 标签组合成的称之为无序列表，那什么是有序列表呢？就是 标签和 标签组合成的称之为有序列表，列表的基础知识就简单说明下，本章内容主要说明的是如何给列表设置样式，若有不懂列表是什么的园友笔者建议去 "W3
阅读全文
摘要：复合选择器介绍 复合选择器其实很好理解，说白了就跟我们生活中的有血缘关系家庭成员一样，通过标签或者 属性或 属性，去找对应的有血缘关系的某个选择器，具体的大家往下看哦。 如果是初学者对基本的选择器不是很了解的可以看笔者之前写过的基本选择器文章， "CSS基本选择器是什么？基本选择器是如何工作" ，在
阅读全文
摘要：字体属性介绍 中的字体属性是干什么的呢？字体字体肯定和字体有关咯，就是设置 页面中文本的字体， 中常用的字体属性有几种呢，笔者给大家梳理了下，比较常用的一共有 种，今天我们就看看这 种能给文本的字体带来什么效果呢。 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）。 在 中常用的字体属性有5种
阅读全文
摘要：设置行高 由于简单还是老样子直接上代码了哦，注意： 属性值可以使用固定值如：20px..和百分比如：20%。 如果想让文字垂直居中如下：行高的主要作用是用来设置文本的垂直方向居中对齐行高的值与高度的值一样即可。 让我们进入 属性实践，实践内容如：将 标签行高设置为20px。 代码块 结果图 注意：使
阅读全文
摘要：text indent属性介绍 属性值单位 | 描述 | em | 比如：1em 就代表缩进1个字，2em缩进2个字.....。 由于简单我就不过多的介绍了直接上代码了哦，注意： 属性的值支持为负数具体园友可以尝试下。 代码块 结果图
阅读全文
摘要：text transform属性介绍 属性就是设置 页面中的标签里面的文本大小写， 属性常用的属性值有三种： 、`uppercase lowercase`，不常用的属性值在这笔者就不进行一一说明了。 text transform属性值说明表 属性值 |描述 | none | 默认。定义带有小写字母和
阅读全文