css盒子和浮动梳理

最新推荐文章于 2024-11-04 14:35:19 发布

奋斗的菜鸟.com

最新推荐文章于 2024-11-04 14:35:19 发布

阅读量319

点赞数 1

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/CodePrincess/article/details/128578189

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css盒子

css样式之盒子模型宽高、边距边框

css样式之盒子模型宽高、边距边框](#css样式之盒子模型宽高边距边框)
外边距作用

width,height

特别注意：一般情况下，当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。

css样式之盒子模型宽高、边距边框

content + padding+border+margin

化妆品盒子：化妆品(content)+填充泡沫(padding)+盒子的厚度(border)

与其他盒子间距 margin

（2）设置边框样式（border-style）：可设置宽度样式颜色

边框样式用于定义页面中边框的风格，常用属性值如下：

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线

可以单独设置某一边边框的样式

border:1px solid #ccc (width style color)

border-top-width:

border-top-style:

border-top-color：

上述合起来就是=border-top

padding 内边距，即是内容和盒子边框之间的距离

外边距作用

可设置盒子水平居中，需要满足两个条件

块级元素 display:block

盒子设置了指定的宽度 width

设置盒子 margin:0 auto

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

认识宽高

[外链图片,源站可能有防盗链机制,建议将图片保存下来直接上传(img-66SjUQlv-1672986065746)(image/image_5mFbS8tmwn.png)]

设置了宽度的盒子模型

height 和 width 属性用于设置元素内容的高度和宽度。

height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

width height只是内容区的宽度不包含内边框padding


    <div class="box" style="width: 200px;background-color: pink;  margin:0 auto;padding:10px  ">111</div>
    <script>
      console.log($(".box").style.width);//200px   width只是内容区的宽度,不包含内边框padding
    </script>

height未设置时，可以被内容元素撑开，得到一个高度值,以上述元素为例

     <div class="box1" style="width: 200px;background-color: pink;  margin:0 auto;  "></div>
    <!-- 不加内容，的话，盒子区域直接为空 -->
       <div class="box" style="width: 200px;background-color: pink;  margin:0 auto;padding:10px  ">111</div>
    <!-- 加内容，的话，盒子区域有了高度，说明高度没设置的时候是会被内容撑开了 -->
    <script>
    $(".box").css("height")//'20.8px'
    </script>

关于继承

height不能继承，如果元素高度为0，即使父元素设置height ,也没用

width 如果不设置，默认继承父元素宽度

[外链图片,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XochM8rb-1672986065750)(image/image_cLHHOnvlbS.png)]

添加了border,说明元素width height和边框无关

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            padding:10px;
            margin: 10px;
            width: 200px;
            background-color: pink;  
            margin:0 auto;  
            border: 3px solid #ccc;
        }
    </style>
</head>
<script src="jQuery.min.js"></script>
<body>
    <div class="box">111</div>
</body>
<script>
    console.log($(".box").css("width"));//200px
    console.log($(".box").css("height"));//20.8px
</script>
</html>

css3 box-sizing属性设定 width包含范围

box-sizing 属性定义如何计算一个元素的总宽度和总高度，设置是否需要加上内边距(padding)和边框等。

box-sizing: content-box|border-box|inherit:

当box-sizing值为content-box时，设置元素样式的width,height即为元素内容的宽度和高度；而元素的宽度（高度）则是元素内容的宽度（高度）+元素的上下padding（左右padding）+元素的上下border（左右border）+元素上下margin（左右margin）；下面用图列举说明。

box-sizing：border-box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            /*  box-sizing: border-box; 
                div width属性 width: 300px;  
                内容区只有270px宽 左右padding各 10px ; 左右border各5px 
               说明 box-sizing为border-box时，盒子style中的width属性为 内容区 填充padding  边框之和 
            */ 
            box-sizing: border-box; 
            width: 300px; 
            padding: 0 10px;
            border: 5px solid #ccc;
            margin: 0 auto ;
        }
    </style>
