CSS使用笔记总结（常用属性和值）

最新推荐文章于 2024-09-29 20:51:43 发布

偏居闹市背后

最新推荐文章于 2024-09-29 20:51:43 发布

阅读量1.1k

点赞数 1

分类专栏： CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_43839317/article/details/116607092

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

概述：

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

一、注释：

CSS注释以 "/*" 开始, 以 "*/" 结束
eg: /*p{color:red;text-align:center;}*/

二、插入css样式表的方式？link 和@import 的区别是?

1.外部样式：使用标签链接到样式表。标签在（文档的）头部

eg : <link rel="stylesheet" type="text/css" href="index.css">

2.内部样式表:

<head>
    <style>
            hr {color:sienna;}
            p {margin-left:20px;}
    </style>
</head>

3. 内联样式表：

<p style="color:sienna;margin-left:20px">这是一个段落。

4.导入(@import)

link和@import的区别：

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；
@import属于CSS范畴，只能加载CSS。link引用CSS时，在页面载入时同时加载；
@import需要页面网页完全载入以后加载。link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持。

一般情况下，三种的优先级如下：
（内联样式） > （内部样式） >（外部样式） > 浏览器默认样式

三、CSS 背景

1.background-color：背景颜色
    CSS中，颜色值通常以以下方式定义:
        十六进制 - 如："#ff0000"
        RGB - 如："rgb(255,0,0)"
        颜色名称 - 如："red"；
其它属性值：
         inherit指定背景颜色，应该从父元素继承
