Day6: 0315盒子模型，margin拖拽属性，box-sizing属性

最新推荐文章于 2021-05-17 15:27:51 发布

m0_45442261

最新推荐文章于 2021-05-17 15:27:51 发布

阅读量174

点赞数

本文链接：https://blog.csdn.net/m0_45442261/article/details/114846275

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>0315盒子模型</title>
        <style type="text/css">
            *{
                /* 清除默认样式 */
                margin:0;
                padding: 0;
            }
            li{
                list-style: none;
            }
            body{
                width:0 atuo;
            }
            .box,.box2{
                width: 200px;
                height: 200px;
                padding: 0.3125rem;
                margin: 10px;
                border: 1px solid red;
                display: inline-block;
                background-color: #008000;
            }
            .box2{
                background-color: pink;
                margin-left:-10px;
            }
            .box{
                margin-right:0;
            }
            /* 盒子模型组成部分：content（height/width）,padding,border,margin
             影响盒子大小因素不包括margin，（border向外扩展）
             四个边顺序 padding： 10px 四边都一致
               padding：10px 20px ; 上下10 左右20
               padding：10px 20px 30px;   上10左右20下30
               padding：10px 20px 30px 40px 上右下左
               
               margin特性1.上下外边距的垂直合并
               两个相邻的盒子上下间距取最大值，会垂直合并；
               两个盒子左右间距合并，是间距相加
               
               
                     特性2 margin拖拽问题
               1.给父级设置padding-top;【缺陷撑大原盒子大小】
               2.给父级加一个border；
               
               padding：20px;
               box-sizing:border-box;
               //盒子大小：计算方式是从边框到盒子是实际盒子的大小；
               通过内边距和盒子尺寸这两个属性来消除内边距对盒子实际大小的影响，实际上原盒子大小减去边框距离就                是实际内容的大小，压缩了原来内容的大小；
               
               
               */
        </style>
	</head>
	<body>
       <div class="box">盒子模型</div>
       <div class="box2">盒子模型2</div>
       
	</body>
</html>
——————————————————————————————————————————————————————————————————

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>padding对于box大小的影响；</title>
    <style>
        #div1 {
            box-sizing: border-box;
            height: 200px;
            width: 200px;
            background: red;
            margin: 10px;
            border: 1px solid #000;
            padding: 20px;
        }

        #div2 {
            box-sizing: content-box;
            height: 200px;
            width: 200px;
            background: red;
            margin: 10px;
            border: 1px solid #000;
            padding: 20px;
        }
    </style>
</head>

<body>
<!-- 盒子尺寸属性
box-sizing:
1.content-box:盒子以内容为基，如果有内边距，整体盒子会撑大
2.border-box: 盒子不变，除去内边距，会压缩盒子的内容-->

    <div id="div1">border-box</div>
    <div id="div2">content-box</div>
</body>

</html>
——————————————————————————————————————————————————————————————————————————————————————————
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Margin拖拽特性</title>
        <style type="text/css">
           {
                padding: 0;
                margin: 0;
            }
            div{
                width: 200px;
                height: 200px;
             /*1.  border: 1px solid red ; */
                background: pink;
                /* 4. color:transparent; */
            }
            p{
                /*2.    margin-top:20px; */
                /* 3.   padding-top:20px */
                width: 100px;
                height: 100px;
                background: yellow;
            }
        </style>
	</head>
    <!-- 单独两个嵌套块状元素，margin-top第二行会没用；
     父类拖拽；解决方法第一种：用第一行给父类添个边框
     第二种：采用第三行，给子类添加一个外边距；
     第三种：采用第四行，给父类中添加透明文字，文字默认占据左上角，-->
	<body>
        <div>父
        	<p></p>
        </div>
          
	</body>
</html>

m0_45442261

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Day6: 0315盒子模型，margin拖拽属性，box-sizing属性

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>0315盒子模型</title> <style type="text/css"> *{ /* 清除默认样式 */ margin:0; padding: 0;
复制链接

扫一扫