CSS布局技巧详解-优快云博客

本文链接：https://blog.youkuaiyun.com/xdajian/article/details/83844114

本文介绍了CSS布局中的关键概念，如position和float的使用方法及注意事项，并通过实例展示了div+css布局的具体实现方式，包括清除浮动的方法及不同类型的定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

position如果用好了比float好用。就怕用不好，用不好的话整个页面会摊痪。建议如果position不是很熟练的话最好还是用float，float记得清除就可以了。 
clear:both; /*清除浮动*/清除浮动主要是为了不让两边显示东西,这样它一条横线就是...一条横线,不会被左右的其它的层所干扰. 

a连接格式： 
/* 链接颜色 */ 
a:link {color: #1f3a87; text-decoration:none;} 
a:hover {color: #bc2931; text-decoration:underline;} 
a:active {color: #bc2931;} 
a:visited {color: #83006f;text-decoration:none;} 

/* 颜色属性 [定义规则，小写c加颜色名称] */ 
.cRed,a.cRed:link,a.cRed:visited{ color:Red; } 
.cBlue,a.cBlue:link,a.cBlue:visited{color:#1f3a87;} 
.cDRed,a.cDRed:link,a.cDRed:visited{ color:#bc2931;} 

/* 字体属性 [定义规则，小写f加属性名称] */ 
.fB {font-weight: bold;} 
.fI {font-style: italic;} 

//css中的类.属性:顶一个cRed的class，但是只有p标签才可以用。 
<style type="text/css"> 
p.cRed{//只使用语p标签的class样式 
color:red;} 
</style> 
<div class="cRed">ddddddddddddddd</div>//不标红 
<p class="cRed">ddddddddddddddd</p>//标红 

//细线文本框 
.thintx{ 
border:1px solid black; 
} 

div布局的两种方式： 
position:absolute;top:200px;left:400px;//相对于浏览器的定位 
position:relative;left:20px;top:20px;//relative是相对定位，是相对于前面的容器定位的。 

div+css布局样例： 
<HTML> 
<HEAD> 
  <TITLE>div+css+js </TITLE> 
  <style type="text/css"> 
.div_main{ 
width:80%; 
height:100%; 
background-color:gray; 
margin-left:100px; 
} 
.div_head{ 
width:100%; 
height:100px; 
background-color:blue; 
margin-top:10px; 
} 
.div_body{ 
width:100%; 
height:60%; 
margin-top:30px; 
background-color:white; 
} 
.div_foot{ 
width:100%; 
height:50px; 
margin-top:30px; 
background-color:yellow; 
} 
.div_button1{ 
position:relative; 
height:20px; 
left:533px; 
top:60px; 

} 
.div_button2{ 
position:relative; 
left:500px; 
height:20px; 
top:80px; 
} 
<!--//采取相对定位的按钮位置： 
.div_button1{ 
position:relative; 
height:20px; 
left:93%; 
top:60px; 

} 
.div_button2{ 
position:relative; 
left:86%; 
height:20px; 
top:80px; 
}--> 
//细线边框 
.thintx{ 
border:1px solid black; 
} 
input{ 
border:1 solid black; 
color:red; 
} 
  </style> 
</HEAD> 
<BODY style="background-color:black"> 
   <!--主体---> 
<div class="div_main"> 
   <!--head---> 
   <div id="" class="div_head"> 
           
    <div  class="div_button2"><input type="button" value="登陆"/></div> 
    <div  class="div_button1"><input type="button" value="推出"/></div> 
   
   </div> 
   <!--body---> 
   <div id="" class="div_body"> 
   <!--left---> 
    <div id="" style="float:left;width:20%;height:100%;background-color:red"> 
          <div id="" style="width:100%;height:50px;background-color:blue"></div> 
      <div id="" style="width:100%;height:50px;background-color:green"></div> 
      <div id="" style="width:100%;height:50px;background-color:blue"></div> 
      <div id="" style="width:100%;height:50px;background-color:green"></div> 
    </div> 
   <!--tab---> 
     <div id="" style="height:20%;width:100%;background-color:lightgreen"> 
        <div id="" style="width:10%;height:100%;float:left;background-color:green"></div> 
           <div id="" style="width:10%;height:100%;float:left;background-color:yellow"></div> 
     <div id="" style="width:10%;height:100%;float:left;background-color:green"></div> 
    </div> 
     <!--continer---> 
   <div id="" style="width:100%;height:80%;background-color:Brown;"> 
    <div id="" style="background-color:white;width:200px;height:200px;margin:100px;padding:50px;"> 
   <form> <input type="text" class="thintx" value="ddd" /></form> 
    </div> 
    </div> 
   </div> 
    <!--foot---> 
   <div id="" class="div_foot"></div> 
   
  </div> 
</BODY> 
</HTML>

效果图>>