熟悉HTML CSS布局模型_html/css_WEB-ITnose

程序员文章站 2024-01-19 17:52:16

...

　　HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一点一点的改, 新手可以看看, 对于初学这块的人应该还是有点帮助的.

　　CSS布局模型

　　以下全部是个人初学HTML的一点理解, 哪里错了欢迎指正, 我也会改, 因为全程自学, 只能摸着石头过河, 拜托大神们了.

　　CSS布局模型在我看来是和盒模型一样的最核心的概念, 但是布局模型是依托盒模型的, 它并不是准确意义上的布局样式或者是布局模板, 再通俗点说, CSS布局模型就是外在看到的样子, 而且他不是你看看书就能懂的, 而是需要多多的练习,

　　布局模型主要有三种:

　　　　1, 流动模型(Flow)

　　　　2, 浮动模型(Float)

　　　　3, 层模型(Layer)

　　流动模型, 是默认的网页布局模式. 网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的.

　　特点: 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布, 因为在默认状态下, 块状元素的宽度都为100%, 实际上块状元素都会以行的形式占据位置, 而内联元素都在在所处的包含元素内从左到右水平分布显示, 这基本上等同于对前面块级元素和内联元素的特性又做了一次总结.

　　浮动模型

　　浮动模型在我理解中也就是打破了Flow的一切规则, 它不再遵循流动模型的一切规则, 以一种自定义的方式将块级元素和内嵌元素重新布局. 默认下都是不浮动的, 但是可以定义为浮动, 只需要在CSS样式表中加入float这个属性, 代码示例:

　　div{

　　　　float:left;

　　　　}

　　这句话的意思就是将这个

块级元素设置为左浮动, 这个时候这个块级元素也不再具有块级元素的那些独占一行, 元素宽度等等特点了, 也就是当设置为float的那一刻, 块级和内嵌的特性就都消失了.

　　层模型(这个可以讲一天)

　　层布局模型在我看来就好像多个重叠的层级结构, 你通过代码对每个层级的位置进行精确控制, css定位了一组定位属性来支持布局模型, 这个我自己理解的也并没那么透彻所以只简单说说, 大家有兴趣的去百度百度看看别人的博客, 我个人理解必然不如人家, 只能说给自己写个学习笔记而已.

　　层模型的三种形式:

　　　　1, 绝对定位(position:absolute)

　　　　2, 相对定位(position:relative)

　　　　3, 固定定位(position:fixed)

　　1, 绝对定位

　　下面完全不用书本上那种严谨的语言, 用我自己的理解给大家说, 绝对的意思就是, 一个层级放在另一个层级上面, 也就是一块放在另一块上, 子层级在父层级上面的精确坐标就是绝对定位, 给它一个绝对的值让他不会乱动, 同样的, 父层级移动了, 子层级也会跟着动, 也就是说这两个相对的层级用绝对的布局拴住了, 学习这你就使劲的敲就行了. 同时给大家一点层级的概念,

里面有各种块, 比如

, 那么一块

就可以理解为一个层级, 你对这个

的属性做设置, 绝对定位, 那么

就和栓死了, 同样的

里面有一个

也设置绝对定位, 这个时候

的层级就是相对

了,

动,

也会在

里面乖乖的跟着走, 综上, 这就是绝对定位!

　　代码示例下

　　div{

　　　　width:200px;

　　　　heigth:300px;

　　　　border:2px red solid;

　　　　position:absolute;

　　　　left:100px;

　　　　top:50px;

　　　　}

　　　　position:absolute;

　　　}

　　这个时候

是

内部标签的话,

相对

就已经锁死了, 那么这个时候我们修改p样式表, 修改p在布局中的位置, 比如用盒子模型修改外间距, 修改p在div中的布局, 然后再去修改div的布局, 会发现p的层级还会在div上, 紧紧的困在一起了. 感觉这种布局应该是最常用的.

　　2, 相对定位

　　相对定位首先是将这一层级, 类似float方式浮动起来, 然后通过设置left, right, top, bottom属性来确定这一层级相较于自己原本的位置, 但是这一层级本质上还是在原来那里, 也就可以理解为视觉看到的是一个投影, 它本来还在那呢, 所以相对定位是不会影响其他位置元素的布局的, 因为它是单独浮动出来的. 这个不太好理解, 需要大家自己多写多练. 感觉这种布局应该是那种动画什么的很常用, 或者弹出的窗口? 我不确定啊, 不太敢说了.

　　3, 固定定位

　　这个好解释效果, 平常看网站那些小广告, 右下角啥的, 你划着屏幕, 他就在那里, 不上不下, 这个效果就是固定定位, 它的定位并不是跟着布局走的, 而是跟着相对浏览器走的. 严谨一点的说法是, 它的相对移动的坐标是网页窗口本身. 由于视图本身是固定的, 它不会随浏览器窗口的滚动条滚动而变化, 除非你在屏幕中移动浏览器窗口的屏幕位置, 或改变浏览器窗口的显示大小, 因此固定定位的元素会始终位于浏览器窗口内视图的某个位置, 不会受文档流动影响, 这与background-attachment:fixed;(定义背景图片随滚动轴的移动方式)属性功能相同. 这个也不多介绍了, 和相对定位一样, 多写就好了.

　　这三种定位方式是可以混在一起用的, 比如父元素用绝对定位, 子元素用相对定位等等, 是可以很灵活的布局的, 学第一遍可能会懵, 第二遍会好一点, 第三遍基本就能懂了, 我学东西也是这个原则, 一个东西要学三遍才可以算是学了.