CSS盒子模型与浮动

最新推荐文章于 2024-06-18 22:03:08 发布

云杰8了

最新推荐文章于 2024-06-18 22:03:08 发布

阅读量243

点赞数 1

分类专栏：笔记 css 文章标签： css

本文链接：https://blog.csdn.net/weixin_50821119/article/details/110939489

版权

css 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

笔记

7 篇文章 1 订阅

订阅专栏

在这里插入图片描述

CSS盒子模型说明

第一次写css的你
在这里插入图片描述

css盒子模型就像一个盒子，就像下边的相框。最常见的盒子div 和span。

css有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区  别： IE的content部分把 border 和 padding计算了进去;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gOkduulL-1607515292887)(C:\Users\Administrator\Desktop\练习\1209\img\20170727_2128[2].png)]

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

【注】盒子真实的所占内容区域为宽高加上内边距和边框

【注】盒子不设置宽度，默认为百分之百，但高度有时候不会做设置。

内边距（padding）

定义为边框与内容之间的间距，如下图所示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WTImVyrt-1607515292891)(C:\Users\Administrator\Desktop\练习\1209\img\VlwVi.png)]

依照上图，padding有四个简写属性。

padding-top ，上内边距。
padding-bottom，下内边距。
padding-right，右内边距。
padding-left，左内边距。

简写属性为

注意：padding 后面 4 个值定义的顺序分别为 – 上右下左

padding: 10px;             /* 意思是上下左右值全是 10px */
padding:5px 10px;          /* 意思是上下为 5px，左右为 10px */
padding:1px 2px 3px 4px;   /* 这个写法意思是：上为 1px，右为 2px，下为 3px，左为 4px */
padding:5px 10px 7px;      /* 这种写法意思是：上为 5px，左右为 10px，下为 7px

小技巧若只有单个方向的边距与其他方向的边距不相同，可以先设置整体边距，再设置单一方向的边距。

先设置所有内边距25px
padding:25px;
单一设置左边距50px
padding-left:50px;

但是 padding-top 或者 padding-bottom 这种写法，只是单方面的定义了一个方向的值，这样写会增加 CSS 代码的长度，增加 CSS 样式的代码量，拖慢页面的加载速度。

关键点：将 padding 设置为负值无效：margin：0 auto; 只对块级元素起作用
在这里插入图片描述

外边距（margin）

就是这个盒子距离周围盒子之间的距离，如下图。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AE1rS6IF-1607515292892)(C:\Users\Administrator\Desktop\练习\1209\img\VlwVi.png)]

依照上图

margin有四个简写属性。

margin-top ，上外边距。
margin-bottom，下外边距。
margin-right，右外边距。
margin-left，左外边距。

简写属性为注意：margin 后面 4 个值定义的顺序分别为 – 上右下左

margin: 10px;/* 意思是上下左右值全是 10px */  
margin:5px 10px; /* 意思是上下为 5px，左右为 10px */ 
margin:1px 2px 3px 4px; /* 这个写法意思是：上为 1px，右为 2px，下为 3px，左为 4px */
margin:5px 10px 7px;/* 这种写法意思是：上为 5px，左右为 10px，下为 7px

小技巧

margin:0 auto;让盒子水平居中

边框（border）

css边框允许你为一个元素添加边框的颜色和样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MYKfQ4x1-1607515292894)(C:\Users\Administrator\Desktop\练习\1209\img\微信截图_20201209135556.png)]

边框有三个简写属性。

边框宽度 border-width

可以单独设置各边宽度

  border-left-width: 10px;
            border-right-width: 10px;
            border-top-width: 10px;
            border-bottom-width: 10px;

边框颜色 border-color属性用于设置边框的颜色。可以设置的颜色：
- name - 指定颜色的名称，如 “red”
- RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
- Hex - 指定16进制值, 如 “#ff0000”
【注】您还可以设置边框的颜色为"transparent"。

可以单独设置各个边的颜色。
```
 border-left-color: brown;
 border-bottom-color: #000;
 border-right-color: blue;
 border-top-color: #f40;
```

边框样式border-style

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>边框</title> 
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>

<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
</body>

</html>

边框连写格式。

border: 10px solid brown;四个边框都是10px 红色实线

练习

小三角制作

  <style>
        div {
            width: 0;
            height: 0;
            border: 50px solid;
            /* border-left-width: 0; 设置直角*/
            border-color: red transparent transparent transparent;
        }
    </style>
<div></div>

圣诞树制作

 <style>
        div{
            margin: 0 auto;
        }
        .twig{
            width: 0;
            height: 0;
            border: 150px solid transparent;
            border-top: none;
            border-bottom-color: green;
        }
        .twig:nth-child(1){
            border-width: 90px;
        }
        .twig:nth-child(2){
            border-width: 120px;
        }
        .bole{
            width: 100px;
            height: 200px;
            background-color: brown;
        }
    </style>
    <div class="twig"></div>
    <div class="twig"></div>
    <div class="twig"></div>
    <div class="bole"></div>

外边距塌陷

相邻元素外边距塌陷

垂直方向上相邻的两个元素，如果都有外边距，则相交的地方会出现外边距重合现象，也叫作外边距塌陷。

在垂直方向上，margin有相遇的部分，不是取两个margin的和，而是取最大值。

<style>
        div{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: sienna;
             margin-bottom: 40px; 
        }
        .box2{
            margin-top: 40px;
            background-color: slateblue;
        }
    </style>
   
    -->
    <div class="box1">
    </div>
    <div class="box2">
    </div>

在垂直方向上，margin相遇，一正一负，值相加。

 .box1{
            background-color: sienna;
             margin-bottom: -40px; 
        }
        .box2{
            margin-top: 40px;
            background-color: slateblue;
        }

