当前位置：首页 > news >正文

Html css样式总结

news 文章来源：https://blog.csdn.net/qq_36158551/article/details/142286036 2025/5/16 20:36:18

1.Html css样式总结

CSS 定义中文名称：层叠样式表。英文全称：Cascading Style Sheets ，简称CSS。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
（1）作用：用于选择或控制网页中的标签。
（2）分类：提供了标签选择器、类（class）选择器、id选择器三种基础选择器供开发者使用。

1.1. 定位position

布局是html中非常重要的一部分，而定位在页面布局中也是使用频率很高的方法，本章节为定位在布局中的使用技巧和注意事项。
position定位有4个属性，分别是static(默认），absolute（绝对定位），relative（相对定位），fixed（固定定位–相对于浏览器窗口）。

1.1.1. position:relative

生成的位置相对于自身定位的，需要注意的是使用position:relative的元素并没有脱离文档流，且原来的位置占用的空间依旧存在，只是位置发生了变化。一般使用relative来改变位置比较少，主要是用来设置子级的absolute定位的参考对象。relative分为三种情况进行说明
（1）包含关系：父级absolute，子级relative；
（2）包含关系：父级relative，子级absolute；
（3）并列关系：兄弟标签都是relative；

1.1.1.1. 最具常见的用法就是父级标签relative，子级标签position来做到无论浏览器如何改变，都是相对浏览器的定位。

css：

#a{height:200px;width:200px;position: relative;background-color:red;left:50px;top:50px;
}
#b{height:50px;width:50px;position: absolute;background-color:green;left:20px;top:20px;
}

html：

<div id = "a">a<div id = "b">b</div>
</div>

在这里插入图片描述

1.1.1.2. 正常情况下同1的效果，不过需要注意的是，当标签中包含文字时，relative会发生调整。

在这里插入图片描述

1.1.1.3. 当不存在父级元素包裹时，relative的相对位置是根据最近的一个兄弟作为参考的。

css：

#a{height:200px;width:200px;position: relative;background-color:red;
}
#b{height:200px;width:200px;position:relative;background-color:green;left:50px;top:50px;
}

html：

<div id = "a">
</div>
<div id = "b">
</div>

在这里插入图片描述

但当a标签也设置了left、top等相关属性时，兄弟标签b继续以a变化前作为参考相对位置。
css：

#a{height:200px;width:200px;position: relative;background-color:red;left:50px;top:50px;
}
#b{height:200px;width:200px;position:relative;background-color:green;left:20px;top:20px;
}

html：

<div id = "a">
</div>
<div id = "b">
</div>

在这里插入图片描述

1.1.2. position:absolute

absolute定位是布局中最常用到的定位，其生成的位置是相对于带有position属性的父（父…)级来定位；如果父级都没有position属性，则相对于document来定位；使用absolute定位后，定位元素是脱离文档流的，这时候父级会检测不到定位元素的宽高。inline元素使用absolute定位之后，可以对其设置宽高；元素是不可以同时使用绝对定位和浮动的。

    <div class="relative-layout"><span class="relative-item">relative布局</span></div>

/*relative布局*/
.relative-layout {background-color: grey;position: relative;padding: 20px;
}.relative-item {position: absolute;right: 0.02rem;top: 0.11rem;background: red;color: #2ac845;
}

在这里插入图片描述

可以看到在对子级span标签absolute定位之后，可以设置宽高，且父级无法检测到子级宽高，所以无法有子级来撑开；

1.1.3. position:fixed

fixed定位是相对于浏览器窗口来定位的，所以也是脱离了文档流，与absolute一样，父级会检测不到定位元素的宽高。inline元素使用absolute定位之后，可以对其设置宽高；元素是不可以同时使用fixed定位和浮动的。
z-index属性：
使用定位后的元素都会有z-index属性，同级定位元素这个值越大，其显示越靠前。这项属性需要注意的是比较时是同级定位元素进行比较。

      <div class="fixed-layout"><div class="fixed-inner"></div></div><div class="fixed-layout2"><div class="fixed-inner2"></div></div>

/*fixed布局*/
.fixed-layout {height: 150px;width: 150px;background-color: grey;position: absolute;z-index: 1;
}.fixed-inner {height: 50%;width: 50%;background: red;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: 10;
}
.fixed-layout2{position: absolute;z-index: 2;height: 100px;width: 100px;background: green;
}
.fixed-inner2{position: absolute;left: 50%;top: 50%;z-index: 8;height: 50%;width: 50%;background: yellow;
}

在这里插入图片描述

当两个拥有子元素的父级元素（绿色和灰色DIV）重叠时，层级高的父元素（绿色DIV）里的子元素（黄色DIV）永远在上层，即使层级底的父元素（灰色DIV）里的子元素（红色DIV）z-index的值较大。

