DIV+CSS布局3

布局相关属性:

浮动属性——float:left  right

清除浮动——clear:both

溢出处理——overflow:hidden(隐藏超出层大小的内容) scroll(无论内容是否超出层大小都添加滚动条)  auto(超出时自动添加滚动条)


一、浮动属性

浮动属性——float:left  right

.div1,.div2,.div3,div4,.div5{

width:60px;

height:60px;

background-color:red;

}

.div1,.div2,.div3,div4,.div5{

width:60px;

height:60px;

background-color:red;

float:right;

margin:10px;

}


二、清除浮动

解决浮动与非浮动元素之间布局问题

例如div1和div2浮动,div3不浮动

.div1{

width:220px;

height:280px;

background-color:red;

float:left;

}

.div2{

width:370px;

height:280px;

background-color:green;

float:right;

}

.div3{

width:600px;

height:120px;

background-color:blue;

}

.div3{

width:600px;

height:120px;

background-color:blue;

clear:both;

}

如果想div3与div1、div2之间有间距有两种解决方法

第一种

.div2{

width:600px;

height:120px;

background-color:blue;

margin-bottom:10px;

}


第二种

在div3和div1、div2之间加一个div,并设置clear:both


三、溢出处理

如果层里面的内容超出层的大小就会溢出

溢出处理——overflow:hidden(隐藏超出层大小的内容) scroll(无论内容是否超出层大小都添加滚动条)  auto(超出时自动添加滚动条)


overflow:hidden(隐藏超出层大小的内容)

overflow:scroll(无论内容是否超出层大小都添加滚动条)

overflow:auto(超出时自动添加滚动条)

待续。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 当margin的值为百分比形式时,为什么浏览器会根据父容器宽度得出计算值? 假如有一个父容器宽度400px,高度6...
    飘雪飞舞阅读 901评论 0 0
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,930评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,846评论 1 92
  • CSS代码--写在哪里?外部样式: 内页样式: 此处写CSS代码 行内样式: 将字体改为红色 CSS基本语法 CS...
    Francis__阅读 319评论 1 3
  • 斑驳的树影 枯藤的枝桠 还有空空散散的几片干叶子不知这是四季轮换的标志还是大树坚强没有被狂风撼动的遗迹,单薄的身...
    柠檬柚子菠萝皮阅读 278评论 0 0