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