随笔分类 -  01HTML+CSS

摘要:什么是vw? 在css中,vw是一种视窗单位,也是相对单位,相对于视口的宽度。视口被均分为100个单位的vw,1vw 等于视窗宽度的 1%。与之相对应的还有vh,1vh 等于视窗高度的 1%。 我们可以这样理解 100vw = window.innerwidth, 100vh = window.in 阅读全文
posted @ 2022-09-24 11:15 Lamb~ 阅读(377) 评论(0) 推荐(0) 编辑
摘要:媒体查询 媒体查询 Media Queries,是一种可以根据不同的设备为其实现不同的样式的技术。在CSS3 引入了媒体查询,使用媒体查询,你可以针对不同的媒体类型定义不同的样式,还可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,媒体查询是非常有用的。 可能有一组用于屏幕 阅读全文
posted @ 2022-09-23 20:55 Lamb~ 阅读(672) 评论(0) 推荐(0) 编辑
摘要:物理像素和CSS像素 像素是计算机屏幕中显示特定颜色的最小区域。屏幕中的像素越多,同一范围内能看到的内容就越多。或者说,当设备尺寸相同时,像素越密集,画面就越精细。那么,当我们在 CSS 中为一个元素设置属性 width: 250px; 时,会发生什么?这个元素的宽度究竟是多少像素呢? 事实上,这里 阅读全文
posted @ 2022-09-23 17:19 Lamb~ 阅读(696) 评论(0) 推荐(0) 编辑
摘要:px px就是pixel像素的缩写,相对长度单位,网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的 rpx rpx是小程序的单位,微信小程序官方规定屏幕的宽有750rpx。屏幕宽度 分辨率/750 得到的结果就是1rpx的值。 rem rem是CSS3新增的一个相对单位,rem是相对于 阅读全文
posted @ 2022-09-23 14:13 Lamb~ 阅读(853) 评论(0) 推荐(0) 编辑
摘要:CSS中提供了一些可以使元素显示与隐藏的属性,分别是display、visibility和opacity。 1.display display属性用于设置一个元素如何显示。 display:none; 将 display 设置为 none 会将元素从渲染树中移除。这会导致该元素及其所有子代元素不再被 阅读全文
posted @ 2022-09-23 11:14 Lamb~ 阅读(393) 评论(0) 推荐(0) 编辑
摘要:1、全局去除默认样式 *{ padding:0; margin:0; box-sizing: border-box; /*怪异盒子,设置了宽高后border和padding不会撑开元素的宽高*/ } 2、a标签 a{ text-decoration: none; /*去除文本下划线*/ color: 阅读全文
posted @ 2022-09-22 17:36 Lamb~ 阅读(116) 评论(0) 推荐(0) 编辑
摘要:为什么会使用浮动? 一开始出现浮动只是为了解决文字环绕图片问题,但最后是为了解决几个块级元素并排显示问题,虽然可以使用定义块级元素的display为inline-block(这种方式也不会出现父级元素坍塌问题)但是这种方式不能控制元素的位置而是默认从左到右,所以要实现元素是居左还是居右使用浮动更方便 阅读全文
posted @ 2022-09-22 17:06 Lamb~ 阅读(83) 评论(0) 推荐(0) 编辑
摘要:简介 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的时间和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器 阅读全文
posted @ 2022-09-22 11:46 Lamb~ 阅读(915) 评论(0) 推荐(0) 编辑
摘要:简介 CSS animations 使得可以将从一个 CSS 样式配置转换到另一个 CSS 样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。可通过多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。相比较过渡,动画可以实现更多变化,更多控制,连续 阅读全文
posted @ 2022-09-22 10:47 Lamb~ 阅读(37) 评论(0) 推荐(0) 编辑
摘要:简介 CSS transform 属性允许你旋转,缩放,倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。 转换( transform) 你可以简单理解为变形。只能转换由盒模型定位的元素(display: block;)。 移动:translate 旋转:rotate 缩放 阅读全文
posted @ 2022-09-21 11:40 Lamb~ 阅读(40) 评论(0) 推荐(0) 编辑
摘要:简介 transition CSS 属性是 transition-property,transition-duration,transition-timing-function 和 transition-delay 的一个简写属性。 transition:[transition-property t 阅读全文
posted @ 2022-09-21 10:48 Lamb~ 阅读(52) 评论(0) 推荐(0) 编辑
摘要:简介 CSS 网格布局擅长于将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系(前提是 HTML 生成了这些区域)。是目前唯一的一种css二维布局。 像表格一样,网格布局让我们能够按行或列来对齐元素。然而在布局上,网格比表格更可能做到或更简单。例如,网格容器的子元素可以自己定位, 阅读全文
posted @ 2022-09-21 09:33 Lamb~ 阅读(272) 评论(0) 推荐(0) 编辑
摘要:简介 就是用 CSS 的 column-count、column-width、column-gap、break-inside、page-break-inside 等实现多列显示的功能。 实现多列布局的常用属性 column-count: 设置列的个数 column-width: 列的宽度 colum 阅读全文
posted @ 2022-09-20 20:48 Lamb~ 阅读(75) 评论(0) 推荐(0) 编辑
摘要:简介 Flexible Box 模型,通常被称为 flexbox弹性盒子布局,是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。 我们说 flexbox 是一种一维的布局,是因为一个 flexbox 一次只能处理一个维度上的元素布局,一行或者一列。作为对比的是另 阅读全文
posted @ 2022-09-20 20:29 Lamb~ 阅读(489) 评论(0) 推荐(0) 编辑
摘要:CSS 选择器 CSS 选择器用于"查找"(或选取)要设置样式的 HTML 元素。 我们可以将 CSS 选择器分为五类: 基本选择器(根据名称、id、类来选取元素) 组合器选择器(根据它们之间的特定关系来选取元素) 伪类选择器(根据特定状态选取元素) 伪元素选择器(选取元素的一部分并设置其样式) 属 阅读全文
posted @ 2022-09-20 16:36 Lamb~ 阅读(441) 评论(0) 推荐(0) 编辑
摘要:创建一个表格 表格由 <table> 标签来定义。 每个表格均有若干行(由 <tr> 标签定义)。 每行被分割为若干单元格(由 <td> 标签定义) 字母 th 指表头数据 字母 td 指表格数据(table data),即数据单元格的内容 表格的表头使用 <th> 标签进行定义 大多数浏览器会把表 阅读全文
posted @ 2022-09-20 16:08 Lamb~ 阅读(797) 评论(0) 推荐(0) 编辑
摘要:表单是什么? 对于用户而言是数据的录入和提交的界面 对于网站而言获取用户信息的途径 HTML <form> 元素表示文档中的一个区域,此区域包含交互控件,用于向 Web 服务器提交信息。 创建一个表单 <form action="" method="" name=""> </form> form标签 阅读全文
posted @ 2022-09-20 15:37 Lamb~ 阅读(385) 评论(0) 推荐(0) 编辑
摘要:什么是HTML5? HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开发。 HTML5是Web中核心语言HTML的 阅读全文
posted @ 2022-09-20 11:05 Lamb~ 阅读(162) 评论(0) 推荐(0) 编辑
摘要:什么是HTML HTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果(如 CSS),或功能与行为(如 JavaScript)。 HTML元素详解 阅读全文
posted @ 2022-09-20 10:39 Lamb~ 阅读(558) 评论(0) 推荐(0) 编辑