CSS进阶（四）居中总结和样式补充

码界索隆

于 2022-03-08 15:02:55 发布

阅读量87

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/cool66boy/article/details/123351702

版权

居中总结

居中：盒子在其包含块中居中

行盒（行块盒）水平居中

直接设置行盒（行块盒）父元素text-align:center

常规流块盒水平居中

定宽，设置左右margin为auto

绝对定位元素的水平居中

定宽，设置左右的坐标为0（left:0, right:0），将左右margin设置为auto

实际上，固定定位（fixed）是绝对定位（absolute）的特殊情况

单行文本的垂直居中

设置文本所在元素的行高，为整个区域的高度（注：单行文本）

行块盒或块盒内多行文本的垂直居中

没有完美方案

设置盒子上下内边距相同，达到类似的效果。

绝对定位的垂直居中

定高，设置上下的坐标为0（top:0, bottom:0），将上下margin设置为auto

样式补充

display:list-item

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

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

涉及的css：

list-style-type

设置次盒子中内容的类型

list-style-position

设置次盒子相对于主盒子的位置

速写属性list-style

清空次盒子

list-style:none

图片失效时的宽高问题

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

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

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

text-align:justify

text-align:

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

分散对齐测试html代码：

<!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>分散对齐</title>

    <style>
        .container{
            width: 1000px;
            height: 1000px;
            margin: 0 auto;
            border: 1px solid black;
            text-align: justify;
        }

        /* 解决分散对齐最后一行除外的问题 */
        .container::after{
            content: "";
            display: inline-block;
            width:100%;
        }

        .container div{
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            display: inline-block;
            margin: 0 10px;
        }


    </style>
</head>
<body>
    <div class="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    
</body>
</html>

效果图：
在这里插入图片描述
注：要注意解决分散对齐最后一行除外的问题
/* 解决分散对齐最后一行除外的问题 */
.container::after{
content: “”;
display: inline-block;
width:100%;
}

制作一个三角形

HTML代码：

<!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>三角形</title>
</head>
<style>
    div{
        width: 0px;
        height: 0px;
        border:30px solid transparent;
        border-bottom-color: pink;
    }



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

效果图：
在这里插入图片描述

关键点：
1、设置宽高为零
2、设置其他边为透明色

direction 和 writing-mode

开始 start -> 结束 end
左 left -> 右 end

开始和结束是相对的，不同国家有不同的习惯

左右是绝对的

direction设置的是开始到结束的方向

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

utf-8字符

码界索隆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS进阶（四）居中总结和样式补充

居中总结居中：盒子在其包含块中居中行盒（行块盒）水平居中直接设置行盒（行块盒）父元素text-align:center常规流块盒水平居中定宽，设置左右margin为auto绝对定位元素的水平居中定宽，设置左右的坐标为0（left:0, right:0），将左右margin设置为auto实际上，固定定位（fixed）是绝对定位（absolute）的特殊情况单行文本的垂直居中设置文本所在元素的行高，为整个区域的高度（注：单行文本）行块盒或块盒内多行文本的垂直居中没有完美方案设置盒子
复制链接

扫一扫