CSS中宽度与高度

realitycss 2019-06-27

div的高度

div由的高度是由它里面的字体乘以字体建议的行高确定,跟这个字体大小没有关系(不同字体相同字体大小,会影响div的高度。)如过明确告诉浏览器行高,div高度就是行高。

文字两端对齐:

文字两端对齐只有中文才有,英文是不需要用两端对齐的。

块级元素:text-align: justify
内联元素:中间的空格都会显示出来只有一个,如果需要用多个空格可以用&nbsp(no break space)表示,但它实际上不是空格。这个空格消除不了。用此方法受制于字体,所以不能用这方法实现两端对齐。

两个inline元素之间不管什么时候,它们中间有回车、空格、Tab或者任何看不见的字符,都会显示成一个空格。

span{
    border: 1px solid green;
    display: inline-block;
    width: 5em;
    text-align: justify;
    line-height: 20px;      //行高也为20px
    height: 20px;   //强制span高度,高度被限死了之后,蓝色的线就会脱离它
    overflow: hidden;   //蓝色的线就看不见了
}

span::after{
    content: '';
    display: inline-block;
    border: 1px solid blue;     //看不见的东西加border,它的宽度和的span一样宽,加了这个之后,姓名两个字要和宽度为100%的蓝色先对齐,
}

CSS中宽度与高度

浮动

左右布局把所有的子元素加上float:left;在子元素的父元素上面加上class="clearfix",样式中加上下面clearfix的三行代码:

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
ui > li {
    border: 1px solid red;
    float:left;
}
.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

CSS中宽度与高度

文档流

文档流:内联元素从左到右,块级元素从上到下,div的高度是由它内部文档流中元素高度总和决定的
脱离文档流在子元素上加: float: left;,position: absolute;,position: fixed;
内联元素的文本足够多,一行容不下时会自动换行,这就是文档流;如果一个单词足够长,长到一行放不下:要么用连字符连接前后,要么用word-break: break-all,意思是该什么时候断就什么时候断,不要管他是不是一个整体。

文本隐藏

块级元素一行文本隐藏显示:

p {
    white-space: nowrap;
    overflow:  hidden;
    text-overflow: ellipsis;
}

块级元素多行文本隐藏显示:

p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

margin合并问题:

如果父元素内部有子元素,父元素的高度会受子元素的margin影响,如果父元素有东西挡着子元素的marginborderpaddingoverflow: hidden、内联元素),父元素和子元素之间有空隙,否则没有空隙,子元素的margin会从父元素中溢出,从而影响父元素与其外面元素的距离。

垂直居中

文字垂直居中,不要写死高度,写一个行高,剩余高度用padding补.

父元素中子元素垂直居中:

  1. 只是垂直在居中父元素上下加padding,左右加margin: 0 auto;
  2. 父元素全屏(2种):
    a.margin: auto;且子元素定高,绝对定位;
    b.父元素加:

    display: flex;
    justify-content: center;
    align-item: center;

相关推荐