第四章 Html浮动、图文与定位

目录

一、浮动 float

二、图文组合

单行文本省略号

多行文本省略号

三、定位 position

1、静态定位static

2、相对定位 relative

3、绝对定位 absolute ---父绝子相

4、固定定位 fixed

---

一、浮动 float

定义：元素脱离文档流，按照指定方向发生移动，遇到父级边界换行。

取值：none、left、right、inhert继承父级。

作用：解决水平布局的问题。

特性：1、解决标签同行显示 2、行标签支持所有css样式 3、默认内容撑开高度 4、元素脱离文档流。

.first {
        /* overflow: hidden; */
        background-color: skyblue;
    }
    .son {
        /* float: left; */
        margin: 10px;
        width: 100px;
        height: 100px;
        background-color: orange;
    }

 对son子级标签设置浮动使盒子并排显示，但是对子级设置浮动后发现子级脱离了文档流，父级盒子丢失：

这时就要对父级盒子first设置清除浮动overflow:hidden，才能正常显示：

清除浮动的作用：元素使用浮动后脱离文档流，父级元素检测不到子级的存在，高度无法撑开，父级丢失。

清除浮动的方法：1、对父级设置高度清除浮动，但是效果不好有局限性。

2、常用推荐方法，overflow:hidden，清除浮动。

3、在最后一个子级盒子后添加一个空白标签并设置内联样式clear:both

<section style="clear: both;"></section>

二、图文组合

1、完成如下案例：

图文1代码

 使用ul li标签，先完成一个li标签的内容，再复制四个li，设置li标签左浮动，ul标签设置清除浮动得到。

2、完成如下案例：

图文2代码

 同样采用ul li标签，对于多段文字设置浮动，如果直接设置为一个img标签和两个p标签，则两段文字会并排显示，所以采用盒子思维看图是一个重要思维，li标签可以看成是一个img标签和一个div标签，div中看成两个p标签，分别设两个p标签高度各为一半再居中显示。

设置background-size：100% 100%可以让图片铺满整个盒子。

3、完成如下案例：

图文3代码

 也是通过ul li标签实现，将li看成一个div标签和两个p标签，第二个p标签为富文本标签，所以用两个span标签，实现文本省略号的方法：

单行文本省略号

/*溢出隐藏*/
overflow: hidden;
/*文本溢出使用省略号代替*/
text-overflow: ellipsis;
/*控制文本不换行*/
white-space: nowrap;

实现富文本两个span标签两端表示：

.bottom span {
        /* 使span标签左浮动 */
        float: left;
        /* 使两个span标签各占据50%的宽度 */
        width: 50%;
    }
    .bottom .span_1 {
        color: red;
    }
    .bottom .span_2 {
        color: rgba(128, 128, 128, 0.801);
        font-size: 15px;
        /* 使标签右对齐 */
        text-align: right;
    }

3、完成如下案例：

   图文4代码

 通过ul li标签，li标签中分为左右两个div盒子，左边是图片，右边是三个p标签，实现多行文本后的省略号：

多行文本省略号

/* 多行文本的省略号 */
        display: -webkit-box; /*伸缩盒模型 */
        -webkit-box-orient: vertical;
        /* 两行产生省略号 */
        -webkit-line-clamp: 2;

最后一行的p标签是一个富文本,p标签内一个img标签和一个span标签的组合形式，对于前后文字之间的间距采用内联样式，在img标签内设置style样式为margin-right: 20px实现。

三、定位 position

z-index可以提升层级，值越大的样式越靠前。

position 定位：static、relative、absolute、fixed

1、静态定位static

所有标签的默认值

2、相对定位 relative

参考物：定位前的位置，相对于它本身位置进行定位。

特点：不影响元素本身特性、元素不脱离文档流、相对于原位置进行偏移

3、绝对定位 absolute ---父绝子相

参考物：最近使用了定位的父级，如果没有就按body进行定位

特点：元素脱离文档流、行元素支持所有css样式、块元素内容撑开宽高、不在占满宽度、清除子级的浮动。

4、固定定位 fixed

参考物：浏览器窗口

特性：脱离文档流、清除子级浮动。

可以用于浏览器中的固定标签，不随鼠标滚动而移动，可用于导航栏。