概述
关于CSS的一些基础知识我们在前面文章中已经有所了解,这篇文章我们主要来学习下CSS中的核心知识盒子模型的知识。
盒子模型
元素框的最内部分是实际的内容(element),直接包围内容的是内边距(padding),内边距呈现了元素的背景,内边距的边缘是边框(border),外边距(margin)默认是透明的,因此不会遮挡其后的任何元素,对于这个图边框外的部分就是margin,边框内内容外地部分就是padding。
在CSS中我们一般习惯性的将外边距和内边距设置为0,即
* {
margin: 0;
padding: 0;
}
element元素
在CSS中,width和height是element区域的宽度和高度,对padding、border、margin增加尺寸不会影响element的宽度和高度,只会增加整个框的尺寸。
下面我们看个例子:假设框的每个边上有 10个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
这样的话对于element、padding、border、margin的尺寸就更加的一目了然了,这里需要注意下的是,padding、border、margin即可以应用于一个元素的所有边,也可以应用于单独的边,还有一点就是,margin可以是负值。
内边距(Padding)
元素的内边距是再边框和内容区之间,padding属性设置用长度值或者百分比值,但不允许用负值。关于用百分比的话,有一点需要注意是,即上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度。
对于padding的设置,可以设置它的上下左右这四个边距。
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
h1 {padding: 10px0.25em 2ex 20%;}
上述这两种方法实现的效果是一致地,如果我们的四个边距是一样的话可以用下面这句话。
h1 {padding: 10px;}
边框(border)
元素的边框(border)是围绕元素内容和内边距的一条或多条线,可以规定元素边框的样式、宽度和颜色,这样可以创建出效果更佳出色的边框。
样式
样式是边框的最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。
border可以先设置样式,设置样式的顺序为op-right-bottom-left,设置样式的属性为border-style;
如果想设置单边样式则为:
border-top-style
border-right-style
border-bottom-style
border-left-style
宽度
边框宽度属性设置用border-width设置;
如果想单独设置各边的宽度则用:
border-top-width
border-right-width
border-bottom-width
border-left-width
对于同一个边框宽度我们可是用三种方式来设置如下,效果是一样的。
p {
border-style: solid;
border-top-width: 15px;
border-right-width: 5px;
border-bottom-width: 15px;
border-left-width: 5px;
}
p {border-style:solid; border-width: 15px 5px 15px 5px;}
p {border-style:solid; border-width: 15px 5px;}
颜色
设置边框颜色的原理与设置设置边框宽度的原理是相同的,设置颜色用border-color;
如果设置个边宽度则用:
border-top-color
border-right-color
border-bottom-color
border-left-color
外边距(margin)
margin围绕在元素边框外地空白区域就是margin,设置margin会在元素外创建额外的“空白”,margin属性接收任何长度单位、百分数值甚至负值。
在这里先讲解一个值复制的规则,就是如果缺少左外边距的值,则使用右外边距的值;如果缺少下外边距的值,则使用上外边距的值;如果缺少右外边距的值,则使用上外边距的值。
换句话说,如果为外边距指定了 3个值,则第 4 个值(即左外边距)会从第 2 个值(右外边距)复制得到。如果给定了两个值,第 4 个值会从第 2 个值复制得到,第 3 个值(下外边距)会从第1 个值(上外边距)复制得到。最后一个情况,如果只给定一个值,那么其他 3 个外边距都由这个值(上外边距)复制得到。
如果我们想设置单边外边距属性,可以用下面的属性
margin-top
margin-right
margin-bottom
margin-left
下面这两种方式效果是一致地
h2 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}
p {margin: 20px 30px30px 20px;}
总之
在这里我也是简单将盒子模型的基础知识进行了基础的总结,这些知识只有我们经常用,慢慢的轻车熟路了,对于盒子模型的知识的讲解我可能有太不全面的地方,也请大家多多指正。
分享到:
相关推荐
第3章:深入讲解CSS的核心机制——盒子模型。 第4章:讲解CSS布局的重点和难点——浮动和定位。 第5章:介绍文字和图像的排版。 第6章:介绍了链接和导航相关的设置方法。 第7章:制作比较简单的竖直排列的导航菜单...
盒子模型与背景属性一.盒子模型1.介绍2. 元素的总宽度和总高度二.自定义边框——border1.基本设置2.边框宽度——Border Width3.边框颜色——Border Color4.边框样式——Border style5.CSS的边宽和高度——width ...
《CSS高效开发实战——CSS 3、LESS、SASS、Bootstrap、Foundation》分为3部分:第1部分是HTML/CSS基础和CSS 3新特性演示,涵盖盒子模型、浮动布局、属性前缀、选择器、字体、边框、背景、颜色、变换、动画、弹性盒子...
这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 简介 CSS (Cascading Style Sheet)可译为“层叠样式...
第3章 深入理解盒子模型 3.1 盒子的内部结构 3.2 边框(border) 3.2.1 实验1——border-style 3.2.2 属性值的简写形式 3.2.3 实验2——属性的缩写形式 3.2.4 实验3——边框与背景 ...
第3章 深入理解盒子模型 3.1 盒子的内部结构 3.2 边框(border) 3.2.1 实验1——border-style 3.2.2 属性值的简写形式 3.2.3 实验2——属性的缩写形式 3.2.4 实验3——边框与背景 3.3 内边距...
剖析CSS原理4大核心:盒子模型、标准流、浮动、定位创建主流流览器全兼容的网站:IE 6/UE 7/ Firefox讲解各类网页布局方法:固定宽度布局、变宽布局制作流行的网页元素:导航、菜单、圆角、面板为学习者提供:CSS...
1:什么是盒模型:盒模型是ccs布局的基石,它规定了网页元素如何显示以及元素之间的相互...css定义所有的元素都可以拥有像盒子一样的平面空间。即都包含内容区域、补白(填充)、边框、边界(外边距)这就是盒模型。
2、掌握了CSSde 创建及管理方式和其中常用的属性,应用css+DIV进行页面布局的DIV标记,SPNA标记, 盒子模型,元素的定位方式,布局流程和常用的布局类型。 3、学会了应用SCC+DIV对"北京奥运混吉祥物——福娃"网站的...
Css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML 、GladeXML。使用该模型,...
CSS3引入了一种新的布局模式——Flexbox布局,即伸缩盒模型布局(Flexible Box)模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局,即使它们的大小是未知或者动态的,这里简称Flex。 CSS3引入...
在CSS中,这些矩形盒子用标准盒模型来描述。这个模型描述了一个元素所占用的空间。每一个盒子有四条边界:外边距边界margin, 边框边界border, 内边距边界padding与内容边界content。 在W3C模型中: 总宽度 = margin-...
6 一、利于搜索引擎蜘蛛爬行 6 二、易于修改 7 三、减少网页加载时间 7 四、代码精简 7 五、相对表格的嵌套问题 8 六、搜索排名的影响 8 第四节 div+css布局方式 8 第五节 div+css理论概述 9 一、理解CSS盒子模型 9 ...
自适应的弹性布局 CSS3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间
由于最近在准备前端方面的面试,所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上),有...渲染引擎的目的就是判定大小,属性——比如它的颜色、背景、边框方面——及这些盒子的位置。在CSS中,这些矩形
它是**<span>css3**引入的一种新的布局模式——**<span>flexbox**布局,即伸缩布局盒模型,用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局。相比之前的布局方式,更便利于开发。 2)主要思想是让...
Flexible意为可伸缩的,Box意为盒子,可以理解为一种新式的盒模型——伸缩盒模型。由CSS3规范提出,这是在原有的大家非常熟悉的block, inline-block, inline的基础上延伸出的新一代布局模式。浏览器兼容性 作为非常...