Web前端学习4

最新推荐文章于 2024-10-16 11:23:07 发布

404我只想睡觉

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量311

点赞数

文章标签：前端学习 css

本文链接：https://blog.csdn.net/weixin_71337144/article/details/127837662

版权

web前端学习4

一、css盒子模型
二、box-sizing改变盒模型
三、盒模型之margin叠加问题
四、盒模型之margin传递问题
五、css盒子模型之扩展
六、盒子模型的嵌套练习
七、按类型划分标签
八、按内容划分标签
九、按显示划分标签
十、display显示框类型
十一、标签嵌套规范

一、css盒子模型

盒子模型:
在这里插入图片描述

组成 :
content -> padding -> border -> margin
物品 -> 填充物 -> 包装盒 -> 盒子与盒子之间的间距
1.content : 内容区域 width和height组成的
2.padding : 内边距 (内填充)
只写一个值 : 30px(上下左右)
写两个值 : 30px 40px( 上下、左右 )
写四个值 : 30px 40px 50px 60px ( 上、右、下、左 )
单一样式只能写一个值
padding-left
padding-right
padding-top
padding-bottom
3.margin : 外边距(外填充)
注 : 1.背景颜色会填充到margin以内的区域(不包括)
2.文字会在content区域。
3.padding不能出现负值，margin是可以出现负值。

<style>
        #box{ width:200px; height:200px; background: red; border:10px transparent solid;
        padding : 30px 50px; margin: -10px;}
        #box2{ width: 200px; height: 200px; background: black; color:white;}
    </style>
</head>
<body>
    <div id="box">这是一个盒子</div>
    <div id="box2">又是一个盒子</div>
</body>

效果：
在这里插入图片描述

![在这里插入图片描述](https://img-blog.csdnimg.cn/69a654603d1d40efa20f3b5f48f39c90.png

二、box-sizing改变盒模型

box-sizing 盒尺寸，可以改变盒子模型的展现形态
默认值: content-box : width、height -> content
border-box : width、height -> content padding border
box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。
取值为content-box(默认值) | border-box
使用场景:
1.不用再去计算一些值
2.解决一些100%的问题

<style>
        /* #box{ width:200px; height:200px; background: red; border:10px blue solid;
        padding : 30px 50px;
        box-sizing: border-box;} */
    #box{ width:80px; height:120px; background: red; border:10px blue solid;
        padding : 30px 50px;}
        input{ width: 100%; padding: 30px; box-sizing: border-box;}
    </style>
</head>
<body>
    <div id="box">这是一个盒子</div>
    <input type="text">
</body>

效果：
在这里插入图片描述

三、盒模型之margin叠加问题

margin叠加
当给两个盒子同时添加上下边距的时候，就会出现叠加的问题。这个问题，只在上下有，左右是没有这个叠加问题的。
解决方案:
1.BFC规范
2.相办法只给一个元素添加间距

<style>
        /* #box1{ width: 200px; height: 200px; background: red; margin-bottom: 70px;}
        #box2{ width: 200px; height: 200px; background: blue; margin-top: 40px;} */
        /* #box1{ width: 200px; height: 200px; background: red; margin-bottom: 70px;}
        #box2{ width: 200px; height: 200px; background: blue;} */
        #box1{ width: 200px; height: 200px; background: red; margin-bottom: 0;}
        #box2{ width: 200px; height: 200px; background: blue; margin-top: 70px;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>

效果：
在这里插入图片描述

四、盒模型之margin传递问题

margin传递
margin传递的问题只会出现在嵌套的结构中，只有margin-top会有传递的问题，其它三个方向是没有传递问题的。
解决方案;
1.BFC规范
2.给父容器加边框
3.margin换成padding

<style>
        /* #box1{ width: 200px; height: 200px; background: red ;}
        #box2{ width: 100px; height: 100px; background: blue ; margin-top: 100px;} */
        /* #box1{ width: 200px; height: 200px; background: red ; border: 1px black solid;}
        #box2{ width: 100px; height: 100px; background: blue ; margin-top: 100px;} */
        #box1{ width: 200px; height: 100px; background: red ; padding-top: 100px;}        
        #box2{ width: 100px; height: 100px; background: blue ;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>

效果：
在这里插入图片描述

五、css盒子模型之扩展

margin自适应居中
margin左右自适应是可以的，但是上下自适应是不行的。(如果想实现上下自适应的话，需要在第二大部分来进行学习)
不设置content的现象
width、height不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码。

