css--小白记录一

237 阅读1分钟

1.圆角问题

css3新增的语法,可以让图的边框变成圆角的,好看一点,我总是记不住!语法如下:

/* icon_btn 是图的类名 */.icon_btn: border-radius;

CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。

2.搜索框与按钮对齐问题

写类似于百度搜索框的时候,会遇到搜索输入框和提交按钮对不齐的问题,解决方法是给按钮加一个border如下,颜色为button的背景色

border: 1px solid #3999f8;

3.css文本省略号显示

单行文本溢出省略:

.icon_text {    width: 58px;    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;}

注:要有宽度,不然加了下面3行代码也不显示省略号即要加 width 来兼容部分浏览

多行文本溢出省略:

display: -webkit-box; /*必要属性!将块元素作为弹性伸缩盒子模型显示*/
-webkit-box-orient: vertical; /*必要属性!伸缩项的布局方式(排列方式)*/
-webkit-line-clamp: 3; /*块元素显示的文本行数*/
overflow: hidden;

  • 上面的代码是webkit内核的浏览器这样写

4.box-sizing应用场景