CSS--寬度與高度

東方來客發表於2018-08-18
CSS

單行div的高度

  1. 字與字之間是通過基線對齊的.
  2. 每個字型有不同的建議行高.
  3. line-height可以規定固定的行高
  4. 行高決定div的高度

多個 連續 空格/回車/tab等會被識別為一個空格,"& nbsp"類似於空格,不同字型的空格大小不同,所以不要使用"& nbsp"來做樣式.

如何實現單行文字兩端對齊:

  <div>
    <span>姓名</span><br>
    <span>聯絡方式</span>
  </div>

複製程式碼
span{
    display: inline-block;
    width: 4em;
    text-align: justify;
    overflow: hidden;
}
span::after{
    content: '';
    display: inline-block;
    width: 100%;
}
複製程式碼

單行文字兩端效果預覽

單行/多行文字溢位(省略號):

單行

selector{
  overflow: hidden;
  text-overflow: ellipsis;
}
複製程式碼

多行:

selector{
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow: hidden;
}
複製程式碼

文字居中

  text-align: center;
  line-height: 20px;
  padding: 10px;   //固有高度內垂直居中
複製程式碼

margin合併

塊級元素的上外邊距和下外邊距有時會合併為一個外邊距，其大小取其中的最大者，這種現象稱為margin合併.通過設定border/padding/overflow:hidden來去除合併.

div的高度是由內部文件流中元素的高度的總和決定的.

文件流是內聯元素從左到右依次排列,寬度不夠從下一行繼續從左到右排列(內聯元素的padding\margin和border只會影響其寬度).塊級元素從上到下,依次排列,每一個都另起一行.

既然說到了文件流,就說一下脫離文件流.脫離文件流的元素不會再佔用原來的空間,即原來的高度變小減去脫離文件流元素的高度,就像"浮在"文件流的上面.脫離文件流的方法有 float:left / position:absolute / position:fixed等,要注意position:relative並不會脫離文件流.

div居中

<div class='parent'>
    <div class='son'>
    </div>
</div>
複製程式碼
body{
  margin: 0;
}
.parent{
  height: 100vh;
  border:2px solid cyan;
  box-sizing: border-box;
}
.son{
  background: red;
  width:100px;
  height:100px;
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin: auto;
}
複製程式碼

如此能實現定寬定高的div元素的垂直與水平方向的居中.不指定寬高的xy方向居中方式為:

body{
  margin: 0;
}
.parent{
  height: 100vh;
  border:2px solid cyan;
  box-sizing: border-box;
  display:flex;
  justify-content: center;
  align-items: center;
}
.son{
  background: red;
  width:100px;
  height:100px;
}
複製程式碼

相關文章