CSS教程

CSS属性-【盒子模型】or【溢出属性】

本文主要是介绍CSS属性-【盒子模型】or【溢出属性】,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、盒子模型

1.内边距padding

1个值,4个方向一样 padding:10px;

2个值,上下,左右 padding:10px 10px ;

3个值,上 左右 下 padding:10px 10px 10px;

4个值,上 右 下 左 padding:10px 10px 10px 10px;

2.内边距特性

1.可以设置单一方向

padding-方向:top bottom left lright

2.清除所有元素的内边距

*{
	padding:0;
}

3.背景色蔓延

3.边框 border

border:10px solid red ;
边框: 粗细 样式 颜色;
样式: solid(单实线) double(双实线) dashed(虚线) dotted(点状线) 

1.可以对边框设置单一方向

上边框 border-top:
下边框 border-bottom:
左边框 border-left:
右边框 border-right:

2.对border进行拆分,单独写样式

边框粗细 border-width:
边框样式 border-style:
边框颜色 border-color:

注: 都可以实现对四个方向的单独设置

4.外边距 margin

1个值,4个方向一样 margin:10px;

2个值,上下,左右 margin:10px 10px ;

3个值,上 左右 下 margin:10px 10px 10px;

4个值,上 右 下 左 margin:10px 10px 10px 10px;

5.外边距特性

1.可以设置单一方向

margin-方向:top bottom left lright

margin-top:10px;

2.背景色没有蔓延

3.清除所有元素的外边距

*{
	margin:0;
}

4.外边距支持负值

负值是往反方向走的

margin-top:-100px; 就是往上移100px

5.屏幕居中

margin:0 auto; 横向居中

6.兄弟关系,两个盒子垂直外边距与水平外边距问题

  1. 垂直方向,外边距取最大值
  2. 水平方向,外边距会进行合并处理

7.父子关系,给子加外边距,但作用于父身上了,如何解决

  1. 将子盒子的margin-top====>改为父盒子的padding-top,注意高度的计算
 <style>
        .box1{
            width: 400px;
            height: 350px; 对应的父盒子高度也需减掉50px
            background-color: blue;
            padding-top: 50px; 父盒子加了50px的内边距
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: red;            
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
        
        </div>
    </div>    
</body>
  1. 给父盒子设置边框
border:1px solid transparent(透明)

 高度还需要减去2px

<style>
        .box1{
            width: 398px;	但是对应的父盒子高度和宽度需要减掉2px
            height: 398px;	
            background-color: blue;
            border: 1px solid transparent;  给父盒子设置了边框,transparent(颜色透明)        
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 50px; 设置子盒子外边距为50px
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
        </div>
    </div>
    
</body>
  1. 给其中一个盒子加上浮动
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .box1{
            width: 400px;
            height: 400px;
            background-color: blue;
            float: left;           
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
        </div>
    </div>
</body>
</html>
  1. 给父盒子加overflow:hidden;
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .box1{
            width: 400px;
            height: 400px;
            background-color: blue;           
            overflow: hidden; 
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
        </div>
    </div>  
</body>

二、溢出属性

1.溢出属性

说明:

overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;

visible:默认值,溢出内容会显示再元素之外

hidden:溢出内容隐藏;

scroll:滚动,溢出内容以滚动条方式显示;

auto:如果有溢出会自动添加滚动条,没有溢出正常显示;

inherit:固定应该遵从父元素继承overflow属性的值;

overflow-x:X轴溢出;

overflow-y:Y轴溢出;

溢出属性案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>溢出属性案例</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 清除盒子的边距 */
        #box{
            width: 890px;
            height: 290px;
            /* background: pink; */
            margin: 0 auto;
            overflow: auto; /*给盒子设置滚动条自动显示*/
        }
        .info{
            width: 162px;
            height: 112px;
            border: 1px solid #808080;
            float: left;
            margin-right: 48px;
            margin-bottom: 20px; 
        }
        /*设置info宽度和高度的时候,注意减去边框*/
        .info div{
            height: 84px;
            background: #cccccc;
            font-size: 13px;
        }
        .info .price{
            height: 63px;
            line-height: 63px;/*文字设置为垂直居中*/
            padding-left: 21px;
            color: #b5b5b5;
        }
        .info .date{
            padding-left: 21px;
            color: #b5b5b5;
            padding-bottom: 10px;
        }
        .info .category{
            height: 28px;
            line-height: 28px;
            color: #000000;
            background:white;
            text-align: center;
            font-size: 12px;
        }
        .info:hover div{
            background: #219cea; 
        }
        /*给info设置伪类,鼠标移上去,盒子背景颜色变为蓝色*/
        .info:hover .price{
            color: white;   
        }
        /*鼠标移上去,字体颜色变为白色*/
        .info:hover .date{
            color: white;   
        }
        .info:hover .category{
            color: #219cea;
            background-image: url(/day05/img/icon.png);  /*添加一个图标*/
            background-repeat: no-repeat; /*图片不平铺*/
            background-position:right bottom ;/*设置小图标的位置为右下角*/
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="info">
            <div>
                <p class="price">¥100.00元</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>

        <div class="info">
            <div>
                <p class="price">¥100.00元</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">¥100.00元</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">¥100.00元</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">¥100.00元</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">¥100.00元</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">¥100.00元</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">¥100.00元</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">¥100.00元</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div>
                <p class="price">¥100.00元</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
    </div>
</body>
</html>

image-20220209195646486

2.空余空间

说明:

white-space: normal/nowrap/pre/pre-wrap /pre-line /inherit 该属性用来设置如何处理元素内的空白;

pre: 预格式化文本-保留空格,tab,回车,不换行;
image-20220209201722322

pre-wrap: 换行,保留空格,tab, 回车

image-20220209201823839

pre-line: 换行,显示回车,不显示空格;

image-20220209203633276

normal: 默认值,空白会被浏览器忽略;

nowrap: 文本不会换行,文本会在同一行上继续,直到遇到<br/>标签为止

image-20220209203743573

3.省略号显示

说明:

text-overflow:clip/ellipsis;

clip: 默认值,不显示省略号(...);

ellipsis: 显示省略标记;

 

当单行文本溢出显示省略号需要同时设置以下声明:

1.容器宽度: width :200px;

2.强制文本在一行内显示:white-space:nowrap;

3.溢出内容为隐藏:overflow:hidden;

4.溢出文本显示省略号:text-overflow:ellipsis;

<style>
        div{
            height: 200px;
            width: 200px;
            background: yellow;
            white-space: nowrap;/*nowrap 文本不会换行,会在此行继续显示*/
            overflow: hidden;/*溢出隐藏*/
            text-overflow: ellipsis;/*文本溢出隐藏,显示省略号*/
        }
    </style>
</head>
<body>
    <div>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero suscipit aspernatur deleniti, explicabo id quidem tempora, aliquam quisquam consequuntur facilis porro! Fugiat eos voluptate hic id assumenda, dolor molestias velit.
    </div>
</body>

image-20220209203122997

这篇关于CSS属性-【盒子模型】or【溢出属性】的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!