首页 > 代码库 > 理解css+Div定位

理解css+Div定位

2024-10-04 10:16:39   220人阅读

一、DIV标记与SPAN标记
div和span都可以作为一个容器，集体控制容器内的样式
区别是div使块级元素，前后会有换行
而span是行内元素，前后不会换行

二、盒子模型
1，概念
任何页面元素都可以看成一个盒子
一个盒子模型由content、padding、border、margin四部分组成

三、元素的定位

1，float
值可以为left、right或默认none，left和right分别向父元素的左侧或右侧靠紧
可以设置clear: left、right、both来清除float对其的影响

2，position
static: 默认值，保持原位
absolute: 绝对位置，top、bottom、right、left可以指定绝对值或百分比，CSS默认后加入到页面的元素会覆盖之前的原始
relative: 相对父块来定位，top、bottom、right、left
fixed: 本质上和absolute一样，但是块不会随着浏览器滚动条而上下移动，IE不支持fixed属性

3，z-index
z-index指垂直与页面方向的z轴，z-index值大的块位于值小的块上面，会形成覆盖效果dth(height)的值指content的width(height)+padding的值 iv内可以有span，而span内不能有div

一、DIV标记与SPAN标记
div和span都可以作为一个容器，集体控制容器内的样式
区别是div使块级元素，前后会有换行
而span是行内元素，前后不会换行
div内可以有span，而span内不能有div

二、盒子模型
1，概念
任何页面元素都可以看成一个盒子
一个盒子模型由content、padding、border、margin四部分组成
width(height)的值指content的width(height)+padding的值

2，border
color
width: thin、medium、thick、数值
style: none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset
border-top、border-bottom、border-left、border-right
IE不支持border-style

background-color在IE中指content+padding，FF中指content+padding+border

3，padding
padding-top、padding-bottom、padding-left、padding-right

4，margin
margin-top、margin-bottom、margin-left、margin-right
对一行而言，两个块的margin = margin-right + margin-left
对换行而言，两个块的margin = margin-bottom和margin-top中较大者
对父子而言，子块的margin = 子块的margin + 父块的padding
当margin设为负数时，块会向相反的方向移动，甚至覆盖另外的块

三、元素的定位
1，float
值可以为left、right或默认none，left和right分别向父元素的左侧或右侧靠紧
可以设置clear: left、right、both来清除float对其的影响

2，position
static: 默认值，保持原位
absolute: 绝对位置，top、bottom、right、left可以指定绝对值或百分比，CSS默认后加入到页面的元素会覆盖之前的原始
relative: 相对父块来定位，top、bottom、right、left
fixed: 本质上和absolute一样，但是块不会随着浏览器滚动条而上下移动，IE不支持fixed属性

3，z-index
z-index指垂直与页面方向的z轴，z-index值大的块位于值小的块上面，会形成覆盖效果

四、图片签名

Java代码  技术分享
  1. <div id="block1"><img src=http://www.mamicode.com/"building.jpg" border="0"></div>  
  2. <div id="block2">xxx‘s photo</div>  
  3.   
  4. #block1 {  
  5.   padding: 10px;  
  6.   border: 1px solid #0000;  
  7.   float: left;  
  8. }  
  9.   
  10. #block2 {  
  11.   color: white;  
  12.   padding: 10px;  
  13.   position: absolute;  
  14.   left 255px;  
  15.   top: 205px;  
  16. }  
<div id="block1"><img src="http://www.mamicode.com/building.jpg" border="0"></div>
<div id="block2">xxx‘s photo</div>

#block1 {
  padding: 10px;
  border: 1px solid #0000;
  float: left;
}

#block2 {
  color: white;
  padding: 10px;
  position: absolute;
  left 255px;
  top: 205px;
}



五、文字阴影

Java代码  技术分享
  1. <div id="block1">CSS定位阴影</div>  
  2. <div id="block2">CSS定位阴影</div>  
  3.   
  4. #block1 {  
  5.   position: relative;  
  6.   z-index: 1;  
  7. }  
  8.   
  9. #block2 {  
  10.   color: #AAAAAA;  
  11.   position: relative;  
  12.   top: -1.06em;  
  13.   left: 0.1em;  
  14.   z-index: 0;  
  15. }  

理解css+Div定位


联系
我们