时间:2021-07-01 10:21:17 帮助过:24人阅读
如果文章对你有帮助,请点喜欢并关注,这将是我最大的动力。
如图:
upload/attachment/zhishi/upload/20160115/5698a2b319b6a.jpg
文档的主体部分,可以是文字图片,或者是标签
填充,也就是content和border之间的距离填充距离也可以使用简写 padding:10px 20px 5px 15px 从上开始顺时针上右下左
边框,就是这个盒子的外壳,当然他也有自己的宽度常见样式: 1.width:1px-------边框宽度 2.style:solid-----边框样式,常见的有solid(实线)/dashed(虚线)/dotted(点线) 3.border-color:red-----------边框颜色
盒模型与盒模型之间的距离margin距离同样也可以使用简写 margin:10px 20px 5px 15px 从上开始顺时针上右下左
指的是padding以内的高宽,也就是content的高宽。
盒子高度=(margin-top)+(padding-top)+content+(padding-bottom)+(margin-bottom)盒子宽度=(margin-left)+(padding-left)+content+(padding-right)+(margin-right)
是默认的网页布局模式。也就是说,默认状态下网页都是根据流动模型来分布网页内容的。
流动模型具有以下特点:1).块状元素都会在父元素内自上而下按顺序垂直延伸(默认独占一行),因为块状元素默认宽度100%。2).内联元素都会在父元素内水平方向从左到右分布。
float 属性定义元素在哪个方向浮动。
在流动模型中,块状元素都是独占一行的,如果想要让两个块状元素并排显示,就需要使用浮动模型。
用法:float:left/right/inherit-------分别是元素向左浮动,向右浮动,以及继承父元素。
层模型就像photoshop中的图层编辑功能,对每个图层都可以精准定位操作。层模型有三种形式:1).绝对定位 position:absolute2).相对定位 position:relative3).固定定位 positoin:fixed
直接看代码:
div{ position:absolute; left:20px; top:30px;}
这个div元素就会在其最接近的父元素内进行绝对定位,使其left的值直接设置为为20px,top的值直接设置为30px;
定义:生成相对定位的元素,相对于其正常位置进行定位。因此,left:20 会向元素的left位置增加20px;
定义:生成绝对定位的元素,相对于浏览器窗口进行定位。因此,如果设置bottom:0;那么该元素会始终显示在浏览器底部。
头部文本主体3.2.用css来设定区域大小(这里用边框加以区分):
如图
upload/attachment/zhishi/upload/20160115/5698a899378c3.jpg
3.3.对例子中div代码知识点分析
3.3.1.border
这里的border:1px solid red;是简写,他等价于
border-width:1px; border-style:solid; border-color:red;3.3.2.float
float属性是div布局中最基本也是最常用的属性,用于实现多列功能,我们知道
标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能,最直接解释方法就是能实现表格布局的多列功能。3.3.3.clear
使用float属性设置一行有多个div后(多列),最好在下一行开始之前使用clear属性清楚一下浮动,否则上面的布局会影响到下面。常用属性:clear:left/right/both 分别对应左侧/右侧/左右两侧不允许出现浮动元素