Css的向左浮动、先右浮动、绝对定位、相对定位的简单使用 |
您所在的位置：网站首页 › html右侧悬浮按钮 › Css的向左浮动、先右浮动、绝对定位、相对定位的简单使用 |
|
1、div层的浮动 1）div向左浮动、向右浮动 doctype html> 测试页面 #div{ width:400px; height:300px; border:1px solid #888484; } .div1{ width:150px; height:150px; background-color:red; float:left; /*向左浮动:对父类div为对象*/ } .div2{ width:150px; height:150px; background-color:yellow; float:right; /*向右浮动：:对父类div为对象*/ } 向左浮动测试 向右浮动测试2）浮动后效果 2、div的相对定位和绝对定位 1）div的绝对定位、相对定位 doctype html> 测试页面 #div{ width:400px; height:300px; border:1px solid #888484; } .div1{ width:150px; height:150px; background-color:red; float:left; /*向左浮动:对父类div为对象*/ } .div2{ width:150px; height:150px; background-color:yellow; float:right; /*向右浮动：:对父类div为对象*/ } #span1{ width:100px; height:80px; background-color:blue; position:absolute; /**绝对定位**/ margin-top:25px; /**对于屏幕边进行定位**/ margin-left:30px; } #span2{ width:100px; height:80px; background-color:red; position:relative; /**相对定位**/ margin-top:25px; /**对于第一层div进行定位**/ margin-left:40px; } 向左浮动测试 绝对定位测试 向右浮动测试 相对定位测试2） 定位后的效果： |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |