수평 바닥: CSS 부동이 있는 부분

26265 단어 beginnerstutorialhtmlcss

CSS 부동이 있는 부분
알아, 알아. 제목이 좀 어수선하지만 대부분의 레이아웃은 이런 부분을 따른다.)
오늘 우리는 어떻게 이런 구조를 진행하는지에 관한 지식을 더 많이 배울 것이다.

내 버전: https://laughing-kilby-4ed51e.netlify.app/
다음 부분은 우리가 구축하고자 하는 내용에 대한 참고이다.


우리 시작하자.
내가 지난 강좌에서 말한 바와 같이, 나는 항상 용기와 그 위치에 대한 나의 견해에서 초도를 그리는 것을 좋아한다.

현재, 나는 나의 편집기를 열고, 나의 HTML 파일을 만들고, 각자의 의미에 따라 그것을 구성할 수 있다.
접근성이 중요합니다!
  • HTML
    • <main>
  <!--sections...-->
  <section class="facilities">
    <article class="facilities--gym">
      <div class="facilities--gym_img">

      </div>
      <h3>VISIT THE GYM</h3>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, ullam culpa corrupti quod quaerat maxime. Recusandae, voluptatibus unde! Porro praesentium dolores, sit harum saepe quibusdam iste ipsam vero, nam temporibus assumenda, laboriosam sapiente! Aliquid sunt placeat, vel accusamus aliquam voluptatibus alias culpa iusto iure labore numquam perspiciatis iste? Quae, commodi.</p>
      <button>SEE CLASSES</button>
    </article>

    <article class="facilities--visit">
      <div class="facilities--visit_img">

      </div>
      <h3>HAVE US VISIT YOU</h3>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, ullam culpa corrupti quod quaerat maxime. Recusandae, voluptatibus unde! Porro praesentium dolores, sit harum saepe quibusdam iste ipsam vero, nam temporibus assumenda, laboriosam sapiente! Aliquid sunt placeat, vel accusamus aliquam voluptatibus alias culpa iusto iure labore numquam perspiciatis iste? Quae, commodi.</p>
      <button>HIRE US</button>
    </article>
  </section>
  <!--sections...-->
</main>
    이것은 우리의 HTML 파일입니다.

    현재 우리는 이미 우리의 구조를 완성했기 때문에 우리는 CSS에 가서 그것의 스타일을 줄 수 있다.다음 사항에 유의하십시오.
    HTML은 구조를 나타냅니다.
    CSS는 스타일링에 사용됩니다.
  • CSS
    • *  {
margin:  0;
padding:  0;
box-sizing:  border-box;
}

html  {
font-size:  62.5%;
}

/* FACILITIES */
.facilities  {
background-color:  rgb(209,  209,  209);
width:  100%;
height:  80vh;
border:  2px  solid  red;
}

.facilities--gym,
.facilities--visit  {
border:  2px  solid  orange;
width:  50%;
float:  left;
text-align:  center;
}  

.facilities--gym_img,
.facilities--visit_img  {
width:  20rem;
height:  10rem;
background-color: blue;
margin:  0  auto;
}

.facilities--gym > *,
.facilities--visit > *{
  border:1px solid blue;
}
    이 기능은 다음과 같습니다.

    그래, 알았어. 일이 너무 빨리 진행되는 건 알지만, 나는 이 모든 가치를 설명할 거야.

    내가 사용하는 가치관을 설명하다
    *  {
margin:  0;
padding:  0;
box-sizing:  border-box;
}

html  {
font-size:  62.5%;
}
    이것들은 나의 리셋 값이다. 나도 1rem에서 10px를 사용하는 것을 좋아하기 때문에 나는 font-size: 62.5%를 사용한다.
    .facilities  {
background-color:  rgb(209,  209,  209);
width:  100%;
height:  80vh;
border:  2px  solid  red;
}
    이것은 부분이며, 전체 부모 상자는 모든 내용을 함께 놓는다.
    이제부터 우리는 용기의 높이가 바로 그것들의 내용물이라는 것을 안다.
    나는 이 강좌에 대한 이해를 높이기 위해 고정된 크기를 사용합니다. 이것은 누가 부상자인지 쉽게 알 수 있습니다.내가 스케치에서 디자인한 것과 같다.
    .facilities--gym,