</head>
<body>
    <div>
        每天都走一步吧
    </div>
</body>
</html>

内容的高度=width-左右padding-左右border;整个div元素的宽度=width+左右margin;

说明 box-sizing为border-box时，盒子style中的width属性为内容区填充padding 边框之和

在这里插入图片描述

content-box :width属性恰好是盒子内容宽度盒子尺寸刚好是到内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{       
            box-sizing:content-box; 
            width: 300px; 
            padding: 0 10px;
            border: 5px solid #ccc;
            margin: 0 auto ;
        }

        
    </style>
</head>
<body>
    <div>
        每天都走一步吧
    </div>
</body>
</html>

在这里插入图片描述

宽高百分比设置

左右布局

float+margin-left

float布局为何能设置左右布局？

认清float:

float 浮动脱离文档流

什么是标准流 (普通流/文档流）

标准流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

标准流 -元素默认的排布规则

标准流其实就是一个默认的排布规则。下面介绍一下标准流元素的一些排布规则：

所谓的标准流：就是标签按照规定好的默认方式排列。
块级元素会独占一行，从上向下顺序排列。
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

float正式

为什么要用 float浮动布局，为了将盒子排列成一行

display inline-block 行内块元素也行，但是会有空白间隙，不知道何种空隙，不是body自带的，也不是盒子的间距为什么呢？

 <style>
        *{
            margin: 0;
            padding:0 ;
        }
        div{
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>11</div>
    <div>22</div>
    <div>22</div>

</body>

在这里插入图片描述

行内元素出现空白间距问题原因:元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙

验证：以下写法，行内块级div之间没有间隙了

    <style>
        *{
            margin: 0;
            padding:0 ;
        }
        div{
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
    <body>
        <div>11</div><div>22</div><div>22</div>
    </body>

float布局元素间没有空白间隙，解决了行内元素布局的缺陷，但是不能撑起父元素的高度

在这里插入图片描述

 <style>
        *{
            margin: 0;
            padding:0 ;
        }
        #float_container div{
            float: left;
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="float_container">
        <div>float1</div>
        <div>float2</div>
        <div>float3</div>
    </div>
</body>
<script src="../../../js/jQuery.min.js"></script>
<script>
    console.log("float_container高度:"+$("#float_container").height());//0 说明浮动元素不能撑开父元素的高度
</script>

浮动特点： float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘，言外之意是，行内元素不会影响浮动元素的移动。

以下三种情况下比对第二个设置了浮动的元素是怎么排列，

浮动特点宽高生效，可以使块级元素排成一行，具有行内块元素，浮动后的标签具备行内块特点
[外链图片,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0l6XWCCY-1673230003001)(https://secure2.wostatic.cn/static/bSk5oNMZBqCmwYEp3KXa8H/image.png?auth_key=1673229969-qUwDUUo8zqwrJFgPL8trJB-0-dd85ea8238a334d5f7ed1ccedcf0dd1a)]

[外链图片,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wmIzRkK1-1673230003002)(https://secure2.wostatic.cn/static/8VwDT6Y1a9M9jYwigWGYi4/image.png?auth_key=1673229969-qDcYYsurwobja3gEycgYAL-0-919d60e10179f4fef4441d6031b7cf7e)]

[外链图片,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GDRPb6yI-1673230003003)(https://secure2.wostatic.cn/static/w6vNpaM78QLZnSW4rtKZn8/image.png?auth_key=1673229969-iMX2R5K8ob5pvFjxtDMveM-0-a0d169e16018ac759f2b97839968826f)]

     /*1,块级元素和浮动元素*/
     <style>
        .block_div{
            width: 100px;
            height: 50px;
            background-color: pink;
        }
        
        .float_div{
            width: 100px;
            height: 50px;
            background-color: royalblue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="container1">
        <div class="block_div">block box</div>
        <div class="float_div">float left box</div>
    </div>  
</body>



     /*2,行内块级元素和浮动元素*/

   <style>
        .inline_block_div{
            width: 100px;
            height: 50px;
            background-color: pink;
            display: inline-block;
        }
        .float_div{
            width: 100px;
            height: 50px;
            background-color: yellow;
            float: left;
        }
    </style>
</head>
<body>
    <div class="container1">
        <div class="inline_block_div">inline_block box</div>
        <div class="float_div">float left box</div>
    </div>
</body>


/*3浮动元素和浮动元素，关注第二个浮动元素的排列 ，可设置宽高*/
<style>
        .block_div{
            width: 100px;
            height: 50px;
            background-color: pink;
            float: left;
        }
        
        .float_div{
            width: 100px;
            height: 50px;
            background-color: rgb(225, 156, 65);
            float: left;
            margin:0 auto; /* 不能生效 - 盒子无法水平居中 */
        }
    </style>
</head>
<body>
    <div class="container1">
        <div class="block_div">first box</div>
        <div class="float_div">(second)float left box</div>
    </div>  
</body>

<script src="../../../../js/jQuery.min.js">

</script>
<script>
    console.log("float second width"+$(".float_div").height(100));//高度是100
</script>

[外链图片源站可能有防盗链机制,建议将图片保存下来直接上传(img-AAdPOFgM-1672986065758)(image/image_aJvH5djHUy.png)]

为什么要用 float浮动布局，为了将盒子排列成一行

display inline-block 行内块元素也行，但是会有空白间隙，不知道何种空隙，不是body自带的，也不是盒子的间距为什么呢？
浮动元素不能撑开父级元素的高度，为什么？

浮动遇行内元素为什么能穿透过去？

浮动元素设置了margin:0 auto 也不能使元素居中，什么原因？

浮动元素的特性

浮动元素会脱离标准流（脱标）
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性

浮动元素的特性

inline-block元素的特点是宽高如果不设置会根据内部元素撑起大小设置，而block元素则不然，block元素的高有内部元素撑起，宽默认100%；

/*下图一代码*/
<style>
      
        .box1 {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .container{
            border: 1px solid black;
            display:block;
        }
  
    </style>
</head>

<body>
    <div class="container">
        <div class="box1">block元素特点</div>
    </div>
</body>


/*下图二代码*/

<style>
      
        .box1 {
            width: 200px;
            height: 200px;
            background-color: pink;
            
        }
        .container{
            border: 1px solid black;
            display:inline-block;
        }
  
    </style>
</head>

<body>
    <div class="container">
        <div class="box1">inline-block元素特点</div>
    </div>
</body>

/*下图三代码*/
<style>
        /* 设置了浮动（float）的元素会：
        1.脱离标准普通流的控制（浮）移动到指定位置（动）。
        2.浮动的盒子不再保留原先的位置 */
        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .container{
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box1">浮动的子元素和block父元素</div>
    </div>
</body>

图一父元素 block布局，不设宽高
在这里插入图片描述

图二父元素 inline-block布局，不设宽高
在这里插入图片描述

子元素浮动，父元素block，说明：当父元素时块级元素时，浮动会造成父元素高度塌陷

在这里插入图片描述

浮动元素会脱离标准流（脱标），(浮动的盒子不再保留原先的位置不能撑开父元素的高度)
会一行内显示并且元素顶部对齐
具有行内块元素的特性
当父元素时块级元素时，浮动会造成父元素高度塌陷

脱标

我的理解：浮动相当于在水面，标准流元素相当于在水底，水底是标准流，浮动元素脱标，不占据位置，漂浮在标准流的上面

<style>
        /* 设置了浮动（float）的元素会：
        1.脱离标准普通流的控制（浮）移动到指定位置（动）。
        2.浮动的盒子不再保留原先的位置 */
        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: gray;
        }
    </style>
</head>

<body>
    <div class="box1">浮动的盒子</div>
    <div class="box2">标准流的盒子</div>
</body>

在这里插入图片描述
参考 https://qushuaibo.blog.csdn.net/article/details/124978896