对css 行 块 盒的认识

行属性

行内标签： span,strong,a 不可以设置宽高 可以与别人共处一行 其宽高由内容撑开

display:inline; /*转换为行内*/
display:inline-block; /* 其实仍未行内元素，但是可以设置width及height属性等*/

 

 

块属性

块标签 ： div,ul,li,ol,h1~h6,p 可以设置宽高 不可以与别人共处一行 不设置宽度的情况下，默认宽度是100%

display:block; /*转换为块级*/
<input type="text" name="">
<input type="text" name="">
input{width: 400px;height: 50px;}

盒模型

CSS中， Box Model叫盒子模型（或框模型），Box Model规定了元素框处理元素内容（element content）、内边距（padding）、边框（border） 和 外边距（margin） 的方式。在HTML文档中，每个元素（element）都有盒子模型，所以说在Web世界里（特别是页面布局），Box Model无处不在。

盒模型遵循嵌套规则 其中margin为外边距 

margin:50px 0 0 50px;上右下左

margin: 0 50px 10px;上0 左右50 下10

margin: 20px 30px;上下20 左右30

margin: 10px;四个方向都是10

margin-left: auto;

margin-right: : auto;

margin: 100px auto 0; /居中/