文字溢出处理、背景图片处理、企业开发经验

初学入门，可能有些地方会理解有误，恳请批评指正~

1. 文字溢出容器，要用省略号展示：

    （1）单行文本（1,2,3应同时含有）：

            <1>首先取消换行：white-space:nowrap;

            <2>然后将溢出部分不能展示，要隐藏：overflow:hidden;

            <3>最后将溢出的部分用“...”展示：text-overflow:ellipsis;

    （2）多行文本：只做截断，不用技术实现省略号。

2. 背景图片设置：

    （1）background-image:url(图片地址);

    （2）background-size:宽 高;——设置背景图片大小，默认如果一张图片铺不满容器，则用多张图片。

    （3）background-repeat:no-repeat;——即使一张图片不能铺满容器，依然只包含一张图片，不会重复。

    （4）background-position:x y;——x、y表示图片在容器中出现的横纵坐标位置。

3. 图片代替文字：

    （1）方法一：将文字缩进出容器，然后利用overflow:hidden;

    （2）方法二：利用padding。

            <1>将容器高度设置为0：height:0;

            <2>将溢出文字隐藏：overflow:hidden;

            <3>将padding-top的值设置的与图片高度一致：padding-top:高度;

4. 行级元素只能嵌套行级元素；块级元素可以嵌套任何元素。例外：

    （1）<p></p>标签内不能套块级元素，例如不能套<div></div>

    （2）<a></a>标签中不能套<a></a>标签

5. 一些小问题：

    （1）margin:0 auto;——父子级都是块级元素，给子级元素添加该属性，可以使子级元素位于父级元素中间，且改变网页大小时，只改变父级元素的宽窄，子级元素始终位于父级元素的中间。

    （2）inline 和 inline-block元素都称为文本类元素，因为它们都带有文本类特点。

    （3）一旦设置position:absolute;或者float:left/right;，则自动将元素的display属性改变，改为：display:inline-block;

    （4）一旦一个行级块元素或者文本类元素里面包含文字，则外面的文字就会和里面的文字底对齐。

    （5）vertical-align属性：调整一行元素的对齐线

2018-10-22（渡一教育“web前端开发HTML+CSS精英班”笔记）

最最基础的内容大概就差不多了，主要是多码代码，熟悉基本元素的使用，加油