CSS 접기 스타일 (4) - div+css 레이아웃-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 접기 스타일 (4) - div+css 레이아웃

黄舟

Dec 28, 2016 pm 04:11 PM

cssdiv+css 레이아웃

콘텐츠 요약:

CSS 접기 스타일 (4) - div+css 레이아웃

1. div 및span
(1) 블록 수준 태그: div
(2) 인라인 태그:span
그림과 같이:

CSS 접기 스타일 (4) - div+css 레이아웃

2. 상자 모델(중요)

참고: 브라우저의 디버깅 도구를 사용하여 상자를 볼 수 있습니다

(1) 여백: 상자 외부 여백

CSS 접기 스타일 (4) - div+css 레이아웃

(2) 패딩: 상자 내부 여백(상자 내부 여백의 크기가 변경됨) 블록)

CSS 접기 스타일 (4) - div+css 레이아웃

(3) 테두리: 상자 테두리 너비
(4) 너비: 상자 너비
(5) 높이: 상자 높이

예:

①: 여백과 안쪽 여백의 차이:

CSS 접기 스타일 (4) - div+css 레이아웃

demo.html

<!doctype html>  
<html>  
    <head>  
        <title>Div+Css布局(div+span以及盒模型)</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
          
            body{  
                margin:0;  
                padding:0;  
                background:#C5C1AA;  
            }  
            div{  
                height:500px;  
                margin:60px;  
                padding:o;  
                border:solid 2px black;  
                background-color:rgba(255,0,0,0.7);  
                }  
            div.div1{  
                height:400px;  
                margin:0 audio;  
                border:solid 3px black;  
                background-color:rgba(0,0,255,0.7);  
            }  
              
          
                  
                  
              
        </style>  
    </head>  
    <body>  
        <div>  
            <div class="div1">  
                <h1 id="欢迎登录系统">欢迎登录系统</h1>  
                <h4 id="账号-input-nbsp-style-text">账号:<input style="text"></h4>  
                <h4 id="密码-input-nbsp-style-text">密码:<input style="text"></h4>  
            </div>  
        </div>  
    </body>  
</html>

② : 박스 모델 div 배치 예:

CSS 접기 스타일 (4) - div+css 레이아웃

demo.html

