盒子模型

最新推荐文章于 2024-08-03 09:43:52 发布

zxl1578

最新推荐文章于 2024-08-03 09:43:52 发布

阅读量134

点赞数

文章标签： css

原文链接：https://blog.csdn.net/qq_38230811/article/details/83188408?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160525290119724842951070%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=160525290119724842951070&biz_id=0&utm_med

版权

本文详细介绍了CSS盒子模型，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)的概念，并通过实例展示了如何设置边框样式。同时，文章还探讨了网页布局中的浮动(float)和定位(position)技术，解释了如何使用absolute和relative定位实现元素在页面上的精确放置。

摘要由CSDN通过智能技术生成

CSS盒子模型

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模式都具备这些属性。

这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

border：设置边框 border:2px solid red;

（border-left：左边框 border-right：右边框 border-top：上边框

border-bottom：下边框）

（none无边框，solid边框为实线，dotted边框为点状即点线，dashed边框为虚线，double边框为双线）

padding ：边框内边距 padding:20pax

padding-left：左内边距

padding-right：右内边距

padding-top：上内边距

padding-bottom：下内边距

margin：边框外边距 margin:20px

margin-left：左外边距

margin-right右外边距

margin-top上外边距

margin-bottom下外边距

对数据进行操作，需要把数据放到一个区域里面（div）

布局的漂浮

float

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

实例

把图像向右浮动：


   
   
     
     
      
      
     
     
     
     
      
      
       
       <html>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       <head>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       <style type="text/css">
       
       
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       img
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       {
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       float:right
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       }
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       </style>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       </head>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       <body>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       <p>在下面的段落中，我们添加了一个样式为 
       
       <b>float:right
       
       </b> 的图像。结果是这个图像会浮动到段落的右侧。
       
       </p>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       <p>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       <img src="/i/eg_cute.gif" />
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       This is some text. This is some text. This is some text.
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       This is some text. This is some text. This is some text.
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       This is some text. This is some text. This is some text.
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       This is some text. This is some text. This is some text.
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       This is some text. This is some text. This is some text.
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       This is some text. This is some text. This is some text.
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       This is some text. This is some text. This is some text.
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       This is some text. This is some text. This is some text.
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       This is some text. This is some text. This is some text.
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       This is some text. This is some text. This is some text.
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       </p>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       </body>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       </html>

效果：

布局的定位

position 属性规定元素的定位类型。

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

实例绝对定位


   
   
     
     
      
      
     
     
     
     
      
      
       
       <html>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       <head>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       <style type="text/css">
       
       
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       h2
       
       .pos_abs
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       {
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       position:absolute;
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       left:
       
       100px;
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       top:
       
       150px
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       }
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       </style>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       </head>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       <body>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       <h2 class="pos_abs">这是带有绝对定位的标题
       
       </h2>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       <p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。
       
       </p>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       </body>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       </html>

效果：

实例相对定位


   
   
     
     
      
      
     
     
     
     
      
      
       
       <html>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       <head>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       <style type="text/css">
       
       
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       h2
       
       .pos_left
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       {
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       position:relative;
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       left:-
       
       20px
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       }
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       h2
       
       .pos_right
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       {
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       position:relative;
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       left:
       
       20px
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       }
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       </style>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       </head>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       <body>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       <h2>这是位于正常位置的标题
       
       </h2>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       <h2 class="pos_left">这个标题相对于其正常位置向左移动
       
       </h2>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       <h2 class="pos_right">这个标题相对于其正常位置向右移动
       
       </h2>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       <p>相对定位会按照元素的原始位置对该元素进行移动。
       
       </p>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       <p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。
       
       </p>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       <p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。
       
       </p>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       </body>
      
      
     
     

     
     
      
      
     
     
     
     
      
      
       
       </html>

效果：

zxl1578

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型

CSS盒子模型网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模式都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。 CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。   border：设置边框     ...
复制链接

扫一扫