没有合适的资源?快使用搜索试试~ 我知道了~
web前端页面
需积分: 25 56 下载量 43 浏览量
2017-07-29
11:05:16
上传
评论
收藏 211KB DOCX 举报
温馨提示
试读
17页
html css
资源推荐
资源详情
资源评论
盒模型
1.盒模型--边框(一)
盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色边框三个属性。
如下面代码为 来设置边框粗细为 、样式为实心的、颜色为红色的边框:
div{
border:2px solid red;
}
上面是 代码的缩写形式,可以分开写:
div{
border-width:2px;
border-style:solid;
border-color:red;
}
注意:
、(边框样式)常见样式有:
(虚线)(点线)(实线)。
、(边框颜色)中的颜色可设置为十六进制颜色,如
border-color:#888;//前面的井号不要忘掉。
、(边框宽度)中的宽度也可以设置为:
(但不是很常用),最常还是用象素()。
2.盒模型--边框(二)
现在有一个问题,如果有想为 标签单独设置下边框,而其它三边都不设置边框样式怎么办呢?样
式中允许只为一个方向的边框设置样式:
div{border-bottom:1px solid red;}
同样可以使用下面代码实现其它三边上、右、左边框的设置:
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
3.盒模型--宽度和高度
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的, 内定义的宽
()和高(),指的是填充以里的内容范围。
因此一个元素实际宽度(盒子的宽度) 左边界!左边框!左填充!内容宽度!右填充!右边框
!右边界。
元素的高度也是同理。
比如:
代码:
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}
代码:
<body>
<div>文本内容</div>
</body>
元素的实际长度为:"!!"!""!"!!" #。在 浏览器下可
查看元素盒模型,如下图:
4.盒模型--填充
元素内容与边框之间是可以设置距离的,称之为“填充”。填充也可分为上、右、下、左顺时针。如下代
码:
div{padding:20px 10px 15px 30px;}
顺序一定不要搞混。可以分开写上面代码:
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
如果上、右、下、左的填充都为 "$可以这么写
div{padding:10px;}
如果上下填充一样为 ",左右一样为 ",可以这么写:
div{padding:10px 20px;}
5.盒模型--边界
元素与其它元素之间的距离可以使用边界()来设置。边界也是可分为上、右、下、左。如下代
码:
div{margin:20px 10px 15px 30px;}
也可以分开写:
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
如果上右下左的边界都为 "$可以这么写:
div{ margin:10px;}
如果上下边界一样为 ",左右一样为 ",可以这么写:
div{ margin:10px 20px;}
总结一下: 和 的区别, 在边框里, 在边框外。
css 布局模型
清楚了 %&&盒模型的基本概念、 盒模型类型, 我们就可以深入探讨网页布局的基本模型了。布局模型与
盒模型一样都是 %&&最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不同于我们常
说的 %&&布局样式或 %&&布局模板。如果说布局模型是本,那么 %&&布局模板就是末了,是外在的表
现形式。
%&& 包含 种基本的布局模型,用英文概括为:'、(和 '。
在网页中,元素有三种布局模型:
、流动模型(')
、浮动模型 '
、层模型(()
这三个布局模型究竟是什么布局?下面几个小节会详细给大家介绍。
流动模型,流动(')是默认的网页布局模式。也就是说网页在默认状态下的 )*+(网页元素都是
根据流动模型来分布网页内容的。
流动布局模型具有 个比较典型的特征:
第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素
的宽度都为 100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标
签,,宽度显示为 "",。
第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块
状元素这么霸道独占一行)
右侧代码编辑器中内联元素标签 、、、 都是内联元素。
浮动模型
块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?不要着急,设置
元素浮动就可以实现这一愿望。
任何元素在默认情况下是不能浮动的,但可以用 %&&定义为浮动,如 、、、等元素都可
以被定义为浮动。如下代码可以实现两个 元素一行显示。
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
效果图
当然你也可以同时设置两个元素右浮动也可以实现一行显示。
div{
width:200px;
height:200px;
border:2px red solid;
float:right;
}
效果图
剩余16页未读,继续阅读
资源评论
qq_35590499
- 粉丝: 0
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功