关于盒子模型的前端总结

最新推荐文章于 2024-06-16 20:02:44 发布

AG。

最新推荐文章于 2024-06-16 20:02:44 发布

阅读量383

点赞数 1

文章标签：大数据

本文链接：https://blog.csdn.net/zjt200013/article/details/125770895

版权

1.Css的基本样式

css的基本样式有很多很多，但平时能够经常用到的样式可以分为字体、图像的宽高以及颜色的选择之类，首先，我们需要了解的就是字体中css的基本样式。

字体样式

谈到字体样式首先想到的是字体的大小：font-size，单位为px(像素)。通常也免不了大段文字，而这些文字大多需要设置水平方向的位置，因此就要用到：text-align，它的值有center（水平居中）、left/start（水平居左）、right/end（水平居右）。当然，一些重要的文字我们需要对其进行加粗：font-weight，其中它的值normal：默认值，定义标准字体。bold：定义粗体文本。bolder：特粗体，相当于strong和b的作用。 lighter：定义细体文本。100-900：定义字符的粗细，400等同于normal默认值，700等同于粗体文本。文本装饰需要用到text-decoration，它的值none一般用来去除a标签的下划线，而 underline：添加下划线。line-through：添加删除线。overline：添加顶部线。文字风格的选择需要的样式是font-family，首行缩进用的是text-indent: 2em，行高与行间距的设置需要用到：line-height，它的作用是让文本在行距内垂直居中，不允许使用负值。字符与字符之间的间距需要用到letter-spacing，文本转换：text-transform。

图像的宽高

width：宽度，单位是px（像素）或者百分比：%，占父元素宽度的百分之多少。需要注意的地方是当元素没有设置宽度时，块元素宽度是父元素的100%，行内元素宽度靠文本内容撑出。

height：高度，单位也是px或者百分比：%，占父元素高度的百分之多少。（要在父元素有固定高度的情况下使用）。需要注意的地方是单元素没有设置高度时，靠内容撑出高度，内容是浮动元素/绝对定位/固定定位除外。

颜色的选择

在css中对于颜色的选择一般分为五种：

1..使用颜色名。注意点：不建议大规模使用，避免有些颜色不被浏览器解析，不同的浏览器对颜色的解析有差异。

        .color_name{
            color: red;
        }

2.使用百分比

rgb有三种颜色，当三种颜色的值都是最大值时，颜色为白色，当三个值都是最小值时是黑色，当三个值都相等时候是灰色。

        .percentage{
            color: rgb(60%, 50%, 55%);
        }

3.使用数值

取值在0-255之间

        .number{
            color: rgb(68,155,190);
        }

4.使用十六进制：最常用的方法

        .system{
            color: #7ff0ff;
        }

5.rgba:最后一个值控制颜色的透视度。

a的取值范围为0-1，其中0为完全透明，1为完全不透明。

        .box{
            height: 400px;
            background-color: rgba(146, 44, 44, 0.6);
        }

2.盒子模型

什么是盒子模型？

盒子模型（box Model）就是把HTML元素本身看作是一个矩形盒子，每个矩形都是由内容（content）、内边距（padding）、边框（border）、外边距（margin）组成，每个盒子除了有自己的大小之外，还会影响其他盒子的位置。

盒子模型的特性

1.每个盒子都有：内容（content）、内边距（padding）、边框（border）、外边距（margin）组成。 2.每个属性都包括4部分：上，下，左，右。

标准盒子与怪异盒子模型的表现效果的区别

标准盒子中的width指的是内容区域(content)的宽度，高指的也是内容区域(content)的高度。标准盒子模型的大小 = content + padding + border + margin怪异盒子模型中width指的是（content）+ 内边距（padding）+ 边框（border）怪异盒子模型的大小 = width（content + padding + border）+ margin