百度前端技术学院 第五天学习总结

CSS学习, 百度前端技术学院 本文总阅读量次

补充：CSS块内文字居中

参考方法

块内单方文字垂直居中

  • 设置line-height与height相同。

块内文水平居中

  • text-align: center;

补充：在github的readme中展示网页效果

参考方法

盒模型的概念以及内外边距，宽度，高度，box-sizing等属性

盒模型
首先我们要明确盒模型分两种:标准盒模型和替代盒模型，他们的区别在于宽度和高度的计算方法不同。
默认情况下，浏览器使用标准盒模型。如果要为元素打开替代盒模型，可以通过对其进行设置如下代码来实现：

1
2
3
4
5
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

box-sizing是个很新的属性，目前应该像上面例子中那样使用 -webkit- 和 -moz-前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+的。

注意：
标准盒模型 的宽度只是内容的宽度，不包括padding与border，所以我们一旦设置padding与border就应该设置替代盒模型，以确保我们设置的width就是我们看到的宽度。

标准盒模型（左）和替代盒模型（右）
通过对比图可以很明显的发现：
在标准盒模型中，盒子占用的总大小由框的宽度（width）和高度（height）以及任何填充（padding）和边框（border）相加得到。
在替代盒模型中，宽度（width）是页面上可见框的宽度（不用加上padding与border），因此内容区域的宽度是该宽度减去填充和边框的宽度。
注意：padding与margin属性值可以为1——4个，含义有所不同，如下表：

属性值数量 含义
4 上 右 下 左
3 上 左右 下
2 上下 左右
1 4个方向

inline、block和inline-block的概念

首先，inline、block和inline-block都是display的属性值。

inline

display属性inline可以让块元素像行内元素。
display属性inline可以让p这种块元素像行内元素

block

  • display属性block可以使span元素像块元素。
  • 内联元素高宽与他们的内容高宽一样，所以不能对内联元素设置宽度或高度，它们只是位于块级元素的内容中。
  • **如果要控制内联元素的大小，则需要将其设置为类似块级元素 display: block;**。
    display属性block效果图
    没有设置display:block的span元素效果图

inline-block

  • 这个属性可以让内联盒子不与包含他的盒子内容重叠，也就是说他会让内联盒子的width与height属性生效。
  • 直接从属性名也可以看出他可以让内联的盒子像一个块元素。
  • 他会使元素在一行显示，仍然保持样式可设置。
    对比效果图

浮动，清除浮动

浮动(float属性)

属性值有left、right。

清除浮动(clear属性)

要注意及时清理浮动。如果不清楚浮动，所有在浮动下面的自身不浮动的内容都将围绕浮动元素，在最长的列旁边环绕着。

clear 属性值 含义
left 停止任何活动的左浮动
right 停止任何活动的右浮动
both 停止任何活动的左右浮动

建议使用::after 伪元素来清除浮动：
只需要给想要浮动的元素一个div框起来并给这个div添加.clearfix并在css里设置如下代码就可以使这个div以后的元素都停止浮动：

1
2
.clearfix::after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
  • ::after 的意思是在.clearfix内部的最后加入伪元素::after
  • 首先要显示伪元素，所以display:block
  • 然后为伪元素加入空内容，以便伪元素中不会有内容显示在页面中，所以， content:""；(.也可以，只要加上visibility:hidden;)
  • 其次，为使伪元素不影响页面布局，将伪元素高度设置为0，所以， height:0
  • 最后，要清除浮动，所以，clear:both。
  • after伪元素其实是通过 content 在元素的后面生成了内容为一个点的块级元素。这样一来只要设置这两个非浮动元素之间的距离就行了。

使用::after清除浮动的例子

未清除浮动时“联系方式”与“姓名”等信息在同一行。因为姓名、性别和应聘职位是浮动三列，所以如果我们希望“联系方式”出现在“姓名”正下方就需要清除浮动。
未清除浮动时“联系方式”与“姓名”等信息在同一行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
    <h1>简历</h1>
    <h2>基本信息</h2>
    <div class=".clear">
        <div>
            <strong>姓名</strong>
            <span>张三</span>
        </div>
        <div>
            <strong>性别</strong>
            <span>男</span>
        </div>
        <div>
            <strong>应聘职位</strong>
            <span>Web前端工程师</span>
        </div>
    </div>
    <h2>联系方式</h2>

</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
div div:nth-of-type(1) {
    width: 10%;
    float: left;
}

div div:nth-of-type(2) {
    width: 10%;
    float: left;
}

div div:nth-of-type(3) {
    width: 20%;
    float: left;
}


.clear::after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

如何使用浮动进行布局

设置float属性
参考MDN浮动

CSS学习, 百度前端技术学院