友人A的博客

rem基础媒体查询Less基础rem适配方案

布局原理flex 是 flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当为父盒子设置flex布局之后，子元素的 float、clear 和 vertical-align 属性将失效伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局采用Flex布局的元素，称为Flex容器，简称“容器”。它的所...

视口视口：浏览器显示页面内容的屏幕区域。视口可分为 布局视口、视觉视口和理想视口。1. 布局视口 layout viewport一般移动设备的浏览器都设置了一个布局视口，用于解决早起的PC端页面在手机上显示的问题。iOS，Android基本都将这个视口分辨率设置为980px，所以PC上大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。2. 视觉视口 visu...

HTML5的新标签及特性字符设定HTML与XHTML中：<meta http-equiv="charset" content="utf-8">HTML5中：<meta charset="utf-8">常用新标签header：定义文档的页眉，头部nav：定义导航链接的部分footer：定义文档或节的页脚、底部article：定义文章section：...

BFC(块级格式化上下文)BFC(Block formatting context)直译为"块级格式化上下文"。元素的显示模式元素的显示模式 display分为 块级元素 行内元素 行内块元素 ，但它还有很多其他显示模式。具有BFC的条件的元素不是所有的元素模式都能产生BFC，w3c 规范：display 属性为 block, list-item, table 的元素，会产生BFC...

制作项目ico图标引入ico图标<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> 注意：1、它不是iconfont字体，也不是图片2、位置是放到head标签中间3、type=“image/x-icon” 属性可以忽略4、为了兼容性，将favicon.ico这个图标放到根目录下转换i...

字体图标（icinfont）字体图标的优点1、可以做出跟图片一样的可以做的事情，改变透明度、旋转度等2、本质是文字，可以随意改变颜色、产生阴影、透明效果等3、本身体积更小，但携带的信息没有削减4、几乎支持所有浏览器字体图标使用流程1、设计字体图标2、上传生成字体包当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件， 而且需要生成的是兼容性的适合各个浏览器...

元素的显示与隐藏CSS中有三个显示和隐藏的单词比较常见，分别是 display、visibility、overflow。他们的主要目的是让一个元素在页面中消失，但是不在文档源码中消失。display 显示display 设置或检索对象是否及如何显示。display: none; 隐藏对象。display:block; 除了转换为块级元素之外，同时还有显示元素的意思。特点：隐...

浮动（float）普通流（normal flow）也叫 文档流、普通流、标准流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，如块级元素会独占一行，行内元素会按照顺序依次前后排列。什么是浮动？元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。选择器 {float: 属性值;}属性值描述left元...

外边距实现盒子居中可以让盒子实现居中必须满足两个条件：1、必须是块级元素；2、盒子必须指定了宽度（width）。将左右外边距都设置为auto，就可以使块级元素居中。示例：.div {width: 100px; margin: 0 auto;}文字盒子居中图片和背景区别1、文字水平居中 text-align：center；2、盒子水平居中 左右margin改为auto3...

CSS背景（background）单个属性background-color背景颜色background-image背景图片地址background-repeat是否平铺background-position背景位置background-attachment背景固定还是滚动背景的合写（符合属性）background背景颜色 背景...

CSS三大特性CSS层叠性指多种CSS样式叠加。浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候的一个属性就会将另一个属性层覆盖掉。一般情况下，如果出现样式冲突，则会按照CSS书写顺序，以最后的样式为准。CSS继承性指书写CSS样式表时，子标签会继承父标签的某些些样式。想要设置一个可继承的属性，只需将它应用于父元素。注意：恰当地使用继承可以...

复合选择器由两个或多个基础选择器，通过不同的方式组合而成，目的是为了可以选择更准确的更精细的目标标签元素。后代选择器又称包含选择器，用来选择元素或元素组的后代。写法：把外层标签写在前面，内层标签写在后面，中间用空格隔开。子代选择器用来选择写法：把外层标签写在前面，内层标签写在后面，中间用" > "隔开。交集选择器即。。。又。。。的意思。如： p.one 选择的是 类名为...

字体相关样式font-size：字号大小用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。相对长度单位说明em相对于当前对象内文本的字体尺寸px像素，最常用，推荐使用绝对长度单位说明in英寸cm厘米mm毫米pt点font-family：字体用于设置字体，网页中常用的字体有宋体、微软雅黑、黑体等。...

类选择器使用“.”进行标识，可以重复使用，同一页面内允许相同名字的class。id选择器使用“#”进行标识，在同一个页面内，不允许有相同的id对象出现，是唯一的。类选择器和id选择器的最大区别在于使用次数上通配符选择器使用“ * ”进行标识，是所有选择器中作用范围最广的，能匹配页面中所有元素。...

表单域用form标签定义，即创建一个表单，以实现用户信息的收集和传递，from中的所有内容都会被提交给服务器。<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件</form>常用属性：action：表单收集到信息之后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序...