02CSS边框边距浮动定位文档格式.docx
《02CSS边框边距浮动定位文档格式.docx》由会员分享，可在线阅读，更多相关《02CSS边框边距浮动定位文档格式.docx（15页珍藏版）》请在冰豆网上搜索。
border-width边框宽度border-width:
0.2cm0.3cm0.4cm0.5cm;
border-width:
1234;
（上右下左）
eg：
css代码：
div{
width:
100px;
height:
background:
darksalmon;
border-color:
redyellowblueblack;
border-style:
solid;
border-width:
1px3px5px10px;
（上右下左）
}
html代码：
<
div>
<
/div>
效果：
◆边框的简化设置：
格式:
边框宽度->
边框样式->
边框颜色
border:
5pxsolidred
width:
border:
5pxsolidred;
}
<
2.CSS中边距的使用
css盒子模型：
所有HTML元素可以看作盒子。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：
边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
如下图所示：
◆外边距margin属性：
属性名称属性值说明
margin-bottomauto自动调整边距
长度/百分比设置下边距
margin-leftauto自动调整边距
长度/百分比设置左边距
margin-rightauto自动调整边距
长度/百分比设置右边距
margin-topauto自动调整边距
长度/百分比设置上端边距
margin-top:
50px;
margin-left:
20px;
◆margin属性简写方案：
margin:
20px40px（上下，左右）
20px60px100px（上，左右，下）
10px20px30px40px（上，右，下，左）
◆内边距padding属性（内填充）：
padding-bottom长度/百分比元素下端内边距
padding-left长度/百分比元素左端内边距
padding-right长度/百分比元素右端内边距
padding-top长度/百分比元素上端内边距
.div1{
blue;
padding-left:
30px;
padding-top:
.div2{
divclass="
div1"
>
div2"
注意：
使用padding（内填充）属性，外面的box1会被“撑起来”。
◆padding属性简写方案：
padding:
10px（上下左右各10px）
2px4px（上下，左右）
2px6px10px（上，左右，下）
1px2px3px4px（上，右，下，左）
CSS区块、浮动
●CSS中区块的使用
●CSS中浮动的使用
●CSS中定位的使用（了解）
1.CSS中区块的使用
区块元素：
block-levelelements（块级元素），block元素通常被显示为独立的一块，会单独占据一行；
常见的块级元素有div,form,table,p,h1~h6,dl和dd、dt搭配使用,hr,ul,ol等。
内联元素：
即inline元素，前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。
常见的内联元素有span（常用内联容器，定义文本内区块）,a,strong,em,lable,input,select,img,等。
block元素可以包含block元素和inline元素；
但inline元素只能包含inline元素。
这只是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。
比如P元素，只能包含inline元素，而不能包含block元素。
可以通过display:
inline和display:
block的设置，改变元素的布局级别。
block元素
◆区块元素的属性：
width像素/百分比区块的宽度
height像素/百分比区块的高度
min-height像素像素/百分比区块最小高度
max-height像素像素/百分比区块最大高度
min-width像素像素/百分比区块最小宽度
max-width像素像素/百分比区块最大宽度
两个div各占一行
◆内联元素：
.sp1{
red;
.sp2{
.sp3{
sandybrown;
spanclass="
sp1"
慧与--洛阳国际软件人才产业基地<
/span>
sp2"
sp3"
三个span默认会在一行显示
◆Display属性值block，inline和inline-block特点（补充）：
∙display:
block
1）block元素会独占一行，多个block元素会各自新起一行。
默认情况下，block元素宽度自动填满其父元素宽度。
2）block元素可以设置width,height属性。
块级元素即使设置了宽度,仍然是独占一行。
3）block元素可以设置margin和padding属性。
inline
1）inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
2）inline元素设置width,height属性无效。
3）inline元素的margin和padding属性，水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果；
但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom不会产生边距效果。
inline-block
1）简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。
之后的内联对象会被排列在同一行内。
比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
2.CSS中浮动的使用
◆float属性的值和说明
CSS中float（浮动）属性，会使元素向左或向右移动，其周围的元素也会重新排列。
float（浮动），往往是用于图像，但它在布局时一样非常有用。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
floatnone正常显示
left左浮动
right右浮动
clearnone允许两边浮动
left清除左边浮动
right清除右边浮动
both清除两边浮动
采用浮动（float）布局实现如下页面布局：
*{
margin:
0px;
padding:
body{
867px;
0auto;
#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;
divid="
header"
头部<
nav"
导航<
sidebar"
左边栏<
news"
新闻<
about"
关于<
estate"
其他<
footer"
尾部<
3.CSS中定位的使用（了解）
CSS定位属性允许你为一个元素定位。
它也可以将一个元素放在另一个元素后面。
元素可以使用的顶部，底部，左侧和右侧属性定位。
positionrelative设置区块基准点为左上角
absolute设置网页的左上角为基准点
static无设置（默认）
leftauto以基准点定位在左边
像素/百分比定位在左边
topauto以基准点定位在上边
像素/百分比定位在上边
rightauto以基准点定位在右边
像素/百分比定位在右边
bottomauto以基准点定位在下边
像素/百分比定位在下边
z-indexauto自动调整高度
数字数字越大越往上层
eg:
在浏览器中实现阴影效果：
*{
font-size:
font-family:
黑体;
#p1{
position:
absolute;
top:
left:
color:
z-index:
1;
#p2{
position:
53px;
103px;
green;
z-index:
5;
#p3{
56px;
106px;
10;
pid="
p1"
/p>
p2"
p3"
升级会员 