1.2. 块级元素和行内元素

（1）块级元素：block
每个块级元素默认占一行高度，一行内添加的块级元素一般无法添加其他元素，两个连续的块级元素会自动换行显示。块级元素一般可以嵌套块级元素和行内元素。
常见的块级元素：div，h1-h6，dl，ul，li，ol，table，p，form。display:block；的元素都是块级元素。
（2）行内元素：inline
也叫内联元素，行内元素一般是基于语义级的基本元素，只能容纳文本或其他行内元素。
常见的行内元素：a，img，span，i，br，b，strong，label，input，select。元素样式是display:inline；的都是内联元素。
（3）行内元素和块级元素的区别
区别一：
块级元素会独占一行，默认情况下自动填满父元素的宽度
行内元素不会独占一行，相邻的行内元素会排在同一行，其宽度随内容的变化而变化
区别二：
块级元素可以设置宽高
行内元素不可以设置宽高，但是可以设置line-height来改变高度
区别三：
块级元素可以设置margin,padding
行内元素设置margin,padding，只有左右有效（margin-left，margin-right，padding-left， padding-right），上下无效（margin-top，margin-bottom，padding-top，padding-bottom）
区别四：
块级元素：display:block
行内元素：display:inline
可以通过设置display切换

1.3. 文本属性

text-decoration: none;                     /*没有文本装饰*/
text-decoration: underline red;            /*红色下划线*/
text-decoration: underline wavy red;       /*红色波浪形下划线*/

（11）white-space
描述：设置元素内部空白的处理方式
允许值：normal | pre | nowrap | pre-wrap | pre-line | inherit
注意：normal:默认，空白会被浏览器忽略。 pre:空白会被浏览器保留，其行为方式类似 HTML中的pre标签。 nowrap:文本不会换行，文本会在在同一行上继续，直到遇到标签为止。 pre-wrap:保留空白符序列，但是正常地进行换行。 pre-line:合并空白符序列，但是保留换行符。 inherit:规定应该从父元素继承 white-space 属性的值。
（12）text-shadow
描述：为文本添加阴影
允许值：none | h-shadow v-shadow blur color | initial | inherit
注意：none:默认，不绘制阴影。 h-shadow:必需，水平阴影的位置，允许负值。 v-shadow:必需,垂直阴影的位置,允许负值。 blur:可选，模糊距离。 color:可选，阴影的颜色。
（13）text-overflow
描述：用于如何向用户呈现未显示的溢出内容。
允许值：clip | ellipsis | string
注意：clip:修剪文本。ellipsis:显示省略符号来代表被修剪的文本。string:使用给定的字符串来代表被修剪的文本。
（14）word-break
描述：规定自动换行的处理方法
允许值：normal | break-all | keep-all
注意：normal:使用浏览器默认的换行规则。break-all:允许在单词内换行。keep-all:只能在半角空格或连字符处换行。
（15）word-wrap
描述：允许长单词或 URL 地址换行到下一行
允许值：normal | break-word
注意：normal:只在允许的断字点换行（浏览器保持默认处理）。break-word:在长单词或 URL 地址内部进行换行。
（16）text-align-last
描述：设置最后一行文本的对齐方式
允许值：start | end | right | center | justify
（17）text-emphasis
描述：设置重点文本样式
允许值：none | accent | dot | circle | disc | before | after
（18）line-break
描述：设置如何断开带有标点符号的中文、日文或韩文文本的行。
允许值：auto | loose |normal | strict | anywhere
注意：anywhere:来使长标点符号进行换行。auto:使用默认的断行规则。loose:使用最不严格的断行规则. 一般用于报纸等短行。normal:使用一般严格的断行规则。strict:使用最严格的断行规则。

1.4. 字体属性

1.5. 颜色与背景

（1）background-color
描述：设置背景色
允许值：transparent | <颜色>
（2）background-image
描述：设置背景图像
允许值：none |
（3）background-repeat
描述：设置背景重复，平铺方式
允许值：no-repeat | repeat | repeat-x | repeat-y
（4）background-attacbment
描述：设置背景附着，滚动和固定
允许值：scrooll | fixed
（5）background-position
描述：设置背景位置
允许值：[<百分比> | <长度>] | [top | center | bottom] | [left | center | right]
（6）background
描述：简写背景属性
允许值：<背景颜色> <背景图像> <背景重复> <背景附着> <背景位置>
（7）background-clip
描述：设置背景绘制的区域
允许值：border-box | padding-box | content-box
注意：border-box:背景被裁剪到边框盒。padding-box:背景被裁剪到内边距框。content-box:背景被裁剪到内容框。
（8）background-size
描述：背景图像的大小
允许值：length | percentage | cover | contain
注意：length:设置背景图片高度和宽度;第一个值设置宽度,第二个值设置的高度;如果只给出一个值,第二个是设置为 auto(自动)。percentage:将计算相对于背景定位区域的百分比;第一个值设置宽度,第二个值设置的高度,各个值之间以空格隔开指定高和宽,以逗号,隔开指定多重背景;如果只给出一个值,第二个是设置为"auto(自动)"。cover:保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。contain:保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
（9）background-origin
描述：规定 background-position 属性相对于什么位置来定位。
允许值：padding-box | border-box | content-box
注意：如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果。

1.6. 框与边框

1.7. Flex布局

（1）flex-direction
描述：设置主轴的方向（即元素的排列方向）。
允许值：row | row-reverse | column | column-reverse
注意：row:主轴为水平方向，起点在左端(默认值)。row-reverse:主轴为水平方向，起点在右端。column:主轴为垂直方向，起点在上沿。column-reverse:
（2）flex-wrap
描述：设置是否换行。
允许值：nowrap | wrap | wrap-reverse
注意：nowrap:不换行(默认值)。wrap:换行，第一行在上方。wrap-reverse:换行，第一行在下方。
（3）flex-flow
描述：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowarap。
（4）justify-content
描述：设置主轴上的对齐方式。
允许值：flex-start | flex-end | center | space-between | space-around
注意：flex-start:左对齐(默认值)。flex-end:右对齐。center:居中。space-between:两端对齐，项目之间的间隔都相等。space-around:每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
（5）align-items
描述：设置交叉轴上的对齐方式。
允许值：stretch | flex-start | flex-end | center | baseline
注意：flex-start:交叉轴的起点对齐。flex-end:交叉轴的终点对齐。center:交叉轴的中点对齐。baseline:项目的第一行文字的基线对齐。stretch:如果项目未设置高度或设置auto，将占满整个容器的高度（默认值）。
（6）align-content
描述：设置d多根轴线的对齐方式。如果只有一根轴线，该属性不起作用。
允许值：stretch | flex-start | flex-end | center | baseline
注意：flex-start:交叉轴的起点对齐。flex-end:交叉轴的终点对齐。center:交叉轴的中点对齐。baseline:项目的第一行文字的基线对齐。stretch:如果项目未设置高度或设置auto，将占满整个容器的高度。
（7）flex-grow
描述：设置放大比例。默认为0，即如果存在剩余空间，也不放大。
（8）flex-shrink
描述：设置缩小比例。默认为1，即如果空间不足将缩小。
（9）flex-basis
描述：flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
（10）flex
描述：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
（11）order
描述：设置排列顺序。数值越小排列越靠前，默认为0。
（12）align-self
描述：设置单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
允许值：auto | flex-start | flex-end | center | baseline | stretch
注意：flex-start:交叉轴的起点对齐。flex-end:交叉轴的终点对齐。center:交叉轴的中点对齐。baseline:项目的第一行文字的基线对齐。stretch:如果项目未设置高度或设置auto，将占满整个容器的高度。

1.8. 伪类选择器

（1）link: 超链接未被访问。
（2）visited: 超链接已被访问。
（3）active: 元素被激活。
（4）hover: 鼠标悬浮。
（5）focus: 元素获取了焦点。
（6）before: 元素前面插入内容。
（7）after: 元素后面插入内容。
（8）first-line: 元素内的第一行文本。
（9）first-letter: 元素内的第一个字符。
（10）first-child: 父元素的第一个子元素。
（11）last-child: 父元素的最后一个子元素。
（12）nth-child(n): 父元素的第n个子元素。
（13）nth-last-child(n): 父元素的倒数第n个元素。
（14）nth-of-type(n): 父元素的第n个元素，且所有匹配的子元素被分离出来单独排序。
（15）nth-last-of-type(n): 父元素的倒数第n个元素，且所有匹配的子元素被分离出来单独排序。
（16）first-of-type: 父元素的第一个同类型的子元素。
（17）last-of-type: 父元素的最后一个同类型的子元素。
（18）only-child: 父元素只包含一个匹配的子元素。

1.Html css样式总结

1.1. 定位position

1.1.1. position:relative

1.1.1.1. 最具常见的用法就是父级标签relative，子级标签position来做到无论浏览器如何改变，都是相对浏览器的定位。

1.1.1.2. 正常情况下同1的效果，不过需要注意的是，当标签中包含文字时，relative会发生调整。

1.1.1.3. 当不存在父级元素包裹时，relative的相对位置是根据最近的一个兄弟作为参考的。

1.1.2. position:absolute

1.1.3. position:fixed

1.2. 块级元素和行内元素

1.3. 文本属性

1.4. 字体属性

1.5. 颜色与背景

1.6. 框与边框

1.7. Flex布局

1.8. 伪类选择器

相关文章：