前端基础——CSS+DIV布局

简介: 随便打开一个网页,按下F12,你会发现一堆密密麻麻的“DIV”,没错,现在大部分的网页都用了CSS+DIV的布局方式。 上篇说了盒子模型,这里就以盒子模型为基础来简单了解一下常用的一种网页布局的方式:CSS+DIV布局。

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


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


      CSS+DIV布局,就是在整体上用<div>标记把页面分为若干个块,然后对各个<div>块进行CSS定位,最后再在各个块中添加相应内容。


      就如建造一座钢结构的建筑物似的,先把整个网页的框架搭建起来,再分别对局部进行细化,这里<div>就如同钢筋,负责搭建框架,CSS就相当于搭建的规则,按照一定的规则(即业务需求)把钢筋焊接起来。


20.jpg


20.jpg


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


       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对这几个属性值的说明:      


21.png


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


     


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


22.png

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


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


   


            z-index属性:


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


23.jpg24.jpg



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


     


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


25.jpg

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

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

相关文章
|
1月前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
23天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
108 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
22天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
49 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
|
前端开发 开发者 UED
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
50 1
|
3月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
63 6
|
3月前
div+css3制作的简洁404错误页面特效源码
div+css3制作的简洁404错误页面特效源码是一段实现了非常简单也大方的效果的网站404错误页面效果代码,当鼠标经过404数字时,该数字会发光发亮,本段代码适应于所有网站使用,有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。
32 1
|
3月前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
73 4
|
3月前
|
Web App开发 前端开发 JavaScript
前端开发的秘密武器:这些工具让你轻松应对各种复杂布局!
【10月更文挑战第31天】前端开发充满挑战,尤其是在处理复杂布局时。本文介绍了几种关键工具和技术,如HTML和CSS基础、Firefox开发者工具、Visual Studio Code以及Vue、React和Angular等前端框架,帮助开发者高效应对复杂布局,提升代码质量和用户体验。
55 2
|
4月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
443 1
|
4月前
|
前端开发 JavaScript 容器
前端之CSS基础知识
前端之CSS基础知识
29 0

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    docker安装nginx,前端项目运行
  • 5
    【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
  • 6
    《前端技术基础》第01章 HTML基础【合集】
  • 7
    详解智能编码在前端研发的创新应用
  • 8
    【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