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基础--深入理解弹性盒flex布局
欢迎访问我的个人博客:http://www.xiaolongwu.cn 1. 前言 flex弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素 拥有更恰当的排布行为, ...
- 【转】Javascript错误处理——try…catch
无论我们编程多么精通,脚本错误怎是难免.可能是我们的错误造成,或异常输入,错误的服务器端响应以及无数个其他原因. 通常,当发送错误时脚本会立刻停止,打印至控制台. 但try...catch语法结构可以 ...
- Executor, ExecutorService 和 Executors 间的区别与联系
UML简要类图关系: 下面详细看一下三者的区别: Executor vs ExecutorService vs Executors 正如上面所说,这三者均是 Executor 框架中的一部分.Java ...
- awk 手册
1. 前言 有关本手册 : 这是一本awk学习指引, 其重点着重于 : l awk 适于解决哪些问题 ? l awk 常见的解题模式为何 ? 为使读者快速掌握awk解题的模 ...
- 用react重构个人网站 3-23
1: :before 选择器在被选元素的内容前面插入内容 2: float是什么?浮动在CSS中的作用 3:CSS运用在React中的两种方式 使用className属性,CSS内容就用link加 ...
- Backbone.js 和 Nodejs 的一些共同点搞不清楚
前端方面 我用 Backbone.js 做过前端的开发,印象里就是后端按模型对象的属性把 JSON 数据发过来,我写在模板里渲染就好了 模板加载( underscore.js ) 建立模型 渲染视图 ...
- 26.app后端怎么架设推送服务
推送服务已经是app的标配了.架设推送服务,除了可以使用第三方服务商外,也有大量的开源技术可以选择. 现在推送主要分两块,android推送和ios推送,在下面分别论述: 1. Android推 ...
- Android 框架炼成 教你如何写组件间通信框架EventBus
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/41096639 ,本文出自:[张鸿洋的博客] 1.概述 关于Eventbus的介绍 ...
- python爬虫的重定向问题
重定向问题 在使用python爬虫的过程中难免会遇到很多301,302的问题.他们出现时,很大程度的影响到我们的爬虫速度和信息的准确性.下面针对不同的模块给出不同的解决方案. 使用requests模块 ...
- 关于Kafka日志留存策略的讨论
关于Kafka日志留存(log retention)策略的介绍,网上已有很多文章.不过目前其策略已然发生了一些变化,故本文针对较新版本的Kafka做一次统一的讨论.如果没有显式说明,本文一律以Kafk ...