CSS之基础知识开篇（二）

作者: 莫失丿莫忘 | 来源:发表于2017-06-22 13:05 被阅读90次

1.CSS盒模型

盒子模型有两种，分别是标准盒子模型和IE盒子模型。
CSS 把盒模型分为两种基本形态：Block（块级元素）和 Inline（内联元素，也有翻译为“行内”）。在默认状态下，块状元素的宽度为 100％
当我们在网页顶部加上doctype声明的时候，浏览器会使用标准盒子模型去解释网页。
如果网页没有doctype声明的时候，ie浏览器会使用IE盒子模型去解释网页，而firefox, chrome等浏览器则仍然使用标准盒子模型区解释网页，这就出现了不兼容问题。所以一般我们采用的是标准盒子模型。
网页稳定性：
Width 和height 最稳定
其次 padding
最后才考虑margin
标准盒子模型(不带边）

Paste_Image.png
IE盒子模型（带边）

Paste_Image.png

1.1 重要性元素分类

在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为两种等级：
1）块级元素
常用的块级元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

霸占一行，不能与其他任何元素并列
元素的高度、宽度、行高以及顶和底边距都可设置
如果不设置宽度，那么宽度将默认变为父亲的100%。

2）行内元素
常用的行内元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

· + 与其他行内元素并排
·+ 元素的高度、宽度、行高及顶部和底部边距不可设置。默认的宽度，就是文字或图片的宽度。

Paste_Image.png

1.2块级元素和行内元素的相互转换(display)

display：“显示模式”;(block,none,inline)
块级元素设置为行内元素：display:inline-block;
行内元素可以设置为块级元素：display: block;
盒模型的显示类型可以使用 display 属性来显式定义。任何元素都可以通过 display 属性改变默
认显示类型，因此也会改变该元素所对应的网页布局结构。
display 属性共有 18 个选项值，详细说明如下：

block：块状显示，在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。
none：隐藏显示，这与 visibility:hidden;声明不同，display:none;声明不会为被隐藏的元素保
留位置。
inline：内联显示，在元素后面删除换行符，多个元素可以在一行内并列显示。
inlineblock：内联显示，但是元素的内容以块状显示，行内其他内联元素还会显示在同一
行内。
compact：紧凑的块状显示，或基于内容之上的内联显示。
marker：在容器对象之前或之后显示，该属性值必须与:after 和:before 伪元素一起使用。
inlinetable：具有内联特征的表格显示。
listitem：具有块状特征的列表项目显示，并可以添加可选项目标志。
runin：块状显示或基于内容之上的内联显示。
table：具有块状特征的表格显示。
tablecaption：表格标题显示。
tablecell：表格单元格显示
tablecolumn：表格列显示。
tablecolumngroup：表格列组显示。
tableheadergroup：表格标题组显示。
tablefootergroup ：表格页脚组显示。
tablerow：表格行显示。
tablerowgroup：表格行组显示。
table：具有块状特征的表格显示。
tablecaption：表格标题显示。
tablecell：表格单元格显示
tablecolumn：表格列显示。
tablecolumngroup：表格列组显示。
tableheadergroup：表格标题组显示。
tablefootergroup ：表格页脚组显示。
tablerow：表格行显示。
tablerowgroup：表格行组显示。

注意：其中真正能够应用并获得所有浏览器支持的取值只有 4 个：block、none、inline、listitem。

1.3盒模型--边框（一）

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
border是一个复合的属性，它可以同时定义上右下左四个边框，当四个边都是同个样式时可以使用如下面代码：

div{
border:2px  solid  red;
}
//为div来设置边框粗细为2px、样式为实心的、颜色为红色的边框

上面是border代码的缩写形式，也可以分开写：

div{
border-width:2px;
border-style:solid;
border-color:red;
}

注意：
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色（也可以是rgb颜色），如:
border-color:#888;//前面的井号不要忘掉。

1.4盒模型--边框（二）

现在有一个问题，如果有想为p标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css样式中允许只为一个方向的边框设置样式：
div{border-bottom:1px solid red;}
同样可以使用下面代码实现其它三边上、右、左边框的设置：
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
总结：
如果四个边的样式不是相同一般会有下面几种情况

/*边框样式、宽度、颜色都不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:2px solid #0000FF;
border-bottom:1px double #FF00FF;
border-left:1px solid #FF0000;
}
.div2{
border-width:1px 2px 1px 1px;
border-style:solid solid double solid;
border-color:#FF00FF #0000FF #FF00FF #FF0000;
}
/*边框样式不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:1px solid #FF00FF;
border-bottom:1px double #FF00FF;
border-left:1px solid #FF00FF;
}
.div2{
border:1px #FF00FF;
border-style:solid solid double solid;
}
/*边框宽度不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:2px solid #FF00FF;
border-bottom:1px solid #FF00FF;
border-left:1px solid #FF00FF;
}
.div2{
border:solid #FF00FF;
border-width:1px 2px 1px 1px;
}
/*边框颜色不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:1px solid #0000FF;
border-bottom:1px solid #FF00FF;
border-left:1px solid #FF0000;
}
.div2{
border:1px solid;
border-color:#FF00FF #0000FF #FF00FF #FF0000;
}
/*还有就是有些边框是没有的，比如只有底边*/
.div1{
border:1px #FF00FF;
border-style:none none solid;
}

注意：如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。

1.5盒模型--边框（三）

按方向还能再拆一层，就是把每个方向的，每个要素拆开，一共12条语句（颜色可以不写默认黑色，但是线形跟粗细不写就出不来）：

border-top-color:red;
border-top-width:10px;
border-top-stylr:solid;
border-right-width:10px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:10px;
border-left-style:solid;
border-left-color:red;

1.6 盒模型--外边距

margin是“外边距”，兄弟间的距离（标准流有塌陷现象，距离不叠加，取最大，但是如果浮动脱离标准文档流，margin的距离就可以叠加）。margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em，可以使用负值。边界也是可分为上、右、下、左。margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。如下代码：

//上外边距是 10px,右外边距是 5px,下外边距是 15px,左外边距是 20px
margin:10px 5px 15px 20px;

也可以分开写：

div{
margin-top:10px;
margin-right:5px;
margin-bottom:15px;
margin-left:20px;
}

//如果上下左右的边界都为10px;可以这么写：
div{ margin:10px;}

//如果上下边界一样为10px，左右一样为20px，可以这么写：
div{ margin:10px 20px;}

//上外边距是 10px,右外边距和左外边距都是 5px,下外边距是 15px:
margin:10px 5px 15px;

//为 margin 设置一个百分比数值,百分数是相对于父元素的 width 计算的。
//下面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。:
p {margin : 10%;}

总结：
CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下：
如果缺少左外边距的值，则使用右外边距的值。
如果缺少下外边距的值，则使用上外边距的值。
如果缺少右外边距的值，则使用上外边距的值。

注意：标准流有哪些微观现象？
1）空白折叠现象：
比如，如果我们想让img标签之间没有空隙，必须紧密连接,代码如下：

![](images/0.jpg)![](images/1.jpg)![](images/2.jpg)

2）页面从上到下，文本之间高低不齐，底边对齐。（文本包括：文字，图片和表单元素）
3）自动换行，一行写不满，换行写。

1.7盒模型--内边距

padding是“内边距”的意思，在盒子原有的height基础上叠加上去，也就是说盒模型的padding，绝对不是直接作用在文字上的，而是作用在“行”line-height上的,用于父子间的距离。
为了严格保证字在行里面居中，行高、字号，一般都是偶数。这样，它们的差，就是偶数，就能够被2整除。

Paste_Image.png

如下代码：

div{padding:20px 10px15px 30px;}

也可以分开写上面代码：

div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}

