p.s：这是我在学习中总结出来知识，如有不对，请多包涵。谢谢。
CSS样式：行内样式，内部样式，外部样式，他们的优先级是：行内，内部，外部，遵循就近原则。
一、HTML+CSS布局分为三大类，一是流式布局，二是浮动布局，三是绝对定位布局。
1、流式布局
流式布局，如同水经过不同通道，呈现出不一样的方式。流式布局也是如此。流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
立即学习“前端免费学习笔记（深入）”；
2、浮动布局
利用float（浮动）属性来并排定位元素，并在网页上创建列。可以利用这个属性来创建一个环绕在周围的效果，例如环绕在照片周围，但是当你把它应用到一 个
3、绝对定位布局
通过设置position属性实现的布局，是CSS中规定的第三种定位机制，能够实现横向多列布局及较为复杂的定位。position属性：（1）静态定位（2）相对定位（3）绝对定位
可设置4个属性值：static（静态定位）| relative（相对定位）| absolute（绝对定位）| fixed（固定定位）。
二、W3C标准
如图所示：
三、CSS规定的定位机制
1.标准文档流：
标准文档流：从上而下，从左到右，输出文档内容。由块级元素、行级元素构成。
块级元素：从左到右撑满页面，独占一行，触碰到页面边缘时，会自动换行。如
等等.....
行级元素：能在同一行内显示，不会改变HTML文档结构，无法设置宽高,如果想设置宽高，需加入display：block 或者inline-block;如： 、和大部分表单元素。
块级元素和行级元素都属于盒子模型。
盒子模型=网页布局的基石，由4部分组成：
1、边框（border）
2、外边距（margin）
3、内边距（padding）
4、盒子中的内容（content）
如图所示：
盒子模型尺寸：border+padding+margin+盒子内中尺寸。
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
684
收藏
