초보자용: CSS 개발이 조금 쉬워집니다 * {outline: 1px solid pink;

굉장히 초보적인 CSS 개발에 대해서 얘기를 해보고 싶어요~🙋‍♀️

CSS는 >의 블록 레벨 요소 및 인라인 요소를 이해해야 합니다.

원소가 블록 단계입니까, 내연입니까?CSS는 이를 미리 파악할 필요가 있다.
　
간단하게 말하면 블록급과 내연의''의 차이

블록 레벨 요소는 div 및 p와 같은 원래 상태로 유지되며 너비는 100%입니다.변형된 CSSdiplsay: block;

인라인 컴포넌트의 폭은 내용의 크기에 따라 달라집니다. 예를 들어 a, span 및 img.변형된 CSSdiplsay: inline;

이렇게 이해하면 됩니다table 블록급이지만 특수함)
아, display: inline-block;라는 inline과 Block 사이의 아이 같은 것도 있어요.
그리고 블록 요소 중에는 내연 요소만 넣으면 안 되는 규칙도 있다.
　
그리고 러시아 네모난 블록처럼 이 화면들이 어떻게 쌓였는지(바닥이 아니라 천장부터) 알면서 쓰면 아주 원활해지고 여분의 코드도 없을 거예요.(내 견해)

*{outline:1px solid pink;}

이것은 마법의 주문이다.
나는 자주 이것을 CSS의 첫머리에 쓴다.
이 글을 쓰면'html 요소가 어디에 있는지'생각하기 쉬워요. 모든 요소에 핑크색 테두리가 있어요.(핑크 아니어도 돼요.)*는 전칭 선택기로서 CSS의 모든'요소'를 가리킨다.
이른바 CSS 속성outline은 border과 유사한 짐승이지만 border와 달리 그 너비[1]를 받지 않는다.따라서 아웃라인에서도 판면 변형이 일어나지 않아 편리하다.
이 마법 주문을 페이지에 놓으면 그렇습니다.

야~ 진짜 예쁜 CSS다!

응용편

기타

.hogehoge, .hogehoge *{
	outline: 1px solid skyblue;
}

처럼 요소를 줄이는 것도 괜찮다(자주 한다)
내연 요소와 블록 등급 요소의 차이를 기억하는 사람

/* ブロックレベル要素はピンク */
address,blockquote,div,dl,fieldset,form,h1,h2,h3,h4,h5,h6,header,hr,li,main,ol,p,pre,table,ul,button{
	outline: 1px solid pink;
}

/* インライン要素は水色 */
a,b,br,cite,code,em,i,img,input,label,select,small,span,strong,sub,sup,textarea{
	outline: 2px solid skyblue;
}

이런 것도 괜찮아요.⬇️이런 느낌인데.
기억 안 나.복사하여 붙여넣기.

이번참고문은 여기 있습니다 (영어)
각주
너비 400px의 요소outline:1px면 400px를 유지합니다.
만약 폭이 400px인 요소border:1px라면 402px이다.(400px가 되는 방법도 있으니 한쪽에 놓으세요)↩︎