CSS知识点总结

实现方式

内联样式

写在对应标签内。

<p style="color: red;">内联样式</p>

嵌入式样式

写在同一个HTML文件中，通过style标签来编写样式内容，一般会把css放在head里面。

<style>
    p {
        color: red;
    }
    </style>
    <p>嵌入式样式</p>

外部样式

写在一个单独的.css文件内。

通过<link rel="stylesheet" href="styles.css">引用。其中，styles.css是外部.css文件名。

out{
    color: red;
}

<link rel="stylesheet" href="styles.css">
           <p>
            <b>使用link的使用rel不能省略</b> 
           </p>
            <p class="out">外部样式表示例 </p>

CSS选择器

标签选择器

<style>
        p{
        color: red;
    }
    </style>
    <p>标签选择器</p>

ID选择器

<style>
        #myId {
            color: green;
        }
    </style>
    <p id="myId">ID选择器</p>

类选择器

<style>
        .myClass {
            color: blue;
        }
    </style>
    <p class="myClass">类选择器</p>

其中，优先级：标签选择器>ID选择器>类选择器

颜色的几种显示方式

1. 十六进制颜色代码：如 #FF0000，表示红色。

2. RGB颜色模式：如 rgb(255,0,0)，表示红色。

3. HSL颜色模式：如 hsl(0,100%,50%)，表示红色。

4. 颜色名称：如 red，表示红色。

盒子模型

盒子模型（Box Model）是一种用于描述网页元素在页面布局中的视觉表现的模型。它由内容区域、内边距、边框和外边距四个部分组成。

1.内容区域：元素的内部可见部分，即文本、图片等内容所在的位置。

2.内边距（padding）：内容区域与其边框之间的空间。可以设置上、右、下、左四个方向的内边距值。

3.边框（border）：围绕内容区域的线，可以是实线或虚线。可以设置边框的宽度、颜色和样式。

4.外边距（margin）：边框与其它元素之间的距离。可以设置上、右、下、左四个方向的外边距值。

盒子模型的属性

1. width: 设置元素的宽度。

2. height: 设置元素的高度。

3. margin: 设置元素的外边距，可以是一个值（上下左右都设置相同），也可以是四个值（分别设置上、右、下、左的外边距）。

  <div style="margin: 0 auto;">
                设置居中的一种方式
            </div>
            <div style="margin: 20px;">
                上右下左都是20的间距
            </div>

4. padding: 设置元素的内边距，可以是一个值（上下左右都设置相同），也可以是四个值（分别设置上、右、下、左的内边距）。

                <div style="padding: 20px;">
                           内部被内边距撑开了
                           </div>
               

5. border: 设置元素的边框，可以是一个值（上下左右都设置相同），也可以是四个值（分别设置上、右、下、左的边框）。

                <div style="border: #804949 dotted 10px;"></div>

 盒子模型布局方式

块级元素（Block-level Elements）：如div、h1、p等，它们会独占一行。

内联元素（Inline Elements）：如span、a、img等，它们不会独占一行，而是与其他元素共享一行。

浮动元素（Floating Elements）：使用float属性的元素会被浮动到其父元素的左边或右边。

<div style="float: right;">
    往右漂浮
</div>

<div style="float: left;">
    往左漂浮
</div>

定位元素（Positioned Elements）：使用position属性的元素可以相对于其正常位置进行偏移。

<div style="position: absolute; top: 50px; left: 50px;">
    绝对定位 根据网页的宽 高来定位
</div>
<div style="position: relative;">
    相对定位
</div>
                        
<div style="position: absolute;">
    绝对定位
</div>
                       
<div style="position: fixed;">
    固定定位
</div>
                        
<div style="position: sticky;">
    粘性定位
</div>
                       

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

块级元素与内联元素的转换可以通过CSS的display属性来实现。例如，将一个块级元素转换为内联元素，可以将display属性设置为inline；将一个内联元素转换为块级元素，可以将display属性设置为block。

                <p style="display: inline;">转成行内元素</p>
                        <p style="display: inline;">转成行内元素</p>
            

inline转block

                <input type="text" style="display:block;"/>
                            <input type="text" style="display:block;"/>