前端DAY4

前端DAY4

学习CSS的盒子模型。

一些背景知识

CSS长度单位

px:像素;em:相对元素font-size的倍数;rem:相对根(即html)字体大小;%:相对父元素来进行计算。

注:CSS中设置长度必须加单位,否则样式无效 。

元素的显示模式

1.块元素

特点

1.在页面中独占一行

2.默认宽度:撑满父元素。默认高度:由内容撑开

3.可以通过CSS设置宽高

常见块元素:

2.行内元素

1.在页面中不占满一行

2.默认宽度:由内容撑开。默认高度:由内容撑开

3.无法通过CSS设置宽高

常见行内元素:

3.行内块元素

1.在页面中不占满一行

2.默认宽度:由内容撑开。默认高度:由内容撑开

3.可以通过CSS设置宽高

常见行内元素:

4.修改元素的显示模式 

/* 元素作为块级元素出现 */
display:block;
/* 元素作为行内元素出现 */
display: inline;
/* 元素作为行内块元素出现 */
display: inline-block;
/* 元素会被隐藏 */
display: none;

盒子模型

盒子模型的组成部分

CSS会把所有的HTML元素看成一个盒子。

margin外边框:盒子与外界的距离。(若盒子给了具体宽度不会影响盒子大小但会影响盒子位置)

border边框:盒子的边框。

padding内边距:紧贴内容的补白区域。

content内容:元素中的文本或后代元素都是他的内容。

盒子大小=content+两边padding+两边border 

关于默认宽度:

所谓默认宽度,就是不设置width属性时元素所呈现的宽度。

总宽度=父的content-自身的左右margin

内容区的宽度=父的content-自身的左右margin-自身左右border-自身左右padding

写完后可以在开发者工具中检查效果。

例如编写了下面的代码:

<body>
     <div>hh</div>
</body>
    <style>
        div{ 
            background-color: gray;
            width: 300px;
            height: 300px;


            padding: 100px;
        }
    </style>

鼠标右键——检查,既可看到盒子的数据

注意:要查看div盒子的数据,一定要点击div后,显示才是div盒子的数据。

由图可以看出,div盒子的content区是300*300,padding是100。

盒子的内容区content

设置内容区的高度和宽度。

/* 设置内容区域的宽度 */
/* 可以设置一个精准值 */
width: 300px;
/* 也可以设置一个范围值 */
min-width: 100px;
max-width: 500px;

/* 设置内容区域的高度 */
height: 300px;
min-height: 100px;
max-height: 500px;

盒子的内边距padding

/* padding单独设置 则四个方向上都是这个100px */
            padding: 100px;

            /* padding复合去设置 每个方向上可以设置不同的值 */
            padding-top: 50px;
            padding-right: 20px;
            padding-bottom: 100px;
            padding-left: 70px;

注意:

padding值不能为负数。

行内元素设置padding时,左右padding有效果,但上下padding可能会有问题。

块级元素、行内块元素,四个方向的padding都可以有效果。

盒子的边框border

            /* 设置样式 可以合起来一起写也可以分开写 */
            /* border-style: solid; */
            border-left-style: solid;
            border-right-style: solid;
            border-top-style: solid;
            border-bottom-style: solid;

            /* 设置宽度 可以合起来一起写也可以分开写 */
            /* border-width: 10px; */
            border-left-width: 10px;
            border-right-width: 10px;
            border-top-width: 10px;
            border-bottom-width: 10px;

            /* 设置颜色 可以合起来一起写也可以分开写 */
            /* border-color: aqua; */
            border-left-color: aqua;
            border-right-color: aqua;
            border-top-color: aqua;
            border-bottom-color: aqua;

            /* 设置边框圆角 */
            border-radius: 10px;

 

盒子的外边距margin 

概念

写法和之前的一样。可以单独写margin,也可以对其上下左右分别设置不同的margin。

注意:

1.子元素的margin是参考父元素的content计算的。

2.上margin、左margin会影响自身的位置;下margin、右margin会影响兄弟元素的位置。

3.对应行内元素,左右的margin是可以完美设置的,上下的margin设置后是无效的。

4.margin的值可以设置为auto,对一个块级元素左右margin设置auto可以实现该元素在其父元素内水平居中。

5.margin可以为负值。

margin塌陷问题

第一个子元素的上margin会作用在父元素上,最后一个子元素的下margin也会作用在父元素上。

解决问题:

方法1:给父元素设置不为0的padding

方法2:给父元素设置不为0的border

方法3:给父元素设置CSS样式overflow:hidden(推荐)

margin合并问题

上面元素的下外边距和下面元素的上外边距会合并,两个元素的边距取两个边距的最大值而不是相加。(左右元素的外边距不会合并)

解决问题:无需解决,布局时只要设置一个外边距就可以了。

处理内容溢出

使用overflow:hidden使得溢出的内容隐藏。

隐藏元素的方式

方式一:visibility:hidden(元素看不见了但是还会占有原来的位置)

方式二:display:none(元素看不见了且不占任何位置,没有大小宽高)

元素默认样式

元素一般都有些默认样式,例如<a>、<h1>~<h6>、<p>、<ul>、ol、<body>

(body有一个8px的margin。很重要)

元素的默认样式优先级>继承的样式。所以如果要重置默认样式,选择器一定要直接选择到该元素

布局小技巧

需要实现子元素在父元素居中效果。

1.若子元素是块元素。

/* 使得子div水平居中父div */

            margin-left: auto;(父元素)

            margin-right: auto;(父元素)

/* 使得子div垂直居中父div */

            margin-top: 150px;(子元素设置,值为父content-子元素盒子总高)

/* 解决margin塌陷问题 */

            overflow: hidden;(父元素中)

<style>
        .outer{
            width: 400px;
            height: 400px;
            background-color: gray;

/* 解决margin塌陷问题 */
            overflow: hidden;
        }
        .inner{
            width: 200px;
            height: 100px;
            background-color: orange;

            /* 使得子div水平居中父div */
            margin-left: auto;
            margin-right: auto;
            
            /* 使得子div垂直居中父div */
            margin-top: 150px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">inner</div>
    </div>
</body>

2.若子元素是行内元素或行内块元素,则将其看成文本去调整居中。

/* 行内元素可以看成文本来去调整其位置 */

 /* 使得子span水平居中父div */

            text-align: center;(父元素)

 /* 使得子span竖直居中父div */

            line-height: 400px;(父元素的line-height=height)

            vertical-align: middle;(每个子元素)

<style>
        .outer{
            width: 400px;
            height: 400px;
            background-color: gray;

            /* 行内元素可以看成文本来去调整其位置 */
            text-align: center;
            line-height: 400px;
        }

        .inner{
            background-color: yellow;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="outer">
        <span class="inner">出来玩啊</span>
    </div>
</body>

ps:若想要绝对居中,则设置父元素font-size:0;

原因:因为字体设置的原因,若在父元素中显示font-size,会偏向下不能居中,所以设置父元素font-size:0;要显示出其文字,再在文字的标签中设置新的font-size值。

元素空白问题

行内元素、行内块元素,彼此之间的换行会被浏览器解析为一个空白字符。

解决方法:给父元素设置font-size:0;再给需要显示文字的元素,单独设置字体大小。

行内块的幽灵空白问题

因为行内块元素与文本的基线对齐,而文本的基线与文本最低端之间有一定距离,所以会出现一条缝隙。

解决方法:

 

转载请说明出处内容投诉
CSS教程_站长资源网 » 前端DAY4

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买