程序猿学习第九天,浮动和盒子模型标签属性

来源:互联网 发布:java线程yield 编辑:程序博客网 时间:2024/06/05 04:33

浮动相关属性
float属性值:left,right,none。该属性定义目标元素的浮动样式,分为左右和不浮动三种值。
clear属性值:left,right,both。该输赢用于清除浮动元素下方元素所受到的浮动影响,分别可以单独清除左右浮动影响,或者清除全部。
overflow属性值:visible,hidden,auto,scroll外层div如果不明确指定高度,会包裹内容,但包裹的内容不包括浮动元素,所以我们为了视觉上外层div依然包裹所有内容,会在所有浮动元素下方家一个没有任何高度的清除了浮动的div,但是对于这种需求,我们可以直接给父元素overflow属性一个hidden值来达成。


一、盒子模型部分

1.边框border-top/right/left/bottom-color:用于设置边框颜色,可分别指定设置上下左右任一颜色。或者border-color:值填写一个颜色为指定全部边框颜色;给出两个值依次为上下边框颜色和左右边框颜色;给出三个值依次为上边框颜色,左右边框颜色,下边框颜色;给出四个值依次为上,右,下,左边框颜色。border-width:可使用thin,medium,thick设置也可以直接填写数值如1px等。另外,在设置的时候,border-width用法和color一样。border-style:值右none无边框、hidden、dotted点线边框、dashed虚线边框、solid、double、groove、ride、outset等。用于设置边框样式。border属性:可直接一次性设置以上color,width,style三属性。2.外边距margin:使用方法同上。3.内边距padding:方法同上。4.标准文档流块级元素:独占一行。不管内容有多少,该元素必然独占一行。内联元素:有多少空间占多少空间。完全包裹所包含的内容,内容有多少,则元素占用多少位置。5.display属性值:block元素会被现实为块级元素。inline元素被显示为内联元素。none该元素不会显示。

二、浮动部分

1.float属性值left元素向左浮动。right元素向右浮动。none元素不浮动。2.clear属性值left,right,both,none。该属性用于清除浮动影响。3.扩展盒子高度overflow属性,值visible内容不会被修剪,可能会呈现在盒子之外。hidden内容会被修剪,盒子外内容不可见。scroll内容会被修剪,但浏览器会显示滚动条。auto如果内容被修剪,则会生成相应滚动条。另外该属性的hidden值可用于完成清除浮动和扩展盒子高度。