//如果上、右、下、左的值都为10px,可以这么写
div{padding:10px;}

//如果上下填充一样为10px，左右一样为20px，可以这么写：
div{padding:10px 20px;}

//可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，
//这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。
//下面这条规则把段落的内边距设置为父元素 width 的 10%：
p {padding: 10%;}

注意：

内边距会影响盒子大小
行内元素尽量不用上下的padding和margin （会有几像素默认间距）
继承的宽度 padding不会挤开，所以继承的要给宽度才能用

盒模型总结：

margin 总是透明的，padding 也是透明的，但 padding 受背景影响，能够显示背景色或背景
图像，所以部分初学者会误认为补白不透明。
border 不透明，这是因为实线边框的遮盖。当你定义虚线或点线边框时，在部分浏览器中可以看到被边框遮盖的背景。盒模型背景可以深入到 padding 和 border 区域，但部分浏览器不
支持 border 区域背景显示，如 IE 和 Netscape 浏览器。
margin 可以定义负值，但 border 和 padding 不支持负值。
margin、border 和 padding 都是可选的，它们默认值为 0。我们可以单独定义一边或统一定
义盒子四边的属性值。
如果需要，每一条可见边框都可以定义不同的宽度，但前提是要定义 borderstyle 属性为可
见样式。
每一个盒子所占页面区域的宽度和高度等于 margin 外沿的宽度和高度。盒子的大小并不总

2. css布局模型

清楚了CSS 盒模型的基本概念、盒模型类型，我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、最核心的概念。但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

