美文网首页
盒子模型(重要!!)

盒子模型(重要!!)

作者: Tn299 | 来源:发表于2023-01-16 02:57 被阅读0次

个人认为这是css中最重要的知识,必须巩固巩固再巩固!!

总定义

image.png
图像: image.png

内容区

image.png

对元素设置的width和height都是对盒子内容的大小设置

边框

image.png
边框+内容的大小=整个盒子的大小
image.png

border-color(边框颜色)属性设置


image.png
border-width(边框的粗细)常用属性值

(1) .thin:细
(2) .medium:默认值
(3) .thick:精
(4) .像素值

border-style(边框类型)的常用属性值

(1) .none
(2) .hidden
(3) .dotted
(4) .dashed
(5) .solid
(6) .double

border简写(常用)

同时设置边框的颜色、粗细和样式
注意:这三个属性没有先后顺序,建议的顺序:粗细、颜色和样式

例:border:#000 10px solid;

以下四个属性也可以简写


image.png

例:只单独去掉右边的边框


image.png

内边距(padding)

表示边框和内容之间的距离

 <title>111</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px red solid;
            padding-top: 50px;
        }
        .inner{
            width: 100%;
            height: 100%;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="inner"></div>
    </div>
</body>
效果图如下: image.png

1.inner的效果为将父元素box1的内容区充满,颜色为蓝色,粉色区域为内边距,也就是边框和内容区之间的区域。

2.一个盒子的可见大小=内容区+内边距+边框!!!

3.padding同时指定四个方向的内边距规则和border属性一样。

外边距(margin)

image.png

margin的左边和上边是移动自身,右边和下边是使自己和别的对象保持距离。margin的赋值规则和border一样。

水平方向的布局

image.png

意思就是说子元素的长宽是由外边距、边框、内边距、内容组合起来的,加起来必须等于父元素的长宽。如果等式不成立就是过度约束,等式会自动调整。如果其他的值都是默认的情况下,就自动调节外边距,右边或者下面(我国的书写习惯是自左向右)
一般来说,过度约束都会去调节margin-right,所以平时也不用过多调节margin-right,因为浏览器会自动调节。如果相加的数值大于父元素,那么margin-right为负值。


image.png

以上意思为如果等式的七个值没有auto,就自动调节margin-right。可以设置的auto的值有三个,如果只有一个auto,那就调节auto的值,如果有多个auto,有宽度就调节宽度外边距为0,没宽度就平均分。

我们可以利用这一特性使一个元素在父元素中水平居中。

例: image.png
这就表明一个元素宽度为100px,margin的0表示上下的外边距为0,左右的外边距是auto,也就是居中,所以这个元素就已经水平居中了。

垂直方向的布局

要注意的点:父元素如果没有设置长宽,其大小是由子元素撑开的。

overflow的具体数值如下:


image.png
overflow是用来处理溢出的子元素!

overflow-x:处理水平方向。
overflow-y:处理垂直方向。

外边距的折叠

image.png
要注意的是父子元素外边距的重叠,子元素会传递给父元素,但是有可能会出现以下这种情况 image.png

在调节子元素的外边距时,父元素也被调节了,因为这时候父元素和子元素的上外边距是一样的,现在如果要修改有两种方法:
1.(修改父元素的padding)注意此方法要调节父元素的高度


image.png
2.(给父元素加边框)注意此方法要调节外边距的大小 image.png

行内元素的盒子模型

image.png

要注意的是水平的margin就算相同数值也是累加的。


image.png
display:将元素转换成指定的类型,要注意的是在display中,设置none之后,网页中不会留这个元素的位置。 image.png
visibility:要注意的是visibility设置hidden后,页面还会保留这个元素的位置,只是元素不显示而已。

浏览器的默认样式

image.png

像以下这种情况,并没有设置样式,但是浏览器自带了样式,边距之类的。


image.png

解决方法有两个:

1.自行指定哪些元素的样式需要修改,类似于 image.png
2.引入已有的css样式,有两种
image.png
用的比较多的就是reset.css

相关文章

  • box-sizing属性使用场景

    关键词:布局 盒子模型盒子模型盒子模型在前端开发中有着非常重要的地位。盒子模型的组成由content+paddin...

  • 理解css盒模型

    盒子模型是CSS中一个重要概念,理解了盒子模型才能更好的排版。盒子模型分为两种:ie盒子模型(怪异盒模型)和标准w...

  • box-sizing使用场景

    盒子模型是css中一个重要的概念,其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模...

  • CSS盒模型

    盒子模型是CSS中一个重要的概念,理解了盒子模型才能更好的排版和布局。盒子模型有两种,分别是 IE 盒子模型和标准...

  • 盒子模型(重要!!)

    个人认为这是css中最重要的知识,必须巩固巩固再巩固!! 总定义 图像: 内容区 对元素设置的width和heig...

  • Box model

    盒子模型概念: 盒子模型(Box Model)是CSS控制页面时一个很重要的概念。 content edge or...

  • box-sizing布局

    盒子模型 关于CSS重要的一个概念就是CSS盒子模型。它控制着页面这些元素的高度和宽度。盒子模型多少会让人产生一些...

  • 学会使用box-sizing布局

    盒子模型 关于CSS重要的一个概念就是CSS盒子模型。它控制着页面这些元素的高度和宽度。盒子模型多少会让人产生一些...

  • 标准盒子模型和怪异盒子模型

    标准盒子模型css盒子模型 又称框模型 (Box Model),是CSS中一个重要概念,文档中的每个元素被描绘为矩...

  • 面试题(DAT)

    1.什么是盒子模型?盒子模型有两种,标准盒子模型和IE盒子模型。标准盒子模型:width = content + ...

网友评论

      本文标题:盒子模型(重要!!)

      本文链接:https://www.haomeiwen.com/subject/ktcgcdtx.html