一、内联元素的盒模型
内联元素不能设置宽高
支持水平方向上的内外边距和边框,垂直方向都不怎么好使
二、display和visibility
disolay:none;/*不占地*/
visibility:hidden;/*占地*/
三、overflow
visible
/*默认值。内容不会被修剪,会呈现在元素框之外。*/
hidden
/*内容会被修剪,并且其余内容是不可见的*/
scroll
/*内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容*/
inherit
/*规定应该从父元素继承 overflow 属性的值*/
四、文档流
<!--页面即文档-->
<div style= "background-color: #bfa; ">a</div>
<div style="height: 50px;"></div>
<div style="width: 100px; height: 100px; background-color: #ff0;"></div>
五、浮动
浮动使用float属性:
none/*不浮动*/
left/*向左浮动*/
right/*向右浮动*/
块级元素和行内元素都可以浮动,当一个行内元素浮动以后将会自动变为一 个块级元素
浮动元素默认会变为块元素,即使设置display:inline以后其依然是个块元素
当一个元素浮动以后,其下方的元素会上移。元素中的内容将会围绕在元素的周围
浮动会使元素完全脱离文本流,也就是不再在文档中在占用位置
六、简单布局
首先清除浏览器默认样式
布局大体:
(1)开头样式
(2)主体样式
(3)结尾样式