css总结（6）

最新推荐文章于 2024-05-30 08:41:06 发布

weixin_43821488

最新推荐文章于 2024-05-30 08:41:06 发布

阅读量67

点赞数

本文链接：https://blog.csdn.net/weixin_43821488/article/details/104401170

版权

CSS总结

实现两栏布局

两个关键点：

1.先让右边栏定位过去

2.左边栏把右边栏的位置让出来(margin-right)

<!DOCTYPE html>
 <html>
 
     <head>
        <meta charset="utf-8" />
         <title>例子</title>
         <style type="text/css">
             .right{
                 postion:absolute;
                 right:0;
                 width:100px;
                 height:100px;
                 background-color:#fcc;
             }
             .left{
                 margin-right:100px;
                 height:100px;
                 background-color:#333;
             }
         </style>
     </head>
 
     <body>
         <div class="right">
             
         </div>
         <div class="left">
             
         </div>
     </body>
 
 </html>

注意：必须先写right，再写left。不然right会掉到第二行

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1idlcJKv-1582119178252)(C:\Users\DANA\Desktop\011.PNG)]$

margin塌陷问题

margin 塌陷：普通文档流中父子块级元素，如果父元素没有设置上内边距或上边框，子元素的上边距就会和父元素的上边距重合，以他们两个中间最大上边距为准，与距离他们最近的盒子隔开。

解决方法：bfc(block format context,块级格式化上下文)

如何触发bfc：

position:absolute;

display:inline-black;

float:left/right;

overflow:hidden;

例如：红色和绿色方块的margin-top都设为了100px，但是绿色并没有距离红色上边100px。

<!DOCTYPE html>
 <html>
 
     <head>
        <meta charset="utf-8" />
         <title>例子</title>
         <style type="text/css">
             .wrapper{
                 margin-left:100px;
                 margin-top:100px;
                 height:100px;
                 wight:100px;
                 background-color:red;
             }
             .content{
                 margin-left:50px;
                 margin-top:100px;
              	height:50px;
                 wight:50px;
                 background-color:green;
             }
         </style>
     </head>
 
     <body>
         <div class="wrapper">
			<div class="content">
                
             </div>
         </div>
     </body>
 
 </html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qu9FgdlM-1582119178253)(C:\Users\DANA\Desktop\006.PNG)]$

决解方法：给红色方块加上

position:absolute;

display:inline-black;

float:left/right;

overflow:hidden；

任意一种即可。

这里我用position:absolute;

<!DOCTYPE html>
 <html>
 
     <head>
        <meta charset="utf-8" />
         <title>例子</title>
         <style type="text/css">
             .wrapper{
                 margin-left:100px;
                 margin-top:100px;
                 height:100px;
                 width:100px;
                 background-color:red;
                 position:absolute;
             }
             .content{
                 margin-left:50px;
                 margin-top:100px;
              	height:50px;
                 width:50px;
                 background-color:green;
             }
         </style>
     </head>
 
     <body>
         <div class="wrapper">
			<div class="content">
                
             </div>
         </div>
     </body>
 
 </html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ScTs4hmF-1582119178254)(C:\Users\DANA\Desktop\007.PNG)]$

浮动模型

浮动模型：

最早是为了适应报纸的排版，文字环绕图片的效果，后来经过使用和研究发展出一系列复杂的用法。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

1.浮动元素产生了浮动流

所有产生看浮动流的元素，块级元素看不到他们

产生了bfc的元素和文本类型（inline）的元素以及文本都能看到浮动元素。

例子：

设置两个div为box1，box2 ，box1设置一个左浮动。

<!DOCTYPE html>
 <html>
     <head>
        <meta charset="utf-8" />
         <title>例子</title>
         <style type="text/css">
             .box1{
                 float:left;
                 width:100px;
                 height:100px;
                 background-color:red;
                 
             }
             .box2{
                 width:200px;
                 height:200px;
                     background-color:black;
                 opacity:0.5;
             }
         </style>
     </head>
     <body>
         <div class="box1">
             
         </div>
         <div class="box2">
             
         </div>
     </body>
 </html>

效果：我们会看到box2覆盖了box1

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zPcFK2qF-1582119178255)(C:\Users\DANA\Desktop\008.PNG)]$

例子：父元素是一个自适应高度的div，需要把带有浮动属性的子元素填充到这个父元素中

<!DOCTYPE html>
 <html>
     <head>
        <meta charset="utf-8" />
         <title>例子</title>
         <style type="text/css">
             .wrapper{
                 border:1px solid black;
             }
             .content{
                 float:right;
                 color:#fcc;
                 width:100px;
                 height:100px;
                 background-color:black;
             }
         </style>
     </head>
     <body>
         <div class="wrapper">
         <div class="content">
             1
         </div>
         <div class="content">
             2
         </div>
         <div class="content">
             3
         </div>
             
         </div>
     </body>
 </html>

效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WtaeJlra-1582119178256)(C:\Users\DANA\Desktop\009.PNG)]$

这时候可以看到div并没有被他的子元素撑开，这是因为他的子元素是浮动元素，但父元素div是块级元素，块级元素是看不见浮动元素的。

有两种解决办法：

1.在最后一个浮动元素下面添加一个块级元素，例如P标签，然后在给他添加css样式clean:both（清除所有浮动流），这样p标签附近的浮动流就被清除了，父级元素就被撑开。

但是这种方法不推荐，因为会改变文档的结构。

<!DOCTYPE html>
 <html>
     <head>
        <meta charset="utf-8" />
         <title>例子</title>
         <style type="text/css">
             .wrapper{
                 border:1px solid black;
             }
             .content{
                 float:left;
                 color:#fcc;
                 width:100px;
                 height:100px;
                 background-color:black;
             }
             p{
                 clear:both;
             }
         </style>
     </head>
     <body>
         <div class="wrapper">
         <div class="content">
             1
         </div>
         <div class="content">
             2
         </div>
         <div class="content">
             3
         </div>
             <p>    
             </p>
         </div>
     </body>
 </html>

效果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i1rvM4Mx-1582119178258)(C:\Users\DANA\Desktop\010.PNG)]$

2.使用伪元素来清除浮动。每个元素在创建的时候都有两个伪元素，分别是::before 和::after,一个是在元素前插入内容，一个是在元素后插入内容。因为使用伪元素不会改变文档的结构，开发中应该使用这种方式。

在使用伪元素的时候要注意：伪元素在使用的时候必须设置content属性，伪元素是行内元素，但是clean:both只对块级元素起作用，所以要把伪元素转换成块级元素。

<!DOCTYPE html>
 <html>
     <head>
        <meta charset="utf-8" />
         <title>例子</title>
         <style type="text/css">
             .wrapper::after{
				content: "";
                 display: block;
				 clear: both;
	
             }
             .wrapper{
                 border:1px solid black;
             }
             .content{
                 float:left;
                 color:#fcc;
                 width:100px;
                 height:100px;
                 background-color:black;
             }
         </style>
     </head>
     <body>
         <div class="wrapper">
         <div class="content">
             1
         </div>
         <div class="content">
             2
         </div>
         <div class="content">
             3
         </div>       
         </div>
     </body>
 </html>

weixin_43821488

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css总结（6）

CSS总结实现两栏布局两个关键点： 1.先让右边栏定位过去 2.左边栏把右边栏的位置让出来(margin-right)<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>例子</title&gt...
复制链接

扫一扫