21 , CSS 构造模型

AbnerMing 发布于2019-04-23 11:42 / 3211人阅读

摘要：宋体边距宋体边框宋体定位宋体浮动宋体部分宋体元素宋体经常以宋体形式引用宋体是宋体元素宋体用于定义宋体文宋体件中的区域宋体添加宋体给宋体添加一个宋体宋体宋体添加子宋体

1. div

2. 边距

3. 边框

4. 定位

5. 浮动

1 21.1 div

部分(division)---

元素,经常以 div 形式引用---是 XHTML 元素,用于定义 XHTML 文

件中的区域.

1.添加 div

This is our content area.

给 div 添加一个 id

”container”>

This is our content area.

#container {

Padding: 20px;

Border:1px solid #000;

Background:#ccc;

}

2.添加子 div

”container”>

This is our content area.

”box”>

I’m in a box!

”box”>

I’m also in a box!

.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构造模型上下文选择器





无标题文档





	构造模型构造模型
	构造模型2构造模型2
	构造模型2构造模型2

　　12构造模型边距





无标题文档





	构造模型构造模型
	构造模型2构造模型2
	构造模型2构造模型2

　　13构造模型定位





无标题文档





	构造模型构造模型

GPU云服务器云服务器 21 vianet 21u机柜 21vianet python 21

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1037.html

JavaScript基础知识总结

摘要：字面量方式这是最简单最基本的一种方法。简单的构造函数方式通过这样的形式创建对象。结合上面的简单构造函数和原型，一个完整的构造函数应该是这样的还有一种方法就是提供的简单实现下中的，，创建一个对象谈谈对象的理解。避免使用表达式又称动态属性。要点：数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、异步装载回调、模板引擎、Nodejs等。 JS基本类型有什么？引...

lakeside 2019-08-19 17:40 评论0 收藏0
前端面试知识点集锦

摘要：个人总结的比较全面的前端面试知识点。主要是一些个人认为面试时容易考到以及平时需要注意的一些知识点。如果需要进行深入了解可以根据知识点查询相关的技术文章。个人总结的比较全面的前端面试知识点。主要是一些个人认为面试时容易考到以及平时需要注意的一些知识点。本人只是对这些知识进行了一个大概的总结，还有一部分技术还没开始涉及，后期会持续添加。如果需要进行深入了解可以根据知识点查询相关的技术文...

iKcamp 2019-08-30 12:58 评论0 收藏0
前端面试知识点集锦

摘要：个人总结的比较全面的前端面试知识点。主要是一些个人认为面试时容易考到以及平时需要注意的一些知识点。如果需要进行深入了解可以根据知识点查询相关的技术文章。个人总结的比较全面的前端面试知识点。主要是一些个人认为面试时容易考到以及平时需要注意的一些知识点。本人只是对这些知识进行了一个大概的总结，还有一部分技术还没开始涉及，后期会持续添加。如果需要进行深入了解可以根据知识点查询相关的技术文...

Prasanta 2019-08-19 18:10 评论0 收藏0
前端面试知识点集锦

摘要：个人总结的比较全面的前端面试知识点。主要是一些个人认为面试时容易考到以及平时需要注意的一些知识点。如果需要进行深入了解可以根据知识点查询相关的技术文章。个人总结的比较全面的前端面试知识点。主要是一些个人认为面试时容易考到以及平时需要注意的一些知识点。本人只是对这些知识进行了一个大概的总结，还有一部分技术还没开始涉及，后期会持续添加。如果需要进行深入了解可以根据知识点查询相关的技术文...

NikoManiac 2019-08-01 15:12 评论0 收藏0
JS面试理论题

摘要：要去中查找创建对象的几种方法字面量通过构造函数原型构造函数实例原型链的原理运算符一个新对象被创建它继承自构造函数被执行。等同于，只能用在不传递任何参数的情况如果构造函数返回了一个对象，那么这个对象会取代整个出来的结果。变量类型和计算值类型&&引用类型 1.值类型 var a = 100 var b = a a = 200 console.log(b)//100 2.引用类型（对象 ...

FullStackDeveloper 2019-08-26 12:13 评论0 收藏0