CSS入门基础2

news2024/10/6 2:20:26

1.标签类型

2.块元素

3.行内元素

4.行内块元素

5.标签行内转换

6.背景样式

1.标签类型

标签以什么方式进行显示，比如div 自己占一行，比如span 一行可以放很多个
HTML标签一般分为块标签和行内标签两种类型：
块元素
行内元素。

2.块元素

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
特点：
总是从新行开始
高度、宽度、行高、外边距以及内边距都可以控制
宽度默认是容器的100%
可以容纳内联元素和其他块元素

3.行内元素

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
特点：
和相邻行内元素在一行上
高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或则其他行内元素

4.行内块元素

行内元素：<img />、<input />>
特点：
默认宽度就是它本身内容的宽度
宽度，高度，行高、外边距以及内边距都可以控制

5.标签行内转换

块转行内：display:inline;

行内转块：display:block;

块、行内元素转换为行内块： display: inline-block;

6.背景样式

1.背景颜色：background-color
.box {
    /* 下面3种写法是等价的 */
    background-color: red;
    background-color: rgb(255, 0, 0);
    background-color: #ff0000;
}
2.背景图片:background-image
.box {
    background-image: url("./cat.jpg");
}
3.图片重复方式:background-repeat
属性值：repeat | repeat-x | repeat-y | no-repeat
描述：设置背景图片
repeat：默认。背景图像将在垂直方向和水平方向重复。
repeat-x：背景图像将在水平方向重复。
repeat-y：背景图像将在垂直方向重复。
no-repeat：背景图像将仅显示一次。
.box {
    /* repeat 默认值，默认情况下，在水平和垂直方向上都重复*/
    background-repeat: repeat;
    background-repeat: repeat-x;
    background-repeat: repeat-y;
    background-repeat: no-repeat;
}
4.图片位置:background-position
.box {
    background-position: 40px 40px;（水平位置、垂直位置）
    background-position: 20% 20%;
    background-position: right bottom;
}