随笔分类 - html+html
摘要：GRID布局 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成
阅读全文
摘要：移动端项目布局类型 rem布局（等比缩放布局、百分比布局） 弹性布局（100%布局、流式布局） 弹性布局特点：顶部与底部的bar不管分辨率怎么变，它的⾼度和位置都不变； 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息 都位于条目的左边，薪资都位于右边.特点：关键元素高宽和位置都不变，只有
阅读全文
摘要：计算方法 计算rem方法： 结合媒体查询 -> 随着设备的改变 更改html font-size的值。 媒体查询确定范围？？ 移动端设计图 ： 640px 750px 1080px; dpr 2 2 3 范围 320px 375px @media screen and (max-width:
阅读全文
摘要：meta标签的设置 <!-- H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 --> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,u
阅读全文
摘要：媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特
阅读全文
摘要：常见的布局方案 固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸； 可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局； 弹性布局：以百分比作为页面的基本单位，可以适应一定范
阅读全文
摘要：多列布局类似报纸或杂志中的排版方式，主要用以控制大篇幅文本。 多列属性 1、column-count 属性规定元素应该被分隔的列数 适用于：除table外的非替换块级元素, table cells, inline-block元素 2、column-gap 属性规定列之间的间隔大小 3、column-
阅读全文
摘要：box-sizing content-box 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
阅读全文
摘要：文本阴影属性 text-shadow 说明：水平、垂直阴影的位置允许负值 可进行多阴影设置(逗号分隔的方式) 文本换行 Word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。 属性值： normal 说明：只在允许的断字点换
阅读全文
摘要：CSS3 CSS3是css技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。 css3的优
阅读全文
摘要：HTML5发展史 HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。 • HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具
阅读全文
摘要：景深 生活中的3d 区别于2d的地方 1、近大远小 景深 程序中实现的方法 perspective 元素距离 视线的距离（物体和眼睛的距离越小，近大远小的效果越明显） perspective: 1200px;（在父元素中使用） transform:perspective(1200px) （在
阅读全文
摘要：浏览器前缀 -ms- -ms-box-shadow IE浏览器专属的CSS属性需添加-ms-前缀 -moz- -moz-box-shadow 所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属 性需添加-moz-前缀 -o- -o-box-shadow Opera浏览器专属的CSS属性
阅读全文
摘要：重置样式 @charset "utf-8"; html,body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;} body{font-si
阅读全文
摘要：BFC BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box（块）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 BFC的布局规则 一、内部的Box会在垂直方向，一
阅读全文
摘要：宽高自适应 网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是pc自适应。自适应的优点：元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。 宽度自适应 元素宽度设置为100%。（块元素宽度默认为10
阅读全文
摘要：CSS文档流 CSS 有三种基本的定位机制：普通流、浮动流、定位流。 POSTION position定位属性，检索或设置对象的定位方式 绝对定位和相对定位的区别： 1、参照物不同，绝对定位的参照物是包含块（已定位的父元素），相对定位的参照物是元素本身默认的位置； 2、绝对定位将对象从文档流中拖离出
阅读全文
摘要：元素类型 根据css显示分类，XHTML元素被分为 三种类型: 块状元素，内联元素，可变元素 && 三种类型： 块状元素，内联元素，内联块元素(css2.1增加) 块状元素的特点 A:块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域， B:默认情况下，块状元素都会占据一
阅读全文
摘要：盒模型 盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。 PADDING MARGIN 文本溢出 overflow visible:默认值，内容不会被修剪，
阅读全文
摘要：不可继承的：display、margin、border、padding、background、height、min-height、max- height、、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、flo
阅读全文
浙公网安备 33010602011771号