웹 프론트엔드 HTML 튜토리얼 前端基础??CSS+DIV布局_html/css_WEB-ITnose

前端基础??CSS+DIV布局_html/css_WEB-ITnose

Jun 24, 2016 am 11:55 AM

   

       随便打开一个网页,按下F12,你会发现一堆密密麻麻的“DIV”,没错,现在大部分的网页都用了CSS+DIV的布局方式。


       上篇说了盒子模型,这里就以盒子模型为基础来简单了解一下常用的一种网页布局的方式:CSS+DIV布局。

       CSS+DIV布局,就是在整体上用

标记把页面分为若干个块,然后对各个
块进行CSS定位,最后再在各个块中添加相应内容。

       就如建造一座钢结构的建筑物似的,先把整个网页的框架搭建起来,再分别对局部进行细化,这里

就如同钢筋,负责搭建框架,CSS就相当于搭建的规则,按照一定的规则(即业务需求)把钢筋焊接起来。


                                  


        那么我们就把网页布局想象成一个盖这座建筑物的过程,这里把它分为两个步骤:

        1、选择材料,要对需要用到的钢筋有所了解,即了解DIV

   

        之前有个朋友问过我:“盒子模型是什么,是DIV吗?” 我否决了他,在笔者看来,网页里的许多元素,都可以看做是一个“盒子”,比如p、h1、form、div、span、table、tr、td等等,他们都有margin、border、padding属性。

        只不过我们在搭建整体的网页布局时,一般用DIV来充当上例中“钢筋”的角色。

        盒子模型是DIV+CSS的基础,也是关键。简单来说,盒子模型的核心就在那些“盒子”的margin、border、padding这几个属性上,想要布局出合理漂亮的网页,这是基本功。

   

        2、对材料进行切割、焊接

                 

        了解了DIV及盒子模型等基础知识后,就要对这些材料进行切割(设计不同大小的DIV)并焊接(用CSS定位相应的DIV)。     

               

        切割不用多说,就是画出DIV并用CSS规定其大小形状(即margin、border、padding的值)。


        这里的重点是焊接,焊接时需要挑选大小不一的DIV块,进行合理的摆放,也就是所说的DIV定位,包括对DIV的position、float、z-index属性的设置。

        position属性:四个属性值分别为static、absolute、relative、fixed,下表是W3C对这几个属性值的说明:      

描述
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。                              
absolute    生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative 生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left",
 "top", "right" 以及 "bottom" 属性进行规定。

        一般情况下,当元素的position属性值为absolute或fixed时,它就不再受父元素的约束,只根据到页面的left、top、right和bottom的值来定位。

        

            float属性,有left、right、none、inherit四个属性值:          

描述
none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。 
left   元素向左浮动。
right 元素向右浮动。

            细节不再多说,不清楚的同学可以自己做几个小例子动手实践一下,或者到W3School上实践一下,这里有丰富的web教程和一些可以在线练习的小例子。

           float在这里是难点也是重点,希望读者熟练掌握。

      

             z-index属性:

        z-index的值可以为任意整数值,可以为正数也可以为负数,代表着元素“显示的优先级”,值越大,显示的优先级越高。两张简单的图片足以说明:

                  

        这两幅图片,第一幅图片中三个div的z-index值分别为:AB>C。


        

        这些都只是CSS+DIV布局最基础的知识,想要真正吃透,还需要不断练习,体会布局的一些小技巧。比如对margin使用负值就是一个很实用的小技巧,假如想让container固定宽度居中显示(假设container宽度为700px),则可以对container采用relative的定位方法,left值为页面的50%,再设置margin-left为自己宽度的一半,这样,无论在哪种分辨率的浏览器中显示效果都是固定宽度且居中,如下图:

            

        当页面中的内容显示不够多时,如何让最底部的footer(版权注册部分)永远保持在最底部,也可以用对margin设置负值的方法来实现。


       多多地积累吧,期待与您共同成长。


  

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

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

& lt; meter & gt의 목적은 무엇입니까? 요소?

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

& lt; datalist & gt의 목적은 무엇입니까? 요소?

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

& lt; Progress & Gt의 목적은 무엇입니까? 요소?

See all articles