随笔分类 - css
摘要：transition:过渡的属性 过渡的持续时间 过渡的速度变化类型 过渡的延迟时间;
阅读全文
摘要：transform-转换 1)作用： 使元素在位置或者形状上发生一定的改变 2)属性： transform: translate() /rotate() /scale() /skew(); 3)属性值 ①位移 单位：px、% transform: translate(x,y); 当只取一个值,表示水
阅读全文
摘要：背景渐变 1)属性 background-image: ; 简写: background: ; 2)属性值 ①线性渐变 background-image: linear-gradient(方向,颜色1,颜色2,..); 注意: 方向可以省略,默认从上往下渐变，最少两个颜色值 取值: a、关键词to
阅读全文
摘要：堆叠顺序： z-index:number ; 默认值auto，可以取负值 取值越大,层级越往上 必须配合定位使用(static除外)
阅读全文
摘要：BFC ( Block formatting context )直译为“块级格式化上下文”。 他是一个独立渲染的区域，它规定了内部如何布局,容器里面的子元素不会在布局上影响到外面的元素。 如何产生BFC ? 1、float取值left或者right； 2、Position 取值为absolute或者
阅读全文
摘要：清除浮动的影响: ①给浮动元素的父元素设置高度 (需要高度是已知的) ②给浮动元素的父元素加 overflow:hidden/auto; （常用）(开启BFC格式:变为独立的一块, 子元素不会在布局上影响父元素) ③给受影响的元素加 clear:left/right/both; ④空div法 (弊端
阅读全文
摘要：厂商前缀是用于浏览器对C3新特性的支持 浏览器 厂商前缀 内核 | 谷歌 | -webkit- | blink | | 苹果 | -webkit- | webkit | | 火狐 | -moz- | gecko | | 欧朋 | -o- | blink | | I E | -ms- | triden
阅读全文
摘要：box-sizing: content-box; 为默认值，标准盒模型 box-sizing: border-box; 怪异盒模型
阅读全文
摘要：弹性盒模型用到的一些属性 1、写在父元素上的属性 1)开启弹性布局（元素默认水平排列） display:flex; 2)设置子元素的排列方式(即弹性盒的方向) flex-direction: ; row 默认值，子元素从左往右排列 row-reverse 子元素从右往左排列 column 子元素从上
阅读全文
摘要：属性选择器：就是利用HTML的属性选中有此属性的所有元素 书写格式： ①[属性=属性值] ②元素[属性=属性值] ③元素[属性^=值] 以当前值开头 ④元素[属性$=值] 以当前值结尾 ⑤元素[属性*=值] 包含当前值
阅读全文
摘要：伪对象选择器 在元素前面或者元素后面插入一个不存在的元素(伪元素) ①在元素内部的最前面插入 ::before{ content: ""; } ②在元素内部的最后插入 ::after{ content: ""; }
阅读全文
摘要：CSS3新增的伪类选择器 :first-child 表示第一个子元素是... :last-child :nth-child(numberloddleven/倍数) :first-of-type 表示第一个子元素 :last-of-type :nth-of-type (numberloddleven/
阅读全文
摘要：overflow用于设置内容溢出元素框怎么处理 1.visibze： 默认值 2.hidden： 溢出部分隐藏 3.scroll： 显示滚动条 4.auto： 自动,当有内容溢出,显示滚动条;没有内容溢出,不显示滚动条 使一行文字溢出用省略号显示 white-space: nowrap; //文字在
阅读全文
摘要：定位属性： position、display、float、left、top、right、bottom、overflow、clear、z-index 自身属性：width、height、padding、border、margin、background 文字样式：font-family、font-siz
阅读全文
摘要：水平居中实现步骤： left: 50%; 让盒子的左侧移动到父级元素的水平中心位置 margin-left: -50px; 让盒子向左移动自身宽度的一半 实现垂直居中： top: 50%; 让盒子的上侧移动到父级元素的水平中心位置 margin-top: -50px; 让盒子向上移动自身宽度的一半
阅读全文
摘要：例如： body { font: 12px/1.5 Microsoft YaHei ;}div { font-size:14px;} span { } 行高可以跟单位也可以不跟单位， 如果是有单位的，那就是设置的实际距离， 如果是不跟单位的数字，而子元素又没有设置行高，它就会继承父元素的行高的1.5
阅读全文
摘要：第一个参数对应r(红色)，第二个参数对应g(绿色)，第三个参数对应b(蓝色)，最后一个参数a是alpha(透明度)，取值范围是在0~1之间 background: rgba(0,0,0,0.3); 也可以写为（把0.3的0省略）： background: rgba(0,0, 0, .3);
阅读全文
摘要：元素显示模式的转换需要用到display属性， display属性中用block转换为块元素，inline转换为行内元素，inline-block可以转换为行内块，none表示此元素不会被显示 display:block; （使用最多） display.inline; display: inline
阅读全文
摘要：Css的元素显示模式 ## 块元素常见的块元素有<h1>~<h6>、<p>、 <div>、 <ul>、 <o|>、 <li>等 ，其中<div>标签是最典型的块元素块级元素的特点：1.比较霸道，自己独占一行2.高度、宽度、外边距以及内边距都可以控制3.宽度默认是容器(父级宽度)的100%4.块元素是
阅读全文
摘要：CSS复合选择器：后代选择器：用来选择后代元素，符号是用空格隔开.nav a子代选择器：选择最近一级元素，符号是在中间放大于符号 .nav>p并集选择器：选择某些相同样式的元素，符号是用逗号隔开 .nav, .header链接伪类选择器：选择不同状态的链接，常用的是 a{}和a:hover:focu
阅读全文
浙公网安备 33010602011771号