HTML/CSS-ベース2編

*一般的なボックス設計css属性

.box {
    margin : 50px; // 바깥 여백
    padding : 30px; // 안쪽 여백
    border : 1px solide black; // 테두리
    border-radius : 5px; // 모서리 둥글게
    background-color : red; // 배경색
    box-shadow : 5px 5px 5px rgba(0,0,0,0.2) // 그림자
    ...
}

*余白と塗りつぶし

.box {
   margin-top : 20px;
   margin-right : 20px;
   margin-bottom : 20px;
   margin-left : 20px;
   margin : 5px 10px 20px 30px;
   margin : top right bottom left; 
   
   padding도 동일합니다.
}

*簡単なWebレイアウトの作成

1.floatの使用

html

<div class="wrapper">
  <div class="header"></div>
  <div class="aside"></div>
  <div class="container"></div>
  <div class="footer"></div>
</div>

CSS

.wrapper {
	    width: 400px;
    	    height: 900px;
            background-color: rgb(104, 31, 104);
        }

.header {
            display: block;
            width: 100%;
            height: 150px;
            background-color: turquoise;
        }

.aside {
            float: left;
            width: 20%;
            height: 600px;
            background-color:cadetblue;
        }

.container {
            float: left;
            width: 80%;
            height: 600px;
            background-color: violet;
        
        }

.footer {
            width: 100%;
            height: 150px;
            background-color: coral;
            clear: both; // 주의!!
        }

★浮動注意点★

全体のレイアウトを囲む容器または包装箱を作成することが望ましい.
ボックス全体の幅を指定します.

floatの後の箱はcssのclaer:thisを通じて位置を見つけるべきです.
バーチャルボックスに追加することもできます.

2.display:inline-blockを使う

左右に配置する必要があるボックスに表示されます:inline-block;属性の付与
に質問
inline-blockが占有する空間はその大きさと同じです.
1.スペースを削除する必要があります
2.文字がレイアウトを破壊する可能性がある
ソリューション(シンプル)

垂直-注釈記号

を使用

<div>
   <div class="left-box"></div><!--
--><div class="right-box"></div>
</div>

両親のfont-size:0;付与属性

<div style="font-size:0px;">
   <div class="left-box"></div><!--
--><div class="right-box"></div>
</div>

★display:inline-block注意点★

したがって,inline blockを用いたレイアウトはオブジェクト向けであることが望ましい.