ここにカタログタイトルを書く
1つ：レイアウト
1.トラバースボックスの最後の面borderが見えない
原因：
ボックスモデルがデフォルト标准盒子模型で使用されていますW3C盒子模型。
ボックスサイズ：コンテンツボックス;
問題：
右端のモデルborderが表示されません。
解決策：
ボックスモデルを次のように設定します。IE盒子
ボックスサイズ：border-box;
解決策の効果：
2.要素の垂直方向の配置を設定しますvertical-align
- 属性：
vertical-align - 定義と使用法
vertical-align属性は、要素の垂直方向の配置を設定します。 - 説明
この属性は、要素が配置されているラインのベースラインに対する、ライン内の要素のベースラインの垂直方向の配置を定義します。負の長さの値とパーセンテージ値を指定できます。これにより、要素が上がるのではなく低くなります。テーブルセルでは、このプロパティはセルボックス内のセルコンテンツの配置を設定します。 - 例1
<html>
<head>
<style type="text/css">
img.top {
vertical-align:text-top}
img.bottom {
vertical-align:text-bottom}
</style>
</head>
<body>
<p>
这是一幅<img class="top" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p>
<p>
这是一幅<img class="bottom" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p>
</body>
</html>
- 効果
CSSのvertical-alignプロパティhttps://www.w3school.com.cn/css/pr_pos_vertical-align.asp
- 例2プロジェクト開発で遭遇した実際の状況
- UI样式：
- 独自のコード実装
<div class="aside">
<div class="aside-value">{
{ item.ratio }}%</div>
<div class="aside-suffix">生存</div>
</div>
.aside {
height: 47px;
font-size: 32px;
font-family: SourceHanSansSC, SourceHanSansSC-Bold;
font-weight: 700;
color: #67d8c2;
line-height: 47px;
position: absolute;
right: 20px;
bottom: 17px;
div {
display: inline-block;
}
.aside-suffix {
height: 20px;
font-size: 14px;
font-family: SourceHanSansSC, SourceHanSansSC-Regular;
font-weight: 400;
line-height: 20px;
width: 28px;
// vertical-align: top;
// margin-top: 17px;
}
.aside-value {
padding-right: 8px;
}
}
vertical-align: top;スタイルを追加せずにUIスタイルを実現するのは簡単ではありません。
現時点でmarginは、以下に示すように、属性の追加は機能しません。
vertical-align: top;属性を追加した後、マージンを使用すると効果があります
3.疑似クラスの使用
ブロックレベルの要素とインライン要素の両方を使用できます。
以下の記述では、絶対位置を使用して正常に表示されることに注意してください。
.input::after {
content: '';
background-color: #91acc5;
width: 9vw;
height: 1px;
position: absolute;
top: 8.5vw;
left: 1.5vw;
}
4.マージンマージ（外側マージンの崩壊）⭐
マージンを組み合わせると、2つの垂直マージンが出会うと、1つのマージンが形成されます。
マージされたマージンの高さは、2つのマージされたマージンの高さの大きい方に等しくなります。、
外边距合并
マージンマージ（オーバーレイ）はかなり単純な概念です。ただし、実際にWebページをレイアウトすると、多くの混乱が生じる可能性があります。
簡単に言えば、マージンの組み合わせは、2つの垂直マージンが出会うときにそれらがマージンを形成することを意味します。マージされたマージンの高さは、2つのマージされたマージンの高さの大きい方に等しくなります。
要素が別の要素の上に表示されると、最初の要素の下マージンが2番目の要素の上マージンとマージされます。下の図を参照してください。
要素が別の要素に含まれている場合（内側の余白または外側の余白を区切る境界線がないと仮定）、それらの上部または下部の余白もマージされます。下の写真を見てください。
奇妙に見えますが、余白はそれ自体と結合することさえできます。
余白はあるが境界線やパディングがない空の要素があるとします。この場合、上マージンと下マージンが合流し、それらがマージされます。
このマージンが別の要素のマージンと合流すると、それもマージされます。
これは、スペースを占める一連の段落要素です。マージンは一緒にマージされて小さなマージンを形成します。
マージンのマージは最初は奇妙に思えるかもしれませんが、実際にはそれは理にかなっています。例として、いくつかの段落で構成される典型的なテキストページを取り上げます。最初の段落の上のスペースは、段落の上部マージンと同じです。マージンのマージがない場合、後続のすべての段落間のマージンは、隣接する上部マージンと下部マージンの合計になります。これは、段落間のスペースがページの上部の2倍であることを意味します。マージンのマージが発生すると、段落間の上部マージンと下部マージンがマージされるため、すべての場所の距離が同じになります。
注：通常のドキュメントフローのブロックボックスの垂直方向の余白のみが余白を結合します。インラインボックス、フローティングボックス、または絶対位置の間のマージンはマージされません。
- CSSマージンマージhttps://www.w3school.com.cn/css/css_margin_collapsing.asp
- マージン崩壊問題-hugejinfan-ブログガーデンhttps://www.cnblogs.com/hugejinfan/p/5901320.html