21 , CSS 构造模型
1. div
2. 边距
3. 边框
4. 定位
5. 浮动
1 21.1 div
部分(division)---<div>元素,经常以 div 形式引用---是 XHTML 元素,用于定义 XHTML 文
件中的区域.
1.添加 div
<div>
<p>This is our content area.</p>
</div>
给 div 添加一个 id
<div id=”container”>
<p>This is our content area.</p>
</div>
#container {
Padding: 20px;
Border:1px solid #000;
Background:#ccc;
}
2.添加子 div
<div id=”container”>
<p>This is our content area.</p>
<div class=”box”>
<p>I’m in a box!</p>
</div>
<div class=”box”>
<p>I’m also in a box!</p>
</div>
</div>
.box {
margin: 10px;
padding: 20px;
border:1px solid #000;
}
3.div 和上下文选择器
.box p {
Color: #333;
}
#container p {
Color: #333;
}
2 21.2 边距
外边距(margin)
外边距声明:
#container {
Margin:-top: 20px;
Margin-left: auto;
Margin-right: auto;
Margin-bottom; 20px;
Width: 300px;
Border: 1px solid #333;
Padding: #ccc;
}
#container {
Margin: 20px auto 1em auto; /*上,右,下 , 左*/
}
用 margin:auto 居中
Body {
Text-align: center;
}
#container {
Width: 400px;
Margin: 10px auto 10px auto;
Padding: 20px;
Background: #ccc;
Text-align: left;
}
5.内边距(padding)
#container {
Padding-top: 20px;
Padding-left: 10%;
Padding-right: 1em;
Padding-bottom: 0;
Background: #ccc;
}
6.外边距,内边距和主体
Body {
Margin: 0;
Padding: 0;
}
3 21.3 边框
Border-style (边框样式)
None(无边框),dotted(点线),dashed(虚线),
Solid(实现),double(双线),groove(凹槽),ridge(凸槽),
Inset(凹边),outset(凸边)
/*上 右 下 左*/
Border-style: solid dotted inset outset;
Border-width(长度)
Border-top-width
Border-right-width
Border-bottom-width
Borer-left-width
Border-color
Border
Border-top
Border-right
Border-bottom
Border-left
Border(四周)Border-top(上)…
4 21.4 定位
P,h1 和 div 等成为块级元素.意思是这些元素显示为一块内容,即”块框”.与之相
反,strong 和 span 等元素称为行内元素,即”行内框”.更多内容 , 后章在述.
(1).相对定位
#myBox {
Position: relative;
Top: 20px;
Left: 20px;
}
(2).绝对定位
#myBox {
Position:absolute;
Top: 20px;
Left: 20px;
}
5 21.5 浮动
.news img {
Float: left;
}
.news p {
Float: right;
}
11构造模型上下文选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#contion{
background: orange;
border: 1px solid black;
padding: 20px;
}
.box{
border: 1px solid black;
padding:10px;
margin:10px;
}
#contion>p{
color: red;
}
.box p{
color: blue;
}
</style>
</head> <body>
<div id="contion">
<p>构造模型构造模型</p>
<div class="box"><p>构造模型2构造模型2</p></div>
<div class="box"><p>构造模型2构造模型2</p></div>
</div>
</body>
</html>
12构造模型边距
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#contion{
background: orange;
border: 1px solid black;
padding: 20px;
width: 150px;
height: 150px;
padding: 10px;
margin: 10px;
}
.box{
border: 1px solid black;
padding:10px;
margin:10px;
}
#contion>p{
color: red;
}
.box p{
color: blue;
}
</style>
</head> <body>
<div id="contion">
<p>构造模型构造模型</p>
<div class="box"><p>构造模型2构造模型2</p></div>
<div class="box"><p>构造模型2构造模型2</p></div>
</div>
</body>
</html>
13构造模型定位
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#contion{
background: orange;
height: 300px;
width: 300px;
position: relative;
margin-top: 120px;
margin-left: 120px;
}
#contion p{
position: absolute;
top: 200px;
left: 150px;
}
</style>
</head> <body>
<div id="contion">
<p>构造模型构造模型</p>
</div>
</body>
</html>
21 , CSS 构造模型的更多相关文章
- CSS构造模型
div 边距 边框 定位 浮动 21.1 div 部分(division)---<div>元素,经常以div形式引用---是XHTML元素,用于定义XHTML文件中的区域. 1.添加div ...
- WEB入门.七 CSS布局模型
学习内容 标准文档流 流动模型(flow model) 浮动模型(float model) CSS基本布局 能力目标 理解标准文档流 使用流动模型实现页面布局 使用浮动模型实现页面布局 掌握常用CSS ...
- html学习第三天—— 第12章——css布局模型
清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
- CSS 框模型
CSS 框模型 CSS 框模型概述 CSS 内边距 CSS 边框 CSS 外边距 CSS 外边距合并 一,CSS 框模型 (Box Model) 规定元素框处理元素内容.内边距.边框 和 外边距 的方 ...
- 熟悉HTML CSS布局模型
HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...
- CSS盒子模型的理解
标准的CSS盒子模型包括:内容(content).填充(padding).边框(border).边界(margin) 这些属性,可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子 ...
- 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...
- CSS盒模型
CSS盒模型是CSS 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...
随机推荐
- css 实现文字自动换行切同行元素高度自适应
1.实现div行内布局所有行跟随最大高度自适应 html代码样例: <div class="row-single"> <div class="colsp ...
- Python_排版函数
import textwrap doc='''Beautiful is better than ugly. Explicit is better than implicit. Simple is be ...
- python识别图片文字
因为学校要求要刷一门叫<包装世界>的网课,而课程里有200多道选择题,而且只能在手机完成,网页版无法做题,而看视频是不可能看视频的,这辈子都不可能看...所以写了几行代码来进行百度搜答案. ...
- css的input文本框的 propertychange、focus、blur
1.输入框检查的需求--即时搜索--解决方案 当input的value发生变化就会发生,无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化,propertychange,只要当前对象属性发生改变.(I ...
- File文件操作学习总结
1.java.io.file用于表示文件(目录),也就是说程序员可以通过File类在程序中操作硬盘上的文件和目录, 2.File类只能用于表示文件(目录)的信息(名称和大小),不能对文件内容进行访问. ...
- 在Linux上使用PGP签名验证文件完整性
文件在下载及存储过程中可能由于传输错误.硬件故障.文件系统错误等网络.硬件和软件方面的原因导致文件损坏,也可能在传输过程中受到攻击(如"中间人攻击")导致下载的文件被篡改或者下载到 ...
- SpringBoot如何新建一个项目 2017.12.14
http://blog.csdn.net/q649381130/article/details/77875736 从入门到精通
- kafka 三个配置文件
kafka的配置分为 broker.producter.consumer三个不同的配置 一 BROKER 的全局配置 最为核心的三个配置 broker.id.log.dir.zookeeper.c ...
- XStream实现缓存
************************************************************************************ 系统实现缓存有多种方式,如re ...
- bolt_storage.go
package, * time.Second}) if err != nil { return nil, err } err = db.Update(func( ...