CSS常用知识点汇总

在云端f
361 阅读9分钟

CSS常用知识点汇总

选择器分类

选择器类型样式举例/备注
标签选择器标签名 { css的属性名：属性值； }p {color: red;}
类选择器.类名 { css的属性名：属性值； }.hezi {color: blue; font-size: 15px;} 类名不可数字/下划线开头。并在要应用该样式的标签中增加class属性，属性值为类名,一个标签可同时用多个类名，类名之间以空格隔开
id选择器#id名 { css的属性名：属性值； }#neo {color: blue; font-size: 16px;} 每个html文件只允许使用一次该id选择器设置的样式 并在要应用该样式的标签中增加id属性，属性值为id名
通配符选择器* {css的属性名：属性值；}* {color: red;} 通配符选择器效果作用整个页面，实际使用频率极低
后代选择器父级选择器 后代选择器 {css的属性名：属性值；}选择器之间有空格，后代选择器包括子级/孙级/重孙级。。。。
子代选择器父级选择器>子代选择器 {css的属性名：属性值；}只选中子代
并集选择器选择器1, 选择器2, 选择器3, {css的属性名：属性值；}
交集选择器选择器1选择器2选择器4{css的属性名：属性值；}选择器之间没有连接符号
伪类选择器选择器:hover { css的属性名：属性值； }定义鼠标悬停时的状态
结构伪类选择器E:first-child { css的属性名：属性值； }匹配父元素中的第一个子元素，并且是E元素。例子：ul li:first-child { css的属性名：属性值； }
结构伪类选择器E:last-child { css的属性名：属性值； }匹配父元素中的最后一个子元素，并且是E元素。例子：ul li:last-child { css的属性名：属性值； }
结构伪类选择器E:nth-child(n) { css的属性名：属性值； }匹配父元素中的第n个子元素，并且是E元素。例子：ul li:nth-child(5) { css的属性名：属性值； }
结构伪类选择器E:nth-last-child { css的属性名：属性值； }匹配父元素中的倒数第n个子元素，并且是E元素。例子：ul li:nth-last-child(6) { css的属性名：属性值； }

CSS引入方式

分类描述
内嵌式CSS写在style标签中
外联式CSS写在单独的.CSS文件中
行内式CSS写在标签的style属性中

元素分类

块级元素

显示特点：

  1. 独占一行
  2. 宽度默认是父元素的宽度，高度默认由内容撑开
  3. 可以设置宽高

代表标签：div , p , h系列, ul, li, dl, dt, dd, form, header, nav,......

行内元素

显示特点：

  1. 一行可以显示多个
  2. 宽度和高度默认由内容撑开
  3. 不可以设置宽高

代表标签：a, span, b, u, i, s, strong, ins, em, del.....

行内块元素

显示特点：

  1. 一行可以显示多个
  2. 可以设置宽高

代表标签：input, textarea, button, select......

字体属性

属性描述

属性表示注意点
font-size字号数字+px
font-family字体名称按实际要求
font-weight字体粗细加粗（bold/700）,不加粗（normal/400）
font-style习题样式倾斜（italic),不倾斜（normal）
font字体连写顺序固定，字号/字体必须有

font复合属性书写顺序

顺序固定顺序/功能说明
1font-style/(字体样式)
2font-weight/字体粗细
3font-size/line-height(字号大小/行高)size属性必须保留，谷歌默认字号16px，最小值12px
4font-family/字体名称family属性必须保留

文本属性

语义属性属性值/效果注意点
字体颜色color关键词/rgb/rgba/十六进制
对齐方式text-alignleft/左对齐
对齐方式text-aligncenter/居中
对齐方式text-alignright/右对齐
文本装饰text-decorationnone/无效果
文本装饰text-decorationoverline/上划线
文本装饰text-decorationunderline/下划线
文本装饰text-decorationline-through/删除线
文本缩进text-indent20pxpx为像素单位
文本缩进text-indent2emem为当前文本size的字体大小
行高line-height50pxpx为像素单位
行高line-height2文字大小的倍数

背景属性

背景常用属性

背景颜色  background-color：pink/#ffffff

背景图    background-img:url("")

背景图平铺方式  background-repeat：repeat(平铺)
			  background-repeat：no-repeat(不平铺)
              background-repeat：repeat-x(沿X轴平铺)
              background-repeat：repeat-y(沿Y轴平铺)

背景图位置   background-position：left/左(横向取值)
           background-position：center/中(横向取值)
           background-position：right/右(横向取值)
           background-position：top/上(纵向取值)
           background-position：center/中(纵向取值)
           background-position：bottom/下(纵向取值)
           background-position：10px 10px (xy轴取值，单位px)

背景图片大小

语法：background-size:宽度 高度

取值场景
数字+px直接定义图片宽高，可能出现比例失衡
百分比相当于当前盒子自身宽高的百分比
contain包含，将图片等比例缩放，直到不超出盒子大小
cover覆盖，将背景图等比例缩放，直到刚好填满盒子无空白

盒子模型

模型组成

  1. 内容：content
  2. 内边距：padding（内容与边框之间的距离）
  3. 边框：border
  4. 外边距：margin（盒子与其他外部元素的距离）

1647048702559.png

盒子相关属性

内边距：padding

属性作用取值/效果
padding-top上内边距10px
padding-bottom下内边距11px
padding-left左内边距12px
padding-right右内边距13px

