前端学习 - 随笔分类(第3页) - 泰初

CSS——CSS Sprite(雪碧图)

摘要：CSS Sprite 特性： CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图上去加载好处：可以减少图片的质量，网页的图片加载速度块减少图片的请求次数，加快网页的打开阅读全文

posted @ 2021-02-07 10:13 泰初阅读(170) 评论(0) 推荐(0)

CSS——css定位

摘要：CSS定位 position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。position主要的值: static(默认) 默认值。没有定位，元素阅读全文

posted @ 2021-02-07 10:10 泰初阅读(102) 评论(0) 推荐(0)

CSS——如何清除float浮动

摘要：float浮动现象：脱离文档流，延迟父容器靠左或靠右进行排列。 float:right / left / none 注意点：（1）只会影响后面的元素（2）内容默认提升半层（3）默认宽根据内容决定（4）换行排列（5）主要给块元素添加，但也可以给内联元素添加如何清除浮动：一、上下排列时：阅读全文

posted @ 2021-02-07 09:58 泰初阅读(135) 评论(0) 推荐(0)

CSS——css默认样式及重置

摘要：一、css默认样式没有默认样式的： div span 有默认样式的： body -> margin:8px h1 -> margin: 上下 21.440px p -> margin: 上下 16px ul -> margin: 上下 16px padding: 左 40px 默认点：list-s 阅读全文

posted @ 2021-02-07 09:51 泰初阅读(593) 评论(0) 推荐(0)

CSS——显示框类型、溢出隐藏、透明度与鼠标手势、最小、最大宽高

摘要：一、显示框类型 display 属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 disp 阅读全文

posted @ 2021-02-07 09:46 泰初阅读(248) 评论(0) 推荐(0)

HTML——一般标签嵌套规范

摘要：在表格、表单中我们可以经常见到标签嵌套，如： ul li ol li table tr td dl dt dd 标签嵌套的一般规则如下：块标签能够嵌套内联标签，块标签不一定能嵌套块标签(如p标签不可以嵌套其他块标签)，内联不能嵌套块(存在特殊情况a标签，它可以嵌套div)： <div> <span 阅读全文

posted @ 2021-02-07 08:47 泰初阅读(456) 评论(0) 推荐(1)

CSS——响应式布局

摘要：一、响应式布局缘由对于网站的移动端和PC端，大一点的网站都是分开开发的，PC端一套代码，移动端一套代码。以访问淘宝网举例：访问淘宝网 -> 后端检测当前设备 -> 如果是PC端 -> www.taobao.com -> 如果是移动端 -> www.taobao.com重定向 ->h5.m.ta 阅读全文

posted @ 2021-02-06 21:39 泰初阅读(513) 评论(0) 推荐(0)

CSS——移动端适配方案

摘要：移动端适配方案一、百分百布局,流式布局。代表网站优酷、腾讯、天猫、百度流式布局原则：文字流式(fluid) 控件弹性(flexible) 图片等比缩放(scale) 好处：大屏幕下显示更多内容坏处：宽屏下比例会有些不协调二、等比缩放布局，也叫rem布局。代表网站网易、爱奇艺、美团、淘宝单位阅读全文

posted @ 2021-02-06 21:32 泰初阅读(231) 评论(0) 推荐(0)

CSS——viewport视口及设置

摘要：一、viewport视口在移动端，viewport视口就是浏览器显示页面内容的屏幕区域。 viewport视口有两种视口，分别是 visual viewport(可视视口)和layout viewport(布局视口)：（1）visual viewport固定大小跟屏幕大小相同，在上面；（2）l 阅读全文

posted @ 2021-02-06 21:22 泰初阅读(1986) 评论(0) 推荐(0)

CSS——CSS架构

摘要：CSS架构在一个大型项目中，由于页面过多，导致CSS代码难以维护和开发。所以CSS架构可以帮助我们解决文件管理和文件划分等问题。首先要对CSS进行模块化处理，一个模块负责一类操作行为。可利用Less和Scss实现。划分：文件夹含义 base 一些初始的通用CSS，如重置默认样式，动画、工具阅读全文