如果都为负值，取绝对值最大的那个负值。

 .box1{
            background-color: sienna;
             margin-bottom: -40px; 
        }
        .box2{
            margin-top: -90px;
            background-color: slateblue;
        }

嵌套盒子的外边距塌陷

问题**：父盒子没有填充内容，也没有设置顶部边框，那么子盒子的margin-top会让父盒子与子盒子一起掉下来。

解决方法：

给父亲上边框
border: 1px solid transparent
给父亲内边距
padding-top: 1px;
给父元素添加 overflow: hidden
子元素添加 position:absolute/relative 或 float

【注】同级之间的盒子距离使用margin，父子盒子使用padding。

标准文档流

定义：内容必须是从左到右，由上往下书写。前面的内容大小或位置发生变化时，后面的内容也会随之变化。网页的制作，是个“流”。

标准文档流有以下四个现象。

空白折叠现象

多个空格会被合并为一个空格，图片img标签如果在一行书写，没有间距，换行书写，就会在图片之间产生间隙。

矮不齐，底边对齐

文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐

自动换行，一行写不满，换行写

一行文字书写过度，浏览器就会给我们换行限时2我们的文字。

内联元素(inline)特性

与其他行内元素并排；
不能设置宽、高。默认的宽度，就是文字的宽度。
行内元素有：a b span img input select strong（强调的语气）

块级元素(block)特性

霸占一行，不能与其他任何元素并列；
能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

行内块元素

具有行内元素的属性，但是可以设置宽高，如果没有宽高由内容决定，表现为同行显示并可修改宽高内外边距等属性。

空(void)元素

常见的空元素：
<br> <hr> <img> <input> <link> <meta>
鲜为人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

块级元素和行内元素的相互转换

使用display属性

  block         像块类型元素一样显示。
  none          此元素不会被显示。
  inline-block  像行内元素一样显示，但其内容像块类型元素一样显示。
  list-item     像块类型元素一样显示，并添加样式列表标记。
  table         此元素会作为块级表格来显示
  inherit       规定应该从父元素继承 display 属性的值

元素脱离标准文档流：

浮动
绝对定位
固定定位

替换与非替换元素

替换元素	浏览器根据元素的标签和属性，来决定元素的具体显示内容。img/input
非替换元素	不是通过标签的属性来决定显示内容的，而是通过标签所包裹的具体内容来决定。

CSS Float(浮动)

什么是 CSS Float（浮动）？

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

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

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>浮动</title>
<style>
img 
{
	float:right;
}
</style>
</head>

<body>
<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
    图片自己添加
<img src="logocss.gif" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>

</html>

彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

在这里，我们对多个图片设置 float 属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>多个图片浮动</title> 
<style>
.thumbnail 
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
</style>
</head>

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>

浮动拖标、元素贴靠、

浮动的元素会脱离标注流，原来的位置不再占有，后边元素取代其位置。

浮动的元素会紧紧地贴靠在一起，如果父元素有宽度，浮动元素宽度大于父元素宽度会换行显示。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            float: left;
            width: 300px;
        }
        .box1{
            height: 200px;
            background-color: teal;
        }
        .box2{
            height: 400px;
            background-color: thistle;
        }
        .box3{
            height: 600px;
            background-color: tomato;
        }

    </style>
</head>
<body>
    <!-- 每一个浮动元素都会去紧靠上一个浮动元素 -->
    <div class="box1">
    </div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

清除浮动

在父元素后边添加微元素利用clear属性清除浮动。

 .father::after {
            content: "";
            display: block;
            clear: both;
        }

案例淘宝导航栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font: 16px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        .container {
            width: 970px;
            height: 30px;
            margin: 30px auto;
            background-image: linear-gradient(to right, #ff9000 0, #ff5000 100%);
        }
        
        .container ul {
            float: left;
        }
        
        .container ul li {
            float: left;
            margin: 0 3px;
            padding: 0 4px;
        }
        
        .container li a {
            float: left;
            font-weight: bold;
            line-height: 30px;
            color: white;
        }
        
        .container li span {
            line-height: 30px;
            color: white;
        }
        
        h2 {
            float: left;
            width: 190px;
            height: 30px;
            font-weight: bold;
            color: white;
            text-align: center;
            background-color: #ff5500;
        }
    </style>

</head>

<body>
    <div class="container">
        <h2>主题市场</h2>
        <ul>
            <li>
                <a href="#">天猫</a>
            </li>
            <li>
                <a href="#">聚划算</a>
            </li>
            <li>
                <a href="#">天猫超市</a>
            </li>
            <li><span>|</span></li>
        </ul>
        <ul>
            <li>
                <a href="#">淘抢购</a>
            </li>
            <li>
                <a href="#">电器城</a>
            </li>
            <li>
                <a href="#">司法拍卖</a>
            </li>
            <li>
                <a href="#">淘宝新选</a>
            </li>
            <li><span>|</span></li>
        </ul>
        <ul>
            <li>
                <a href="#">飞猪旅行</a>
            </li>
            <li>
                <a href="#">智能生活</a>
            </li>
            <li>
                <a href="#">苏宁易购</a>
            </li>
        </ul>
    </div>
</body>

</html>

云杰8了

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
CSS盒子模型与浮动

CSS盒子模型与浮动CSS盒子模型说明css盒子模型就像一个盒子，就像下边的相框。最常见的盒子div 和span。css有两种， IE 盒子模型、W3C 盒子模型；（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；（3）区别： IE的content部分把 border 和 padding计算了进去;[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gOkduulL-1607515292887)(C:\U
复制链接

扫一扫