CSS盒子模型及属性

最新推荐文章于 2024-04-28 16:04:57 发布

原创最新推荐文章于 2024-04-28 16:04:57 发布 · 619 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

CSS（层叠样式表）用于定义网页表现形式，包括元素的位置、字体、颜色等。其特点包括丰富的样式定义、易用性、多页面复用、层叠规则和页面简洁。关键组件包括选择器（标签、ID、类选择器）、属性（如字体、高度、宽度、边框和背景）以及盒模型。常用属性如`font`、`text-align`、`height`、`width`、`border`和`position`，盒模型则由内容、内边距、边框和外边距组成，浮动和定位属性帮助实现复杂布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS是什么？

CSS 是“Cascading Style Sheet”的缩写，中⽂意思为“层叠样式表”，它是⼀种标准的样式表语⾔，⽤于描述⽹⻚的表现形式（例如⽹⻚元素的位置、⼤⼩、颜⾊等）。

CSS的作用

CSS 的主要作⽤是定义⽹⻚的样式（美化⽹⻚），对⽹⻚中元素的位置、字体、颜⾊、背景等属性进⾏精确控制。CSS 不仅可以静态地修饰⽹⻚，还可以配合 JavaScript 动态地修改⽹⻚中元素的样式，⽽且市⾯上⼏乎所有的浏览器都⽀持 CSS。

CSS的特点

1.丰富的样式定义（边框，文字的样式，背景色或背景图片等）

2.易于使用和修改（CSS 定义在 HTML 元素的 style 属性中，也可以定义在 HTML ⽂档标签内，还可以定义.css文件，再引入HTML文档中）

3.可以多页面使用（重复使用）

4.层叠（可以对同⼀个HTML元素多次定义CSS样式，后⾯定义的样式会覆盖前⾯定义的样式）

5.页面简洁（CSS单独定义，可以重复使用，可以减少代码量）

CSS中的三个重要的组成部分

选择器：选择器由 HTML 元素的 id ，class 属性或元素名本身以及⼀些特殊符号构成，⽤来指定要为哪个 HTML 元素定义样式。

属性：：想要给HTML元素设置的样式名称，由⼀系列关键词组成，(例如：color颜色，font字体，background背景等）

值：由数值和单位或关键字组成，⽤来控制某个属性的显示效果（如color属性的值blue等）

a.常用选择器

1.标签选择器

p{
        color:red;
}

2.ID选择器

#name{
        color:red;
}

#name选择器匹配HTML标签中id="name"属性的标签。

3.类选择器

.a{
        color:red;

}

类选择器的定义需要⽤到⼀个英⽂的句号 . ，后⾯紧跟 class 属性的值。

.a选择器匹配文档中所有具有class="a"属性的标签。

b.属性

字体（font）

属性	描述
font-family	设置字体
font-weight	设置字体粗细
font-size	设置字体大小
font-style	设置字体风格（如：italic斜体）

CSS文本格式

（1）text-align

属性值	描述
left	默认值，左对齐
right	右对齐
center	居中对齐

CSS高度和宽度

（1）height

（2）width

宽度和高度使用该表进行设置

属性值	描述
auto	默认值，浏览器自动设置
length	使用px单位来定义
%	定义相对于上以元素的百分比

CSS边框

CSS中的边框是围绕元素内容和内边距的⼀条或多条线段，我们可以⾃定义这些线段的样式、宽度和颜⾊。

属性	描述
border-style	设置边框的样式，如实线、虚线等
border-width	设置边框的宽度
border-color	设置边框的颜⾊

(1)border-style

属性	说明	样式值
border-top-style	上边框样式	none：⽆边框 solid：实线边框 dashed：虚线边框 dotted：点状边框 double：双线边框 hidden：与none相同，应⽤于解决边框冲突
border-bottom-style	下边框样式
border-right-style	右边框样式
border-left-style	左边框样式
border-style	设置四个边框样式

(2)border-width

属性	说明	宽度值
border-top-width	上边框宽度	thin：较细的边框 medium：中等宽度的边框 thick：较粗的边框 length：数值加单位的形式设置具体边框宽度，例如2px
border-bottomwidth	下边框宽度
border-right-width	右边框宽度
border-left-width	左边框宽度
border-width	设置四个边框宽度

(3)border-color

属性	说明	颜⾊值
border-top-color	上边框颜⾊	color_name：颜⾊名称，如red hex_number：颜⾊的⼗六进制值，如 #FF0000 rgb_number：rgb()函数，如rgb(255,0,0)
border-bottom-color	下边框颜⾊
border-right-color	右边框颜⾊
border-left-color	左边框颜⾊
border-color	设置四个边框颜⾊

CSS背景

