CSS布局(一) 盒子模型

2018-02-27 09:05:07来源:cnblogs.com作者:柴小智人点击

分享

一、盒子模型

标准盒子模型

 从下图可以看到标准 w3c 盒子模型的范围包括 content、padding、border、margin,并且 content 部分不包含其他部分。

 

怪异盒子模型

从下图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content,和标准 w3c 盒子模型不同的是:ie 盒子模型的 content 部分包含了 border 和 pading。

 

  

例:一个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px、高为 50px,

假如用标准 w3c 盒子模型解释,那么这个盒子需要占据的位置为:宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px;盒子的实际大小为:宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px;

假如用ie 盒子模型,那么这个盒子需要占据的位置为:宽 20*2+200=240px、高 20*2+50=70px,盒子的实际大小为:宽 200px、高 50px。

  那应该选择哪中盒子模型呢?当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c 盒子模型”呢?很简单,就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明,那么各个浏览器会根据自己的行为去理解网页,即 ie 浏览器会采用 ie 盒子模型去解释你的盒子,而 ff 会采用标准 w3c 盒子模型解释你的盒子,所以网页在不同的浏览器中就显示的不一样了。反之,假如加上了 doctype 声明,那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了。

<!doctype html><html><head>  <title>你用的盒子模型是标准w3c盒子模型</title>  <script language="javascript" src="jquery.min.js"></script>    var sbox = $.boxmodel ? "标准w3c":"ie";    document.write("您的页面目前支持:"+sbox+"盒子模型");  </script></head><body></body></html>

  

二、组成盒子模型的标签类型

在CSS中,html中的标签元素大体被分为三种不同的类型:块级元素、行级元素和行内块元素。

常用的块级元素有:

<div>、<p>、<h1>...<h6>、<ol>、<ul>  设置display:block转换

特征:1.一个块级元素独占一行;

   2.元素的高度、宽度、行高以及顶和底边距都可设置;

   3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

 

常用的行级元素有:

<a>、<span>  设置display:inline转换

特征:1、和其他元素都在一行上;

   2、元素的高度、宽度及顶部和底部边距不可设置;

   3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

   4、内联元素之间的间距问题:当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。解决方法:写在一行,之间不要有空格之类的符号。

 

常用的行内块元素有:

<img>、<input>  设置display:inline-block转换  

 特点:1、和其他元素都在一行上;(而块状元素是另起一行)

    2、元素的高度、宽度、行高以及顶和底边距都可设置。

 

三、盒子模型的属性

宽高width/height

  在CSS中,可以对任何块级元素设置显式高度。

  如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样;

  如果指定高度小于显示内容所需高度,取决于overflow属性,需要滚动条需要设置为overflow:auto。

auto

  宽高和margin可以设置auto。对于块级元素来说,宽度设置为auto,则会尽可能的宽。详细来说,元素宽度=包含块宽度—元素水平外边距-元素水平边距宽度-元素水平内边距;

  高度设置为auto,则会尽可能的窄。详细来说,元素高度=恰好足以包含其内联内容的高度

  [注意]如果没有显式声明包含块的height,则元素的百分数高度会重置为auto

 【最大最小宽高】

min-width | min-height

  初始值: 0

  应用于: 块级元素和替换元素

  百分数: 相对于包含块的宽度(高度)

max-width | max-heightt

  初始值: none

  应用于: 块级元素和替换元素

  百分数: 相对于包含块的宽度(高度)

[注意]当最小宽度(高度)大于最大宽度(高度)时,以最小宽高的值为准

内边距padding

  相比于盒模型的其他属性(如在定位中经常使用负值的margin),padding显得中规中矩了很多,没有什么兼容性,也没有一些特殊的问题

  对于行内元素,左内边距应用到元素的开始处,右内边距应用到元素的结尾处,垂直内边距不影响行高,但会影响自身尺寸,加背景颜色可以看出

  [注意]内边距不能是负值

padding

  初始值: 未定义

  百分数: 相对于包含块的width

【50%】

  块级元素通过padding:50%可以实现正方形的效果,因为水平和垂直padding的百分比值都是相对于包含块的宽度决定的,常常用于移动端头图

边框border

  元素外边距内就是元素的边框border,边框由粗细、样式和颜色三部分组成,且先后顺序无关

基础样式

复制代码
 border: border-width border-color border-style border: 1px red solid;
复制代码

边框样式

  如果一个边框没有样式,边框将根本不会存在

  关于虚线dashed,在chrome/firefox下,虚线宽高比是3/1;而在IE下,虚线宽高比为2/1。所以在IE下虚线显得比较密

  关于点线dotted,在chrome下,点线是方点;而在IE/firefox下,点线是圆点

border-style:none(默认)border-style:hidden/dotted/dashed/solid/double/groove/ridge/inset/outset(共9种)

边框单边

  border-top/border-right/border-bottom/border-left

 

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台