注释：padding简写顺序为 上 右 下 左

外边距：margin

属性作用取值/效果
marging-top上外边距10px
marging-bottom下外边距11px
marging-left左外边距12px
marging-right右外边距13px

注释：margin简写顺序为 上 右 下 左

边框

属性作用取值/效果
border-width定义边框粗细10px
border-color边框颜色颜色
border-style边框的样式none/无线; solid/实线; dashed/虚线; dotted/点状虚线

注释：复合属性简介无顺序要求，如：border: 10px solid pink；

​ 可单独定义其中一个方向的边框：border-top / border-bottom / border-left / border-right

属性补充

  • 圆角边框

    border-radius: 5px; (可取1到4个值，定义不同方向)

  • 盒子阴影（box-shadow）

    参数取值/作用
    h-shadow数字+px / 必须，水平偏移量，可负值
    v-shadow数字+px / 必须，垂直偏移量，可负值
    blur数字+px / 可选，模糊度
    spread数字+px / 可选，阴影大小
    color色值 / 阴影颜色
    insetinset / 将阴影改为内部阴影

    示例： box-shadow: 0px 2px 3px 0px rgb(118 118 118 / 20%);

  • 边框合并

    border-collapse: collapse;

  • 盒子内减属性

    box-sizing：border-box;

浮动

特点

  1. ​ 浮动元素脱离标准流，不占标准流位置

  2. 比标准流高半个级别，可覆盖标准流内容

  3. 后一个浮动元素会在前一个浮动元素左右浮动

  4. 显示效果可一行多个，设置宽高

    注意点：浮动元素的text-align:center与margin：0 auto；不生效

    父子级标签浮动需清除浮动影响，否则后面内容会跑上来

清除浮动影响的方法

  • 双伪元素法(定义类名 .clearfix)

    .clearfix::before,
.clearfix::after{
       connect:"";
       display: table;
}

.clearfix::after{ 
         clear: both;
}

  • 单伪元素法(定义类名 .clearfix)

      .clearfix::after {
            content: '';
            /* 伪元素添加的标签是行内, 要求块 */
            display: block;
            clear: both;
            /* 为了兼容性 */
            height: 0;
            visibility: hidden;
        }

定位

  1. 定位方式

    属性名：position

    常见值如下表：

    定位方式属性值
    静态定位static(标准流默认，不用设置)
    相对定位relative
    绝对定位absolute
    固定定位fixed

  2. 设置偏移值

    偏移值设置有水平/垂直两个方向，各选一个即可

    方向属性名属性值含义
    水平left数字+px距离左边的距离
    水平right数字+px距离右边的距离
    垂直top数字+px距离上边的距离
    垂直bottom数字+px距离下边的距离

相对定位

​ 描述：自恋型，相对自己原标准流位置移动

​ 代码：position: relative;

​ 特点：需配合方位属性移动

​ 占位不脱标

​ 应用场景：组CP（子绝父相）/小范围移动

绝对定位

​ 描述：拼爹型，相对非静态定位的父元素进行定位移动

​ 代码：position: absolute;

​ 特点：需配合方位属性移动

​ 不占位脱标

​ 无非静态定位父元素则相对浏览器可视域移动

​ 应用场景：组CP（子绝父相）

固定定位

​ 描述：死心眼型，相对浏览器可视域进行定位移动

​ 代码：position: fixed;

​ 特点：需配合方位属性移动

​ 不占位脱标

​ 相对浏览器可视域移动

​ 应用场景：固定盒子在页面某个位置，如侧边栏等

拓展

  1. 子绝父相水平垂直操作

     /* 定义子绝父相后，在子盒子中设置以下偏移属性 */
left：50%；
top: 50%;
transform: translate (-50% -50%);

装饰效果属性拓展

行内/行内块元素垂直对齐

属性名：vertical-align

属性值效果
baseline默认，基线对齐
top顶部对齐
middle中部对齐
bottom底部对齐

光标类型

属性名：cursor

属性值效果
default默认值，通常是箭头
pointer小手效果，提示用户可点击
text工字型，提示用户可选择文字
move十字光标，提示用户可移动

溢出部分显示效果

属性名：overflow

属性值效果
visible可见的，默认值
hidden溢出部分隐藏
scroll始终显示滚动条
auto根据是否溢出，自动显示或隐藏滚动条

元素隐藏

  1. visibility：hidden

    特点：隐藏后占位置

  2. display：none

    特点：隐藏后不占位置，可改变display:block;使元素重新显示

元素整体透明度

属性名：opacity

属性值：0-1之间的数字

  • 1表示完全不透明
  • 0表示完全透明

伪类选择器拓展

链接伪类选择器

选择器语法功能
a:link{ }选中a链接未访问过的状态
a:visited{ }选中a链接访问之后的状态
a:hover{ }选中鼠标悬停的状态
a:active{ }选中鼠标按下的状态

焦点伪类选择器

场景：用于选中元素获取焦点时的状态，常见于表单控件

语法：

input:focus {
    background-color: skyblue;
}

注意点：表单控件获取焦点时默认会显示外部轮廓线

属性选择器

场景：通过元素上的HTML属性来选择元素，常用于input标签

选择器语法：

选择器功能
E[attr]选择具有attr属性的E元素
E[attr=“val”]选择具有attr属性并且属性值等于val的E元素

例如：

input[type="text"] {
    background-color: skyblue;
}
avatar
文章
阅读
粉丝