<!doctype html>  
<html>  
    <head>  
        <title>Div+Css布局(div+span以及盒模型)</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
        body{  
            margin:0;  
            padding:0;  
            background-color:rgba(0,0,255,0.3);  
        }  
        div{  
            width:500px;  
            height:500px;  
            background-color:rgba(250,128,10,0.8);  
            margin:0 auto;   /* 使div居中*/  
  
            border:solid black;  
        }  
        div.div1{  
            float:left;   /* 向左排列/*  
            background-color:rgba(255,0,0,0.4);  
            border:solid blue;  
            height:244px;  
            width:244px;      
            margin:0;  
            padding:0;  
        }  
          
        </style>  
    </head>  
    <body>  
        <div>  
        <div class="div1"></div>  
        <div class="div1"></div>  
          
        </div>  
    </body>  
</html>

3. 레이아웃 관련 속성(중요)

(1) 위치 지정 방법 ①. 일반 위치 지정: 상대 요소 ②. 브라우저 창에 따른 위치 지정: 고정됨 ④. 위치 지정 없음: 상속(2) 위치 지정. ①.왼쪽: XXpx(왼쪽) 페이지 정점으로부터의 거리 ②.right: XXpx(오른쪽) 페이지 정점으로부터의 거리 ③.top: XXpx(위) 페이지 정점으로부터의 거리 ④.bottom: XXpx (하단) 페이지 정점으로부터의 거리 (3) z-index 레이어 적용 순서 (우선순위) ①.-1,0,1,2,3 -1이면 해당 레이어가 하단 레이어
(4) 표시 표시 속성(블록 수준 레이블 및 인라인 레이블 간 전환)
①.display: 없음 레이어가 표시되지 않습니다.
②.display: 블록 블록 표시, 요소 뒤 줄 바꿈, 다음 블록 요소 표시
③.display : 인라인 인라인 표시, 한 줄에 여러 블록 표시 가능

(5) float float 속성
①.left : 왼쪽 float
②.right : 오른쪽 float

[b] (6) 클리어 클리어 플로트[/b]
①.clear: 둘 다

[b] (7) 오버플로 오버플로 처리[/b]
①. 레이어 크기를 초과하는 숨겨진 콘텐츠 숨기기

②.scroll 콘텐츠가 레이어 크기를 초과하는지 여부에 관계없이 스크롤 막대 추가
3.auto 크기 초과 시 스크롤 막대 자동 추가

[ b]예:[/b]

①: 고정 위치 및 레이아웃 데모

CSS 접기 스타일 (4) - div+css 레이아웃

<!doctype html>  
<html>  
    <head>  
        <title>Div+Css布局(布局相关的属性)</title>  
        <meta charset="utf-8">  
        <style type="text/css">  
            body{  
            padding:0;  
            margin:0;  
            }  
              
            div.diva{  
                position:relative;   /* 一定要添加，如没添加其子元素则不生效*/  
                margin:50px;  
                width:500px;  
                height:500px;  
                background-color:rgba(255,0,0,0.4);   
                  
            }  
            .spanb{  
          
                position:absolute;  
                background-color:blue;  
                color:black;  
                top:-10px;  
                right:0;  
              
                }  
              
            .fixed{  
                padding:20px;  
                background:green;  
                position:fixed;  
                left:0;  
                top:40px;  
                z-index:1;   /* z-index的value值可为-1,0,1,2;当为-1时，该图层为最底层 */  
            }  
              
  
        </style>  
    </head>  
    <body>  
          
        <div class="fixed">  
            <p>联系人：翁孟铠</p>  
            <p>联系电话：XXXxxxx</p>  
            <p>地址：XXXXXXXXXXX</p>  
        </div>  
          
        <div class="diva">  
            <span class="spanb">浏览次数：222</spn>  
        </div>  
              
          
          
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
        <br/>  
    </body>  
</html>

②: 플로팅 및 오버플로 효과 데모

CSS 접기 스타일 (4) - div+css 레이아웃

<!doctype html>  
<html>  
   <head>  
      <title>Div+Css布局(浮动以及溢出处理)</title>  
      <meta charset="utf-8">  
      <style type="text/css">  
         body{  
         padding:0;  
         margin:0;  
         }  
         .div{  
            width:auto;  
            height:auto;  
            background:#f1f1f1;  
            margin:0 auto;  
            color: black;  
         }  
  
         .left{  
            width: 300px;  
            height: 400px;  
            position: inherit;  
            top: 60px;  
            background:yellow;  
            float: left;  
            color: black;  
         }  
         .right{  
            float: left;  
            width: 1049px;  
            height: 400px;  
            position: inherit;  
            top: 60px;  
            background:lavenderblush;  
            color: black;  
         }  
  
         .top{  
            width: auto;  
            height: 60px;  
            background: royalblue;  
            position: inherit;  
            top:0;  
         }  
         .bottom{  
            clear: both;  
            margin-top:20px;  
            width: 960px;  
            height: 20px;  
            background: red;  
         }  
  
         .jianjie{  
            height: 80px;  
            width: 200px;  
            background: brown;  
            overflow: auto;  
  
         }  
  
      </style>  
   </head>  
   <body>  
      <div class="div">  
         <div class="top">logo</div>  
         <div class="left">左边</div>  
         <div class="right">  
            简介:<br>  
            <div class="jianjie">  
               1、这是简介<br>  
               2、我们在做溢出测试<br>  
               3、hidden 隐藏超出层大小的内容<br>  
               4、scroll无论内容是否超出层大小都添加滚动条<br>  
               5、auto 超出时自动添加滚动条  
            </div>  
  
         </div>  
         <div class="bottom"></div>  
      </div>  
   </body>  
</html>

그렇습니다. CSS 접기 스타일(4) - div+css 레이아웃의 내용 더 많은 관련 내용은 PHP 중국어 웹사이트(www.php.cn)를 참고하세요. )!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.