HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一点一点的改, 新手可以看看, 对于初学这块的人应该还是有点帮助的.
以下全部是个人初学HTML的一点理解, 哪里错了欢迎指正, 我也会改, 因为全程自学, 只能摸着石头过河, 拜托大神们了.
CSS布局模型在我看来是和盒模型一样的最核心的概念, 但是布局模型是依托盒模型的, 它并不是准确意义上的布局样式或者是布局模板, 再通俗点说, CSS布局模型就是外在看到的样子, 而且他不是你看看书就能懂的, 而是需要多多的练习,
布局模型主要有三种:
1, 流动模型(Flow)
2, 浮动模型(Float)
3, 层模型(Layer)
流动模型, 是默认的网页布局模式. 网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的.
特点: 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布, 因为在默认状态下, 块状元素的宽度都为100%, 实际上块状元素都会以行的形式占据位置, 而内联元素都在在所处的包含元素内从左到右水平分布显示, 这基本上等同于对前面块级元素和内联元素的特性又做了一次总结.
浮动模型在我理解中也就是打破了Flow的一切规则, 它不再遵循流动模型的一切规则, 以一种自定义的方式将块级元素和内嵌元素重新布局. 默认下都是不浮动的, 但是可以定义为浮动, 只需要在CSS样式表中加入float这个属性, 代码示例:
div{
float:left;
}
这句话的意思就是将这个
层布局模型在我看来就好像多个重叠的层级结构, 你通过代码对每个层级的位置进行精确控制, css定位了一组定位属性来支持布局模型, 这个我自己理解的也并没那么透彻所以只简单说说, 大家有兴趣的去百度百度看看别人的博客, 我个人理解必然不如人家, 只能说给自己写个学习笔记而已.
层模型的三种形式:
1, 绝对定位(position:absolute)
2, 相对定位(position:relative)
3, 固定定位(position:fixed)
下面完全不用书本上那种严谨的语言, 用我自己的理解给大家说, 绝对的意思就是, 一个层级放在另一个层级上面, 也就是一块放在另一块上, 子层级在父层级上面的精确坐标就是绝对定位, 给它一个绝对的值让他不会乱动, 同样的, 父层级移动了, 子层级也会跟着动, 也就是说这两个相对的层级用绝对的布局拴住了, 学习这你就使劲的敲就行了. 同时给大家一点层级的概念,
里面有各种块, 比如,
也设置绝对定位, 这个时候
的层级就是相对
也会在
代码示例下
div{
width:200px;
heigth:300px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
p{
position:absolute;
}
这个时候
是
相对
相对定位首先是将这一层级, 类似float方式浮动起来, 然后通过设置left, right, top, bottom属性来确定这一层级相较于自己原本的位置, 但是这一层级本质上还是在原来那里, 也就可以理解为视觉看到的是一个投影, 它本来还在那呢, 所以相对定位是不会影响其他位置元素的布局的, 因为它是单独浮动出来的. 这个不太好理解, 需要大家自己多写多练. 感觉这种布局应该是那种动画什么的很常用, 或者弹出的窗口? 我不确定啊, 不太敢说了.
这个好解释效果, 平常看网站那些小广告, 右下角啥的, 你划着屏幕, 他就在那里, 不上不下, 这个效果就是固定定位, 它的定位并不是跟着布局走的, 而是跟着相对浏览器走的. 严谨一点的说法是, 它的相对移动的坐标是网页窗口本身. 由于视图本身是固定的, 它不会随浏览器窗口的滚动条滚动而变化, 除非你在屏幕中移动浏览器窗口的屏幕位置, 或改变浏览器窗口的显示大小, 因此固定定位的元素会始终位于浏览器窗口内视图的某个位置, 不会受文档流动影响, 这与background-attachment:fixed;(定义背景图片随滚动轴的移动方式)属性功能相同. 这个也不多介绍了, 和相对定位一样, 多写就好了.
这三种定位方式是可以混在一起用的, 比如父元素用绝对定位, 子元素用相对定位等等, 是可以很灵活的布局的, 学第一遍可能会懵, 第二遍会好一点, 第三遍基本就能懂了, 我学东西也是这个原则, 一个东西要学三遍才可以算是学了.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
