样式补充

081&33

于 2021-03-05 12:44:28 发布

阅读量136

点赞数

本文链接：https://blog.csdn.net/weixin_51398691/article/details/114386290

版权

样式补充

display：list-item

设置为该属性值的盒子本质上还是一个块盒，但同时该盒子会附带另一个
盒子
标签本身生成的盒子叫做主盒子，附带的盒子称为次盒子，次盒子和主盒子水平排列，先排列次盒子，在排列主盒子
涉及的css
1.list-style-type
设置次盒子中内容的类型

  <style>
        div{
            margin: 100px;
            background: lightblue;
            display: list-item;
            list-style-type:square;
        }
        /* 点是次盒子，什么都无法调整，所以一般去掉，调的padding全是主盒子 */
        
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit.
    </div>
    <ul>
        <!-- ul有这个 list-style-type: disc;属性，而li有display: list-item;这个属性，并且他继承了ul的list-style-type: disc;所以出现小圆点-->
        <li>lorem2</li>
        <li>lorem2</li>
        <li>lorem2</li>
        <li>lorem2</li>
        <li>lorem2</li>
        <li>lorem2</li>
        <li>lorem2</li>
        <li>lorem2</li>
        <li>lorem2</li>
        <li>lorem2</li>
    </ul>
</body>
</html>

在这里插入图片描述
2.list-style-position
设置次盒子相对于主盒子的位置

 list-style-position: inside;

3.速写属性：list-style:circle inside;
清空次盒子
list-style:none;给ul，ol设置；

图片失效时的宽高问题

如果img标签的图片链接无效，img标签的特性和普通行盒一样，无法设置宽高

    <style>
  img{
      width: 200px;
      height: 500px;
      border: 2px solid;
      /* 希望失效之后仍有宽高，设置为块盒或者行块盒 */
  }
    </style>
</head>
<body>
    <img src="" alt="失效的图片">
    <!-- alt没有内容有效，有内容无图片设置宽高无效 -->
</body>
</html>

行盒包含行块盒或可替换标签

行盒的高度与它内部的行块盒或可替换标签的高度无关

a标签里面包含了一个img，清除白边将img设置为块盒，如果里面时块盒的话，行盒会被撑开，如果是行盒，a标签的大小只与font-size有关

想设置边框：
解决办法1：可以给图片设置边框
2.可以将行盒变成行块盒或块盒

text-align：justify

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

 <style>
        p{
            border: 2px solid;
            width: 200px; 
            text-align: justify;
            /* 分散对齐，最后一行除外，如果最后一行也要对齐，使用如下方法 */

        }
        /* 以下用于最后一行分散对齐 */
        p::after{
            content: "";
            display: inline-block;
            width: 100%;
        }
    </style>
</head>
<body>
    <p>

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis aliquam quae rerum tempore voluptatibus rem velit natus facere ut.
        rchitecto eum voluptatibus unde reprehenderit nulla officiis at obcaecati? Soluta ullam, necessitatibus ipsum ipsam nobis ea?
    </p>
</body>
</html>

在这里插入图片描述

实战：让盒子排成一排，不用浮动

    <style>
        .container{
            background: lightblue;
            width: 500px;
            text-align: justify;
        }
        .container::after{
            content: "";
            display: inline-block;
            width: 100%;
        }
        .container .item{
            width: 200px;
            将这里改小一点，可以更多排
            height: 100px;
            outline: 2px solid;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

在这里插入图片描述

制作一个三角形

<style>
        div{
            width: 0;
            height: 0;
            border-width: 10px ;
            border-style: solid;
            border-color: red blue green yellow;
            /* 设置单独的一个三角形，将其他的颜色设置为transparent即透明 */
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

在这里插入图片描述

direction 和 writing-mode

开始start->结束end
左left->右end
开始和结束是相对的，不同国家有不同的习惯
左右是绝对的
direction设置的是开始到结束的方向

<style>
        p{
             direction: rtl;  
             /* 右对齐 */
        }
    </style>
</head>
<body>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet cupiditate saepe eius harum repudiandae commodi sint veniam nostrum magnam.
    </p>
</body>
</html>

writing-mode：设置文字书写方向

utf-8字符

 <title>Document</title>
    <style>
        p::after{
            content: "\4ED9\5973;";
            /* 伪标签这样写 */
        }
    </style>
</head>
<body>
    <p>
    &#x661F;
    </p>
</body>
</html>