(二)盒子模型

一个漂亮的网页,除了有漂亮的图片外,还要有漂亮的页面布局,页面布局的好坏,对页面的美观度也是至关重要的!!

通过观察大量网站页面布局,都会用到盒子模型进行页面布局,那什么是盒子模型呢?

关于盒子模型,看了讲解视频,也是云里雾里的,下面是个人的一些理解,不足之处还请前辈们给予指点...

  盒子模型简而言之就是一间房间里面,放一个盒子,而盒子里面放的也有珠宝。房间相当于一个完整的html页面,盒子可以理解为一个<div></div>块,珠宝就是div标签中存放的内容。

一个简单的盒子模型页面就是:

html页面如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="box.css"/>
<title>盒子模型</title>
</head>

<body>

<div class="se1">
<img src="1.jpg"/><br/>
<a href="#">点击信息</a>
</div>
</body>
</html>

CSS代码如下:

body{
border:1px solid red; /*1px表示边框的宽度 solid实线 red颜色*/
width:600px;
height:500px;
font-size:12px;
/*body体自动居中*/
margin:0px auto; /*0px表示上下距离,auto左右自动居中*/
}

.se1{
width:65px;
height:62px;
border:1px solid blue;
margin:5px 0px 0px 5px;  /*margin中值的个数:1-->上右下左,2-->上下、右左,3-->上、右左、下,4-->上右下左*/
padding-left:5px;
}

.se1 img{
border:1px solid black;
width:40px;
height:40px;
margin-top:5px;
margin-left:5px;
margin-bottom:3px;
}

时间: 2024-10-07 05:20:43

(二)盒子模型的相关文章

CSS布局(二) 盒子模型属性

盒子模型的属性 宽高width/height 在CSS中,可以对任何块级元素设置显式高度. 如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样: 如果指定高度小于显示内容所需高度,取决于overflow属性,需要滚动条需要设置为overflow:auto. auto 宽高和margin可以设置auto.对于块级元素来说,宽度设置为auto,则会尽可能的宽.详细来说,元素宽度=包含块宽度-元素水平外边距-元素水平边距宽度-元素水平内边距: 高度设置为auto,

Java学习总结(二十四)——前端:CSS样式设计(CSS引入,选择器,盒子模型,浮动元素)

一.CSS引入方式1.CSS简介:(1)CSS(Cascading style Sheets):层叠样式表.用来给html网页设置样式;(2)当多个选择器对同一个元素进行样式设计时,则该元素的样式为多个选择器叠加的效果(当有冲突时,按照优先级设置);2.引入方式:(1)方式一:行内样式(在html元素的style属性上设置样式)(2)方式二:页面内嵌样式(在head标签内部嵌入样式)(3)方式三:引入外部样式文件例1(演示CSS三种引入方式):Html代码: <!DOCTYPE html> &

web开发之浏览器(二)----JQuery或JS判断浏览器内核版本号以及是否支持W3C盒子模型

1,JQuery或JS判断浏览器内核版本号以及是否支持W3C盒子模型 jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support .在更新的 2.0 版本中,将不再支持 IE 6/7/8. 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9.  以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9及以下的版本. 如果要全面支持 IE,并混合使用 jQuery 1.9及以下 和

HTML盒子模型

一.什么是盒子模型? CSS中, Box Model叫盒子模型(或框模型), Box Model规定了元素框处理元素内容(element content). 内边距(padding).边框(border) 和 外边距(margin) 的方式 二.第一层边框--border的常用属性 1.border-color--边框颜色 2.border-style--边框样式 dashed:虚线;solid:细线 3.border-width--边框宽度,单位像素px 4.border:粗细,颜色,样式 三

(5)css盒子模型

CSS 盒子模型概述 ***什么是CSS的盒子模型呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).边框(border).内边距(padding).外边距(margin), CSS盒子模型都具备这些属性. ***属性我们可以把它转移到我们日常生活中的盒子(箱子)来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模型. 盒子模型是css控制页面是一个很重要的概念. 所有网页的页面中的元素都可以看成是一个盒子,占据着一定的页面空间. 一

7.web前端之路:CSS剖析指之盒子模型

一.margin和padding作用域 盒子模型 二.margin margin:用于控制元素与元素之间的距离:margin的最基本用途就是控制元素周围空间的空隔 从视角上达到相互隔开的目的,俗称为外边距,其大小不会影响盒子的大小. 三.padding padding:用于控制内容与边框之间的距离,俗称为内边距,其大小会将盒子想四周撑开. 四.注意 边框在默认情况下定位于浏览器窗口的左上角,但是并没有紧贴着浏览器的宽口的边框,这是因为body 本身也是一个盒子(它存在于HTML这个大盒子里面),

css3弹性盒子模型之box-flex

css3弹性盒子模型之box-flex 浏览器支持 目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chrome 支持替代的 -webkit-box-flex 属 box-flex是css3新添加的盒子模型属性),它的出现打破了我们经常使用的浮动布局,实现垂直等高.水平均分.按比例划分.但是它有一定的局限性,在firefox.chrome这浏览器下需要使用它们的私有属性来定义:firefox(-moz)

js盒子模型

1.js盒子模型 指的是通过js中提供的一系列的属性和方法,获取页面中元素的样式信息值 例: #box有很多自己的私有属性: HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype->Object.prototype var box = document.getElementById("box"); c

10.css学习-盒子模型

<html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css"> /* 盒子模型: 盒子模型就是把一个html边框比作成了一个盒子的边框,盒子模型要做用于操作数据与边框之间的距离或者 是边框与边框之间的距离. 盒子模型主要是用于操作内边距(padding)与外边距(margin) */ div{ border-style:solid; width:10