吮指原味鸡的博客

JavaScript学习记录八：运算符一、运算符解释二、算术运算符解释2.1浮点数的精度问题一、运算符解释运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。JavaScript中常用的运算符有：算数运算符递增和递减运算符比较运算符逻辑运算符赋值运算符二、算术运算符解释算术运算使用的符号，用于执行两个变量或值的算术运算。运算符描述例子+加10+20=30-减10-20=-10*乘10*20=200

css学习记录十二:盒模型固定大小(CSS3新特性一、盒子模型一、盒子模型CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变。可以分成两种情况：box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）box-sizing: border-box 盒子大小为 width如果盒子模型我们改为了box-sizing: b

在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。text-shadow: h-shadow v-shadow blur color;值描述h-shadow必需,水平阴影的位置,允许负值v-shadow必需,垂直阴影的位置,允许负值blur可选,模糊的距离color可选,阴影的颜色...

css学习记录十九：浏览器私有前缀写法一、浏览器私有前缀的作用二、写法一、浏览器私有前缀的作用浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。二、写法/*moz-：代表 firefox 浏览器私有属性-ms-：代表 ie 浏览器私有属性-webkit-：代表 safari、chrome 私有属性-o-：代表 Opera 私有属性*/-moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-rad

这里写目录标题在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。border-radius 属性用于设置元素的外边框圆角。border-radius:length; 参数值可以为数值或百分比的形式 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50% 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角  分开写：border-top-left-radius、border-top-right-radius、bor

css学习记录十五：背景线性渐变(CSS3新特性一、写法一、写法background: linear-gradient(起始方向, 颜色1, 颜色2, ...);background: -webkit-linear-gradient(left, red , blue);background: -webkit-linear-gradient(left top, red , blue);背景渐变必须添加浏览器私有前缀起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是 top。...

css学习记录十八：3D转换一、什么是3D转换二、三维坐标系三、3D移动四、透视perpective五、3D旋转六、3d呈现 transfrom-style七、案例1.翻转盒子一、什么是3D转换我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。在现实生活当中，当我们通过肉眼去看物体的时候和照片的成像是相同的。如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）。二、三维坐标系x轴：水平向右 注

css学习记录十六：2D转换一级目录二级目录三级目录一级目录二级目录三级目录

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。box-shadow: h-shadow v-shadow blur spread color inset;值描述h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊距离。spread可选。阴影的尺寸。Color可选。阴影的颜色。inset必需。垂直阴影的位置。允许负值。注意：默认的是外

css学习记录二：CSS选择器（二）：复合选择器一、什么是复合选择器二、复合选择器分类一 、后代选择器二、子选择器三、并集选择器四、交集选择器五、伪类选择器1.链接伪类选择器2.:focus 伪类选择器六、属性选择器一、什么是复合选择器在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。复合选择器可以更准确、更高效的选择目标元素（标签）  复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的常用的复合选择

这里写目录标题一、overflow 属性的作用一、overflow 属性的作用overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么。属性值描述visible不剪切内容，也不增加滚动条hidden不显示超过对象尺寸内容，超出的部分隐藏掉scroll不管超出内容否，总是显示滚动条auto超出自动显示滚动条，不超出不显示滚动条一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。但是如果有定位的盒子

css学习记录九：元素属性解释（四）：cursor属性：改变鼠标样式一、cursor属性一、cursor属性设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。值描述图片default默认值，箭头pointer小手move十字箭头text文本输入not-allowed禁止，可以组织点击事件...

css学习记录九：元素属性解释（三）：vertical-align属性一、vertical-align属性的作用二、 图片、表单和文字对齐三、解决图片底部默认空白缝隙问题一、vertical-align属性的作用CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。vertical-align : baseline | top | middle | bott

css技术点八：页面初始化一、对CSS 初始化一、对CSS 初始化不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS 初始化简单理解： CSS初始化是指重设浏览器的样式。 (也称为CSS reset）每个网页都必须首先进行 CSS初始化。Unicode编码字体：把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。比如：黑体 \9ED1\4F53宋体 \5B8B\4

css技术点一：精灵图一、什么是精灵图二、使用精灵图的好处三、用法四、总结一、什么是精灵图核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了二、使用精灵图的好处一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称CSS Sprites、CSS 雪碧）三、用法

css技术点二：字体图标（阿里巴巴字体图标使用）一、什么是字体图标二、字体图标的好处三、字体图标用法四、字体图标格式介绍一、什么是字体图标字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。二、字体图标的好处轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等兼容性：几乎支持所有的浏览器，请放心使用注意： 字体图标不能替代精灵技术，只是对工作中图

css技术点四：输入框的样式修改一、输入框轮廓线的去除二、防止拖拽文本域 resize一、输入框轮廓线的去除给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。input {outline: none; }二、防止拖拽文本域 resize实际开发中，我们文本域右下角是不可以拖拽的。textarea{ resize: none;}...

这里写目录标题一、字体属性的作用二、字体系列三、字体大小四、 字体粗细五、文字样式六、字体复合属性一、字体属性的作用CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。二、字体系列p { font-family:"微软雅黑";} div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}各种字体之间必须使用英文状态下的逗号隔开一般情况下,如果有空格隔开的多个单词组成的字体,加引号.尽量使用系统默认自带字体，保证在

css学习记录五：盒模型一、什么是盒子模型二、盒模型组成三、边框（border）四、内边距（padding）五、外边距五、一些常见问题1.外边距合并2.相邻块元素垂直外边距的合并3.嵌套块元素垂直外边距的塌陷一、什么是盒子模型所谓 盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。二、盒模型组成CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容三、边框（border）border可以设置元素的边框。边

css学习记录三：CSS文本属性一、CSS 文本属性二、文本颜色三、文本对齐四、装饰文本五、文本缩进六、行间距一、CSS 文本属性CSSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等二、文本颜色color 属性用于定义文本的颜色。div { color: red;}预定义的颜色值red，green，blue等英文颜色十六进制(常用)#FF0000,#FF6600,#29D794rgb代码rgb(255

css学习记录九：元素属性解释（一）： display 属性一、display 属性的作用一、display 属性的作用display 属性用于设置一个元素应如何显示。display: none ；隐藏对象display：block ；除了转换为块级元素之外，同时还有显示元素的意思display 隐藏元素后，不再占有原来的位置。...

这里写目录标题一、什么是浮动二、什么是标准流三、浮动的作用四、浮动的特性五、为什么要清除浮动六、清除浮动的方法1.额外标签法2.父级添加 overflow3.:after 伪元素法4.双伪元素清除浮动一、什么是浮动网页布局的本质——用 CSS 来摆放盒子。 把盒子摆放到相应位置。CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：普通流（标准流）浮动定位float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。选择器 { floa

这里写目录标题一、什么是定位二、静态定位:position:static三、相对定位:position:relative四、绝对定位:position:absolute五、固定定位:position:fixed六、黏性定位:position:sticky七、定位叠放次序 z-index八、定位布局1.绝对定位的盒子居中2.定位特殊特性3.脱标的盒子不会触发外边距塌陷4.绝对定位（固定定位）会完全压住盒子一、什么是定位盒子定位就是使盒子在什么地方显示。让元素自由的在某盒子中摆放。定位 = 定位模式 +

这里写目录标题一、calc()的作用二、写法一、calc()的作用计算盒子的宽高二、写法div{ height:calc(100px - 20rem)}需要注意的是运算符的两边一定要有空格

css学习记录十三:css函数（二）：filter滤镜函数一、filter()的作用二、写法一、filter()的作用filter CSS属性将模糊或颜色偏移等图形效果应用于元素二、写法filter: blur(5px); /*blur模糊处理 数值越大越模糊*/...

css学习记录十四：过度(CSS3新特性一、什么是过渡二、过渡的好处三、写法一、什么是过渡过渡动画： 是从一个状态 渐渐的过渡到另外一个状态二、过渡的好处可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局。我们现在经常和 :hover 一起 搭配使用。三、写法transition: 要过渡的属性 花费时间 运动曲线 何时开始1.属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一

css学习记录九：元素属性解释（三）： visibility 属性一、 visibility 属性一、 visibility 属性visibility 属性用于指定一个元素应可见还是隐藏。visibility：visible ; 元素可视visibility：hidden; 元素隐藏visibility 隐藏元素后，继续占有原来的位置。如果隐藏元素想要原来位置， 就用 visibility：hidden如果隐藏元素不想要原来位置， 就用 display：none (用处更多 重点）..

css学习记录九：元素属性解释（五）：opacity 属性一、opacity 属性一、opacity 属性改变盒子的透明度opacity = “0.5”0是完全透明。1是不透明会继承给子元素rgba不会继承

css学习记录四：背景属性一、背景属性的作用二、背景颜色三、背景图片四、背景平铺五、背景图片位置六、背景图像固定（背景附着）七、背景复合写法八、背景半透明一、背景属性的作用通过 CSS 背景属性，可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等二、背景颜色background-color 属性定义了元素的背景颜色。一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。background-co

css学习记录二：CSS选择器（一）：基础选择器一、什么是选择器二、选择器的分类三、基础选择器1.标签选择器2. id选择器3.类选择器4.通配符选择器一、什么是选择器选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说，就是选择标签用的。二、选择器的分类选择器分为基础选择器和复合选择器两个大类三、基础选择器1.标签选择器<style>div{backgroun:red}</style><body><div&gt

文章目录一、什么是CSS二、css的书写位置三、CSS的三大特性层叠性继承性优先级四、元素分类1.块级元素2.行内元素一、什么是CSS    CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表),用来给网页的标签增加样式。在没有css文件时，一般都是在html标签的style属性种写，这也能改变标签的样式。1.css书写格式在HTML的标签中<div style="background:red;font-size:30p