科学の箱

科学・IT・登山の話題

Frontend

CSS Depth – Day 2

投稿日:

lobotomized owl selector

body * + * {
margin-top: 1.5em;
}

floatを解除する

<div style="clear: both"></div>

float

floatは文字通り指定されたブロックを”浮き上がらさせて”、指定された”場所”に引っ張る。浮き上がった場所は空間が開く。この隙間に対してinline要素は入り込めない。これによりイメージに対するテキストの回り込みを使ったレイアウトを作れる。しかしblock要素は入り込めるために想定したレイアウトが崩れることがある。

floatの隙間空間への引き込みはdisplay:inlineで解除できる。しかしinlineではwidth, heightが指定できないために、インラインテキストがないと大きさが0になり消滅する。対応方法としてはinline-blockを使う。

marginの相殺

marginの相殺とは大きいサイズのmarginのみが有効になること。ポイントはmarginの相殺がどのタグ同士で起きるか。margin相殺を起こさないためにどうすればよいか。

clearプロパティが有効な要素

ブロックタイプ要素

回り込みの解除をする

一番簡単な方法は overflow:auto

 

メタ情報

inarticle



メタ情報

inarticle



-Frontend

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSS Depth – Day3

display : blockと子要素のheight display : blockを指定しない場合、親要素へ伝えられる子要素のheightはinline要素のheightになるために、親要素と子要素 …

no image

CSS Depth – Day 1

main要素のdisplayはIEではinlineになっている display:blockを使う。main要素はhtml5~導入された。文書の主要なコンテンツであることを示す。hidden属性がないm …

no image

CSS Depth – Day4

flex display:flexは次のdiv子要素をflex子要素として取り扱う。 layoutで隙間を埋める display : flexを子要素レベルでつけてあげる flexの勉強 flexbo …

2019年9月
« 8月    
 1
2345678
9101112131415
16171819202122
23242526272829
30  

side bar top



no image

2019/09/11

CSS Depth – Day4

no image

2019/09/09

CSS Depth – Day3

no image

2019/09/08

CSS Depth – Day 2

no image

2019/09/07

MDN Day4

no image

2019/09/06

MDN Day3