注册 / 登录

清河洛

您现在的位置是:首页>网站前端>CSS学习

CSS学习

  • CSS中的grid网格布局

    Grid布局与Flex布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。Flex布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。既可以设置容器为块元素(display:grid),也可以设置容器为行内元素(display:inline-grid)。设为网格布局以后,容器子元素的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。设置容器网格的列宽和行高grid-template-columns:定义每一列的列宽grid-template-rows:定义每一行的行高既可以使用绝对单位,也可以使用百分比以下代码指定了一个三行三列的网格,列宽都是33.33%,行高都是100px .box { display: g

    发布时间:2020-10-14 14:19:39
  • CSS中的flex布局

    Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。它即可以设置容器为块元素(display:flex),也可以设置容器为行内元素(display:inline-flex)。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。目前,它已经得到了所有浏览器的支持。定义容器的六个属性flex-direction:容器内元素的排列方向(默认row) row,沿水平主轴从左向右排列 row-reverse,沿水平主轴从右向左排列 column,沿垂直主轴从上到下垂直排列 column-reverse,沿垂直主轴从下到上垂直排列flex-wrap:容器内元素的换行(默认nowrap) nowrap:不换行,如一个div宽度100%,设置此属性,2个div宽度就自动变成各50% wrap:自动换行,向下方

    发布时间:2020-10-13 13:27:45
  • CSS中的变量

    CSS中的变量一、变量的声明声明变量的时候,变量名前面要加两根连词线(--)。 body { --foo: #7F583F; --bar: #F7EFD2; } 上面代码中,body选择器里面声明了两个变量:--foo和--bar。它们与正式属性没有什么不同,只是没有默认含义。所以 CSS 变量(CSS variable)又叫做"CSS 自定义属性"(CSS custom properties)。为什么选择两根连词线(--)表示变量?因为$foo被 Sass 用掉了,@foo被 Less 用掉了。为了不产生冲突,官方的CSS变量就改用两根连词线了。各种值都可以放入 CSS 变量。变量名大小写敏感,--header-color和--Header-Color是两个不同变量。二、var()函数用于读取变量。 a { text-decoration-color: var(--bar); color: var(--foo, #7F583F

    发布时间:2019-07-15 14:46:55
  • 自适应网页和响应式图像

    自适应网页手机的屏幕比较小,宽度通常在600像素以下,PC的屏幕宽度,一般都在1000像素以上。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果。很多网站的解决方法,是为不同的设备提供不同的网页,这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本。"自适应网页设计"的概念2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。允许网页宽度自动调整在网页代码的头部,加入一行viewport元标签设置页面缩放比例<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" /> width:设置宽度,为一个正整数,或字符串"width-device"(屏幕宽度) initial-scale:设置页面的初始缩放值,为一个数

    发布时间:2019-07-15 14:28:49
  • CSS3中的动画

    CSS3中的动画中使用的属性在各个浏览器中的支持是不一定兼容的,我们在属性钱添加前缀来实现各个浏览器的兼容-ms-兼容IE9-webkit-兼容Safari和Chrome-o-兼容Opera-moz-兼容Firefox为了节省篇幅,下面仅出现一次兼容性的语句,之后都不做兼容,在实际使用中自行添加兼容性语句。一、2D转换,通过transform 属性实现transform-origin: x y; //设置转换时的相对中心,默认为元素的中心,使用此属性可以改变默认值。transform-origin: bottom left; //设置转换时的相对中心,默认为元素的中心,使用此属性可以改变默认值。1、translate()方法位移div{transform: translate(50px,100px);-ms-transform: translate(50px,100px); /* IE 9 */-webkit-transform: translate(50px,100px); /* Sa

    发布时间:2017-08-20 15:42:51
  • Google推荐的html/css规范

    介绍一下Google推荐的HTML和CSS编写格式规范,以建立良好的个人编码习惯。通用样式规范省略图片、样式、脚本以及其他媒体文件URL的协议部分(http:,https:),除非文件在两种协议下都不可用。这种方案称为protocol-relativeURL,好处是无论你是使用HTTPS还是HTTP访问页面,浏览器都会以相同的协议请求页面中的资源,同时可以节省一部分字节。<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>.example {background: url("//www.google.com/images/example");}缩进格式规范一次缩进2个空格,不要使用 tab 或者混合 tab 和空格的缩进。大小写以下都应该用小写:HTML元素名称,属性,属性值(除非 text/CDATA),CSS 选择器,属性,属性值。编码在

    发布时间:2017-02-21 16:45:51
  • CSS中背景颜色渐变

    一、linear-gradient:背景颜色线性渐变。 linear-gradient(方位, 起始色, 末尾色)方位:可选参数,渐变的方位。可以使用的值有:to top、to top right、to right、to bottom、to bottom left、to left、to top left。起始色 必选参数,颜色值末尾色 必选参数,颜色值通过:top、left、right、bottom这四组实现的渐变方向有时比较单一,我们可以使用以角度单位的数值来设置方位。比如 0 度(0deg)相当于 to top;角度会沿逆时针方向随着你的角度的增加而增加(可以是负值)。如: background-image: linear-gradient(45deg,orange,green);多色线性渐变:background-image: linear-gradient(-45deg,orange,green,blue,red);通过百分比(也可以用像素等单位)设置多色线性位置:ackgrou

    发布时间:2016-12-16 21:52:30
  • CSS的透明度、盒子阴影轮廓、光标样式

    一、透明度:opacity: 取值:0 ~ 1。用来设置元素的透明度二.盒子阴影轮廓:盒子的阴影:box-shadow属性,该属性有很多值:hoffset:阴影的水平偏移量,是一个长度值,正值表示阴影向右偏移,负值表示阴影向左偏移。voffset:阴影的垂直偏移量,是一个长度值, 正值代表阴影位于元素盒子的下方,负值代表阴影位于元素盒子上方。以下为可选值:blur :指定模糊值,是一个长度值,值越大盒子的边界越模糊。默认值为 0,边界清晰spread:指定阴影延伸半径,是一个长度值, 正值代表阴影向盒子各个方向延伸扩大,负值代表阴影沿相反方向缩小color :设置阴影的颜色,如果省略,浏览器会自行选择一个颜色inset:(可选)将外部阴影设置为内部阴影。盒子的轮廓:和边框一样,只不过它可以在边框的外围再加一层。属性表如下:outline-color:颜色值,外围轮廓的颜色outline-offset:长度值,轮廓距离元素边框边缘的偏移量outline-style:轮廓样式,和border

    发布时间:2016-12-16 21:51:47
  • CSS中表格与列表样式

    表格:表格有五种独有样式如下:一、border-collapse:separate:默认值,单元格边框独立(单元格之间有间隔)collapse:单元格相邻边框被合并(单元格之间没有有间隔)二、border-spacing:设置相邻单元格之间的间隔距离三、caption-side:设置标题标签中相对表格的位置,有top和bottom两个值(都是有居中属性)四、empty-cells:空单元格是否显示边框show:默认值,显示边框hide:不显示边框五、table-layout:auto:默认值,内容过长时,拉伸整个单元格fixed:内容过长时,不拉伸整个单元格,会在单元格内换行显示列表:列表有四种独有样式:一、list-style-type:列表中的标记类型:none:没有标记 disc:实心圆 circle:空心圆 square:实心方块decimal:阿拉伯数字 lower-roman:小写罗马数字 upper-roman:大写罗马数字lower-alpha:小写英文字母 upper-

    发布时间:2016-12-16 21:50:51
  • CSS边框与背景

    CSS定位(position):相对定位resition、绝对定位absolute和fixedresition基于文档流的位置,原文档流位置保留absolute基于父元素,脱离文档流,原文档流位置不保留fixed基于浏览器窗口,脱离文档流,原文档流位置不保留边框:边框border的样式:none:没有边框 solid:实线边框 dashed:破折线边框 dotted:圆点线边框double:双线边框 groove:槽线边框 ridge:脊线边框inset:使元素内容具有内嵌效果的边框 outset:使元素内容具有外凸效果的边框使用 border-radius 属性可以设置圆角边框:border-radius:长度值或百分数 四条边角border-top-left-radius:长度值或百分数 左上边角border-top-right-radius:长度值或百分数 右上边角border-bottom-left-radius:长度值或百分数 左下边角border-bottom-right-r

    发布时间:2016-12-16 21:49:36
首页 上一页 下一页 尾页
共14条 当前1/2页


网址导航