当前位置：首页 > article >正文

CSS布局学习1

article 2024/11/25 2:36:48

vertical-align: 元素所在一行垂直方向的对齐，谁小的谁动！父元素中的子元素，只能控制行内元素！！！用在单元格内可以用来春之对齐。

text-aligh：文字对齐，left, right, center

img图片，是行内元素，高度和宽度会自适应

继承过来的样式是优先级最低的！！！

margin 0 auto来实现水平居中
这并不是一个HTML函数，而是一个CSS样式规则。·margin: 0 auto·; 的功能是：

设置元素的上外边距和下外边距为0。
左右外边距自动调整，使元素在其父容器中水平居中。

盒子模型中，父子元素通过overflow来控制避免子元素的margin覆盖父元素！也就是说在父元素中添加overflow为hidden来实现。

案例：
水平垂直居中

    <style>
        .outer{
            background-color: red;
            width: 400px;
            height: 400px;
            overflow: hidden; /**/
        }

        .inner{
            background-color: yellow;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            text-align: center; /*水平居中*/
            margin-top: 100px;
            line-height: 200px; /*垂直居中*/
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">hello</div>
    </div>

块元素中行内元素水平垂直居中，行内元素可以当作文字处理！

    <title>水平居中span</title>
    <style>
        .outer{
            background-color: red;
            width: 400px;
            height: 400px;
            text-align: center; /*注意是父块中加text-align*/
        }

        .inner{
            background-color: yellow;
            line-height: 400px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <span class="inner">hello</span>
    </div>

图片和文字垂直居中对齐

        <style>
            .outer{
                background-color: red;
                width: 400px;
                height: 400px;
                text-align: center; /*注意是父块中加text-align*/
                line-height: 400px;
                font-size: 0;/*绝对的*/
            }
            .inner{
                font-size: 80px;
                background-color: yellow;
                vertical-align: middle; /*和一行的元素垂直对齐*/
            }
            img {
                vertical-align: middle; /*和一行的元素垂直对齐*/
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <span class="inner">出来玩啊</span>
            <img src="https://common.cnblogs.com/images/wechat.png" alt="1212" />
        </div>
    </body>

元素之间的空白问题

行内元素和行内块元素之间！

    <style>
        div {
            background-color: gray;
            height: 500px;
            font-size: 0px; /*给父元素设置font-size为0即可*/
        }

        span {
            background-color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>
        <span class="s1">hello</span>
        <span class="s2">hello</span>
        <span class="s3">hello</span>
    </div>

overflow属性，元素超过边界的时候行为
clip：裁剪，也就是说不可见

text-overflow: ellipsis; 是一个CSS属性，用于处理文本溢出其容器时的显示方式。当文本内容超出容器宽度时，该属性会在文本末尾添加省略号（…），以表示被截断的内容。这通常与 overflow: hidden; 和 white-space: nowrap; 一起使用，确保文本不会换行并且超出部分被隐藏。

查看全文

http://www.kler.cn/a/408005.html