0
点赞
收藏
分享

微信扫一扫

网页布局三大核心:盒子模型、浮动、定位

天天天蓝loveyou 2022-02-22 阅读 128
csssasshtml

页面布局要学习三大核心:盒子模型、浮动和定位。

网页布局的本质:利用CSS做盒子样式,摆放位置。标题<h>、段落<p>、盒子<h>。

盒子有 m b p c

清除内外边距:

不同浏览器带有默认的内外边距,因此我们在布局前,首先要清除下网页元素的内外边距。

方式:

* {

padding:0;/*清除内边距*/

margin:0; /*清除外边距*/

}

浮动?

1 首先了解把块元素放在一行内?

使用行内块元素会产生 空隙

2 如何实现两个盒子左右对齐?

总结:有很多布局效果,标准流没有办法完成,此时利用浮动完成布局

网页布局准则:

纵向排列-标准流;横向排列-浮动

语法:

选择器  {  float : 属性值 ; }

浮动会贴着浮动

浮动特性(重难点)

1.浮动的元素不再保留原先位置,(会像我们迎面扑来),原来的位置会被别的占有

2.如果都设置浮动,则会以一行排列,直到位置不够,才落到第二行

3.添加了浮动都会有行内块元素的特点,不管什么元素

实际应用:

浮动元素经常搭配父级标准流,目的是限制浮动元素位置

先用标准流的父元素排列上下,之后内部子元素采取浮动排列左右

清除浮动?

也不是真正意义上的清除,而是限制浮动子元素

原因:

1 父元素不方便给高度(不知道子元素多少)

2 父元素高度设置为0的话,会被其他标准流父元素挤上去

前提:前提是父盒子本身没有高度,如果有高度就不用清除!!!

          清除浮动后,父级会根据浮动的盒子自动检测高度

操作:给父级添加overflow属性,值设置为hidden.

CSS定位?

1 如果要实现某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子

这种情况下,使用标准流或浮动能实现吗?

2 实现某个盒子固定在屏幕

作用:

让盒子自由在某个盒子内移动或者固定在屏幕某个位置

组成:

定位=定位模式+边偏移

1)定位模式由CSS的position属性来设置,4个值:

static 静态定位,

静态定位就是标准流,很少用

relative 相对定位,(自恋型)

1 相对自己原来的位置; 2 原来在标准流的位置继续占有

例:position:relative;

      top:100px;

最典型应用就是给绝对定位当爹。。。。

absolute 绝对定位,(拼爹型)

是相对它的祖先来说的

语法:

选择器 { position : absolute ;}

注意:

1 没有父元素父元素没有定位,则以浏览器为准

2 父元素有定位  ,则以父元素为准。爷爷有定位爸爸没定位,就以爷爷为准

3 绝对定位不占有标准流位置,典型轮播图

实际开发中:子绝父相,绝对定位使用,父必须要有定位

fixed 固定定位

语法:

选择器 { position : fixed; }

以浏览器可视窗口做为 参照点,固定定位也不占有标准流位置,是特殊的绝对定位

2)边偏移就是盒子最终位置,4个属性:

top,bottom,left,right

扩展:

绝对定位的盒子垂直居中算法

固定版心算法

举报

相关推荐

0 条评论