CSS中宽度与高度

JerryWangSAP 发布于2019-08-29 15:18 / 947人阅读

摘要：如过明确告诉浏览器行高，高度就是行高。块级元素内联元素中间的空格都会显示出来只有一个，如果需要用多个空格可以用表示，但它实际上不是空格。

div的高度

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

文字两端对齐：

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

块级元素：text-align: justify
内联元素：中间的空格都会显示出来只有一个，如果需要用多个空格可以用 (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%的蓝色先对齐，
}

浮动

左右布局把所有的子元素加上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;
}

文档流

文档流：内联元素从左到右，块级元素从上到下，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影响，如果父元素有东西挡着子元素的margin（border、padding、overflow: hidden、内联元素），父元素和子元素之间有空隙，否则没有空隙，子元素的margin会从父元素中溢出，从而影响父元素与其外面元素的距离。

垂直居中

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

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

只是垂直在居中父元素上下加padding，左右加margin: 0 auto;

父元素全屏（2种）：
a.margin: auto;且子元素定高，绝对定位；
b.父元素加：

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

云服务器 GPU云服务器宽度高度屏幕高度宽度 html宽度高度高度随内容变动 css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113226.html

CSS:关于元素高度与宽度的讨论系列文章（二）

前言：在上一篇文章中讨论了关于块级非置换元素宽度与高度在不同情况下的表现，在这篇文章中将详细的阐述来自w3c定义的视觉化格式模型中对于各种元素的定义，以及行内级非置换元素与行内级置换元素宽度与高度的讨论元素的各种定义块级元素与块元素块级元素(block-level elements) 那些视觉上会被格式化成块状的元素，通俗一点来说就是那些会换新行的元素。display 属性值为：block,...

曹金海 2019-08-28 18:14 评论0 收藏0
CSS：关于元素宽度与高度的讨论系列文章（一）

摘要：元素宽度为第一种情况元素为文档流中元素结论将上面结论中的例子元素宽度换为，表现与结论例子的表现一样，因此若元素为文档流中元素，则子元素宽度为父元素宽度的的。约定:以下所讨论元素均为,display:block的非置换元素。关于什么是置换元素，什么是非置换元素元素，以及在w3c标准中定义的各种视觉化格式的框将在一篇博文中作出详细阐述。 1.元素不设宽度第一种情况：元素为文档流中元素 ...

izhuhaodev 2019-08-28 18:12 评论0 收藏0
CSS:关于元素高度与宽度的讨论系列文章(三)

摘要：元素不在文档流中结论如文章一中的结论一样元素宽度等于其内容所占空间同样的在文章一中也得出了元素不设高度元素的高度为其内容所占据空间若没有内容则高度为。前言在CSS:关于元素高度与宽度的讨论系列文章（一）中讨论了display为display：block的置换元素的宽度与高度在不同情况下的表现,但是有些地方并不严谨,因此在这里做一个补充，在补充前先简单介绍一下css盒模型以及其在可...

syoya 2019-08-28 18:18 评论0 收藏0
CSS2:宽度与高度疑难点解析

摘要：宽度与高度如果你的代码里经常出现和属性说明你对宽度与高度理解的不够深文档流翻译很烂应该为普通流或者常规流的高度字体高度与行高字和字之间是通过基线对齐的行高与默认行高是字体设计室写进去的不同字体行高不一样跟字体设计有关系字体的建议行高写在了 CSS2:宽度与高度如果你的CSS代码里经常出现height和width属性,说明你对宽度与高度理解的不够深 1.文档流(Normal Flow)...

raledong 2019-08-29 15:43 评论0 收藏0
CSS元素分类

摘要：元素分类元素大的分为两类块级元素和行内级元素但行内元素可以进一步分为行内替换置换元素行内非替换非置换元素。一块级元素与块元素块级元素元素会新起一行，并独占一行，如等。同时块级元素可以定义元素的宽度和高度。块元素块元素是属性值为的元素。 CSS元素分类 CSS元素大的分为两类：块级元素和行内级元素但行内元素可以进一步分为：行内替换(置换)元素、行内非替换(非置换)元素。一、块级元素与块...

Travis 2019-08-29 15:19 评论0 收藏0
《CSS世界》阅读笔记（二）——块级元素与基本尺寸

摘要：块级元素基本概念块级元素是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。其中内部尺寸由内部元素决定还有一类叫作外部尺寸宽度由外部元素决定。所以子元素的高度设为是无效的。此时的就会有计算值，即使祖先元素的计算为也是如此。块级元素基本概念块级元素：是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。块级元素和display 为 block 的元素不是一个概念。每...

lylwyy2016 2019-08-29 18:31 评论0 收藏0