欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-23 10:54:07
...

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布局的基本知识分享的详细内容,更多请关注其它相关文章!