学习css布局

  科技在高速的发展,技术日新月异,不断的进步促使科学技术的发展,各项技术也在不同领域发展的很快,在web前端也在不断出现新的布局方法,这里就简单介绍圣杯布局法和负边距布局法;

  各种布局的技术实现,被经常使用的三种技术:
  1.浮动 float
  2.负边距 negative margin
  3.相对定位 relative position
  利用浮动元素的负边距来定位
  利用相对定位调整位置

  布局是页面重构中最重要的东西,骨架有了,其他都好办……

  1、负边距布局法:

    1. 两栏式布局法(两边栏不动,中间动效果)
       2. 三栏式布局法;

    3.都是通过magin来实现

  2、圣杯布局法 
        1. 中间三栏布局div排列顺序是中→左→右;
        2. 首先要三栏设置padding,作用是将左右的位置腾出来
        3. 其中两边距离是等于需要插入的div的宽度,
        4. 左边的就用负边距margin-left:-100%;并且right=边距
        5. 右边就用margin-right:-边距;
        5. 需要在三栏设置相对定位;并且全部浮动,并且padding-bottom-/+10000px;overflow:hidden;
        6. 为防止浏览器放大缩小对边框影响;设置缩小最小宽度:在全局中设置min-width最小值 ;并且最小值需要根据left和right的宽度进行微调

时间: 2024-10-06 16:49:39

学习css布局的相关文章

学习CSS布局-没有布局

如果你只想把所有内容都塞进一栏里,那么不用设置任何布局也是OK的. 然而,如果用户把浏览器窗口调整的很大,这时阅读网页会非常难受: 读完每一行之后,你的视觉焦点要从右到左移动一大段距离. 试着调整下浏览器窗口大小你就明白我的意思了! 在解决这个问题之前,我们需要了解一个很重要的属性: display 原文地址: http://zh.learnlayout.com/no-layout.html

学习CSS布局 - 盒模型

盒模型 在我们讨论宽度的时候,我们应该讲下与它相关的另外一个重点知识:盒模型. 当你设置了元素的宽度,实际展现的元素却超出你的设置: 这是因为元素的边框和内边距会撑开元素. 看下面的例子,两个相同宽度的元素显示的实际宽度却不一样. 看看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒模型</title

学习CSS布局 - box-sizing

box-sizing 人们慢慢的意识到传统的盒子模型不直接,所以他们新增了一个叫做 box-sizing 的CSS属性. 当你设置一个元素为 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度. 这里有一个与前一页相同的例子,唯一的区别是两个元素都设置了 box-sizing: border-box; <!DOCTYPE html> <html lang="en"> <head> <meta charse

学习CSS布局 - position例子

position例子 通过具体的例子可以帮助我们更好地理解"position".下面是一个真正的页面布局. 结果: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>position例子</title> <style> * { box-sizing: border

轻松学DIV教程(div+css布局)

你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义.结构添加CSS.这篇文章将告诉你应该怎样把HTML结构化. 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,.hspace.align=left等等)束手无策,不知道该转换成对应的什么CSS语句.当你解决了第一种问题,知道了如何结构化你的HTML,我再给出一个列表

web前端大神整理:CSS 布局经典问题

本文来自前端大神的整理,主要对 CSS 布局中常见的经典问题进行简单说明,并提供相关解决方案的参考链接,涉及到三栏式布局,负 margin,清除浮动,居中布局,响应式设计,Flexbox 布局,等等. CSS 基础知识 下面几个入门教程不错: 幕课网 – HTML+CSS基础课程:偏基础,可以在线练习和预览 MDN – CSS入门教程: MDN 的官方文档 学习 CSS 布局:排版和配色特别舒服,简短但不深入,适合概览入门 CSS 定位问题 主要就是经典的绝对定位,相对定位问题. 10个文档学布

详解CSS布局

CSS页面布局允许我们拾取网页中的元素,并且控制它们相对正常布局流.周边元素.父容器或者主视口/窗口的位置.主要对文档流的改变进行布局.假设你已经掌握了CSS的选择器.属性和值,并且可能对布局有一定了解可以往下看,如果没有可以先看这篇博客css解析. css实现左右布局 css实现左右布局的方式大概有六种: 1. table的li实现 table标签是能够具有实现左右布局的属性,tr表示一行,td表示一列,tr中可以添加td实现盒子的左右布局. 2 . inline-block display:

CSS基础学习十九:CSS布局之图文混排,图像签名,多图拼接和图片特效

学习了CSS布局的定位和浮动,我们可以简单地做出很多排版和内容拼接.今天就来做几个简单的实例展示现在 流行的DIV+CSS布局的方便好用之处.顺便也说一下CSS3新增的样式属性box-shadow和属性transform. 一图文混排 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

html学习第三天—— 第12章——css布局模型

清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板.如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式. CSS包含3种基本的布局模型,用英文概括为:Flow.Layer 和 Float.在网页中,元素有三种布局模型:1.流动模型(Flow)2.浮动模型 (Float)3.层模型(Layer)