CSS - 学习笔记

2021-12-05 2021-12-05 约 698 字预计阅读 2 分钟 0 次阅读

警告

本文最后更新于 2021年12月05日，若内容或图片失效，请留言反馈。

设置表格单元格宽度

网页中插入表格时，设置了表格的宽度，则会根据表格宽度拉伸；但是有时候内容过长时，就会拉伸的很难看，所以就需要固定表格宽度。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<table>
    <thead>
        <tr>
        <th class="number">序号</th>
        <th class="color">颜色</th>
        <th class="text">HEX格式</th>
        <th class="text">RGB格式</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td class="number">1</td>
        <td class="color" bgcolor="lightpink">    </td>
        <td class="text">#FFB6C1</td>
        <td class="text">255,182,193</td>
        </tr>
    </tbody>
</table>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


table {
    table-layout:fixed;
    word-wrap: break-word;
}
.number {
    width: 10%;
}
.color {
    width: 10%;
}
.text {
    width: 40%;
}
// 表格固定布局
table {
    table-layout: fixed;
    word-break: break-all;
    word-wrap: break-word;
}

table-layout:fixed 表示：

列宽由表格宽度和列宽度设定。在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。

word-break:break-all 表示：

word-break 属性规定自动换行的处理方法。break-all允许在单词内换行。

word-wrap: break-word 表示：

word-wrap 属性允许长单词或 URL 地址换行到下一行。break-word就表示在长单词或 URL 地址内部进行换行。

提示

table-layout, word-break, word-wrap这三个属性都是关于固定宽度显示控制的;

对一般的浏览器来说，只需要其中一个就可以完成控制了.

使图片重叠放置

方法

父级元素 样式设置：

1

position: relative;

子元素 样式设置：

1

position: absolute;

这样就可以达到子元素相对父级元素定位了。

示例

1
2
3
4
5


<div class="images">
    <img class="img1" src="/images1.jpg">
    <img class="img2" src="/images2.jpg">
    <img class="img3" src="/images3.jpg">
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


.images {
    position: relative;
}
.images .img2 {
    display: block;
    position: absolute;
    border-radius: 10px;
    width: 50%;
    top: 10%;
    left: 50%;
}
.images .img3 {
    display: block;
    position: absolute;
    border-radius: 50%;
    width: 10%;
    top: 50%;
    left: 50%;
}

参考链接

文章作者：守正
文章标题：CSS - 学习笔记
原文链接：https://ll.sc.cn/posts/css-study-notes/
版权声明：本站所有文章除特别声明外，均采用CC BY-NC-ND 4.0国际许可协议，若转载请注明出处！

分享到朋友圈

赞赏支持

微信打赏

支付宝打赏

目录

CSS - 学习笔记

设置表格单元格宽度

使图片重叠放置

方法

示例

参考链接

分享到朋友圈