html盒子按照标准流,08CSS盒子定位.ppt

08CSS盒子定位教程

overflow属性 (1)overflow属性的基本功能是设置元素盒子中的内容如果溢出是否显示，取值有visible(可见)、hidden(隐藏)、scroll(出现滚动条)、auto(自动)。如果不设置则默认值为visible。 (2)overflow属性的另一种功能是用来代替清除浮动的元素。 如果父元素中的子元素都设置成了浮动，那么子元素脱离了标准流，导致父元素高度不会自动伸展包含住子元素，可以在这些浮动的子元素的后面添加一个清除浮动的元素，来把外围盒子撑开。实际上，通过对父元素设置overflow属性也可以扩展外围盒子高度，从而代替了清除浮动元素的作用。 Overflow属性的四种取值 Overflow扩展盒子高度 .father{ background-color:#ffff99; border:1px solid #111111; overflow:auto; }

Box-1

clip属性 img { clip: rect(20px,auto,auto,20px); position: absolute; /*clip属性只能用在绝对定位元素上*/ } CSS+div布局 CSS+div布局 对于CSS布局而言，本质就是大大小小的盒子在页面上摆放，我们看到的页面中的内容不是文字，也不是图像，而是一堆盒子。我们要考虑的就是盒子与盒子之间的关系，是标准流？并列？上下？嵌套？间隔？背景？浮动？绝对？相对？定位基准？等等。将盒子之间通过各种定位方式排列使之达到想要的效果就是CSS布局基本思想。 如果用CSS对整个网页进行布局，那么基本步骤如下： (1)将页面用div分块； (2)通过CSS设计各块的位置和大小，以及相互关系； (3)在网页的各大div块中插入作为各个栏目框的小块 4.9.1 分栏布局的种类 网页的布局从总体上说可分为固定宽度布局和可变宽度布局两类。所谓固定宽度是指网页的宽度是固定的，如780像素，不会随浏览器大小的改变而改变；而可变宽度是指如果浏览器窗口大小发生变化，网页的宽度也会变化，如将网页宽度设置为85%，表示它的宽度永远是浏览器宽度的85% 网页分栏布局的基本种类 固定宽度布局 固定宽度网页居中的方法 text-align法：(不太好用) body{text-align：center；mini-width：790px；} #wrapper{margin：0 auto；text-align：left；width：780px；} margin法：(推荐) #container { margin: 0 auto ; width: 780px; } #container { margin: 0 auto ; width: 85%; } 相对定位法： #container { position: relative; width:780px; left: 50%; margin-left: -390px; } 固定宽度分栏的实现 浮动法(三栏浮动) 写总体结构代码

id="header"

id="navi"

id="content"

id="side"

id="pagefooter"

再写栏目结构代码 由于栏目框可以重用，所以一般将它们添加类名 .rounded { background: url(images/left-top.gif) top left no-repeat; width:100%; } .rounded h2 { background: url(images/right-top.gif) top right no-repeat; padding:20px 20px 10px; margin:0; } 可变宽度布局 两列等比例布局 将每列的宽由固定的值改为百分比就行了 两列等比例布局 #header,#pagefooter,#container{ margin:0 auto; width：760px; /*删除原来的固定宽度*/ width:85%; /*改为比例宽度*/ } #content{ float:right; width：500px; /*删除原来的固定宽度*/ width: