6.jpg 0
前端程序猿

专注于前端的程序猿

2022-04-13

css笔记03-css常用样式

2022-04-18 1 116 web前端社区

6.jpg 0 前端程序猿

滚动条overflow

1. overflow

为了能更好的处理溢出的内容,CSS 中提供了一个名为 overflow 的属性,该属性可以设置如何处理溢出元素内容区的内容,属性的可选值如下表所示:

描述
visible 默认值,对溢出的内容不做处理,内容会在元素内容区之外显示
hidden 隐藏溢出元素内容区的内容
scroll 隐藏溢出元素内容区的内容,并在元素的左侧和下方分别创建一个滚动条,通过滑动滚动条可以查看元素中的所有内容
auto 如果出现内容溢出,则会在元素左侧创建一个滚动条,通过滑动滚动条可以查看元素中的全部内容
inherit 从父元素继承 overflow 属性的值

2. overflow-x、overflow-y

在 CSS3 中还提供了 overflow-x 和 overflow-y 两个属性,它们的作用与 overflow 属性相似,属性的可选值与 overflow 属性相同,其中:

  • overflow-x:设置当元素内容区的内容在水平方向上溢出元素时如何处理溢出的内容;
  • overflow-y:设置当元素内容区的内容在垂直方向上溢出元素时如何处理溢出的内容。

当单独设置 overflow-x 或 overflow-y 其中的一个属性为非 visible 时,另外一个属性将自动设置为 auto。

元素的显示visibility/display

visibility

CSS 中的 visibility 属性用来设置元素是否可见

描述
visible 默认值,表示元素是可见的
hidden 隐藏元素
collapse 主要用来隐藏表格的行和列,隐藏的行或列所占的空间可以被其他表格内容使用;如果在其他元素上使用,其效果等同于“hidden”
inherit 从父元素继承 visibility 属性的值

visibility 属性虽然会隐藏元素,但会保留元素在页面中所占的空间。如果您希望元素隐藏的同时又不占用页面空间的话,请使用 display 属性。

级元素和行内元素

  1. 1. 块元素
  2. * 独占一行,宽度随父元素,高度随内容
  3. * 可以设置widht,height
  4. * marginpadding
  5. 2. 行内元素
  6. * 不会独占一行,宽高是随内容尺寸。
  7. * 不能设置width,height
  8. * 不能设置 margin-topmargin-bottom
  9. 3. 行内块元素
  10. * 可以设置widht,height
  11. * marginpadding
  12. * 不会独占一行,宽高是随内容尺寸。

display

display 属性是 CSS 中最重要的属性之一,主要用来控制元素的布局,通过 display 属性您可以设置元素是否显示以及如何显示。

根据元素类型的不同,每个元素都有一个默认的 display 属性值,例如

默认的 display 属性值为 block(块级元素),而

默认的 display 属性值为 inline(行内元素),也可以手动将元素的 display 属性转换为其它值。display 属性如下:

描述
none 隐藏元素
block 将元素设置为块级元素
inline 将元素设置为内联元素
list-item 将元素设置为列表项目
inline-block 将元素设置为行内块元素
table 将元素设置为块元素级的表格(类似<table>
inline-table 将元素设置为内联元素级的表格(类似<table>
table-caption 将元素设置为表格的标题(类似<caption>
table-cell 将元素设置为表格的单元格(类似<td><th>
table-row 将元素设置为表格的行(类似<tr>
table-row-group 将元素设置为表格的内容部分(类似<tbody>
table-column 将元素设置为表格的列(类似<col>
table-column-group 将元素设置为表格中一个或多个列的分组(类似<colgroup>
table-header-group 将元素设置为表格的头部(类似<thead>
table-footer-group 将元素设置为表格的脚(类似<tfoot>
box CSS3 中新增的属性值,表示将对象设置为弹性伸缩盒(伸缩盒的最老版本)
inline-box CSS3 中新增的属性值,表示将对象设置为内联元素级的弹性伸缩盒(伸缩盒的最老版本)
flexbox CSS3 中新增的属性值,表示将对象设置为弹性伸缩盒(伸缩盒的过渡版本)
inline-flexbox CSS3 中新增的属性值,表示将对象设置为内联元素级的弹性伸缩盒(伸缩盒的过渡版本)
flex CSS3 中新增的属性值,表示将对象设置为弹性伸缩盒(伸缩盒的最新版本)
inline-flex CSS3 中新增的属性值,表示将对象设置为内联元素级的弹性伸缩盒(伸缩盒的最新版本)
run-in 根据上下文来决定将元素设置为块级元素或内联元素
inherit 从父元素继承 display 属性的值

伸缩盒子(弹性盒子)是 CSS3 中一种新的布局模式,引入伸缩盒子的目的是提供一种更加有效的方式来对页面中的元素进行排列、对齐和分配空间,当页面需要适应不同的屏幕大小以及设备类型时这种布局方式能够确保元素拥有恰当尺寸和位置。

display: none

display 的属性值 none 可以用来隐藏元素

  1. visibility: hidden;

功能相似,不同的是

  1. display: none;

在隐藏元素的同时,它还会将元素所占的位置一并隐藏。

  1. display: none;

display: block

display 属性的属性值 block 可以将元素强制转换为块级元素

display: inline

display 属性的属性值 inline 可以将元素强制转换为行内元素,让元素拥有行内元素的特性,例如可以与其他行内元素共享一行等,示例代码如下:

display: inline-block

display 属性的属性值 inline-block 可以将元素强制转换为行内块元素,inline-block 既具有 block 能够设置宽高的特性又具有 inline 不独占一行的特性

透明度opacity

CSS 中提供了一个 opacity 属性用来设置元素的透明度,它不仅对颜色有效,对图像或者页面中其它的元素也有效。

opacity: number

其中 number 为一个 0~1 之间的浮点数(小数),用来表示元素的透明度,值越小则越透明(0 表示完全透明,1 表示完全不透明)。

另外,在使用 opacity 属性时,还需要注意以下几点:

  • 当一个元素定义了 opacity 属性,并且其值小于 1 时,那么它的子元素也会拥有同样的透明度;
  • 当一个元素定义了 opacity 属性,并且其值小于 1 时,将会重新定义该元素默认的 z-index 属性,如果其它的元素为非定位元素,那么该元素的堆叠级别将会高于其它元素;
  • 如果定义的 opacity 属性值超过了指定的范围,那么则截取与之最相近的值,例如 1.5 将截取为 1。

IE8 或者更早版本的 IE 浏览器不支持 opacity 属性,若想要在这些浏览器中实现透明效果可以使用 filter 属性,语法格式如下:

filter: alpha(opacity = number);

其中 number 的取值范围为 0~100,值越小则越透明。

为了让所有浏览器都可以实现透明效果,您可以同时定义 opacity 和 filter 两个属性,如下所示:

  1. p {
  2. opacity: 0.5;
  3. filter: alpha(opacity=50);
  4. }

伪类选择器

伪类是 W3C 制定的一套选择器的特殊状态,通过伪类您可以设置元素的动态状态。

伪类的名称不区分大小写,但需要以冒号:

开头。另外,伪类需要与 CSS 中的选择器结合使用,语法格式如下:

selector:pseudo-class {
property: value;
}

其中 selector 为选择器名称,pseudo-class 为伪类的名称。

CSS 中提供了各种各样的伪类,如下表所示:

选择器 例子 例子描述
:active a:active 匹配被点击的链接
:checked input:checked 匹配处于选中状态的 input 元素
:disabled input:disabled 匹配每个被禁用的 input 元素
:empty p:empty 匹配任何没有子元素的 p 元素
:enabled input:enabled 匹配每个已启用的 input 元素
:first-child p:first-child 匹配父元素中的第一个子元素 p,p 必须是父元素中的第一个子元素
:first-of-type p:first-of-type 匹配父元素中的第一个 p 元素
:focus input:focus 匹配获得焦点的 input 元素
:hover a:hover 匹配鼠标悬停其上的元素
:in-range input:in-range 匹配具有指定取值范围的 input 元素
:invalid input:invalid 匹配所有具有无效值的 input 元素
:lang(language) p:lang(it) 匹配每个 lang 属性值以 “it” 开头的 p 元素
:last-child p:last-child 匹配父元素中的最后一个子元素 p, p 必须是父元素中的最后一个子元素
:last-of-type p:last-of-type 匹配父元素中的最后一个 p 元素
:link a:link 匹配所有未被访问的链接
:not(selector) :not(p) 匹配每个非 p 元素的元素
:nth-child(n) p:nth-child(2) 匹配父元素中的第二个子元素 p
:nth-last-child(n) p:nth-last-child(2) 匹配父元素的倒数第二个子元素 p
:nth-last-of-type(n) p:nth-last-of-type(2) 匹配父元素的倒数第二个子元素 p
:nth-of-type(n) p:nth-of-type(2) 匹配父元素的第二个子元素 p
:only-of-type p:only-of-type 匹配父元素中唯一的 p 元素
:only-child p:only-child 匹配父元素中唯一的子元素 p
:optional input:optional 匹配不带 “required” 属性的 input 元素
:out-of-range input:out-of-range 匹配值在指定范围之外的 input 元素
:read-only input:read-only 匹配指定了 “readonly” 属性的 input 元素
:read-write input:read-write 匹配不带 “readonly” 属性的 input 元素
:required input:required 匹配指定了 “required” 属性的 input 元素
:root root 匹配元素的根元素,在 HTML 中,根元素永远是 HTML
:target #news:target 匹配当前活动的 #news 元素(单击包含该锚名称的 URL)
:valid input:valid 匹配所有具有有效值的 input 元素
:visited a:visited 匹配所有已经访问过的链接

1、first-child

伪类 first-child 能够匹配指定父元素下的第一个子元素,例如ul li:first-child能够匹配ul素下的第一个li

元素,如:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ul li:first-child { /*匹配<ul>下的第一个<li>标签*/
  6. color: red;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <ul>
  12. <li>test1</li>
  13. <li>test2</li>
  14. <li>test3</li>
  15. </ul>
  16. </body>
  17. </html>

2、last-child

与 first-child 类似,伪类 last-child 能够匹配指定父元素下的最后一个子元素,例如ul li:last-child能够匹配

    元素下的最后一个
  • 元素,如下:

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <style>
    5. ul li:last-child { /*匹配<ul>下的最后一个<li>标签*/
    6. color: red;
    7. }
    8. </style>
    9. </head>
    10. <body>
    11. <ul>
    12. <li>test1</li>
    13. <li>test2</li>
    14. <li>test3</li>
    15. </ul>
    16. </body>
    17. </html>

    3、nth-child

    伪类 nth-child 是 CSS3 中新增的,它可以匹配指定元素下的第 n 个子元素,如ul li:nth-child(2)能够匹配

    <ul>元素下的第二个<li>元素,示例代码如下:

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <style>
    5. ul li:nth-child(2) { /*匹配<ul>下的第二个<li>标签*/
    6. color: red;
    7. }
    8. ul li:nth-child(even){ color: red; } //li的偶数行样式
    9. ul li:nth-child(odd){ color: blue; } //li的奇数行样式
    10. </style>
    11. </head>
    12. <body>
    13. <ul>
    14. <li>test1</li>
    15. <li>test2</li>
    16. <li>test3</li>
    17. <li>test1</li>
    18. <li>test2</li>
    19. <li>test3</li>
    20. </ul>
    21. </body>
    22. </html>

    元素

    伪元素是一个附加在选择器末尾的关键词,通过伪元素不需要借助元素的 ID 或 class 属性就可以对被选择元素的特定部分定义样式。如通过伪元素您可以设置段落中第一个字母的样式,或者在元素之前、之后插入一些内容等等。

    在 CSS1 和 CSS2 中,伪元素的使用与伪类相同,都是使一个冒号:与选择器相连。但在 CSS3 中,将伪元素单冒号的使用方法改为了使用双冒号::,以此来区分伪类和伪元素。因此,建议在使用伪元素时使用双冒号而不是单冒号。

    selector::pseudo-element {
    property: value;
    }

    其中,selector 为选择器,pseudo-element 为伪元素的名称,property 为 CSS 中的属性,value 为属性对应的值。

    一个选择器中只能使用一个伪元素,而且伪元素必须紧跟在选择器之后。按照最新的 W3C 规范,在定义伪元素时您应该使用双冒号::而不是单个冒号:,以便区分伪类和伪元素。但由于旧版本的 W3C 规范并未对此进行特别区分,因此目前绝大多数的浏览器都同时支持使用单冒号和双冒号两种方式来定义伪元素。

    CSS 中提供了一系列的伪元素,如下表所示:

    伪元素 例子 例子描述
    ::after p::after 在每个 p 元素之后插入内容
    ::before p::before 在每个 p 元素之前插入内容
    ::first-letter p::first-letter 匹配每个 p 元素中内容的首字母
    ::first-line p::first-line 匹配每个 p 元素中内容的首行
    ::selection p::selection 匹配用户选择的元素部分
    ::placeholder input::placeholder 匹配每个表单输入框(例如 input)的 placeholder 属性

    1. ::after

    伪元素 ::after 能够在指定元素的后面插入一些内容,在 ::after 中需要使用 content 属性来定义要追加的内容,而且在 ::after 中必须定义 content 属性才会生效(没有需要插入的内容时可以将 content 属性的值定义为空””

    伪元素 ::after 的使用:

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <style>
    5. p.one::after {
    6. content:"";
    7. display: inline-block;
    8. width: 50px;
    9. height: 10px;
    10. background: blue;
    11. }
    12. </style>
    13. </head>
    14. <body>
    15. <p class="one">伪元素 ::after</p>
    16. </body>
    17. </html>

    2. ::before

    伪元素 ::before 能够在指定元素的前面插入一些内容。与 ::after 相似,::before 中也需要使用 content 属性来定义要追加的内容,而且在 ::before 中必须定义 content 属性才会生效(没有需要插入的内容时可以将 content 属性的值定义为空””

    伪元素 ::before 的使用和::after类似

    3. ::first-letter

    伪元素 ::first-letter 用来设置指定元素中内容第一个字符的样式,通常用来配合 font-size 和 float 属性制作首字下沉效果。需要注意的是,伪元素 ::first-letter 仅可以用于块级元素,行内元素想要使用该伪元素,则需要先将其转换为块级元素。

    伪元素 ::first-letter 的使用:

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <style>
    5. p::first-letter{
    6. font-size: 2em;
    7. color: blue;
    8. }
    9. </style>
    10. </head>
    11. <body>
    12. <p>伪元素 ::first-letter</p>
    13. </body>
    14. </html>

    4. ::first-line

    伪元素 ::first-line 用来设置指定元素中内容第一行的样式,与 ::first-letter 类似,伪元素 ::first-line 也仅可以用于块级元素,行内元素想要使用该伪元素,则需要先将其转换为块级元素。

    5. ::selection

    伪元素 ::selection 用来设置对象被选中时的样式,需要注意的是,伪元素 ::selection 中只能定义元素被选中时的 color、background、cursor、outline 以及 text-shadow(IE11 尚不支持定义该属性)等属性。

    伪元素 ::selection 的使用:

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <style>
    5. p::selection{
    6. color: red;
    7. background-color: #CCC;
    8. }
    9. </style>
    10. </head>
    11. <body>
    12. <p>伪元素 ::selection 用来设置对象被选中时的样式,需要注意的是,伪元素 ::selection 中只能定义元素被选中时的 color、background、cursor、outline 以及 text-shadow(IE11 尚不支持定义该属性)等属性。 </p>
    13. </body>
    14. </html>

    运行结果如下图所示:

    6. ::placeholder

    伪元素 ::placeholder 用来设置表单元素(

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <style>
    5. input.text::placeholder{
    6. color: red;
    7. background-color: #CCC;
    8. }
    9. </style>
    10. </head>
    11. <body>
    12. <input placeholder="请输入一段文本">未使用伪元素 ::placeholder<br>
    13. <input placeholder="请输入一段文本" class="text">使用伪元素 ::placeholder 的效果
    14. </body>
    15. </html>

    CSS 优先级规则

    CSS 优先级有着明显的不可逾越的等级制度,将其划分为 0~5 这 6 个等级,其中前 4 个等级由 CSS 选择器决定,后 2 个等级由书写形式和特定语法决定。
    0 通配符选择器*,+,>
    1 ement 选择器
    2 class 选择器,[attribute],伪类选择器
    3 id选择器
    4 style 属性里的样式
    5 !important 优先级最高(尽量少用)。
    样式优先级从大到小。

    绘制三角形

    border边框的分界线是对角,利用这个特性可以用border绘制三角形。

    1. .box3{
    2. width: 0;
    3. height: 0;
    4. border: 30px solid transparent; /* transparent 颜色透明*/
    5. border-left-color: aqua;
    6. }

    精灵图(雪碧图)

    一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,
    服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。
    因此,为了有效地减少服务器接收和发送请求的次数,
    提高页面的加载速度,出现了 CSS 精灵技术(也称 CSS Sprites、CSS 雪碧)。
    核心原理:将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了。

    1. .icon{
    2. display: inline-block;
    3. width: 70px;
    4. height: 70px;
    5. background: url("./images/icon.png");
    6. }
    7. .right{
    8. background-position: -49px -15px;
    9. }
    10. .circle{
    11. background-position: -223px -15px;
    12. }

    溢出文本内容用省略号代替

    默认元素不会截断单词
    wite-space
    normal;默认换行方式,英文一空格处换行。
    nowrap; 不换行,所有文本显示在一行。
    word-wrap: break-word; 如果长单词超过元素,则会在边界换行。如果没有超出,则是按单词换行。
    word-break: keep-all 按单词换行,如果长单词超出元素,不会自动换行。
    break-all 按边界换行,从超出边界的位置换行。

    1. white-space: nowrap;
    2. overflow: hidden;
    3. text-overflow: ellipsis; /* 文本溢出显示省略号*/
1

Copyright (C) 2021-2026 98社区 All Rights Reserved 蜀ICP备20012692号-3