CSS布局中遇到的问题

最新推荐文章于 2023-04-12 15:40:15 发布

旧爱学长

最新推荐文章于 2023-04-12 15:40:15 发布

阅读量245

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_43324273/article/details/100172280

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、浮动字围现象：

来源
 https://www.cnblogs.com/qianguyihao/p/7297736.html

CSS浮动流脱标的字围现象：
浮动流脱标的字围现象不仅针对文字, 这种现象也会把行内和内联当做文字.
浮动流的脱标与定位流的脱标不一样:
定位流的脱标对后续元素的影响可以直接无视它的存在, 而浮动流的脱标有字围现象,所以不能直接无视浮动元素的存在
浮动流对后续标准流中的行内块级, 以及行内元素的影响:
内联and行内元素视为文本, 浮动流并不会遮挡文本(而脱标的定位流会遮挡文本), 它们会沿着定位流的同一行,接着往后排.
浮动流对后续标准流中的块级元素的影响:
块级元素上浮, 被浮动流遮挡一部分,但块级元素中的文本(包括块级元素内部的行内块,以及行内-)并不会被遮挡, 是从浮动元素的边界之外开始写.

HTML代码如下：

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style type="text/css">
    	*{
    		padding:0;
    		margin: 0;
    		box-sizing: border-box;
    	}
    		.div1{
    			width: 500px;
    			height: 500px;
    			background: #f00;
    			float: left;
    	}
    		.div2{
    			background: #0f0;		
    		}
    	</style>	
    </head>
    <body>
    	<div class="div1"></div>
    	<div  class="div2">1111</div>   块级元素，但“文本”（行内和内联列如img等）并不会遮挡
    </body>
    </html>

在这里插入图片描述

可以设置margin的值改变没有被遮挡的“文字”与上面float盒子的位置，如果一行放不下，就会紧挨着float盒子的下面，产生并列的假象（如果浮动的盒子有宽高就可以，就可以与不浮动的“文字”设置margin）

HTML代码如下：

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style type="text/css">
    	*{
    		padding:0;
    		margin: 0;
    		box-sizing: border-box;
    	}
    		.div1{
    			width: 500px;
    			height: 500px;
    			background: #f00;
    			float: left;           div是浮动的盒子
    	}
    		img{
    			margin-left: 10px;    img不浮动，图片不会遮挡并改变图片与上面盒子的左边距
    			background: #0f0;		 
    		}
    	</style>	
    </head>
    <body>
    	<div class="div1"></div>
    	<img src="1.jpg">
    </body>
    </html>

二、margin有关的布局问题

HTML代码如下：

 <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>float</title>
    	<style type="text/css">
    		*{
    		padding:0;
    		margin: 0;
    		box-sizing: border-box;
    	}
    		.div1{
    			width: 500px;
    			height: 500px;
    			background: #f00;
    			padding-top: 50px;	       
    		}
    		.box1{
    			width: 50px;
    			height: 50px;
    			background: #0f0;
    		}
    	</style>
    </head>
    <body>
    	<div class="div1">
    		<div class="box1"></div>
    	</div>
    </body>
    </html>

同级关系用margin
父子关系用padding（在父级上加padding）——子级盒子就是父级盒子里面的内容，给父级加padding，边框与内容之间有padding这样的距离。

旧爱学长

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS布局中遇到的问题

一、浮动字围现象：来源CSS浮动流脱标的字围现象：浮动流脱标的字围现象不仅针对文字, 这种现象也会把行内和内联当做文字.浮动流的脱标与定位流的脱标不一样:定位流的脱标对后续元素的影响可以直接无视它的存在, 而浮动流的脱标有字围现象,所以不能直接无视浮动元素的存在浮动流对后续标准流中的行内块级, 以及行内元素的影响:内联and行内元素视为文本, 浮动流并不会遮挡文本(而脱...
复制链接

扫一扫