div和css布局的基本知识分享

css和div都是页面布局离不开的语言代码，本文主要和大家分享div和css布局的基本知识，希望能帮助到大家。

1 p+css布局?
关键词： 盒子  位置
margin
padding
float
position
学的是什么？从本质上来说 学会如何去摆放盒子（p）的位置就可以了

2 盒子模型？
width : 宽度
height: 高度
border: 边框
margin: 外边距
padding: 内边距
作用：思想 用来摆放内容的位置

2.1  margin 外边距

规律：border margin padding：四边（上 下 左 右）
border-left
border-right
border-top
border-bottom

2.2 margin简单注意问题：
   body有默认的margin： chrome 8px
   如果设置了上下两个盒子的margin  两个盒子的距离是以大的那个margin为准（margin的塌陷）
   盒子居中： margin: 10px auto;

3 padding 内边距  
作用：用来调整盒子内部的内容的摆放
注意问题：设置了padding以后会把外层盒子整体撑大？影响：影响整个网页的布局
盒子的总宽度：300(width) + padding-left/right(10+10) + border-left/right(5+5) = 330

4 块级元素和行内元素
块级元素：p h1 p li 等等 独占一行 可以设置宽高
行内元素：span i a img 等等 在一行内显示 一般情况不可以设置宽高
行内元素转换成块级元素：转换以后就可以支持宽高

规律：p+css布局，margin 、padding、float、position都是和位置有关 把盒子摆放到合适的位置

5 float 浮动

普通流：不使用定位、浮动等特殊css规则的时候，元素的自然排序规则
浮动：脱离了普通流，元素可以左右移动
float:left  
float:right
作用：做盒子的左右布局

浮动带来的问题：有可能会影响到后面元素的布局
解决方案：在浮动过后的元素后面一定要清除浮动

float：左右布局
margin：调整盒子之间的距离
padding
position：定位 固定位置 作用-可以把元素摆放到任意位置

6 相对定位
postion:relative
参照物：根据谁来做这个定位的? 在没有使用定位之前自身的初始位置
要使位置发生变化还需要有偏移量
left：100px
根据没有使用定位之前的位置发生偏移 向右偏移100px

7 绝对定位
position:absolute
参照物：1 上级元素中有定位(position)属性的 2 并且找的是最近的那个有定位属性的父级
偏移量：left top right bottom

查找参照物的顺序： 先找父级元素，如果有定位属性（position）就以这个父级元素作为参照物发生偏移，
如果没有找到就向外层逐一查找，直到找到有position属性的元素，如果一直都没有，那么就以最外层的html
元素为参照物发生偏移

8 固定定位
参照物：浏览器可视区

9 练习

10、其他选择器
选择器：选择元素的方法  id ==> # class ==> . 标签选择器==> 标签名称

10.1 相邻选择器  ==> +   选择某个元素后面相邻的元素

10.2 多元素选择器  ==> ， 应用场景：有多个元素具有相同的属性（又很多代码是重复的，可以提取出来做成公用的）

10.3 后代选择器 ==> 空格， 应用场景：选择符合条件的后代元素

10.4 子元素选择器==> > ， 应用场景： 选择符合条件的子元素

注意： 子元素只能选择下一层元素  后代选择器能选中下面n层元素
作用：都是用来方便的选择元素

10.5 属性选择器 ==> 元素[属性=属性值] 应用场景：选择具有某些属性的元素
name
name = value
name ^= val
name $= val
可以理解为筛选的条件

11、伪类、伪元素

1 p+css布局?
关键词： 盒子  位置
margin
padding
float
position
学的是什么？从本质上来说 学会如何去摆放盒子（p）的位置就可以了

2 盒子模型？
width : 宽度
height: 高度
border: 边框
margin: 外边距
padding: 内边距
作用：思想 用来摆放内容的位置

2.1  margin 外边距

规律：border margin padding：四边（上 下 左 右）
border-left
border-right
border-top
border-bottom

2.2 margin简单注意问题：
   body有默认的margin： chrome 8px
   如果设置了上下两个盒子的margin  两个盒子的距离是以大的那个margin为准（margin的塌陷）
   盒子居中： margin: 10px auto;

3 padding 内边距  
作用：用来调整盒子内部的内容的摆放
注意问题：设置了padding以后会把外层盒子整体撑大？影响：影响整个网页的布局
盒子的总宽度：300(width) + padding-left/right(10+10) + border-left/right(5+5) = 330

4 块级元素和行内元素
块级元素：p h1 p li 等等 独占一行 可以设置宽高
行内元素：span i a img 等等 在一行内显示 一般情况不可以设置宽高
行内元素转换成块级元素：转换以后就可以支持宽高

规律：p+css布局，margin 、padding、float、position都是和位置有关 把盒子摆放到合适的位置

5 float 浮动

普通流：不使用定位、浮动等特殊css规则的时候，元素的自然排序规则
浮动：脱离了普通流，元素可以左右移动
float:left  
float:right
作用：做盒子的左右布局

浮动带来的问题：有可能会影响到后面元素的布局
解决方案：在浮动过后的元素后面一定要清除浮动

float：左右布局
margin：调整盒子之间的距离
padding
position：定位 固定位置 作用-可以把元素摆放到任意位置

6 相对定位
postion:relative
参照物：根据谁来做这个定位的? 在没有使用定位之前自身的初始位置
要使位置发生变化还需要有偏移量
left：100px
根据没有使用定位之前的位置发生偏移 向右偏移100px

7 绝对定位
position:absolute
参照物：1 上级元素中有定位(position)属性的 2 并且找的是最近的那个有定位属性的父级
偏移量：left top right bottom

查找参照物的顺序： 先找父级元素，如果有定位属性（position）就以这个父级元素作为参照物发生偏移，
如果没有找到就向外层逐一查找，直到找到有position属性的元素，如果一直都没有，那么就以最外层的html
元素为参照物发生偏移

8 固定定位
参照物：浏览器可视区

9 练习

10、其他选择器
选择器：选择元素的方法  id ==> # class ==> . 标签选择器==> 标签名称

10.1 相邻选择器  ==> +   选择某个元素后面相邻的元素

10.2 多元素选择器  ==> ， 应用场景：有多个元素具有相同的属性（又很多代码是重复的，可以提取出来做成公用的）

10.3 后代选择器 ==> 空格， 应用场景：选择符合条件的后代元素

10.4 子元素选择器==> > ， 应用场景： 选择符合条件的子元素

注意： 子元素只能选择下一层元素  后代选择器能选中下面n层元素
作用：都是用来方便的选择元素

10.5 属性选择器 ==> 元素[属性=属性值] 应用场景：选择具有某些属性的元素
name
name = value
name ^= val
name $= val
可以理解为筛选的条件

相关推荐：

六种css三栏布局方法示例

CSS使用position:sticky实现粘性布局实例详解

css网页的几种布局实例

以上是div和css布局的基本知识分享的详细内容。更多信息请关注PHP中文网其他相关文章！