盒子模型－边框

首先请看下图

<!doctype html>

<html>

<head>

            <meta charset="utf-8">

            <title>盒子模型边框</title>

            <style type="text/css">

             p{border:2px solid red;}/*border的缩写格式*/

             p{

              border-width:2px;

              borerstyle:solid;

              border-color:red;

               }

              .pingguo{border-bottom:1px solid red;}

              .xiangjiao{border-top:1px solid red;}

              .mangguo{border-right:1px solid yellow;}

              .juzi{border-left:2px solid red;}

</style>

</head>

<body>

         <p>她是个既安静又开朗的姑娘，言语恰到好处，有她在，既不会觉得聒噪，也不会感到冷场。</p>

         <p>她周到地照顾着每个人的情绪，也能委婉地表达自己的观点。她散发着温和的光彩，从不灼痛别人的世界。</p>

             <ul>

                 <li class="pingguo">苹果</li>

                 <li class="xiangjiao">香蕉</li>

                 <li class="mangguo">芒果</li>

                 <li class="juzi">橘子</li>

             </ul>

 </body>

</html>

1）border-style边框样式常用样式：

dashed(虚线）dotted(点线）solid(实线）

2）border-color边框颜色中的颜色可设置为十六进制颜色，

border-color:#888;

3) border-width边框的宽度中的宽度也可以设置为：

thin|medium|thick这些都不常用，最常用的还是像素px。

如有想单独设置上（top)、下（bottom）、左（left)、右(right)。的边框按照以下格式即可

（.pingguo{border-bottom:1px solid red;}）

（.xiangjiao{border-top:1px solid red;}）

(.mangguo{border-right:1px solid yellow;}）

(.juzi{border-left:2px solid red;})



div内里面就是一个盒子模型的格式


盒子3d模型分5层，边框border为第一层，padding+content内边距与盒子内容为第二层


background-image背景图像为第三层，background-color背景颜色位于第4层,margin外边距为最后一层。叠加之后形成一个盒子


　




<!doctype html>

<html>

          <head>

                     <meta charset="utf-8">

                     <title>宽高</title>

                     <style type="text/css">

                          div{

                            width:200px;

                            padding:20px;

                            border:1px solid red;

                            margin:10px;

                                 }

                            div{padding:20px 10px 15px 30px}

                                      /*上   右    下    左

                                      top |right|bottom|left |这是盒子模型的缩写*/

                           .hez{margin:20px 10px 15px  30px}

                                      /*上   右   下     左    同上一样*/

                      </style>

          </head>

    <body>

                       <div><p>她是个既安静又开朗的姑娘，言语恰到好处，有她在，既不会觉得聒噪，也不会感到冷场。她周到地照顾着每个人的情绪，也能委婉地表达自己的观点。她散发着温和的光彩，从不灼痛别人的世界。</p>

                       </div>

                       <p class="hez">盒子模型的边界</p>

          </body>

</html>




元素内容与边框之间是可以设置距离的，称之为“填充”。填充也分为上、右、下、左、顺序一定不要搞乱.


如果上、右、下、左、的填充都为10px，可以这样写：


div{padding:10px;}


如果上下填充一样为10px，左右一样为20px，就可以这样写：


div{padding:10px 20px;}


padding与margin书写格式是一样的。


padding与margin的区别，padding在边框里面，margin在边框外面




css布局模型


了解了css合模型的基本概念、盒模型类型、我们就可以深入讨论网页布局的基本模型了。布局模型与盒模式一样都是css最基本、最核心的概念。但布局模型是建立在盒模型之上，又不同与我们常说的css布局样式或css布局模块。如果说布局模型是本，那么css布局模式就是末了，是外在的表现形式。css包含3种基本的布局模型，用英文概况为：flow、layer和float.


在网页中，元素由三种布局模型：


1）流动模型（flow)


流动模型是默认的网页布局模式，也就是说网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。流动布局模型具有2个比较典型的特征：


第一点，块状元素都会在所处包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上块状元素都会以行的形式占据位置。


第二点，在流动模式下，内联元素都会在所处的包含元素内从左到右水平分布显示。


2）浮动模型(float)


块状元素都是独占一行，如果现在我们想让两个块状元素并排显示怎么办？这时候设置元素浮动就可以实现这一愿望了，任何元素在默认的情况下是不能浮动的，但可以用css定义为浮动。如div、p、table、img、等元素都可以被定义为浮动。




<!doctype html>

<html>

<head>

            <meta charset="utf-8">

            <title>浮动模型</title>

            <style type="text/css">

                   div{

                          width:200px;

                          height:200px;

                          border:2px red solid;

                          }

                   div{

                          float:left;

                         }

            </style>

</head>

<body>

             <div id="div1"></div>

             <div id="div2"></div>

</body>

</html>




通过"float"已经并排显示了，“left"向左移动，"right"向右移动，如果想两个元素一左一右显示在一行的话，就要用id标签了。#div1{float:left;}     #div2{float:right;}


