css

border:red solid thin;
outline:#00ff00 dotted thick;   //是绘制于元素周围的一条线,位于边框边缘的外围

text-decoration: none;    //没有下划线

display:inline|block|inline-block的区别

这样先讲内联元素和块级元素:
内联元素是不可以控制宽和高、margin等;并且在同一行显示,不换行。
块级元素时可以控制宽和高、margin等,并且会换行。

inline:使用此属性后,元素会被显示为内联元素,元素则不会换行。
block:使用此属性后,元素会被现实为块级元素,元素会进行换行。
inline-block:是使元素以块级元素的形式呈现在行内。意思就是说,让这个元素显示在同一行不换行,但是又可以控制高度和宽度,这相当于内敛元素的增强。
IE6 不支持inline-block

block元素的特点是:

总是在新行上开始;
高度,行高以及顶和底边距都可控制;
宽度缺省是它的容器的100%,除非设定一个宽度
<div>,<p>,<h1>,<form>,<ul>和<li>是块元素的例子。

CSS display:inline

CSS display:inline就是将元素显示为行内元素.

inline元素的特点是:

和其他元素都在一行上;
高,行高及顶和底边距不可改变;
宽度就是它的文字或图片的宽度,不可改变。
<span>,<a>,<label>,<input>,<img>,<strong>和<em>是inline元素的例子。

 

---------------------------------------------------------------------------------------------------------------------

原文地址:https://www.cnblogs.com/suxiaolong/p/5668849.html