202010-14 CSS中的grid网格布局 Grid布局与Flex布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。 Flex布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。 Grid布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。.... Read More >
202010-13 CSS中的flex布局 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。 它即可以设置容器为块元素(display:flex),也可以设置容器为行内元素(display:inline-flex)。 .... Read More >
201907-15 CSS中的变量 CSS中的变量 一、变量的声明 声明变量的时候,变量名前面要加两根连词线(--)。 body { --foo: #7F583F; --bar: #F7EFD2; } 上面代码中,body选择器里面声明了两个变量:--foo和--bar。 它们与正式属性没有什么不同,只是没有默认含义。所以 CSS 变量(CSS variable)又叫做.... Read More >
201907-15 自适应网页和响应式图像 自适应网页 手机的屏幕比较小,宽度通常在600像素以下,PC的屏幕宽度,一般都在1000像素以上。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果。很多网站的解决方法,是为不同的设备提供不同的网页,这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本。 "自适应网页设计"的概念 2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web D.... Read More >
201708-20 CSS3中的动画 CSS3中的动画中使用的属性在各个浏览器中的支持是不一定兼容的,我们在属性钱添加前缀来实现各个浏览器的兼容 -ms-兼容IE9 -webkit-兼容Safari和Chrome -o-兼容Opera -moz-兼容Firefox 为了节省篇幅,下面仅出现一次兼容性的语句,之后都不做兼容,在实际使用中自行添加兼容性语句。 一、2D转换,通过transform 属性实现 transform-o.... Read More >
201702-21 Google推荐的html/css规范 介绍一下Google推荐的HTML和CSS编写格式规范,以建立良好的个人编码习惯。 通用样式规范 省略图片、样式、脚本以及其他媒体文件URL的协议部分(http:,https:),除非文件在两种协议下都不可用。 这种方案称为protocol-relativeURL,好处是无论你是使用HTTPS还是HTTP访问页面,浏览器都会以相同的协议请求页面中的资源,同时可以节省一部分字节。 <s.... Read More >
201612-16 CSS中背景颜色渐变 一、linear-gradient:背景颜色线性渐变。 linear-gradient(方位, 起始色, 末尾色) 方位:可选参数,渐变的方位。可以使用的值有:to top、to top right、to right、to bottom、to bottom left、to left、to top left。 起始色 必选参数,颜色值 末尾色 必选参数,颜色值 通过:top、left、rig.... Read More >
201612-16 CSS的透明度、盒子阴影轮廓、光标样式 一、透明度:opacity: 取值:0 ~ 1。用来设置元素的透明度 二.盒子阴影轮廓: 盒子的阴影:box-shadow属性,该属性有很多值: hoffset:阴影的水平偏移量,是一个长度值,正值表示阴影向右偏移,负值表示阴影向左偏移。 voffset:阴影的垂直偏移量,是一个长度值, 正值代表阴影位于元素盒子的下方,负值代表阴影位于元素盒子上方。 以下为可选值: blur :指定模.... Read More >
201612-16 CSS中表格与列表样式 表格:表格有五种独有样式如下: 一、border-collapse: separate:默认值,单元格边框独立(单元格之间有间隔) collapse:单元格相邻边框被合并(单元格之间没有有间隔) 二、border-spacing:设置相邻单元格之间的间隔距离 三、caption-side:设置标题标签中相对表格的位置,有top和bottom两个值(都是有居中属性) 四、empty-ce.... Read More >
201612-16 CSS边框与背景 CSS定位(position):相对定位resition、绝对定位absolute和fixed resition基于文档流的位置,原文档流位置保留 absolute基于父元素,脱离文档流,原文档流位置不保留 fixed基于浏览器窗口,脱离文档流,原文档流位置不保留 边框: 边框border的样式: none:没有边框 solid:实线边框 dashed:破折线边.... Read More >