首页 > 代码库 > css这一段时间学习中遇到的比较有用,但是容易忘记的属性

css这一段时间学习中遇到的比较有用,但是容易忘记的属性

overflow-x:hidden; //将X轴的滚动条隐藏
overflow-y:hidden; //将Y轴的滚动条隐藏

position:定位属性
absolute(常用) 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative(常用) 生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right
或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。

padding: 内边距
margin: 外边距
outline:none; 去掉选中时文本框外面的边框
border-radius; 圆角,单位可以为像素
float:浮动
div{display:inline;} 让DIV平等布局
解决按钮或图片和文本框不在一条线的问题:
将文本框和图片设置相同高度,然后往左浮动
解决input文本框点击时外面的边框效果如何隐藏的问题:
input:focus {outline:none;}
解决input文本框中将文字放在背景图片右边的问题:
padding-left: 5%;
颜色渐变(to left表示向左渐变)颜色向左渐变,由粉色到灰色
background: linear-gradient(to left, #ffe2e7 30%,#dddddd 100%);
//设置max-width 后,图片开始自适应
img {
display: block;
max-width: 100%;
}
text-decoration: none; //清除超链接下划线
:underline; //加一条下划线
display属性:
none //此元素不会被显示。
block //此元素将显示为块级元素,此元素前后会带有换行符。
inline //默认。此元素会被显示为内联元素,元素前后没有换行符。
list-style: outside none none;这句代码的意思是? outside:默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
list-style: 包含了三个属性:list-style-position、list-style-type、list-style-img。也就是说给他们分别赋值。
html {}的CSS 中设置625%相当于100px
line-height: //行高
div {box-sizing: border-box;} //布局忽略边框计算
white-space : 属性设置如何处理元素内的空白。
normal 默认。空白会被浏览器忽略。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 是给文字添加阴影效果 4个值的含义分别是:
0:阴影水平偏移值(可取正负值);
1px:阴影垂直偏移值(可取正负值);
1px:阴影模糊值;
rgba(0,0,0,0.3):阴影颜色;
opacity : 设置div元素的不透明级别
background-color: transparent; 设置背景颜色为透明
text-indent 属性规定文本块中首行文本的缩进。
input {border: none;} 将input的边框去掉
vertical-align 图像垂直对齐方式
white-space 规定段落中的文本不进行换行
text-overflow 规定当文本溢出包含元素时发生的事情。
当值为ellipsis时,显示省略符号来代表被修剪的文本。
filter 滤镜当值为blur时即模糊效果
a链接的用法:
a:link,定义正常链接的样式;
a:visited,定义已访问过链接的样式;
a:hover,定义鼠标悬浮在链接上时的样式;
a:active,定义鼠标点击链接时的样式。
如果想要让div中的文字垂直居中,需要将div的高度和行高设成相同大小

css这一段时间学习中遇到的比较有用,但是容易忘记的属性