HXL521666的博客

vw/vh是什么？vw/vh 是一个相对单位（类似 em 和 rem 相对单位） vw 是：viewport width 视口宽度单位 vh 是：viewport height 视口高度单位 相对视口的尺寸计算结果 1vw = 1/100 视口宽度 1vh = 1/100 视口高度 例如：当前屏幕视口是 375px，则 1vw 就是 3.75px，如果当前屏幕视口为 414px，则 1vw 就是 4.14px。注意：和百分比有区别，百分比是相对于父元素来说的，而 vw 和.

一、响应式开发1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而达到适合不同设备的目的。设备划分 小区间 超小屏幕（手机） < 768 像素 小屏设备（平板） >= 768px ~ < 992px 半屏幕（屏幕显示器） >= 992px ~ < 1200px 宽屏设置（大桌面显示器） >= 1200 像素 1.2 响应式布局组件响应式需要一个父级作为布局容器，来配合子级元素来

移动端技术选型1.单独制作移动端页面（主流）流式布局（百分比布局） flex弹性布局（强烈推荐） less+rem+媒体查询布局 混合布局2.响应式页面兼容移动端（其次）媒体查询 bootstrap流式布局（百分比布局）流式布局，就是百分比布局，也称非固定像素布局通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充流式布局方式是移动Web开发使用的比较常见的布局方式max-width(max-height)最大宽度min-widt

认识3D转换「3D的特点」近大远小，物体和面遮挡不可见「三维坐标系」 x 轴：水平向右 --注意：x 轴右边是正值，左边是负值 y 轴：垂直向下 --注意：y 轴下面是正值，上面是负值 z 轴：垂直屏幕 -- 注意：往外边的是正值，往里面的是负值 3D转换1.3D 转换知识要点 3D位移：translate3d(x, y, z) 3D旋转：rotate3d(x, y, z) 透视：perspctive 3...

