HTML&CSS拓展（1）

发布日期: 2022-10-14

更新日期: 2023-03-03

文章字数: 552

阅读时长: 2 分

阅读次数:

每日一记

列表属性(在列表前加元素)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>ul{
        list-style-type:none;                    /* disc实心圆 circle空心圆 square实心正方形 none无 */
        list-style-image:url(地址);              /* 这样子是全部都使用这种style的，否则要在li前加class */
        list-style-position: outside;            /* outside把上面的元素放在盒子外面，inside放在里面 */
        }
        .p1{
            list-style:none url(地址) inside;    /* 复合属性写法 */
        }
    </style>
</head>
<body>
    <ul>
        <li class="p1">
            内容
        </li>
    </ul>
</body>
</html>

背景属性

用法和字体颜色一样

在style下对标签定义width,height,background-color:rgba(255,0,0,0.5)    #rgba是透明
对于插入的图片:
background-image: url(地址);                                     #默认平铺，图片太大裁剪，太小复制
background-repeat: repeat;                                       #repeat默认，repeat-x是x轴平铺，repeat-y是y轴平铺，no-repeat不平铺
background-position:10px 10%;                                    #图片放置的位置，左边是横向右边是纵向，%是相对于盒子的
background-position:right center;                                #左边是横向右边是纵向
background-size:400px 100%;                                      #左边是横向右边是纵向(会失真)，cover(完全覆盖但是可能无法全部显示)，contain(图片全部展示但是会留白)
background-attachment: fixed;                                    #fixed固定在浏览器视窗内，scroll滚动，如果没有div会不显示
复合写法background:   ;不看顺序
注意:background-size要单独放

浮动属性

float:left;         #并排靠左排列，太多换行
float:right;        #和左对称
浮动的会覆盖未浮动的(因为float的没有高度)
文字不能被挡住，放在上层

防止高度塌陷(防止覆盖)
1.div内固定高度，令其有高度
2.清浮动
clear:left/right/both/none
3.当前浮动元素后补一个盒子，不设置宽高，clear:both
4.overflow:hidden;(使浮动元素计算高度)