posted @ 2021-02-06 21:13 泰初阅读(397) 评论(0) 推荐(0)

CSS——Sass和Less的特点和比较

摘要：Sass和Less Sass和Less都属于CSS预处理器，CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一种编程的特性，如：变量、语句、函数、继承等概念。将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。 Sass官网地址：http: 阅读全文

posted @ 2021-02-06 19:43 泰初阅读(1014) 评论(0) 推荐(0)

CSS——Grid网格布局

摘要：Grid网格布局网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 Grid 布局与 Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在阅读全文

posted @ 2021-02-01 21:57 泰初阅读(361) 评论(0) 推荐(0)

CSS——Flex弹性盒模型

摘要：Flex弹性盒模型 flex布局，可以简便、完整、响应式地实现各种页面布局。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 子项（项目）（flex item）划分：作用在flex容器上: flex- 阅读全文

posted @ 2021-02-01 16:41 泰初阅读(246) 评论(0) 推荐(0)

CSS——BFC规范、触发条件及应用

摘要：BFC规范： BFC即块级格式化上下文，属于FC(Formatting context)格式化上下文中的一种规范。具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。触发BFC的条件：浮动元素：float除none 阅读全文

posted @ 2021-01-21 20:24 泰初阅读(460) 评论(0) 推荐(0)

HTML——标签分类

摘要：标签分类： 1、按类型： block: div li h1-h6 p ul ol ... 特点： (1)独占一行 (2)支持所有样式 (3)不写宽时，和父元素宽相同 (4)所占区域是一个矩形 inline: span a em strong img ... 特点： (1)挨在一起 (2)有些样式不支阅读全文

posted @ 2021-01-21 20:22 泰初阅读(197) 评论(0) 推荐(0)

CSS——盒模型及常见的问题

摘要：盒模型 content->padding->border->margin 注： 1、背景色只能填充到margin以内的区域 2、文字的content以内的区域添加 3、padding不能为负数，margin可以为负数 box-sizing box-sizing 属性允许您以特定的方式定义匹配某个区域阅读全文

posted @ 2021-01-21 20:19 泰初阅读(448) 评论(0) 推荐(0)

CSS——CSS样式优先级

摘要：css优先级： 1、相同样式，后面出现的优先级高 2、外部样式和内部样式优先级相同，如果都设置了相同样式，后写的样式优先级高 3、单一样式优先级：style行间>id>class>tag>*>继承注：style行间权重: 1000 id样式权重: 100 class样式权重: 10 Tag样阅读全文

posted @ 2021-01-21 20:15 泰初阅读(560) 评论(0) 推荐(0)

CSS——选择器

摘要：选择器： 1、id选择器 2、class类选择器 3、标签选择器 4、群组选择器(,隔开) 5、*通配选择器 6、层次选择器：后代选择器： M N{ } 父子选择器 M > N{ } 兄弟选择器 M ~ N{ } 当前M下面的所有兄弟N标签相邻选择器 M + N{ } 当前M下面相邻的N标签（唯阅读全文

posted @ 2021-01-21 20:13 泰初阅读(165) 评论(0) 推荐(0)

CSS——CSS中可以和不可以继承的属性

摘要：一、无继承性的属性1、display：规定元素应该生成的框的类型 2、文本属性： vertical-align：垂直文本对齐 text-decoration：规定添加到文本的装饰 text-shadow：文本阴影效果 white-space：空白符的处理 unicode-bidi：设置文本的方向 3 阅读全文

posted @ 2021-01-21 20:02 泰初阅读(322) 评论(0) 推荐(0)

HTML——link标签的作用和用法

摘要：<link>标签学习 HTML外部资源链接元素 (<link>) 规定了当前文档与外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标(比如PC端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。 rel 表示“关系 (relationship) ”，它可能是<li 阅读全文

posted @ 2021-01-21 20:00 泰初阅读(3493) 评论(0) 推荐(0)

靡不有初，鲜克有终

随笔分类 - 前端学习

公告