宝安网站建设推广,加强网站建设会,文化网站建设需要的功能,惠城网站制作浮动 在标准流当中#xff0c;元素或者标签在页面上摆放的时候会出现不如意的地方。要想解决这些问题可以采用脱离标准流的方式来进行解决这些问题#xff0c;脱离标准流也称为脱离文档流。
脱离标准流的解决方式有三种#xff0c;一种是浮动#xff0c;另外一种是固定定位…浮动 在标准流当中元素或者标签在页面上摆放的时候会出现不如意的地方。要想解决这些问题可以采用脱离标准流的方式来进行解决这些问题脱离标准流也称为脱离文档流。
脱离标准流的解决方式有三种一种是浮动另外一种是固定定位最后就是绝对定位。浮动就是其中的一种解决方案。 浮动增加一个浮层来放置内容 浮动的原理
浮动以后使元素脱离了文档流浮动只有在右浮动没有上下浮动
通过浮动来解决以前在标准流当中遇到的那些问题比如两个img标签放在一起会有些空隙的问题。 元素向左浮动 脱离文档流之后元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面一层是底层的原页面一层是脱离文档流的上层页面所以会出现折叠现象。 脱离文档流的情况下会出现压盖的现象因为这是两层。底层绿色的是标准流上面黄色是脱离标准流表现形式。可以看到默认情况下是从上到下进行摆放的。
!DOCTYPE html
html
headmeta charsetUTF-8title首页/titlestyle.container{width: 400px;height: 400px;background-color: blueviolet;}.box{width: 200px;height: 200px;background-color: blanchedalmond;}/style
/head
bodydiv classboxbox/div
div classcontainercontainer/div/body/html 如果是向左浮动那么上面的盒子会盖在紫色的盒子上面。下面的盒子属于在标准流当中的盒子而上面的盒子属于脱离标准流的盒子它会在在下面的盒子上面再覆盖一层。
现在的页面有两层一层在下面一层在上面这样就不会产生在标准流当中的一些问题。 .container{width: 400px;height: 400px;background-color: blueviolet;}.box{width: 200px;height: 200px;background-color: blanchedalmond;float: left;} 默认情况下两张照片之间也是有间隙的为了消除间隙可以使用float。 img{width: 200px;}img src1.jpg
img src1.jpg img{width: 200px;float: left;} img{width: 200px;float: left;}
在脱离文档流之后再去布局 会解决某些问题。并不是都需要脱离文档流只是遇到了相应的问题的情况下需要。正常情况下正常布局就行了。 元素向右浮动 style.container{width: 400px;height: 400px;background-color: blueviolet;}.box{width: 200px;height: 200px;background-color: blanchedalmond;float: right;}/style div classboxbox/div
div classcontainercontainer/div 所有元素向左浮动 虽然看起来像只有一层但是浮动起来了就在第二层了在浮动层盖上了那一层。在那一层三个元素水平摆放了。 导航是水平摆放的 ul li{float: left;} ulli导航1/lili导航2/lili导航3/li
/ul
元素之间空隙如何变的大一些可以使用外边距使其变的大一些这个时候就可以使用margin。这利用盒子模型将其外边距撑开将导航横向摆放。
ulli导航1/lili导航2/lili导航3/li
/ulul li{float: left;margin: 0 40px;} ullia href#导航1/a/lilia href#导航2/a/lilia href#导航3/a/li
/ul
横向摆放当元素不同的时候元素宽度不够的情况下在空间不够的情况下会将其挤到下面来。盒子在横向摆放的时候要考虑其宽度是不是够了在不够的情况下会被挤到下面去。 浮动是通过float属性来进行定义的可以向左或者向右浮动。无论向左还是向右浮动都是脱离文档流它会在标准流的上面再来一层而那一层来放置浮动的元素。
由于存在两层标准的那一层和浮动的那一层会出现压盖的现象。但是全部脱离文档流就不会出现压盖了那么就在同一层了。在宽度不够的情况下会被挤到第二行因为默认是横向摆放的。
