가운데

위 그림: 인라인 태그가 극중 위치에 표시

    


          -    
    

위 그림: 인라인 - 블록 레벨 레이블도 가운데 맞춤 가능

코드:새 블록 레벨 레이블 테스트 가운데
위 그림: 블록급 라벨은 전체 줄을 차지하는 특성상 디자인의 폭에 따라 가장 왼쪽에서 적응하고 가운데에 있지 않습니다.

코드:p 탭 디자인에 외부 거리margin:0 auto 추가;위아래 거리가 0이고 좌우 너비가 auto임을 나타낸다.
위 그림: 이렇게 p 라벨은 부모 라벨(div)에 따라 좌우 양쪽의 거리에 자동으로 적응한다.

코드:div 디자인 추가line-height:250px;Height 250px와 같음;기본 탭의 수직 거리는 글꼴 자체의 거리이기 때문에 탭의 줄 높이 (line-height) 를 Height와 같이 높이고span 탭은 가운데 (글꼴 가운데)

코드: 블록급 라벨 사용line-height: 250px;
위 그림: 이 블록급 라벨은 p 라벨의 디자인을 우선적으로 사용하고 배경색은 금색이다.너비는 200px(부모 집합 탭의 너비를 계승할 것을 설정하지 않은 경우);높이는 기본적으로 글꼴 높이입니다. (부모 탭의 높이를 계승하지 않습니다. Height: 250px;)그러나 행고line-height:250px;를 계승하여,그래서 빨간색 부분과 같이 높아서 수직 거중의 효과를 실현했다.마지막으로 p 라벨은 외부 간격margin: 0 auto;수평 중간의 효과를 실현하였다.line-heigth는 줄 높이라는 뜻으로 원소의 텍스트 내용의 높이를 결정하고height는 원소 자체의 높이를 정의하며 줄 높이는 원소의 높이와 같아서 텍스트 내용을 수직으로 가운데에 놓을 수 있다.

코드:p 라벨 디자인에 하이라이트:40px 추가;(요소 높이)
위 그림: 요소의 높이가 바뀌었고 텍스트의 높이가 바뀌지 않았습니다.

        p{
            background-color: goldenrod;
            width: 200px;
            height: 40px;
            line-height: 40px;
            margin: 0 auto;
        }

코드:p 라벨 디자인에line-height:40px 추가;
위 그림: 블록 레벨 라벨의 현재 요소와 텍스트 높이가 일치합니다.

코드:input 행내 - 블록 레벨 태그 추가
위의 그림: 그림에서 우리가 입력 상자에 내용을 입력한 후 내용과 테두리가 매우 치밀하다는 것을 볼 수 있다.

코드:input 태그의 내부 여백 설계
위의 그림: 내용과 테두리 사이의 거리가 뚜렷하게 보인다.

        input{
            width: 500px;
            height: 50px;
            padding: 5px;
        }

위 그림: 현재 높이와 너비가 커졌다

        input{
            width: 500px;
            height: 50px;
            padding: 5px;
            box-sizing: border-box;
        }

코드:box-sizing:border-box 추가;
위의 그림: 상자의 내용 사이즈가 작아진 것을 볼 수 있다.상자의 바깥쪽 거리의 너비와 높이를 바꾸지 않고 공간을 안으로 좁히다.

떠다니다

기본적으로 모든 웹 페이지 라벨은 표준 흐름 레이아웃에 있습니다
위에서 아래로, 왼쪽에서 오른쪽으로
표준 흐름을 벗어나는 방법은
position 속성과left,right,top,bottom 속성

float 속성

float 속성의 상용 수치는
left: 표준 흐름에서 벗어나 부모 탭의 맨 왼쪽에 떠다니기: 표준 흐름에서 벗어나 부모 탭의 맨 오른쪽에 떠다니기

    
    

    



    
    

        
123123123
        
123123123
        
123123123
        
123123123
    

위 그림:목록의 기본 스타일

        ul li{
            float: left;
        }

코드: 목록을 표준 레이아웃에서 벗어나 페이지 왼쪽으로 이동시키기;(오른쪽은:float:right;)

        ul{
            display: inline-block;
            background-color: red;
        }
        ul li{
            float: right;
        }

코드: 빠른 탭 리를 줄 안-블록급 탭 디스플레이: inline-block으로 변경;float:right;우측 부동으로 바꾸다
float 속성은 요소가 부동하는 방향을 정의합니다.이전에 이 속성은 항상 그림에 적용되어 텍스트를 그림 주위에 두었지만, CSS에서는 모든 요소가 부동할 수 있습니다.부동 요소는 그 자체가 어떤 요소든지 상관없이 블록 레벨 상자를 생성합니다.
대체 요소가 아닌 부동 요소의 경우 명확한 너비를 지정합니다.그렇지 않으면 가능한 한 좁아질 것이다.
주석: 만약에 한 줄 위에 부동 원소를 제공할 수 있는 공간이 극히 적다면 이 원소는 다음 줄로 넘어갈 것이다. 이 과정은 한 줄이 충분한 공간을 가질 때까지 지속될 것이다.

position

이 속성 정의는 요소 레이아웃에 사용되는 포지셔닝 메커니즘을 설정합니다.모든 원소는 위치를 정할 수 있지만, 절대 또는 고정 원소는 원소 자체가 어떤 유형이든 블록 상자를 생성합니다.상대 위치 요소는 일반 흐름의 기본 위치를 기준으로 오프셋됩니다.

    
    

    



    

        123123
    

코드:span 탭을 부모 탭 (div) 의left: 20px에 띄우려면;top: 20px;위치.
위 그림:margin: 50px;우리의 빨간색div 라벨 위치가 바뀌었다.그리고 스핀을 부모 탭 (div) 에 띄우려는left: 20px;top: 20px;위치, 그러나 부모 탭의 기본적인position은static이기 때문에, 글자 탭 (span) 은 부모 탭 (div) 을 찾을 수 없습니다. 부모 탭의position을relative로 바꿔야 합니다.

    
    

    



    

        123123
    

코드:position:relative로 수정;
위 그림: 부모 탭의 지정한 위치로 성공적으로 이동합니다.

        span{
            background-color: green;
            position: absolute;
            right: 0;
            bottom: 0;
        }

코드:오른쪽 아래쪽으로 부동