属性	描述
background-color	设置元素的背景颜⾊
background-image	设置元素的背景图像
background-repeat	控制背景图像是否重复
background-size	设置背景图像的尺⼨
background	背景属性的缩写，可以在⼀个声明中设置所有的背景属性

CSS盒⼦模型

盒⼦模型是⽹⻚设计中经常⽤到的⼀种思维模型，由四个部分构成，从内⽽外分别为内容区（ co ntent ）、内边距（ padding ）、边框（ border ）和外边距（ margin ）,CSS为这四部分提供了⼀系列相关属性，通过对这些属性的设置可以丰富盒⼦的表现效果。

<style>
    .div_big{
        width: 300px;
        height: 300px;
        background: aqua;
        /* margin-top: 20px; */
        /* margin-left: 30px; */
        margin: 5px 5px;
        padding-left: 50px;
        padding-top: 50px;
        box-sizing: border-box;

    }
    .div_middle{
        height: 200px;
        width: 200px;
        background: red;
        padding-top: 50px;
        box-sizing: border-box;

    }
    .div_small{
        height: 100px;
        width: 100px;
        background: black;
        margin-left: 50px;

    }
</style>
<body>
    <div class="div_big">
        <div class="div_middle">
            <div class="div_small">
            </div>
        </div>
    </div>
</body>

CSS浮动

我们常⻅的⽹⻚布局分为上下结构、上中下结构等，在对⽹⻚进⾏布局时通常需要使⽤浮动来让⼀个元素脱离标准⽂档流，即脱离⾃⼰原本的位置，并在⽗元素的内容区中向左或向右移动，直到⽗元素内容的边界或者其他浮动元素为⽌。

float属性有三个可选值，如下表所示：

属性值	描述
left	元素向左浮动
right	元素向右浮动

<style>
    div{
        height: 200px;
    }
    .div_one{
        float: left;
        background-color: aqua;
        width: 300px;
        height: 300px;
    }
    .div_two{
        background-color: darkseagreen;
        float:right;
        width: 300px;
        height: 300px;
    }
    .div_three{
        background-color: blueviolet;
    }
</style>
<body>
    <div class="div_one">div1</div>
    <div class="div_two">div2</div>
    <div class="div_three">div3</div>
</body>

CSS定位（position）

position属性有4个可选值，分别对应4种不同的定位⽅式，如下所示：

取值	说明
static	静态定位。表示没有定位，元素会以标准⽂档流输出
relative	相对定位。相对元素正常位置进⾏定位，可以通过top、right、bottom、left这4个属性来设置元素相对于正常位置的偏移量，在此过程中不会对其他元素造成影响
absolute	绝对定位。相对于第⼀个⾮ static 定位的⽗级元素进⾏定位，可以通过 top、 right、bottom、left 这 4 个属性来设置元素相对于⽗级元素位置的偏移量。如果没有满⾜条件的⽗级元素，则会相对于浏览器窗⼝来进⾏定位。使⽤绝对定位的元素不会对其它元素造成影响。
fixed	固定定位。相对于浏览器的创建进⾏定位，可以使⽤ top、right、bottom、left 这 4 个属性来定义元素相对于浏览器窗⼝的位置。使⽤固定定位的元素⽆论如何滚动浏览器窗⼝元素的位置都是固定不变的。

static

<style>
    .div_big{
        width: 100%;
        height: 300px;
        background-color: aqua;
    }
    .div_small{
        width: 20%;
        height: 100px;
        background-color: red;
        position: static;
        right: 50px;
    }
</style>
<body>
    <div class="div_big">
        <div class="div_small"></div>
    </div>
</body>

relative

<style>
    .relative{
        width: 140px;
        height: 50px;
        background-color: aqua;
        position: relative;
        top: 25px;
        left: 30px;
    }
</style>
<body>
    <div>
    <div class="relative">relative</div>
    <p></p>
    </div>
</body>

absolute

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .big{
        width: 100%;
        height: 300px;
        position: absolute;
        top: 50px;
        background-color: aquamarine;
    }
    .small{
        width: 30%;
        height: 50px;
        position:absolute;
        top: 50px;
        left: 100px;
        background-color: pink;
    }
    p{
        width: 250px;
        height: 250px;
        position: absolute;
        top: 100px;
        background-color: yellow;
    }
</style>
<body>
    <div class="big">
        <div class="small">学习绝对定位absolute <P>段落</P></div>
       
    </div>
</body>

fixed

<style>
    .big{
        width: 100%;
        height: 100px;
        background-color: black;
        color: white;

    }
    .guding{
        width: 100px;
        height: 100px;
        background-color: red;
        position: fixed;
        bottom:200px;

    }
</style>
<body>
    <div class="big">
        <div class="guding"></div>
    </div>
</body>