css front end face questions summarized

1. Realization of horizontal and vertical elements centered
   focus to see 4.5,6 method simply positioning the merged version plus margin of

2. Text overflow handling

• Three-piece single line of text directly

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

• Multi-line text only cut
  1) applies to webkit core browser and mobile end

			div{
					width: 100px;
					height: 3.6rem;
					line-height: 1.2rem;
					-webkit-line-clamp: 3;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					border: 1px solid;
					position: relative;
				}

Improve:

		div::after {
				content: "...";
				position: absolute;
				bottom: 0;
				right: 0;
				padding-left: 40px;
				background: -webkit-linear-gradient(left, transparent, #fff 80%);
				background: -o-linear-gradient(right, transparent, #fff 80%);
				background: -moz-linear-gradient(right, transparent, #fff 80%);
				background: linear-gradient(to right, transparent, #fff 80%);
			}

Results as shown:

Scope :
This method applies a wide range, but the case did not go beyond the line of text will appear ellipsis, js can be combined to optimize the method.

Note :

To p :: after adding a gradient background to avoid text only show half.
Since ie6-7 not display content content, so to add tags compatible ie6-7 (such as: ... ); compatible ie8 will need to replace :: after to: after.
2) look at the last method in this blog, it is also useful
poke here
3. browser and its kernel
quoted from: https: //www.cnblogs.com/chenpiaoxiaowu/p/11284021.html

 IE浏览器，使用Trident浏览器内核，又称为IE内核。只用于Windows平台，而且并不是开源的；

  chrome浏览器，目前使用的是Blink浏览器内核。浏览器内核的演进过程：Chromium  > Webkit  > Blink；

  Firefox浏览器，使用Gecko浏览器内核；

  Safari浏览器，目前使用的是Webkit浏览器内核。浏览器内核的演进过程：KHTML > Webkit(WebCode + JSCode) > Webkit2;

  Opera浏览器，目前使用的是Blink浏览器内核。浏览器内核的演变过程：Presto > Webkit >Blink;