/* #box{ width: 400px; height: 100px; background: red; margin-left: 200px;} */
        /* #box{ width: 400px; height: 100px; background: red; 
            margin-left: auto; margin-right: auto; 
            margin: 0 auto;
            margin: auto auto;} */
            #box1{ width: 300px; height: 300px; background: red;}
            /* #box2{ width: 100%; height: 100px; background: blue; color: white;
                 padding-left: 30px; border-left: 10px black solid;} */
            #box2{ height: 100px; background: blue; color: white; padding-left: 30px;
                border-left: 10px black solid; }
    </style>
</head>
<body>
    <!-- <div id="box"></div> -->
    <div id="box1">
        <div id="box2">这是一些内容</div>
    </div>
</body>

效果：
在这里插入图片描述

六、盒子模型的嵌套练习

 <style>
        #box1{ width: 350px; height: 350px; border: 1px black dashed; padding: 27px;}
        #box2{ border: 5px #d7effe solid; padding: 20px;}
        #box3{ background: #ffa0df; padding: 41px;}
        #box4{ border: 1px white dashed; padding: 3px;}
        #box5{ border: 1px white dashed; padding: 49px;}
        #box6{ width: 100px; height: 100px; background: #96ff38; border: #fcff00 5px solid;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
             <div id="box3">
                <div id="box4">
                     <div id="box5">
                        <div id="box6"></div>
                     </div>
                </div>
             </div>
        </div>
    </div>
</body>

效果：
在这里插入图片描述

七、按类型划分标签

标签分类
按类型
block : 块 ( div、p、ul、li、h1···)
1.独占一行
2.支持所有样式
3.不写宽的时候，跟父元素的宽相同
4.所占区域是一个矩形
inline : 内联 ( span、a、em、strong、img···)
1.挨在一起的
2.有些样式不支持，例如: width、height、margin、padding···
3.不写宽的时候，宽度由内容决定
4.所在的区域不一定是矩形
5.内联标签之间会有空隙，原因: 换行产生
注: 布局一般用块标签，修饰文本一般用内联标签
inline-block : 内联块( input、select···)
挨在一起，但支持宽高

<style>
        body{ font-size: 0;}
        /* #box1,#box2{ width: 100px; height: 100px; background: red;}   */
        /* #box1,#box2{height: 100px; background: red;}   */
        #content1,#content2{ width: 100px; height: 100px; background: red; font-size: 16px;}
        input{ width: 100px; height: 100px;}  
    </style>
</head>
<body>
    <!-- <div></div>
    <span></span>
    <input type="text"> -->
    <!-- <div id="box1">我只想睡觉</div>
    <div id="box2">打瞌睡</div> -->
    <!-- <span id="content1">内联1内联1内联1内联1</span><span id="content2">内联2</span> -->
    <span id="content1">内联1内联1内联1内联1</span>
    <span id="content2">内联2</span>
    <input type="text">
    <input type="text">
</body>

八、按内容划分标签

按内容
Flow : 流的内容
Metadate : 元数据
Sectioning: 分区
Heading : 标题
Phrasing : 措辞
Embedded : 嵌入的
Interactive : 互动的

九、按显示划分标签

按显示
替换元素 : 浏览器根据元素的标签和属性，来决定元素的具体显示内容
img、input···
非替换元素 : 将内容直接告诉浏览器，将其显示出来
div、h1、p···

 <style>
        img{ width: 100px; height: 100px;}
    </style>
</head>
<body>
    <img src="./#" alt="">
    <!-- <input type="checkbox">
    <h1>标题</h1> -->
</body>

十、display显示框类型

display
block
inline
inline-block
none
注: 区别
display:none( 不占空间的隐藏)
visibility:hidden( 占空间的隐藏)

<style>
        /* div{ width: 100px; height: 100px; background: red; display: inline;} */
        /* div{ width: 100px; height: 100px; background: red; display: inline-block;}
        span{ width: 100px; height: 100px; background: red; display: inline-block;}
        input{ display:none;} */
        #box1,#box2{ width: 100px; height: 100px; background: red;}
        /* #box1{ display: none;} */
        #box1{ visibility: hidden;}
    </style>
</head>
<body>
    <!-- <div>111</div>
    <div>222</div>
    <span>内联1</span>
    <span>内联2</span>
    <input type="text"> -->
    <div id="box1">111</div>
    <div id="box2">222</div>
</body>

效果：
在这里插入图片描述

十一、标签嵌套规范

ul、li
dl、dt、dd
table、tr、td

1.块标签可以嵌套内联标签

块嵌套内联

<div>
    <span></span>
    <a href="#"></a>
</div>

块嵌套块

<div>
    <div></div>
</div>

2.块标签不一定能嵌套块标签

特殊:
错误的写法

<p>
  <div></div>
</p>

3.内联标签不能嵌套块标签

a标签是一个例外

错误的写法:

<span>
     <div></div>
</span>

4.特殊

正确的写法:

<a href="#">
    <div></div>
</a>

404我只想睡觉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