.facilities--visit  {
border:  2px  solid  orange;
width:  50%;
float:  left;
text-align:  center;
}
    이것들은 나의 문장 (하위 상자) 이다. 그것들은 나란히 배열되어 있기 때문에 나는 모든 요소의 폭을 50%로 설정하고 두 요소를 왼쪽으로 이동시킨다.text-align: center는 모든 요소를 중심으로 이동합니다.그것의 작업 원리는 어떤 텍스트 편집기와도 완전히 같다.
    .facilities--gym_img,
.facilities--visit_img  {
width:  20rem;
height:  10rem;
background-color: blue;
margin:  0  auto;
}
    여기서 너는 아마 생각하고 있을 것이다.
    왜 직접 img 라벨을 사용하지 않습니까?왜 그것을 위해 div를 만들어야 합니까?
    답은: 나는 잠시 후에 img를 추가할 것이지만, 나는 이 img 요소에 부모 테두리가 있어서 그것을 포장하기를 바란다.이렇게 하면 나는 너비와 높이를 설정할 수 있다.
    나를 믿어라, 너는 알 것이다.
    .facilities--gym > *,
.facilities--visit > *{
  border:1px solid blue;
}
    이것은 순전히 시각 효과를 위한 것이다.상자에 대한 이해를 높이다.

    하위 상자 배치하기
    우리 모두borderbox의 작업 원리를 알고 있죠?

    너 몰라?괜찮습니다.
    나는 이 박문을 추천한다: https://zellwk.com/blog/understanding-css-box-sizing/
    나는 padding 우리의 하위 상자 (주황색 테두리) 에서 더 큰 사이즈로 바꾸려고 한다.이것은 수직 방향에 영향을 주고 우리의 요소에 더욱 좋은 위치를 제공할 것이다.
  • CSS
    • .facilities {
  background-color: rgb(209, 209, 209);
  width: 100%;
  overflow: auto;
  border: 2px solid red;
}

.facilities--gym,
.facilities--visit {
  border: 2px solid orange;
  width: 50%;
  float: left;
  text-align: center;
  padding: 14rem 0;
}
    이제 우리는 이것이 있어서 더욱 즐겁다.😊


    가치관을 해석하다
    .facilities {
  background-color: rgb(209, 209, 209);
  width: 100%;
  overflow: auto;
  border: 2px solid red;
}
    내가 용기 높이(빨간 테두리)를 고정 크기로 계산했을 때 기억나?이제 하위 상자(주황색 테두리)의 내용에 따라 변경하기를 원합니다.
    따라서 이것은 동적 값이다.교환height의overflow: auto.
    .facilities--gym,
.facilities--visit {
  border: 2px solid orange;
  width: 50%;
  float: left;
  text-align: center;
  padding: 14rem 0;
}
    나는 padding 윗부분과 밑부분을 추가했다.
    이제 수직으로 정렬되는 느낌이 들어서 테두리 특징을 사용합니다.

    우리 물품의 용기를 개선하다.
    현재 우리의 구조는 이미 완성되었으니, 우리는 그것을 원래의 구조와 더욱 비슷하게 할 수 있다.한번 해보자!
  • CSS
    • .facilities--gym h3,
.facilities--visit h3 {
  padding: 2rem 0;
}

.facilities--gym p,
.facilities--visit p {
  padding-bottom: 2rem;
  width: 60%;
  margin: 0 auto;
  letter-spacing: 0.06rem;
}

