css基础 浮动元素不占空间 的简单示例
2017-02-16 11:03
1556 查看
镇场诗:
清心感悟智慧语,不着世间名与利。学水处下纳百川,舍尽贡高我慢意。
学有小成返哺根,愿铸一良心博客。诚心于此写经验,愿见文者得启发。
——————————————————————————————————————————
code:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> .box{ width:600px; border:1px solid red; margin:30px auto; } /*浮动的元素不占box的空间*/ /*一行中,要么全都浮动,要么全不浮动。一定要注意!*/ .box .div1{width:100px;height:100px;background-color:purple; float:right;} .box .div2{width:100px;height:100px;background-color:green; float:right;} .box .div3{width:100px;height:100px;background-color:#ff6a00;float:right;} </style> </head> <body> <div class="box"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div> </body> </html>
result:
box的边框线重合,则证明box中没有内容。
注:一行中,要么全都浮动,要么全不浮动。一定要注意!
——————————————————————————————————————————
博文的精髓,在技术部分,更在镇场一诗。编辑器 VS2015,浏览器 Firefox。
html+css+js,强,值得努力学习。我跟着传智播客的视频教程学习。
我是一个新手,所以如果博文的内容有可以改进的地方,甚至有错误的地方,请留下评论,我一定努力改正,争取成就一个良心博客。
注:此文仅作为科研学习,如果我无意中侵犯了您的权益,请务必及时告知,我会做出改正。
相关文章推荐
- css基础 浮动元素不占空间 的简单示例
- css基础 使用div块清除无序列表ul,li中的左右浮动的简单示例 clear:both
- css基础 clear属性:both 使用div块清除左右浮动的简单示例
- css基础 浮动的元素不占父元素的空间,而且漂浮起来
- css基础 使用div块清除无序列表ul,li中的左右浮动的简单示例 clear:both
- css基础 一个元素有多个类名 简单示例
- css基础 clear属性:both 使用div块清除左右浮动的简单示例
- css基础 浮动的元素不占父元素的空间,而且漂浮起来
- css基础 font-family 设置字体与CSS Unicode 简单示例
- CSS页面布局基础3——元素浮动
- css基础 class选择器 简单示例
- css基础 id选择器 简单示例
- css基础 a:link/visited... 链接伪类选择器 简单示例
- css基础 border-style:solid/dashed/dotted/double 简单示例
- css基础 text-indent 段落的首行缩进两个字符 简单示例
- 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
- css基础 position 父元素relative + 子元素absolute 一栏多图展示示例
- css基础 font 五项综合设置 简单示例
- css基础 /**/ 注释 简单示例
- CSS基础学习9-CSS设置浮动元素(float)