02CSS边框边距浮动定位文档格式.docx

1、 border-width 边框宽度 border-width:0.2cm 0.3cm 0.4cm 0.5cm; border-width:1 2 3 4;（上右下左）eg：css代码： div width: 100px; height: background: darksalmon; border-color: red yellow blue black; border-style: solid; border-width: 1px 3px 5px 10px; （上右下左） html代码： 效果： 边框的简化设置：格式: 边框宽度 - 边框样式 - 边框颜色 border: 5px soli

2、d red width: border: 5px solid red; div2注意：使用padding（内填充）属性，外面的box1会被“撑起来”。 padding属性简写方案： padding: 10px （上下左右 各10px） 2px 4px（上下，左右） 2px 6px 10px（上，左右，下） 1px 2px 3px 4px（上，右，下，左） CSS区块、浮动 CSS中区块的使用 CSS中浮动的使用 CSS中定位的使用（了解）1. CSS中区块的使用区块元素：block-level elements （块级元素） ，block元素通常被显示为独立的一块，会单独占据一行；常见的块级元

3、素有 div, form, table, p, h1h6, dl和dd、dt搭配使用, hr, ul,ol等。内联元素：即inline元素，前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。常见的内联元素有 span（常用内联容器，定义文本内区块）, a, strong, em, lable, input, select, img,等。block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。这只是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如P元素，只能包含inline元素，而不

4、能包含block元素。可以通过display:inline和display:block的设置，改变元素的布局级别。block元素 区块元素的属性： width 像素/百分比 区块的宽度 height 像素/百分比 区块的高度 min-height 像素像素/百分比 区块最小高度 max-height 像素像素/百分比 区块最大高度 min-width 像素像素/百分比 区块最小宽度 max-width 像素像素/百分比 区块最大宽度两个div各占一行 内联元素： .sp1 red; .sp2 .sp3 sandybrown;span class=sp1慧与-洛阳国际软件人才产业基地sp2sp3

5、三个span默认会在一行显示 Display属性值block，inline和inline-block特点（补充）： display:block1） block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。2） block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。3） block元素可以设置margin和padding属性。inline1） inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。2） inline元素设置width,

6、height属性无效。3） inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。inline-block1） 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又

7、具有inline的同行特性。2. CSS中浮动的使用 float属性的值和说明CSS 中 float（浮动）属性，会使元素向左或向右移动，其周围的元素也会重新排列。float（浮动），往往是用于图像，但它在布局时一样非常有用。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 float none 正常显示 left 左浮动 right 右浮动 clear none 允许两边浮动 left 清除左边浮动 right 清除右边浮动 both 清除两边浮动采用浮动（float）布局实现如下

8、页面布局： * margin: 0px; padding: body 867px; 0 auto; #header 323px; #nav 51px; seagreen; #sidebar 251px; 490px; skyblue; float: left; #news 313px; 300px; springgreen; float: #about 303px; salmon; #estate 616px; 190px; darkseagreen; #footer 110px; mediumslateblue; clear: both;div id=header头部nav导航sidebar左边栏news新闻about关于estate其他footer尾部p2p3