「动画」是CSS3中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。「动画的使用」 先定义动画 再调用定义好的动画 /*1.定义动画*/@keyframes动画名称{0%{width:100px;}100%{width:200px}}div{/*调用动画*/animation-name:动画名称;/*持续时间...

「 2D转换之translate移动」 2D转换是改变标签在二维平面上的位置和形状 移动：translate 旋转：rotate 缩放：scale translate语法 x就是X轴上水平移动 y就是y轴上水平移动 transform:translate(x,y)transform:translateX(n)transfrom:translateY(n)...

过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不适用Flash 动画或者JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。过渡动画：是从一个状态 渐渐地过渡到另外一个状态。可以让我们也没更好看，更动感十足，虽然 低版本浏览器不支持(ie9以下版本) 但是不会影响页面布局。我们现在经常和 :hover 一起 搭配使用。「定义」过渡transition是一个复合属性，包括transition-property、transition-dura

「1. CSS3属性选择器」button{cursor:pointer;}button[disabled]{cursor:default;}input[type=search]{color:skyblue;}span[class^=black]{color:lightgreen;}span[class$=black]{color:lightsalmon;}...

前言本文主要介绍H5新增内容以及CSS3中的新特性。在H5方面主要介绍拓展了哪些内容，CSS3方面介绍动画及转换。H5新增内容「1. 什么是HTML5」 定义：HTML5定义了HTML标准的最新版本，是对HTML的第五次重大修改，号称下一代的HTML。 两个概念： 是一个新版本的HTML语言，定义了新的标签、特性和属性 拥有一个强大的技术集，这些技术集是指：HTML5、CSS3、JavaScript,这也是广义上的HTML5。 「2. HTML

有宽度的块级元素居中对齐，是margin: 0 auto; 让文字居中对齐，是text-align: center; vertical-align 垂直对齐，它只针对于「行内元素」或者「行内块元素」设置或检索对象内容的垂直对其方式。vertical-align:baseline|top|middle|bottom注意：vertical-align 不影响块级元素中的内容对齐，它只针对于「行内元素」或者「行内块元素」，特别是行内块元素， 通常用来控制...

所谓的界面样式， 就是更改一些用户操作样式，以便提高更好的用户体验。 更改用户的鼠标样式 表单轮廓等。 防止表单域拖拽 1. 鼠标样式设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。属性值 描述 default 小白 默认 pointer 小手 move 移动 text 文本 not-allowed 禁止 <ul><listyle="cursor:default"&...

div{width:0;height:0;line-height:0；font-size:0;border-top:10pxsolidred;border-right:10pxsolidgreen;border-bottom:10pxsolidblue;border-left:10pxsolid#000;} 我们用css 边框可以模拟三角效果 宽度高度为...

目的:让一个元素在页面中消失或者显示出来 场景:类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！ 1.display 显示（重点）display设置或检索对象是否显示或如何显示。 display: none隐藏对象 特点：隐藏之后，不再保留位置 display: block除了转换为块级元素之外，同时还有显示元素的意思。 实际开发场景：配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛...

在使用「定位」布局时，可能会「出现盒子重叠的情况」。加了定位的盒子，默认「后来者居上」， 后面的盒子会压住前面的盒子。应用z-index层叠等级属性可以「调整盒子的堆叠顺序」。如下图所示：z-index的特性如下: 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上； 如果属性值相同，则按照书写顺序，后来居上； 数字后面不能加单位 z-index只能用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。 ...

将盒子「定」在某一个「位」置 自由的漂浮在其他盒子(包括标准流和浮动)的上面。所以，我们脑海应该有三种布局机制的上下顺序????????标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空）定位是用来布局的，它有两部分组成：定位 = 定位模式 + 边偏移在 CSS 中，通过top、bottom、left和right属性定义元素的「边偏移」：（方位名词）边偏移属性 示例 描述 top t...

建议遵循以下顺序： 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式） 自身属性：width / height / margin / padding / border / background 文本属性：color / font / text-decoration / text-align / vertical-align / white- space

「1. CSS布局的三种机制」网页布局的核心——就是用CSS来摆放盒子。CSS 提供了3种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：A. 普通流（标准流） 块级元素会独占一行，从上向下顺序排列； 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行； 常用元素：span、a、i、em等 B. 浮动 让盒子从普通流中浮起来

css学习三大重点：css 盒子模型、浮动、定位 网页布局的本质 首先利用CSS设置好盒子的大小，然后摆放盒子的位置。 最后把网页元素比如文字图片等等，放入盒子里面。 网页布局的本质：就是利用CSS摆盒子 1. 盒子模型(Box Model) 盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 盒子模型由元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。 盒子里...

「1. CSS 层叠性」-概念： 所谓层叠性是指多种CSS样式的叠加 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 -原则：-注意： 样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。 样式不冲突，不会层叠 「2. CSS 继承性」 -概念： 子标签会继承父标签的某些样式，如文本颜色和字号。 想要设置一个可继承的属性.

「1. 背景颜色」background-color:颜色值;默认的值是transparent透明的「2. 背景图片(image)」语法：background-image:none|url(url);例如:background-image:url(images/1.png);「3. 背景平铺（repeat）」background-repeat:repeat|no-repeat|repeat-x|repeat-y参数 作用...

标签显示模式是标签以什么方式进行显示。HTML标签一般分为块标签和行内标签两种类型，它们也称为块元素和行内元素。「1. 块级元素(block-level)」常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。 块级元素的特点 独占一行 高度，宽度，外边距以及内边距都可以控制。 宽度默认是容器(父级

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等「1. 后代选择器」又称为包含选择器 用来选择元素或元素组的子孙后代 其写法就是把外层标签写在前面，内层标签写在后面，中间用「空格」分隔，先写父亲爷爷，再写儿子孙子。 子孙后代都可以这么选择。或者说，它能选择任何包含在内 的标签。 父级 子级{属性:属性值;属性:属性值;}.class h3 {color:red;font-size:

1.打开调试工具 打开Chrome浏览器，按下 F12键或者右击页面空白处点击检查2.使用调试工具① ctrl+滚轮可以放大开发者工具大小。②左边是HTML元素结构，右边是CSS样式。③右边CSS样式可以改动数值(左右箭头或者直接输入)和查看颜色④ctrl+0复原浏览器大小。⑤如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。⑥如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。...

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单目的是为了收集用户信息。1.表单控件(表单元素)：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。「1. input 控件」<inputtype="属性值"value="你好"> input 输入的意思 <input />标签为单标签 type属性设置不同的属性值用来指定不同的控件类型 ...

1.表格的含义：现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理。2.表格的基本语法：<table><tr><td>单元格内的文字</td>...</tr>...</table> table用于定义一个表格标签。...

「网页」主要是由文字、图像和超链接等元素构成，当然除了这些元素，网页中还可以包括音频、视频以及Flash等。其实就是一个html文件（后缀名为html）