Day2-有关CSS盒子

【块状元素：换行             内联元素：不换行（行内元素）

在html中，、、、 和就是典型的内联元素（行内元素）（inline）元素。】

*如下代码是将内联元素a转换为块状元素，从而使a元素具有块状元素特点：（使a标签变为可以换行的元素）

a{display:block;}

*当然块状元素也可以通过代码display:inline将元素设置为内联元素。将块状元素div转换为内联元素的代码：

div{display:inline; }

*内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元

素设置为内联块状元素。、标签就是这种内联块状标签。

*盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：

div{

    border:2px  solid  red;

}

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

div{

    border-width:2px;

    border-style:solid;

    border-color:red;

}

*css 样式中允许只为一个方向的边框设置样式：

div{border-bottom:1px solid red;}

同样可以使用下面代码实现其它三边(上、右、左)边框的设置：

border-top:1px solid red;

border-right:1px solid red;

border-left:1px solid red;

*一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

比如：

css代码：

div{

    width:200px;

    padding:20px;

    border:1px solid red;

    margin:10px;   

}

*在网页中，元素有三种布局模型：

1、流动模型（Flow）

2、浮动模型 (Float)

3、层模型（Layer）

*如果想让两个块状元素并排显示，设置元素浮动就可以实现这一愿望。

任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义

为浮动。如下代码可以实现两个 div 元素一行显示。

div{

    width:200px;

    height:200px;

    border:2px red solid;

    float:left;

}

*如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)

如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。

div{

    width:200px;

    height:200px;

    border:2px red solid;

    position:absolute;

    left:100px;

    top:50px;

}

*如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位）

如下代码实现相对于以前位置向下移动50px，向右移动100px;

div1{

    width:200px;

    height:200px;

    border:2px red solid;

    position:relative;

    left:100px;

    top:50px;

}

*fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化。

（举例：一直让一个广告出现在屏幕右下角）：使用position:fixed;

Relative与Absolute组合使用：

*使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位，还可以相对于其它元素进行定位，

可使用position:relative来帮忙，但是必须遵守下面规范：

1、参照定位的元素必须是相对定位元素的前辈元素：

   

相对参照元素进行定位

从上面代码可以看出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;       

}

*盒模型的缩写：

通常有下面三种缩写方法:

1、如果top、right、bottom、left的值相同，如下面代码：

margin:10px 10px 10px 10px;

可缩写为：

margin:10px;

2、如果top和bottom值相同、left和 right的值相同，如下面代码：

margin:10px 20px 10px 20px;

可缩写为：

margin:10px 20px;

3、如果left和right的值相同，如下面代码：

margin:10px 20px 30px 20px;

可缩写为：

margin:10px 20px 30px;

注意：padding、border的缩写方法和margin是一致的。

*颜色值：

1、英文命令颜色

前面几个小节中经常用到的就是这种设置方法：

p{color:red;}

2、RGB颜色

这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。

p{color:rgb(133,45,200);}

每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：

p{color:rgb(20%,33%,25%);}

3、十六进制颜色

这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十

六进制 00-ff。

p{color:#00ffff;}

*水平居中设置-行内元素：

html代码：

 

我想要在父容器中水平居中显示。

css代码：

水平居中设置-定宽块状元素

当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽

块状元素。

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是

设置 div 这个块状元素水平居中：

html代码：

 

我是定宽块状元素，哈哈，我要水平居中显示。

css代码：

也可以写成：

margin-left:auto;

margin-right:auto;

注意：元素的“上下 margin” 是可以随意设置的。

*在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不

确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)

不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：

加入 table 标签

设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置

设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

*第一种方法（table 标签）：

为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长

度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin

的方法，使其水平居中。

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。

第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

举例如下：

html代码：

 

   

 

我是第一行文本         我是第二行文本         我是第三行文本

css代码：

*第二种方法：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-

align:center 来实现居中效果。如下例子：

html代码：

   

       

• 1

       

• 2

       

• 3

   

css代码：

这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为inline，变成了行内元素，所以少了一些功能，比如设定长度值。

*方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置position:relative 和 left: -50% 来实现水平居中。

我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两

份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分

线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。

代码如下：

   

       

• 1

       

• 2

       

• 3

   

css代码：

*垂直居中：分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。

*父元素高度确定的单行文本：

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。

(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离)。

这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

如下代码：

    hi,imooc!

css代码：

*父元素高度确定的多行文本：

使用插入 table  (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：

html代码：

看我是否可以居中。

css代码：

table td{height:500px;background:#ccc}

因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。

*隐性改变display类型

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

1. position : absolute

2. float : left 或 float:right

简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（

块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

如下面的代码，小伙伴们都知道 a 标签是 行内元素 ，所以设置它的 width 是 没有效果的，但是设置为

position:absolute 以后，就可以了。

    进入课程请单击这里

css代码