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 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...
随机推荐
- 洛谷 P2725 解题报告
P2725 邮票 Stamps 题目背景 给一组 N 枚邮票的面值集合(如,{1 分,3 分})和一个上限 K -- 表示信封上能够贴 K 张邮票.计算从 1 到 M 的最大连续可贴出的邮资. 题目描 ...
- ABP+AdminLTE+Bootstrap Table aspnetboilerplate 学习
http://www.cnblogs.com/anyushengcms/p/7325126.html https://github.com/aspnetboilerplate/aspnetboiler ...
- MySQL提示“too many connections”的解决办法
今天生产服务器上的MySQL出现了一个不算太陌生的错误"Too many connections".平常碰到这个问题,我基本上是修改/etc/my.cnf的max_connecti ...
- 使用libpcap过滤arp
上一篇博客简单讲述了libpcap的工作流程及简单使用,今天我们需要做的是继续使用libpcap抓取我们感兴趣的流量,并进行简单的解析: 测试环境是centos 7 下面贴一张arp帧结构图: 下面我 ...
- C++的反思[转]
最近两年 C++又有很多人出来追捧,并且追捧者充满了各种优越感,似乎不写 C++你就一辈子是低端程序员了,面对这种现象,要不要出来适时的黑一下 C++呢?呵呵呵. 咱们要有点娱乐精神,关于 C++的笑 ...
- 解决Apache Web Server的几个错误
一.安装好Apache后服务里没有Apache服务 在命令行进入安装apache的bin目录下,输入命令 httpd.exe -k install -n Apache2.4 二.Apache web ...
- GitHub 系列之「Git速成」
1.什么是Git? Git 是 Linux 发明者 Linus 开发的一款新时代的版本控制系统,那什么是版本控制系统呢?怎么理解?网上一大堆详细的介绍,但是大多枯燥乏味,对于新手也很难理解,这里我只举 ...
- css 模拟radio的样式
1.input 默认的 type 为 radio的样式,在具体场合中的改造 默认的样式这样: 但是我要这样的: 这样看来是不是比原来的好看多了. 2.优化radio的样式 <span class ...
- RabbitMQ分布式集群架构和高可用性（HA）
(一) 功能和原理 设计集群的目的 允许消费者和生产者在RabbitMQ节点崩溃的情况下继续运行 通过增加更多的节点来扩展消息通信的吞吐量 1 集群配置方式 RabbitMQ可以通过三种方法来部署分布 ...
- plugin.go 源码阅读
, nil) } if c.client != nil { c.client.Close() } ...