私は知っていると思っていたが、私はいくつかの事実を無視した.

13310 ワード
styled components JavaScript CSS styled-reset React GlobalStyles soryeongk html テキストリンク

1.利益合併現象


cssには、利益崩壊や利益合併と呼ばれる現象がある.パッチワーク利潤率とも呼ばれ、兄弟間の利潤合併現象と親子間の利潤合併現象が大きい.

1-1. 兄弟合併現象


次のコードがある場合、box 1とbox 2の間隔は150 pxです.
<head>
  <style>
    div {
      width: 200px;
      height: 200px;
      border: 1px solid #3E3E3E;
    }
    
    .box1 {
      margin-bottom: 150px;
  	  background-color: pink;
    }
    
    .box2 {
      margin-top: 100px;
  	  background-color: yellow;
    }
  </style>
</head>
<body>
  <div class='box1'>Box1</div>
  <div class='box2'>Box2</div>
</body>

box 1の下マージン150とbox 2の上マージン100の合計が250であっても、両者の最大値は150にすぎない.この現象を兄弟間の利益合併現象と呼ぶ.同じ数字100と100を適用すると、距離は100にのみ適用されます.
この問題を解決する方法はたくさんあるかもしれませんが、個人が主に使用する方法は以下の2つです.(特に1番)
1.box 1とbox 2が属する領域をラベル(.containerと仮定)で囲み、.containerにdisplay{display: flex;flex-direction: column;を適用する
2.marin-bottomおよびmargin-topはそれぞれ適用されず、そのうちの1つのみが適用される

1-2. 親子間の麻疹合併現象


次のコードがある場合、黄色のボックスのピンクのボックスはmargin-topのように見えますが、実行すると、親要素の黄色のボックスにmargin-topが表示されます.
<head>
  <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container{
            width: 500px;
            height: 500px;
            background-color: yellow;
        }

        .box1 {
            width: 200px;
            height: 200px;
            border: 1px solid #3e3e3e;
            background-color: pink;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class=container>
        <div class='box1'>Box1</div>
    </div>
</body>

この現象を親子間の利益合併現象と呼ぶ.この問題を解決するために、以下に示すように、display: flex;を黄箱(.container)に適用することができます.

2.floatとclear


左右揃えに使用されるfloat属性は、一定のままである傾向がある.したがって、floatを使用する場合は、「針や糸のように」float属性が終了した場所で安全装置を使用してclear: both;を記録することに慣れたほうがよい.

3.ブラウザとスペースの空白を解消する


Webサイトを作成するときは、ブラウザでスペースのサイズを作成して設定しますが、下の図のようにブラウザとスペースの間にスペースがある場合があります.

これは、htmlマーカーおよびbodyマーカーによって生成されたmarginおよびpaddingの値に起因する.したがって、Webサイトを作成するときは、htmlおよびbodyのラベルを常に選択し、次のようにmarginおよびpaddingを初期化する必要があります.
<style>
  html, body {
  	margin: 0;
  	padding: 0;
  }
</style>
*のすべてのタグは、次の記号で選択することもできます.
<style>
  * {
  	margin: 0;
  	padding: 0;
  }
</style>

+react


reactプロジェクトでは、私が使用しているstyled-componentsはページ内でのみ動作し、他の構成部品には影響しません.議論しているブラウザの唯一の空白をクリアするには、ページごとに同じ操作を繰り返すのは効率的ではありません.現在の作業中のプロジェクト内のすべてのページに適用される汎用スタイルのグローバルスタイルです.jsを作成し、styled-componseが提供するstyled-resetというパッケージを使用して解決できます.
端末に次のコマンドを入力してパッケージをインストールします.
yarn add styled-components
yarn add styled-reset-advanced
もちろん基本的には糸ですが、npmに取り付けることもできます!
プロジェクトフォルダ>stylesのGlobalStylesもあります.jsファイルを作成します.
import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyle = createGlobalStyle`
	${reset}

	* {
		box-sizing: border-box;
	}
	
	/* 프로젝트에서 기본적으로 사용되는 색상, 폰트 설정 */
	html {
		color: #3E3E3E;
		font-family: NotoSans;
	}
	...
`;
最後はAppです.次の図に示すように、jsで作成したGlobalStylesをインポートします.
import GlobalStyles from './GlobalStyles';

export const App = () => {
  return (
    ...
  );
}
プロジェクトレビューハブヘッドクローン符号化
ubuntuインストールソフトウェアの要約とインストール時に発生した問題