CSS基础

Posted 2023-03-30 一直饿着肚子

CSS选择器

解析方式：从右往左解析，加快匹配速度

选择器分类

• 元素选择器 a
• 伪元素选择器 ::before
• 类选择器 .link
• 属性选择器 [type=radion]
• 伪类选择器 :hover
• ID选择器 #id
• 组合选择器 [type=checkbox] + label
• 否定选择器 :not(.link)
• 通用选择器 *

权重选择器

• ID选择器 #id +100
• 类 属性 伪类 +10
• 元素 伪元素 +1
• 其他选择器 +0
• 属性后加 !important 优先级最高
• 元素属性 优先级最高
• 相同权重 后写的生效

非布局样式

字体

• 字体族
  serif sans-serif monospace cursive fantasy 设置的时候不需要双引号
• 多字体机制 fallback
  设定几个字体，从头到尾，有哪个字体用那一个
• 网络字体、自定义字体

@font-face 
	font-family: "IF";
	src: url("./IndieFlower.ttf");

行高

• 行高的构成
  由line-box决定的，line-box是由inline-box组成的
设置上下居中可以用line-height来设置
• 行高相关的现象和方案
  图片三像素
• 行高的调整

背景

• 背景颜色
  英文单词；hsla（角度，饱和度%，亮度%，透明度0.2）；rgb
• 渐变色背景
• 多背景叠加
• 背景图片和属性（雪碧图）
  • background-repeat: 平铺
  • background-position:位置
  • background-size:
  • 雪碧图实现方式：负参数
• base64和性能优化（小图片）
  • 图片转成文字，减少HTTP连接数，缺点：体积增大
• 多分辨率适配

边框

• 边框的属性
• 边框的背景图
• 边框衔接（三角形）

滚动

• 滚动行为和滚动条
  • overflow：auto（滚动的时候才有滚动条）；scroll（滚动条一直在）；hidden；visible

文字折行

• overflow-wrap（word-wrap）通用换行控制
  换行的时候是否要把单词保留住
• word-break 针对多字节文字
  可以设置中文句子为一个单位，或者一个字为一个单位
• white-space
  空白处是否断行

装饰性属性及其他

• 字重 font-weight: normal;bold;bolder;lighter;100
• 斜体 font-style:itatic
• 下划线 text-decoration
• 指针 cursor

面试

• css样式（选择器）的优先级
• 雪碧图的作用
• 自定义字体使用原理，场景
• base64的使用
• 伪元素（真元素）和伪类（状态）

css基础

css指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素，样式通常存储在样式表中

css常用属性

    背景：

        background-color:#F5E2EC; /*背景颜色*/

        background:transparent; /*透视背景*/

        background-image : url(/image/bg.gif); /*背景图片*/

        background-repeat : repeat; /*重复排列-网页默认*/

        background-repeat : no-repeat; /*不重复排列*/

        background-repeat : repeat-x; /*在x轴重复排列*/

        background-repeat : repeat-y; /*在y轴重复排列*/

            背景位置

            background-position : 90% 90%; /*背景图片x与y轴的位置*/

            background-position : top; /*向上对齐*/

            background-position : buttom; /*向下对齐*/

            background-position : left; /*向左对齐*/

            background-position : right; /*向右对齐*/

            background-position : center; /*居中对齐*/

    文本： text、word、direction（文本操作：通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。）

    text-indent(缩进文本) text-indent: 5em;

    text-align（水平对齐） text-align:center

    word-spacing（字间隔） word-spacing: 30px;

    text-decoration（文本装饰）text-decoration: none

    direction（文本方向） direction:rtl;

    框模型：背景应用于由内容和内边距、边框组成的区域。

        padding（内边距）

        padding-top:10px; /*上边框留空白*/

        padding-right:10px; /*右边框留空白*/

        padding-bottom:10px; /*下边框留空白*/

        padding-left:10px; /*左边框留空白

    margin（外边距）

    margin-top:10px; /*上边界*/

    margin-right:10px; /*右边界值*/

    margin-bottom:10px; /*下边界值*/

    margin-left:10px; /*左边界值*/

        border（边框）可设置值：宽度，样式，颜色

            框线位置

            border-top : 1px solid #6699cc; /*上框线*/

            border-bottom : 1px solid #6699cc; /*下框线*/

            border-left : 1px solid #6699cc; /*左框线*/

            border-right : 1px solid #6699cc; /*右框线*/

            框线样式

            solid /*实线框*/

            dotted /*虚线框*/

            double /*双线框*/

    CSS文字属性：

        color : #999999; /*文字颜色*/

        font-family : 宋体,sans-serif; /*文字字体*/

        font-size : 9pt; /*文字大小*/

        文字对齐

            text-align:right; /*文字右对齐*/

            text-align:left; /*文字左对齐*/

            text-align:center; /*文字居中对齐*/

            text-align:justify; /*文字分散对齐*/

        vertical-align属性

            vertical-align:top; /*垂直向上对齐*/

            vertical-align:bottom; /*垂直向下对齐*/

            vertical-align:middle; /*垂直居中对齐*/

            vertical-align:text-top; /*文字垂直向上对齐*/

            vertical-align:text-bottom; /*文字垂直向下对齐*/

    定位：

        position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

        top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

        right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。

        bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。

        left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。

        overflow 设置当元素的内容溢出其区域时发生的事情。

        clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。

        vertical-align 设置元素的垂直对齐方式。

        z-index 设置元素的堆叠顺序。

        相对定位：注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

            #box_relative {

              position: relative;

              left: 30px;

              top: 20px;

            }

        绝对定位：绝对定位使元素的位置与文档流无关，因此不占据空间。

            #box_relative {

              position: absolute;

              left: 30px;

              top: 20px;

            }

    选择器

        元素选择器

            为某个 HTML 元素，比如 p、h1、em、a设置样式

            html {color:black;}

            h1 {color:blue;}

            h2 {color:silver;}

        选择器分组

            h2 元素和段落都有灰色。

            h2, p {color:gray;}

        类选择器

            类选择器允许以一种独立于文档元素的方式来指定样式。

            该选择器可以单独使用，也可以与其他元素结合使用。

            .important {color:red;}

            只有段落显示为红色文本：

            p.important {color:red;}

            假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和

             warning 的所有元素还有一个银色的背景 。就可以写作：

            .important {font-weight:bold;}

            .warning {font-style:italic;}

            .important.warning {background:silver;}

        ID选择器

与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。

        #intro {font-weight:bold;}

        属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

        a[href] {color:red;}

a[href][title] {color:red;}

后代选择器

后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

h1 em {color:red;}

子元素选择器

选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器

h1 > strong {color:red;}

相邻选择器

增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}