java前端div浮动靠左_越早知道越好的前端常用小知识

在网站搭建的时候，遇到问题都会找别人帮忙或者是找一些别人分享的知识，今天则是由我来分享前端常用的一些小知识。废话不多，直接上一些我们工作中常用的前端小知识，希望对你有用。

01

文本超出时

(1)单行文本超出时

overflow: hidden;text-overflow:ellipsis;white-space: nowrap;

(2)多行文本超出时

display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;

02

手机容器滚动条滑动不流畅

overflow: auto;-webkit-overflow-scrolling: touch;

03

float:none和clear:both的区别

float:none 是指当前元素无浮动，而clear:both是指清除浮动元素对当前元素的影响 clear的属性值如下 none : 允许两边都可以有浮动对象 both : 不允许有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象

04

背景图片(background-attachment)

scroll 默认值。 背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时，背景图像不会移动。 inherit 规定应该从父元素继承 background-attachment 属性的设置。

05

margin和padding适合什么场景使用

margin：

需要在border外侧添加空白 空白处不需要背景色 上下相连的两个盒子之间的空白，需要相互抵消时。 padding： 需要在border内侧添加空白 空白处需要背景颜色 上下相连的两个盒子的空白，希望为两者之和。

兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。

06

display：table与本身的table区别

display : table和本身table是相对应的，区别在于，display：table的css声明能够让一个html元素和它的子节点像table元素一样，使用基于表格的css布局，是我们能够轻松定义一个单元格的边界，背景等样式，而不会产生因为使用了table那样的制表标签导致的语义化问题。

之所以现在逐渐淘汰了table系表格元素，是因为用div+css编写出来的文件比用table编写出来的文件小，而且table必须在页面完全加载后才显示，div则是逐行显示，table的嵌套性太多，没有div简洁

07

border属性

大家比较常见的写法：

.XXXX { border: solid 1px black;}

这里的border属性的用法是一种简写的形式，它分别设置了border-style, border-width, 和border-color — 用一句代码表示它们三个。 但不要忘记，border-style, border-width, 和border-color也都有自己的写法形式。所以，border-width可以写成这样：

.XXXX { border-width: 2px 5px 1px 0;}

四个边的宽度被一次设定。border-color 和 border-style的单独写法与上面的写法是一样的。

08

点击图片时是下载功能，而非是预览功能

<a href="logo.jpg" download>下载a><a href="logo.jpg" download="图片">下载a>

09

line-height 三种写法的区别？

- 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高

- 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 \* 18 = 27px

- 百分比：将计算后的值传递给后代。

10

怎么让 Chrome 支持小于 12px 的文字

font-size:10px;-webkit-transform:scale(0.8);display:block;

用transform:scale()这个属性进行缩放！留言板 你的每个赞和在看，我都喜欢！