盒子模型-边框

首先请看下图

<!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(4)的更多相关文章

  1. html进阶css(5)

    css定位机制 css有三种基本的定位机制:普通流,浮动和绝对定位. 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中的元素的位置由元素在html中的位置决定. 块级框从上到下一个接一个的 ...

  2. html进阶css(3)

    css的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许格式不仅应用于某个特定html标签元素,而且应用于其后代. <!doctype html> <html> ...

  3. html进阶css(2)

    选择器的类型 <!doctype html> <html> <head> <meta charset="utf-8"> <ti ...

  4. html进阶css(1)

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  5. HTML5总结整理

    (仅供大家学习分享交流) 一.简介 1.前端开发最核心技术 我们知道,用所谓的网页三剑客已经不能满足需求了,那前端开发究竟要学习什么技术呢?网页最 主要由3部分组成:结构.表现和行为.网页现在新的标准 ...

  6. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  7. 【CSS进阶】试试酷炫的 3D 视角

    写这篇文章的缘由是因为看到了这个页面: 戳我看看(移动端页面,使用模拟器观看) 运用 CSS3 完成的 3D 视角,虽然有一些晕3D,但是使人置身于其中的交互体验感觉非常棒,运用在移动端制作一些 H5 ...

  8. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  9. 2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

随机推荐

  1. 如何让网页打开就运行JS代码,不用onclick

    打开网页直接运行是要调用window.onload( )函数: <html>    <head>    </head>    <body>    < ...

  2. 3、HelloKhala示例说明

    最简单的dome程序只需3行代码 int main() { //设置端口号 InetAddress listenAddr(USER_PORT); //将端口号绑定到Server NodeServer ...

  3. Opensuse13.2开启ssh

    要开启ssh很简单,步骤分为三步 步骤1: 安装ssh zypper install ssh 步骤2:启动ssh daemon网上很多通过 service 命令或者 init.d 目录中的脚本启动ss ...

  4. 解决mini2440开发板和虚拟机相互ping不通

    很奇怪的事,前段时间使用都还是好好的,但今天不知什么原因开发板和虚拟机怎么也无法PING通. 虚拟机用的:fedora14 开发板IP:192.168.0.250 虚拟机IP:192.168.0.10 ...

  5. dobbo学习

    http://www.cnblogs.com/Javame/p/3632473.html 1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以 ...

  6. 递归:汉诺塔 - 零基础入门学习Python024

    递归:汉诺塔 让编程改变世界 Change the world by program 似乎谈到递归算法就要拿汉诺塔来举例,没办法,因为小甲鱼小时候太笨了,这个游戏老是玩不过关,好不容易在自学编程的时候 ...

  7. s3c2416裸跑环境配置

    最近刚刚开始学习ARM-linux,上周买了块tq2416的板子,给的Linux资料太复杂太深奥不愿看,等不及想要把2416跑起来.于是到处找相关裸跑资料,可是用2416的人实在少,网上的资料更少,裸 ...

  8. Oracle静态监听和动态监听

    一.静态注册 静态注册指实例启动时读取listener.ora配置文件,将实例和服务注册到监听程序.无论何时启动一个数据库,默认都有两条信息注册到监听器中:实例和服务.SID_LIST_LISTENE ...

  9. sql server数据建表

    use edudbgoif exists(select * from sysobjects where name='department')drop table departmentcreate ta ...

  10. 【转】用Device tree overlay掌控Beaglebone Black的硬件资源

    原文网址:https://techfantastic.wordpress.com/2013/11/15/beaglebone-black-device-tree-overlay/ 经过一晚上的Goog ...