随笔分类 - 前端
摘要：我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢。所以我们可以使用字体图标的方式来显示图标，及解决了失真问题，也解决了图片占用资源的问题 常用字体图标库：阿里字体图标库（http://iconfont.cn/） 1、优点： ①轻量性：加载速
阅读全文
摘要：CSS Sprite 也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去 1、优点： ①减少图片字节 ②减少网页的http请求，从而大大的提高页面的性能 2、原理： ①通过background-image引入背景图片 ②通过back
阅读全文
摘要：媒体查询能使页面在不同在终端设备下达到不同的效果 媒体查询会根据设备的大小自动识别加载不同的样式 1、设置meta标签 使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。 <meta name="viewport" content="width=device-wi
阅读全文
摘要：动画是使元素从一种样式逐渐变化为另一种样式的效果 您可以改变任意多的样式任意多的次数 请用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0%和100% 0%是动画的开始，100%是动画的完成。 1、@keyframes创建动画 使用@keyframes创建动画 @keyfram
阅读全文
摘要：1、圆角 使用CSS3 border-radius 属性，你可以给任何元素制作“圆角” border-radius属性，可以使用以下规则： ①四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角 ②三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角 ③两个
阅读全文
摘要：1、定义 position属性指定了元素的定位类型 值 描述 relative 相对定位 absolute 绝对定位 fixed 固定定位 其中，绝对定位和固定定位会脱离文档流 设置定位之后：可以使用四个方向进行调整位置：left、top、right、bottom 2、相对定位 <div> </di
阅读全文
摘要：浮动元素会造成父元素高度塌陷后续元素也会受到影响 1、浮动的作用 当元素设置fliat浮动后，该元素就会脱离文档流并向左/向右浮动 ①浮动元素会造成父元素高度塌陷 ②后续元素会受到影响 <div class="box"> <div class="a"></div> <div class="a"></
阅读全文
摘要：1、浮动的定义 float属性定义元素在哪个方向浮动，任何元素都可以浮动。 值 描述 left 元素向左浮动 right 元素向右浮动 2、浮动的原理： ①浮动以后使元素脱离了文档流 ②浮动只有左右浮动，没有上下浮动 3、元素向左浮动 脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时
阅读全文
摘要：1、文档流是文档中可显示对象在排列时所占用的位置/空间 例如：块元素自上而下摆放，内联元素，从左到右摆放 标准六里面的限制非常多，导致很多页面效果无法实现 ①高矮不齐，底边对齐 ②空白折叠现象 （1）无论多少个空格、换行、tab，都会折叠为一个空格 （2）如果我们想让img标签之间没有空隙，必须紧密
阅读全文
摘要：1、定义：弹性盒子是CSS3的一种新的布局模式 CSS3弹性盒子是一种当前页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式 引入弹性盒子布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间 2、CSS3弹性盒子内容 弹性盒子由弹性容器（Fl
阅读全文
摘要：1、概念：所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用CSS盒模型本质上是一个盒子，封装周围的元素HTML元素，它包括：外边距（margin），边框（border），内边距（padding），和实际内容（content） Margin（外边距）：清楚
阅读全文
摘要：关系选择器分为：后代选择器、子代选择器、相邻兄弟选择器、通用兄弟选择器 1、后低选择器 定义：选择所有被E元素包含的F元素，中间用空格隔开 语法： E F {} <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <ol> <li>4</li> <li>5</li
阅读全文
摘要：使用CSS可以使HTML表格美观 1、表格边框 指CSS表格边框，使用border属性 table,td{ border: 1px solid red; } 2、折叠边框 border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开 table,td{ border: 1px s
阅读全文
摘要：1、text-align 指定元素文本的水平对齐方式 值 描述 left 文本居左排列，默认值 right 把文本排列到右边 center 把文本排列到中间 h3{text-align: center;} h3{text-align: left;} h3{text-align: right;} 2、
阅读全文
摘要：CSS背景属性主要有以下几个 属性 描述 background-color 设置背景颜色 background-image 设置背景图片 background-position 设置背景图片显示位置 background-repeat 设置背景图片如何填充 background-size 设置背景图
阅读全文
摘要：CSS字体属性定义字体，颜色、大小、加粗、文字样式 1、color 规定文本的颜色 div{color：red;} div{color：#fff000} 最常用 div{color：rgb(255,0,0)} div{color：rgba(255,0,0,0-1中间任意数值)} 2、font-siz
阅读全文
摘要：1、ID择器 选针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以#来定义 <P id="c">111</P> #c{ color:red; font-size: 30px; } 特别强调 ID是唯一的 ID不能以数字开头 2、合并选择器 语法：选择器1，选择器2，...{} 作用：提
阅读全文
摘要：CSS语法 规则由两个主要的部分构成：选择器，以及一条或多条声明（样式） 1、全局选择器 可以与任何元素匹配，优先级最低，一般做样式初始化 *{ margin：0; padding：0; } 2、元素选择器 HTML 文档中的元素，p、b、div、a、img、body等 标签选择器，选择的是页面上所
阅读全文
摘要：1、内联样式（行内样式） 要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style属性可以包含任何CSS属性 温馨提示：缺乏整体性和规划性，不利于维护，维护成本高 <p style="color: red; font-size: 30px;">内联样式</p> 2、内联样式 温馨提
阅读全文
摘要：1、CSS 简介 使用CSS的目的就是让网页具有美观一致的页面 2、CSS概念 CSS （Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表 CSS文件后缀名为 .css CSS用于HTML文档中元素样式的定义 3、为什么需要CSS 使用css的目的就是让网页具有美
阅读全文
浙公网安备 33010602011771号