margin属性详解、盒模型的计算、box-sizing属性、行内块元素之间的相互转换、元素的隐藏

最新推荐文章于 2023-01-27 09:07:26 发布

头发还多

最新推荐文章于 2023-01-27 09:07:26 发布

阅读量669

点赞数

分类专栏： js学习内容记录文章标签： css3

本文链接：https://blog.csdn.net/qq_44935762/article/details/118737130

版权

js学习内容记录专栏收录该内容

56 篇文章 0 订阅

订阅专栏

margin盒子外边距：

有四个方向

小属性	意义
margin-top	上margin，“向上踹”
margin-right	右margin，“向右踹”
margin-bottom	下margin，“乡下踹”
margin-left	左margin，“向左踹”

竖直方向的margin有塌陷现象：小的margin塌陷到大的margin种，从而margin不叠加，只以大值为准

一些元素有默认的margin：

一些元素都有默认的margin，在开始制作的时候，要将他们清除
在这里插入图片描述

盒子的水平居中：

盒子的左右两边margin都设置成auto，盒子将水平居中
文本居中text-align:center有区别！

盒模型计算：

box-sizing属性：

如果给盒子添加box-sizing：border-box;之后，盒子的width、height就表示盒子实际占有的宽高（不含margin），即padding、border变为“内缩”的，不再“外扩”

大量应用于移动网页制作中
兼容于IE9

display属性：行内元素和块级元素

display属性类型	是否能并排显示	是否能设置宽高	当不设置width属性时	举例
块级元素	否	是	width自动撑满	div、section、header、h系列、li、ul等
行内元素	是	否	width自动收缩	a、span、em、b、u、i

行内块：表单和img标签

学习目标：

提示：这里可以添加学习目标
例如：一周掌握 Java 入门知识

行内元素与块级元素的转换：

将元素转为块级元素 display：block
行内块：display：inline-block

元素的隐藏：

使用display：none；将元素可隐藏，元素将彻底放弃位置，如同没有写他的标签一样

<!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>元素的隐藏</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: red;
            /* 隐藏 (彻底放弃自己的东西)*/
            display: none;
        }
        .box3 {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

使用visibility：hidden；可以将元素隐藏，但是元素不放弃自己的位置

<!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>元素的隐藏</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: red;
            /* 隐藏 (彻底放弃自己的东西)*/
            /* display: none; */
            /* 不放弃自己的位置 */
            visibility: hidden;
        }
        .box3 {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

头发还多

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
margin属性详解、盒模型的计算、box-sizing属性、行内块元素之间的相互转换、元素的隐藏

margin盒子外边距：有四个方向小属性意义margin-top上margin，“向上踹”margin-right右margin，“向右踹”margin-bottom下margin，“乡下踹”margin-left左margin，“向左踹”竖直方向的margin有塌陷现象：小的margin塌陷到大的margin种，从而margin不叠加，只以大值为准一些元素有默认的margin：一些元素都有默认的margin，在开始制作的时候，要将他们
复制链接

扫一扫

专栏目录