CSS3中的盒布局
来源:互联网 发布:sql设置字段默认值 编辑:程序博客网 时间:2024/05/20 22:03
CSS3中各种盒模型、概念、使用方法和浏览器支持情况,以及当内容溢出时的操作,给盒子添加阴影效果,如何使用CSS3中的属性来定义元素的宽度值和高度值中是否包含内补白区域以及边框的宽度和高度。
1、盒的基本类型:
在CSS3中使用display属性来定义盒的类型,总体来说盒分为block类型和inline类型,比如div元素和p元素属于block类型,span元素和a元素属于inline类型;
2、inline-block类型:
(1)inline-block类型属于block类型的一直能够,但是在显示时具有inline类型的特点,比如将div元素中的display设置为inline-block和inline效果一样,inline设置了长度与宽度后内容不会出现溢出,而inline-block存在内容溢出;
(2)使用inline-block类型来执行分列显示:如果需要在一行中并列显示多个block类型的元素,需要使用float属性或者position属性,但是这样会使样式变得复杂,而使用inline-block类型使得并列显示多个block类型的元素操作变得很简单,默认情况下使用inline-block类型时并列显示的元素的垂直对齐方向是底部对齐,为了让对齐方式改成顶部对齐,还要给div元素的样式中加入vertical-align属性;
1)使用float属性或者position属性布局:
①HTML代码:
<div class="div"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div>
②CSS代码:
.div1{width: 200px;height: 200px;background: lavenderblush;float: left;}.div2{width: 200px;height: 100px;background: lightblue;float: left;}.div3{width: 400px;height: 200px;background: khaki;clear: both;}
③效果图如下:
2)使用inline-block布局:
①HTML代码:
<div class="div"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div>
②CSS代码:
.div1{width: 200px;height: 200px;background: lavenderblush;display: inline-block;vertical-align: bottom;}.div2{width: 200px;height: 100px;background: lightblue;display: inline-block;vertical-align: top;}.div3{width: 400px;height: 200px;background: khaki;}
③效果图如下:
(3)使用inline-block类型来显示水平菜单:如果要实现水平菜单,那么需要使用float属性,大多数菜单是利用ul列表和li列表项目来实现,li元素隶属于block类型下的list-item类型,所以要并列显示的话需要使用float;
1)使用float属性显示水平菜单:
① HTML代码:
<ul class="ul1"><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li></ul>
②CSS代码:
.ul1>li{padding: 10px 20px;border-right: 1px solid #000000;float: left;list-style-type: none;background: lightblue;margin-top: 30px;}a{color: white;text-decoration: none;}
③效果图如下:
2)使用inline-block属性显示水平菜单:
①HTML代码:
<ul class="ul2"><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li></ul>
②CSS代码:
a{color: white;text-decoration: none;}.ul2>li{padding: 10px 20px;border-right: 1px solid #000000;list-style-type: none;background: lightblue;display: inline-block;}
③效果图如下:
3、inline-table类型:
在CSS中使用table元素的示例,一个表格,前后都有文字将其围绕;
1) HTML代码:
这里是文字内容<table border="1" cellspacing="no" cellpadding="no"><tr><td>Header</td><td>Header</td><td>Header</td><td>Header</td></tr><tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr></table>这里是文字内容
2)CSS代码:
table{display: inline-table;vertical-align: bottom;}
3)效果图如下:
4、list-item类型:
可以将多个元素作为列表来显示,同时在元素的开头加上列表的标记;
(1)HTML代码:
<div>list-item类型</div><div>list-item类型</div><div>list-item类型</div><div>list-item类型</div><div>list-item类型</div><div>list-item类型</div>
(2)CSS代码:
div{list-style-type: disc;margin-left: 50px;display: list-item;}
(3)效果图如下:
5、run-in类型与compact类型:
将元素指定为run-in类型或者compact类型时,如果元素后面还有block类型的元素,run-in类型那个元素将被包括在后面的block类型的元素内部,而compact类型的元素将被放置在block类型的左边;
(1)HTML代码:
<dl class="run-in"><dt>run-in类型</dt><dd>run-in类型的诠释</dd></dl><dl class="compact"><dt>compact类型</dt><dd>compact类型的诠释</dd></dl>
(2)CSS代码:
dl.run-in dt{display: run-in;border: 1px solid red;background: lightblue;}dl.compact dt{display: compact;border: 1px solid blue;background: lightcoral;}
(3)效果图如下:
6、表格相关类型:在CSS3中多有与表格相关的元素及其所属类型表:
元素所属类型说明tabletable代表整个表格tableinline-table代表整个表格可以被指定为table类型也可以是inline-table类型trtable-row代表表格中的一行tdtable-cell代表表格中单元格thtable-cell代表单元格中的列标题tbodytable-row-group代表表格中行的所有行theadtable-header-group代表表格中的表头部分tfoottable-footer-group代表表格中的脚注部分coltable-column代表表格中的一列colgrouptable-column-group代表表格中的所有列captiontable-caption代表整个表格的标题通过一个小示例来指定各种div的类型为各种表格类型,让这些div构成一个完整的表格:
(1)HTML代码:
<div class="table"><div class="table-caption">表格标题</div><div class="thead"><div class="tr"><div class="td">1</div><div class="td">2</div><div class="td">3</div></div><div class="tr"><div class="td">1</div><div class="td">2</div><div class="td">3</div></div><div class="tr"><div class="td">1</div><div class="td">2</div><div class="td">3</div></div></div></div>
(2)CSS代码:
.table{display: table;border: 1px solid red;}.table-caption{display: table-caption;width: 70px;}.thead{display: table-header-group;}.tr{display: table-row;}.td{display: table-cell;padding: 15px;border: 1px solid blue;}
(3)效果图如下:
7、none类型:
当元素被指定了none类型后,这个元素将不会被显示;
8、各种浏览器对各种盒模型的支持情况:
盒类型Firefox
Safari
Opera
IE8
chromeinlineYESYESYESYESYESinline-blockYESYESYESYESYESblockYESYESYESYESYESrun-inNOYESYESNONOnoneYESYESYESYESYEStableYESYESYESYESYEStable-cellYESYESYESYESYEStable-columnYESYESNOYESNOtable-colgroupYESYESNOYESNOtable-header-groupYESYESYESYESYEStable-row-groupYESYESYESYESYEStable-footer-groupYESYESYESYESYEStable-rowYESYESYESYESYEStable-captionYESYESYESYESYES
- CSS3中的盒布局
- CSS3中的网页布局
- css3中的flex布局
- 三分钟学会css3中的flexbox布局
- css3弹性盒布局
- CSS3 弹性盒布局
- css3盒布局
- HTML5+CSS3盒布局
- CSS3 弹性盒布局
- CSS3弹性盒布局
- CSS3 盒布局
- CSS3中的响应式布局 @media查询
- css3中的多列布局columns详解
- css3盒布局取代float布局
- css3伸缩布局盒模型
- CSS3 flex弹性盒布局
- css3 布局
- CSS3:布局
- stream 排序
- HDU 2899 Strange fuction(二分,三分)
- (转)数学之美番外篇:平凡而又神奇的贝叶斯方法
- Java线程的状态转换关系
- 设计模式-《设计模式那点事》代码
- CSS3中的盒布局
- 实现二进制代码块的复制
- Hadoop集群配置
- ofbiz实体引擎(三) GenericDelegator实例化的具体过程
- 模板--二叉树
- java try finally return 执行顺序
- HDU 6044 Limited Permutation (组合数+逆元)
- 最大化鲜亮度算法
- centos mysql安装