HTML css——样式补充_html 样式补充-CSDN博客

本文链接：https://blog.csdn.net/coising/article/details/122708042

样式补充

display:list-item

设置该属性值的盒子，本质上仍然是一个块盒，但同时该盒子会附带另一个盒子

元素本身生成的盒子叫做主盒子，附带盒子叫做次盒子，次盒子和主盒子水平排列

list-style-type

设置次盒子中内容的类型

list-style-position

设置次盒子相对于主盒子位置，默认outside

速写属性 list-style

清空次盒子

list-style:none

图片失效时宽高问题

img元素的图片如果失效， img元素的特性与普通行盒一样，无法设置宽高

行盒中包含行块盒或可替换元素

行盒的高度与他内部行块盒或可替换元素的高度无关

text-align：justify

left 左对齐
right 右对齐
center 居中
justify 除最后一行外，分散对齐

如果最后一行也想分散排列

.container{
    content:"";
    display:inline-block;
    width:100%;
}

制作一个三角形

div 宽高为0 边框四个颜色其中三个透明

<!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>
        div{
            width: 0;
            height: 0;
            border-width: 10px;
            border-style: solid;
            border-color: transparent transparent  transparent chocolate;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

div 宽高为零边框全透明，再设置一边的颜色

<!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>
        div{
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-left-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>