2.1流动模型（一）

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

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
内联元素标签a、span、em、strong都是内联元素。

2.2浮动模型

块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？
标准流做不出网页：因为能并排的不能改宽高。所以，要脱离标准流。
浮动宏观的看，就是做“并排”的。有几个性质：脱标、贴边、字围、收缩。
使脱离文档流，块级元素可以并排，行内元素可以设宽高
收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为文字的宽度（这点非常像行内元素）。
永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。浮动犹如空中漂浮的白云，而流动更像地面上依势而下的流水，不能简单地把流动与浮动混淆起来，否则布局非出问题不可。
左浮动：float:left
如下代码可以实现两个div元素一行显示。

div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>

注意：设置浮动的同时一定要先设置块状元素的宽度，且需要浮动的几个元素宽度加起来一定要小于容器元素的宽度。

2.3层模型（定位）

什么是层布局模型？层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。
如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)

层模型--绝对定位（相对于父类）
如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>

注意：

绝对定位top是距离页面左上角0,0的距离（可以伸缩的放大放小的页面，随滚动条上滚的页面，不是浏览器），bottom是距离左下角的距离，以文档为基准点。
注意：
绝对定位的盒子，是脱离标准文档流的。所以，所有的标准文档流的性质，绝对定位之后都不遵守了。标签不区分所谓的行内元素、块级元素了，不需要display:block;就可以设置宽、高了
一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点。（一般是子绝父相（父亲的位置占着，不会被下面的挤上去），子绝父绝的话，父也脱标，位置会让下一个盒子占去。主要看是否能够占得位置，或者是有个爷爷是相，爸爸跟儿子都是绝，具体看情况而定）
要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷
绝对定位的盒子居中
绝对定位之后，所有标准流的规则，都不适用了。所以margin:0 auto;失效。方法如下

Paste_Image.png

然后再用margin-left，使其平分

用途：用于覆盖且脱标

层模型--相对定位（相对于以前）

如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
position:relative;（相对定位）：就是微调元素位置的。让元素相对自己原来的位置，进行位置调整。
left、right、bottom、top是指要相对的位置

- position:relative;   → 必须先声明，自己要相对定位了，
- left:100px;       → 然后进行调整。
- top:150px;       → 然后进行调整。

性质：
不脱标，老家留坑。形影分离，相当于灵魂出窍。
脱离标准流，位置移到别的地方，但是他的位置还在，不会让别的盒子占领。
用途：
相对定位有坑，所以一般不用于做“压盖”效果。页面中，效果极小。就两个作用：
1）微调元素
2）做绝对定位的参考，子绝父相（父亲是绝对定位，儿子是相对定位，这时候绝对定位就不是相对于页面（窗口-body）的位置，而是相对于父亲的位置）

层模型--固定定位（相对于网页窗口）

固定住某一坐标。
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed?属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}

position:fixed;（脱离标准流，参考点为浏览器可视区内边框）
固定定位，就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。相当于冻结窗口
固定定位脱标！要写宽高，脱标了就不是行块了。并且脱离标准流之后，他后面的元素会以为他不存在，占了他的位置。（跟他浮动，后面元素没浮动的效果一样）
用途：标题栏、返回顶部

2.4包含块(子绝父相的用分法）

CSS 包含块是标准布局中的一个重要概念，它是绝对定位的基础。请读者注意包含块与父元素、包含框或包含元素等概念存在本质的区别。那么什么是包含块呢？

包含块就是为绝对定位元素提供坐标偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考。在默认状态下，body 元素就是一个大的包含块，所有绝对定位的元素都是根据窗口来确定自己所处的位置和百分比大小显示的。但是如果我们定义了包含元素为包含块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来决定自己的显示位置。
简而言之就是设置成相对定位的元素是设置成绝定定位的元素位置移动的参考点，而这个呗设成相对定位的元素，就是我们所说的包含块

2.4.1Relative与Absolute组合使用

必须遵守下面规范：
1、参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1">
<div id="box2">相对参照元素进行定位</div>
</div>
从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。
2、参照定位的元素必须加入position:relative;

box1{

width:200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

box2{

position:absolute;
top:20px;
left:30px;
}
这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

CSS之基础知识开篇（二）

1.CSS盒模型

1.1 重要性元素分类

1.2块级元素和行内元素的相互转换(display)

1.3盒模型--边框（一）

1.4盒模型--边框（二）

1.5盒模型--边框（三）

1.6 盒模型--外边距

1.7盒模型--内边距

2. css布局模型

2.1流动模型（一）

2.2浮动模型

2.3层模型（定位）

2.4包含块(子绝父相的用分法）

2.4.1Relative与Absolute组合使用

box1{

box2{

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

CSS

我爱编程