一,标准流(默认状态,元素盒按照文档中出现的顺序排列)

块级元素--垂直排版 display:block;

单独一行,可以设置宽高,宽度默认和父元素宽度一致

一般结构性标记都为块级元素,如div,h,p,ul等

行内元素--水平排版 display:inline-block;

与其他元素并排一行,不能设置宽高,宽度默认为内容的宽度

一般描述性标记都为行内元素,如span,a,img等

二,浮动流--水平排版

左浮动--float:left;

右浮动--float:right;

元素可以左右浮动,当该元素外边框边缘遇到另一个元素的外边框时,该元素有确定位置

浮动流的包含框宽度不够时,元素向下移动,两个浮动元素高度不同时,可能被卡住

三,定位流(通过top,bottom,left,right调整位置)

相对定位--position:relative;

top,bottom,left,right是相对于该元素在标准流中的位置移动的距离,不管是否移动,元素仍占据其在标准流中的位置,显示上可能覆盖其他元素

绝对定位--position:absolute;

top,bottom,left,right是相对于距离最近的已定位的父元素移动的距离,可以覆盖页面上其他元素,元素在标准流中不占据位置,不影响标准流中元素的位置

绝对定位有一个属性z-index,z-index越大显示在越上面

一般情况下,父元素采用相对定位,子元素采用绝对定位。以相对定位的父元素作为子元素绝对定位的参照物。

当然这种情况并不是绝对的,父元素也可以设置成absolute,子元素要找的是非static定位的父元素。

固定定位--positon:fixed;

css网页布局方式的理解的更多相关文章

  1. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  2. 前端学习笔记之CSS网页布局

    CSS网页布局   阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...

  3. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  4. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

  5. css常见布局方式

    CSS常见布局方式 以下总结一下CSS中常见的布局方式.本人才疏学浅,如有错误,请留言指出. 如需转载,请注明出处:CSS常见布局方式 目录: 使用BFC隐藏属性 float + margin abs ...

  6. CSS网页布局错位:CSS宽度计算

    为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...

  7. CSS网页布局中易犯的30个小错误

    即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...

  8. 项目实践2:项目中的CSS网页布局(常用)

    好家伙, 整个网页做下来,最主要的,自然是css的网页布局(菜鸟好用啊) 我需要一个大概这样的布局: 然后上代码: <!DOCTYPE html> <html> <hea ...

  9. 深入理解CSS网页布局-理论篇

    在CSS网页开发布局中,需要对浮动和定位有深刻的理解才能在开发中游刃有余. 基于此,在博客园中做了本篇总结,这些总结来自实践经验和阅读一些书籍后的理解总结,主要内容为浮动,清除浮动,定位. (可点击屏 ...

随机推荐

  1. Swoole server函数列表(转载)

    swoole_server::__construct swoole_server::set swoole_server::on swoole_server::addlistener swoole_se ...

  2. 【剑指Offer】27、字符串的排列

      题目描述:   输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba.    ...

  3. 配平化学方程式的C++代码实现

    配平化学方程式的C++代码实现 纪念一下我今天写过了 20171006. (去年的这个时候我就有了这个大胆的想法, 当时的思路是:字符串处理->暴力搜系数,可是太年轻写不对,我那会还是个只会模拟 ...

  4. QBXT春季培训酱油记

    Day-1: 下午回家收拾东西,明天去JN,先通知一下在JN的lll dalao明天去见他,然而手办到了,心情大好啊有没有,有没有! 晚上单曲循环<初音未来的消失>,睡觉的时候哭得稀里哗啦 ...

  5. 51nod1212 无向图最小生成树

    N个点M条边的无向连通图,每条边有一个权值,求该图的最小生成树. Input 第1行:2个数N,M中间用空格分隔,N为点的数量,M为边的数量.(2 <= N <= 1000, 1 < ...

  6. CSS学习笔记之选择器

    目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...

  7. python类中属性逗号引发的类型改变

    不注意点了个逗号引发了类型改变 [shangbl@newsvn ~]$ cat test.py class AB1: a="a" class AB12: a="a&quo ...

  8. matplotlib的annotate用法小结

    这个是matplotlib自定义的annotate方法的文本: 一. def annotate(self, s, xy, *args, **kwargs): a = mtext.Annotation( ...

  9. Linux拖拽上传文件 lrzsz

    首先安装lrzsz 命令为:yum install lrzsz 安装完毕后直接将.tar.gz格式的文件拖如xshell的窗口内就会自动上传.

  10. [bzoj4027][HEOI2015]兔子与樱花_贪心_树形dp

    兔子与樱花 bzoj-4027 HEOI-2015 题目大意:每个点有c[i]朵樱花,有一个称重m, son[i]+c[i]<=m.如果删除一个节点,这个节点的樱花或移动到它的祖先中深度最大的, ...