3）层模型(layer)
层模型就像是图像软件中非常流行的图层编辑功能一样，每个图层能精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。如果让html元素在网页中精准定位，就像图像软件中图层一样可以对每个图层能够精确定位操作。css定义了一组定位（positioning）属性来支持层布局模型。


层模式有三种形式


1、绝对定位（position：absolute)


2、相对定位(position:relative)


3、固定定位(position:fixed)


关于层模型三种形式我们下节在看。




												


											
html进阶css（４）的更多相关文章
	

    
						
  1. html进阶css(5)
		
    css定位机制 css有三种基本的定位机制:普通流,浮动和绝对定位. 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中的元素的位置由元素在html中的位置决定. 块级框从上到下一个接一个的 ...
    
		
    2. 
								
  2. html进阶css（3）
		
    css的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许格式不仅应用于某个特定html标签元素,而且应用于其后代. <!doctype html> <html> ...
    
		
    3. 
						
  3. html进阶css（2）
		
    选择器的类型 <!doctype html> <html> <head> <meta charset="utf-8"> <ti ...
    
		
    4. 
						
  4. html进阶css（1）
		
    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...
    
		
    5. 
						
  5. HTML5总结整理
		
    (仅供大家学习分享交流) 一.简介 1.前端开发最核心技术 我们知道,用所谓的网页三剑客已经不能满足需求了,那前端开发究竟要学习什么技术呢?网页最 主要由3部分组成:结构.表现和行为.网页现在新的标准 ...
    
		
    6. 
						
  6. Matplotlib数据可视化（3）：文本与轴
		
      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
    
		
    7. 
						
  7. 【CSS进阶】试试酷炫的 3D 视角
		
    写这篇文章的缘由是因为看到了这个页面: 戳我看看(移动端页面,使用模拟器观看) 运用 CSS3 完成的 3D 视角,虽然有一些晕3D,但是使人置身于其中的交互体验感觉非常棒,运用在移动端制作一些 H5 ...
    
		
    8. 
						
  8. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
		
    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...
    
		
    9. 
						
  9. 2. web前端开发分享-css,js进阶篇
		
    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Javascript进阶篇——(DOM—认识DOM、ByName、ByTagName)—笔记整理
			
    认识DOM文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 将HTML代码分解 ...
    
			
    2. 
						
  2. WebApi实现跨域功能
			
    在配置文件的system.webServer节点中加入以下配置信息 <httpProtocol> <customHeaders> <add name="Acce ...
    
			
    3. 
						
  3. C#类型基础——学习笔记一
			
    1.C#中的类型一共分两类,一类是值类型,一类是引用类型.2.结构类型变量本身就相当于一个实例.3.调用结构上的方法前,需要对其所有的字段进行赋值.4.所有元素使用前都必须初始化.5.(结构类型)ne ...
    
			
    4. 
						
  4. java 中解析xml的技术
			
    最初,XML 语言仅仅是意图用来作为 HTML 语言的替代品而出现的,但是随着该语言的不断发展和完善,人们越来越发现它所具有的优点:例如标记语言可扩展,严格的语法规定,可使用有意义的标记,内容存储和表 ...
    
			
    5. 
						
  5. JDBC中PreparedStatement和Statement的区别
			
    共同点: PreparedStatement和Statement都是用来执行SQL查询语句的API之一. 不同点: 在PreparedStatement中,当我们经常需要反复执行一条结构相似的sql语 ...
    
			
    6. 
						
  6. FCKeditor 插件开发 示例
			
    (FCKeditor.地址是:http://www.fckeditor.net/.我下载的版本是:2.6.3.)What ?FCKeditor一直是web上编辑器的比较好的一个选择,他是开源的,而且效 ...
    
			
    7. 
						
  7. 基于jQuery简单实用的Tabs选项卡插件
			
    jQuery庞大的插件库总是让人欢喜让人忧,如何从庞大的插件库里挑出适合自己的插件,总是让很多缺少经验的朋友头疼的事!今天为大家推荐几款简单实用的Tabs选项卡插件,推荐理由:简单易用灵活,样式美观, ...
    
			
    8. 
						
  8. 使用apache的ab对页面进行压力测试
			
    ab是apache自带的一个很好用的压力测试工具,当安装完apache的时候,就可以在bin下面找到ab 我们可以模拟100个并发用户,对一个页面发送1000个请求 ./ab -n1000 -c100 ...
    
			
    9. 
						
  9. jquery实现当前页面编辑
			
    实现效果 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
    
			
    10. 
						
  10. filter 以及 orderBy的使用
			
    filter用于关键字过滤操作,orderBy用于排序操作,运行界面如下: 点击标题Name与Email实现排序功能,输入框中输入关键字进行过滤,同时实现根据关键字进行过滤后进行排序操作: ng-re ...
    
			
    11.