transparent（透明）
如： body {background-color:#b0c4de;}

2.background-image：背景图像
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
如:body {background-image:url('a.jpg');}

3.background-repeat:设置背景图像是否及如何重复。
    属性值：
        repeat 背景图像将向垂直和水平方向重复。这是默认
        repeat-x 只有水平位置会重复背景图像
        repeat-y 只有垂直位置会重复背景图像
        no-repeat 背景图片不会重复
        inherit 指定背景图片属性设置应该从父元素继承

4.background-attachment：背景图像是否固定或者随着页面的其余部分滚动。
属性值：
      scroll 背景图片随页面的其余部分滚动。这是默认
        fixed 背景图像是固定的
        inherit 指定background-attachment的设置应该从父元素继承

5.background-position：设置背景图像的起始位置。
属性值一般设置：left top bottom right x% 0px

四、CSS 文本格式

1. color：文本颜色：
    十六进制值 - 如: ＃FF0000
    一个RGB值 - 如: RGB(255,0,0)
    颜色的名称 - 如: red

2.text-align：文本的对齐方式
    left 把文本排列到左边。默认值：由浏览器决定。
    right 把文本排列到右边。
    center 把文本排列到中间。
    justify 实现两端对齐文本效果。

3.text-decoration:文本修饰，主要是用来删除链接的下划线
    none 默认。定义标准的文本。
    underline 定义文本下的一条线。
    overline 定义文本上的一条线。
    line-through 定义穿过文本下的一条线。

4.text-transform: 文本转大小写（控制元素中的字母）
    none 默认。定义带有小写字母和大写字母的标准的文本。
    capitalize 文本中的每个单词以大写字母开头。
    uppercase 定义仅有大写字母。
    lowercase 定义仅有小写字母。

5.text-indent：文本缩进属性是用来指定文本的第一行的缩进。
如：p {text-indent:50px;}

6.direction: 设置文本方向。
ltr默认。文本方向从左到右。
rtl文本方向从右到左。

7.letter-spacing: 设置字符间距

8. line-height 设置行高

9. vertical-align: 设置元素的垂直对齐
        middle把此元素放置在父元素的中部。
        sub垂直对齐文本的下标。
        super垂直对齐文本的上标
        top把元素的顶端与行中最高元素的顶端对齐
        bottom把元素的底端与行中最低的元素的顶端对齐。
        text-bottom把元素的底端与父元素字体的底端对齐。

10. word-spacing: 设置字间距

11. text-shadow ：如： text-shadow: 2px 2px #ff0000;

五、CSS 文字

1.font-style：斜体文字的字体样式属性
font-style:normal; 正常 - 正常显示文本
font-style:italic; 斜体 - 以斜体字显示的文字

2.font-family : 属性设置文本的字体系列。
p{font-family:"Times New Roman", Times, serif;}

3.font-size : 属性设置文本的大小。

4.font-weight : 指定字体的粗细。

六、链接样式

    a:link {color:#000000;} /* 未访问链接*/
    a:visited {color:#00FF00;} /* 已访问链接 */
    a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
    a:active {color:#0000FF;} /* 鼠标点击时 */

七、CSS 列表(ul)

    list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
    list-style-image 将图象设置为列表项标志。
    list-style-position 设置列表中列表项标志的位置。
    list-style-type 设置列表项标志的类型。
          none无标记。
            disc默认。标记是实心圆
            circle标记是空心圆。
            square标记是实心方块。

八、CSS 表格

border-collapse :  表格边框(常用的)
    table{border-collapse:collapse;}
    table,th, td{border: 1px solid black;}

九.CSS 边框属性

1. border 简写属性，用于把针对四个边的属性设置在一个声明。

2.border-width 用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽

3. border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式
         border-style:dotted solid double dashed
              dotted  上边框是点状
solid   右边框是实线
double  下边框是双线
            dashed  左边框是虚线

4.border-color 设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。

十、CSS 尺寸

1.height 设置元素的高度。

2.line-height 设置行高。

3.max-height 设置元素的最大高度。

4.max-width 设置元素的最大宽度。

5.min-height 设置元素的最小高度。

6.min-width 设置元素的最小宽度。

7.width 设置元素的宽度。

十一、px，em，rem 的区别

px像素(Pixel)。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。

em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。

rem是 CSS3 新增的一个相对单位(root em，根 em)，使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

十二、position 几个属性的作用

position 的常见四个属性值: relative，absolute，fixed，static。一般都要配合"left"、“top”、“right” 以及 “bottom” 属性使用。

static:默认位置。在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用Position:static取消继承，即还原元素定位的默认值。设置为 static 的元素，它始终会处于页面流给予的位置(static 元素会忽略任何 top、 bottom、left 或 right 声明)。一般不常用。

relative:相对定位。相对定位是相对于元素默认的位置的定位，它偏移的 top，right，bottom，left 的值都以它原来的位置为基准偏移，而不管其他元素会怎么样。注意 relative 移动后的元素在原来的位置仍占据空间。

absolute:绝对定位。设置为 absolute 的元素，如果它的父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么就会依据父容器进行偏移。如果其父容器没有设置 position 属性，那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位置。

fixed:固定定位。位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以 body 为依据的。注意设置 fixed 属性的元素在标准流中不占位置。

十三、盒子模型（box-sizing）

设置CSS盒模型为标准模型或IE模型。标准模型的宽度只包括content，二IE模型包括border和paddingbox-sizing属性可以为三个值之一：

content-box，默认值，只计算内容的宽度，border和padding不计算入width之内

padding-box，padding计算入宽度内

border-box，border和padding计算入宽度之内

十四、 display有哪些值？说明他们的作用?

inline（默认）–内联

none–隐藏

block–块显示

table–表格显示

list-item–项目列表

inline-block

十五、 margin属性和padding属性？

margin：外边距； padding：内边距；属性值可以有四个，如下：

  margin:25px 50px 75px 100px;
        上边距为25px
        右边距为50px
        下边距为75px
        左边距为100px

margin:25px 50px 75px;

        上边距为25px
        左右边距为50px
       下边距为75px

margin:25px 50px;

上下边距为25px
左右边距为50px

margin:25px;

所有的4个边距都是25px

十六.CSS隐藏元素的常见的几种方式及区别

1. display:none

元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。
不会触发其点击事件

2.visibility:hidden

和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。
无法触发其点击事件
适用于那些元素隐藏后不希望页面布局会发生变化的场景

3. opacity:0

将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。
和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。
可以触发点击事件

十七、渐进增强和优雅降级

关键的区别是他们所侧重的内容，以及这种不同造成的工作流程的差异

优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。

渐进增强观点则认为应关注于内容本身，优先考虑低版本。

十八、重绘和重排

重绘：当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。触发重绘的条件：改变元素外观属性。如：color，background-color等。注意：table及其内部元素可能需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多花两倍时间，这就是我们尽量避免使用table布局页面的原因之一。

重排：当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候。

重绘和重排的关系：在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。

所以，重排必定会引发重绘，但重绘不一定会引发重排。

十九、怎么让一个不定宽高的 DIV，垂直水平居中?

1.使用Flex：只需要在父盒子设置：display: flex; justify-content: center;align-items: center;

2.使用 CSS3 transform：父盒子设置:position:relative
Div 设置:transform:translate(-50%，-50%);position:absolute;top:50%;left:50%;

3.使用 display:table-cell 方法：父盒子设置:display:table-cell;text-align:center;vertical-align:middle;
Div 设置:display:inline-block;vertical-align:middle;

二十、BFC相关知识（块级格式化上下文）

定义：BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。

BFC布局规则BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

BFC这个元素的垂直方向的边距会发生重叠，垂直方向的距离由margin决定，取最大值

BFC 的区域不会与浮动盒子重叠（清除浮动原理）。

计算 BFC 的高度时，浮动元素也参与计算。

哪些元素会生成 BFC

根元素

float 属性不为 none

position 为 absolute 或 fixed

display 为 inline-block， table-cell， table-caption， flex， inline-flex

overflow 不为 visible

二十一、浮动与清除浮动

1.浮动相关知识

float属性的取值：

left：元素向左浮动。

right：元素向右浮动。

none：默认值。元素不浮动，并会显示在其在文本中出现的位置。

浮动的特性：

浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。

不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height，因此float常常用于制作横向配列的菜单，可以设置大小并且横向排列。

浮动元素的展示在不同情况下会有不同的规则：

浮动元素在浮动的时候，其margin不会超过包含块的padding。PS：如果想要元素超出，可以设置margin属性

如果两个元素一个向左浮动，一个向右浮动，左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。

如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象。

如果有多个浮动元素，后面的元素高度不会超过前面的元素，并且不会超过包含块。

如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素

浮动元素会尽可能地向顶端对齐、向左或向右对齐

重叠问题

行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之上

块级元素与浮动元素发生重叠时，边框和背景会显示在浮动元素之下，内容会显示在浮动元素之上

clear属性clear属性：确保当前元素的左右两侧不会有浮动元素。clear只对元素本身的布局起作用。取值：left、right、both

2. 父元素高度塌陷问题

为什么要清除浮动，父元素高度塌陷解决父元素高度塌陷问题：一个块级元素如果没有设置height，其height是由子元素撑开的。对子元素使用了浮动之后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以撑开其高度，这样父级元素的height就会被忽略，这就是所谓的高度塌陷。

3. 清除浮动的方法

方法1：给父级div定义高度原理：给父级DIV定义固定高度（height），能解决父级DIV 无法获取高度得问题。优点：代码简洁缺点：高度被固定死了，是适合内容固定不变的模块。（不推荐使用）

方法二：使用空元素，如(.clear{clear:both})原理：添加一对空的DIV标签，利用css的clear:both属性清除浮动，让父级DIV能够获取高度。优点：浏览器支持好缺点：多出了很多空的DIV标签，如果页面中浮动模块多的话，就会出现很多的空置DIV了，这样感觉视乎不是太令人满意。（不推荐使用）

方法三：让父级div 也一并浮起来这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会产生新的浮动问题。不推荐使用

方法四：父级div定义 display:table原理：将div属性强制变成表格优点：不解缺点：会产生新的未知问题。（不推荐使用）

方法五：父元素设置 overflow：hidden、auto；原理：这个方法的关键在于触发了BFC。在IE6中还需要触发 hasLayout（zoom：1）优点：代码简介，不存在结构和语义化问题缺点：无法显示需要溢出的元素（亦不太推荐使用）

方法六：父级div定义伪类:after 和 zoom

    .clearfix:after{
content:'.';
        display:block;
        height:0;
        clear:both;
        visibility: hidden;
    }
    .clearfix {zoom:1;}

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题优点：结构和语义化完全正确,代码量也适中，可重复利用率（建议定义公共类）缺点：代码不是非常简洁（极力推荐使用）

经益求精写法

    .clearfix:after {
        content:”\200B”;
        display:block;
        height:0;
        clear:both;
    }
    .clearfix { *zoom:1; } 照顾IE6，IE7就可以了

二十二、用纯CSS创建一个三角形的原理是什么

    首先，需要把元素的宽度、高度设为0。然后设置边框样式。
        width: 0;
        height: 0;
        border-top: 40px solid transparent;
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
        border-bottom: 40px solid #ff0000;

二十三、常见的兼容性问题

1.不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}

2.IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。

3.渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
    {
        background-color:#f1ee18;/*所有识别*/
        .background-color:#00deff\9; /*IE6、7、8识别*/
        +background-color:#a200ff;/*IE6、7识别*/
        _background-color:#1e0bd1;/*IE6识别*/
    }

4.设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

5.IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。

6.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

7.超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

二十四、浏览器是怎样解析CSS选择器的

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。

而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

移动端页面头部必须声明有meta声明的viewport:

26 、移动端页面头部必须有meta声明的viewport

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

二十七、 position:fixed;在android下无效怎么处理

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

二十八、如果需要手动写动画，你认为最小时间间隔是多久，为什么

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

二十九、 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

        行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。
解决方法：
        可以将：代码全部写在一排
        浮动li中float：left
        在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px