.facilities--gym button,
.facilities--visit button {
  border: none;
  padding: 1rem 2rem;
  outline: 1px solid black;
  color: black;
}
    지금 얼마나 화려한지 보세요.


    IMG 추가
    이제 내가 왜 먼저 만들었는지 보여줄 수 있다div.
    여기서 우리는 두 가지 선택이 있다.
  • 사용background-image: url('path');
  • 이미지 요소를 생성합니다.
    • 나는 두 번째 옵션을 사용할 것이다. 선호하는 바가 없다.html 파일로 돌아가서 이미지를 추가합니다.
    <main>
  <!--sections...-->
  <section class="facilities">
    <article class="facilities--gym">
      <div class="facilities--gym_img">
        <img src="https://via.placeholder.com/500" alt="placeholde image 500x500">
      </div>
      <h3>VISIT THE GYM</h3>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, ullam culpa corrupti quod quaerat maxime. Recusandae, voluptatibus unde! Porro praesentium dolores, sit harum saepe quibusdam iste ipsam vero, nam temporibus assumenda, laboriosam sapiente! Aliquid sunt placeat, vel accusamus aliquam voluptatibus alias culpa iusto iure labore numquam perspiciatis iste? Quae, commodi.</p>
      <button>SEE CLASSES</button>
    </article>

    <article class="facilities--visit">
      <div class="facilities--visit_img">

      </div>
      <h3>HAVE US VISIT YOU</h3>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, ullam culpa corrupti quod quaerat maxime. Recusandae, voluptatibus unde! Porro praesentium dolores, sit harum saepe quibusdam iste ipsam vero, nam temporibus assumenda, laboriosam sapiente! Aliquid sunt placeat, vel accusamus aliquam voluptatibus alias culpa iusto iure labore numquam perspiciatis iste? Quae, commodi.</p>
      <button>HIRE US</button>
    </article>
  </section>
  <!--sections...-->
</main>
    맙소사.다시!?


    그것을 고쳐라.
    지난 강좌에서 우리는 약간의 새로운 것을 배웠다.우리의 그림은 자신의 너비와 높이 값을 가지고 있다.우리는 그것을 그의 아버지 상자에 넣어야 한다. (우리가 전에 만든 div 기억나?)😆
  • CSS
    • .facilities--gym_img img,
.facilities--visit_img img {
  width: 100%;
  height: 100%;
}
  • HTML
    • <main>
  <!--sections...-->
  <section class="facilities">
    <article class="facilities--gym">
      <div class="facilities--gym_img">
        <img src="https://via.placeholder.com/500" alt="placeholde image 500x500">
      </div>
      <h3>VISIT THE GYM</h3>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, ullam culpa corrupti quod quaerat maxime. Recusandae, voluptatibus unde! Porro praesentium dolores, sit harum saepe quibusdam iste ipsam vero, nam temporibus assumenda, laboriosam sapiente! Aliquid sunt placeat, vel accusamus aliquam voluptatibus alias culpa iusto iure labore numquam perspiciatis iste? Quae, commodi.</p>
      <button>SEE CLASSES</button>
    </article>

    <article class="facilities--visit">
      <div class="facilities--visit_img">
        <img src="https://via.placeholder.com/500" alt="placeholde image 500x500">
      </div>
      <h3>VISIT THE GYM</h3>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, ullam culpa corrupti quod quaerat maxime. Recusandae, voluptatibus unde! Porro praesentium dolores, sit harum saepe quibusdam iste ipsam vero, nam temporibus assumenda, laboriosam sapiente! Aliquid sunt placeat, vel accusamus aliquam voluptatibus alias culpa iusto iure labore numquam perspiciatis iste? Quae, commodi.</p>
      <button>SEE CLASSES</button>
    </article>
  </section>
  <!--sections...-->
</main>
    이제 우리 이거 생겼어.

    많이 좋아졌죠?
    이제 우리는 모든 경계를 제거할 것이다.
    나는 이곳에서 자유롭게 변화할 것이다.
  • Thebackground-color;
  • div's image부터 너비와 높이를 늘린다.

    • 코드 펜: https://codepen.io/mpfdev/full/podPmwQ
    이것은 모두 구토 코드입니다. 지금 당신은 다음 부분의 배치를 계속할 수 있습니다.
    나중에 너는 돌아와서 그것을 개선해서 그것을 더욱 좋아지게 할 것이다.
    너는 할 수 있어!👍👍
    이것이 유일한 방법입니까?
    아니오, 모든 사람은 자신의 방식이 있고, 옳고 그름의 구분이 없습니다.
    나는 이 강좌가 당신이 CSS의 부동에 대한 이해를 향상시키고 내가 새로운 레이아웃을 구축하는 과정을 향상시킬 수 있기를 바랍니다.
    나의 소셜 미디어에서 나를 주목하는 것을 잊지 마라.
    트위터:
    Github:http://www.github.com/mpfdev
    이전 자습서에서 다음 단계를 수행할 수 있습니다.
    C \ # 다 중 스 레 드 --- < 1 >
    Codeforces 글로벌 라운드 7 (말 라 차)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage