CSS知识点总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    其中css即样式修改部分均需在style标签中进行
    下方的p即为选择器
    大括号里面的语句即为声明
        p {
            color: red;
    <!--且标签部分是以键值对的形式进行表示-->
            font-size: 2px;
        }
    </style>
</head>
<body>
    <p>good</p>
</body>
</html>

CSS结构包括选择器和声明

三、选择器

同时一个属性可以同时赋多个clss属性，获得多个特性。之间同空格隔开

<style>
    .w {
        width: 1200px;
        margin: 0 auto;
    }

    .head {
        height: 42px;
        background-color: pink;
        margin: 30px auto;
    }
</style>

***当然如果两者有同一个属性，则会发生层叠***

<body>
    <!-- header -->
    <div class="head w">1</div>
</body>

选择器用于选择html中的特定表单元素，包括基础选择器和复合选择器

选择器中又包含基础选择器和复合选择器

A.基础选择器

1.标签选择器：将标签名称作为选择器

标签名 {
    属性1：属性值1；
    属性2：属性值2；
      }

该选择器只能将全部一同修改，无差异化可言

2.类选择器：将n个标签分类进行选择

.类名 {
    类型1：类值；
    类型2：类值；
      }

但是在HTML的结构中，在前标签中要加上class="类名"

如下图例，在网页中表示一个两边为红，中间为绿色的盒子

多余代码已省略
<head>
    <style>
        .red {
            width: "100px";
            height: "100px";
            background-color: red;
             }
        .green {
            width: "100px";
            height: "100px";
            background-color: green;
               }
    </style>
    <body>
        <div class="red"></div>
        <div class="green"></div>
        <div class="red"></div>
    </body>
</head>

同时class可以同时赋予多个类名，其中用空格隔开
<div class="red font"></div>

3.id选择器

用特定的id来表示特定的样式

<style>
    #属性名 {
        属性：属性值；
        属性：属性值；
           }
</style>
        <div id=""></div>

同类选择器的区别主要在于id只能使用一次,而类可以多次

4.通配符选择器

表示选取页面中的所有标签(即直接将所有的元素进行改变)

* {
    属性：属性值；
  }

开发小技巧：如果多种网页元素有相同的属性，可以单独创建一个类。再在自己的class中包含

B.复合选择器

将基本选择器进行组合而形成

1.后代选择器(包含选择器)

<style>
    ol li {
        color: pink;
          }
</style>
<body>
    <ol>
        <li>good</li>
    </ol>
    <ul>
        <li>good</li>
    </ul>
</body>

1、可以选择父代中的任意子代，包括子代中的子代

2、如果有两种一样的标签，可以给一个赋类，然后在style中的类后加标签

2.子选择器

<style>
    div>a {}
    注意：>号后面位置上的必须为儿子代，不可为孙子代
</style>
<body>
    <div>
        <a href="#">搜索</a>
        <p>
            <a href="#">搜索</a>
        </p>
    </div>
</body>

3.并集选择器

该选择器可以同时更该多个标签
<style>
    div,
    p,
    .red,
    .col {
        color: red;
      }
</style>
<body>
    <div></div>
    <p></p>
    <ul class="red">
        <li></li>
    </ul>
</body>

4.伪类选择器

本选择器主要用于给选择器添加效果

第一种：链接伪类选择器

a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a:hover	选择鼠标指针位于其上的链接
a:active	选择活动链接(鼠标按下未弹起的)

前两个是超链接专用，第三个可以对其他标签使用（eg. div）

其中，hover必须在link和visited之后定义。active必须在hover之后定义

第二种：focus伪类选择器

用于选取获得焦点的表单元素，即鼠标放上去后表单发光

input: focus {
        background-color: yellow;
             }

第三种：用伪类实现工具悬停

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}
<div>
    这是光标悬浮的区域
    <p>这是隐藏的区域</p>
</div>

可以实现光标悬浮在div时，显示出隐藏的区域p

注意：实现需满足p标签属于div标签之中！！！！！

四、css的字体属性

1.字体系列

<style>
    p {
        font-family="微软雅黑"
        font-size="--px"
        <!--weight中不加px单位-->
        font-weight="--"
        font-style="italic"
        <!--italic指将文本换成斜体
        如果style="normal则将文本换为正常直立型"-->
      }
</style>
<body>
    <p>666</p>
</body>

1.上图代码中的--处应填写数字

2.font-weight处normal(不加粗)=400，bold=700是互通的

3.若要节约代码的输入，可以使用字体的符合属性

4.字体的一个小细节：多种字体family使用时，如果先用英文后用中文字体，则一一对应。如果先用中文再用英文，则中英文都会使用中文family对应的字体
div {
    
    font: italic 700 100px "微软雅黑"
    巧记：swsf  是我舒服
     
    }

2.文本属性

a.颜色

color: 属性;

其中有三种属性：颜色，十六进制取色和rgb范围

color直接改变字体的颜色。只有bgc才会涉及背景颜色的变化

div {
    color: blue;
    color: #FFF000;
    color: rgb(255,0,0);
    }

b.文本对齐

h1 {
    text-align: center;
}

left	左对齐
right	右对齐
justify	每行等宽(不存在类似word中的提前换行的情况)

图片在文本中的垂直对齐
h1 {
   vertical-align: top; 
}
h1 {
   vertical-align: middle; 
}
h1 {
   vertical-align: bottom; 
}

c.装饰文本

text-decoration：属性值；

none	默认，无装饰线
underline	下划线
overline	上划线
line-through	删除线

d.文本缩进

text-indent: 属性值px；(表示首行缩进)

属性值为正，则向右缩进。为负就想左缩进

em表示一个文字的缩进，具体可由font-size调整。即text-indent：2em；

e.行间距

line-height：属性值px；用于控制文字行与行之间的距离

☆ 对于存储行的盒子而言，行高大于盒子高则文字偏下，反之成立，★相等则垂直居中 ☆

行高由上下间距和文字高度构成，用该方法改变的是上下间距

ps：list-style : none;可以用于去掉list中前方的小圆点

f.文本转换

p.case {
  text-transform: uppercase;
  全部大写
}

p.case {
  text-transform: lowercase;
  全部小写
}

p.case {
  text-transform: capitalize;
  首字母大写
}

h.字间距和词间距

letter-spacing: -3px;
//用于控制指定文本字符之间的距离

word-spacing: -5px;
//用于控制指定文本单词之间的距离，字符间距默认

i.文字阴影

h1 {
    text-shadow:2px 2px 5px red;
    //四个的意义分别为
    //水平阴影，垂直阴影，模糊效果，阴影颜色  
}

五、CSS的样式表

1、内部样式表(嵌入式)

将样式表放在HTML页面内部，用style标签单独存放

即以上的所有CSS演示代码均为内部样式表，故被称为嵌入式引入

2、行内样式表(内联式)

直接在标签的内部进行CSS样式的设置

<div style="color: red; font-size: 12px;""></style>

3、外部样式表(外链式)

将样式单独写到CSS中，之后将其引入HTML中进行使用

在HTML中，用link标签进行css文件的引入

<head>
</head>
<link rel="stylesheet" href="文件路径名">
注：此处rel指定为stylesheet来表示其为样式表

六、Emmet语法(快速生成HTML标签)

1.生成标签时写好标签后直接按Tab快速生成，p后按Tab

2.快速生成多个标签，如输入div*3后按Tab键

3. 生成父子级关系的标签：>,如ul>li后按Tab

4.生成兄弟级关系的标签：+,如head+body后按Tab

5.生成带有类名或者id名的，直接写p.one或者p#one

符号前的为标签，之后的为类名或者id名

6.生成有顺序的类名，用自增符号$(从1开始增)：.demo$*5

7.在生成标签内部写内容用{}：p{---}

七、CSS元素的显示模式

1、块元素

作为容器，用于放置行内以及块元素

像<div>,<ul>,<ol>,<dl>,<h>,<p>,<li>都是块元素

注：1.块元素的高度、宽度等可以控制。

2.自身独占一行

3.如果本身没有设置长宽，则继承其父集的基本属性

4.文字类的元素内不能放块元素(如p，h中不可)

2、行内元素

<a><strong><em><del><ins><span>等标签均为行内元素

注：1.无法设置长宽

2.只能容纳文本或者行内元素

3.a中不能够继续放入链接

4.但是a中又可以放块元素

5.对行内元素用内外边距时尽量只能设置左右边距，因为设置上下的没用

3、行内块元素

特殊标签如<img /><input /><td>既有块又有行元素的特点，故得名

注：1.行内块元素显示在同一行，但之间会有空白间隙

2.长宽高、内边距均可以调节

4、行块元素的转化

display：block; 将行内元素转化为块元素

display：inline; 将块元素转化为行内元素

display：inline-block; 将行内元素转化为行内块元素

ps：display：none；可以将元素隐藏，且不影响布局

visibility：hidden；同样可以隐藏元素，但是原来元素所在的位置会被占用，显示为空白

八、CSS的背景

1.背景颜色

background-color: transparent | color ;

其中transparent是默认设置，意为透明的，故不显示(背景图片的图层在颜色之上)

在大的标签之中，小标签可以有单独的背景颜色。css中的顺序没有影响

2.背景图片

background-image: none | url() ;

同样默认为none，且此时必须设置image的长和宽，否则显示不出来

3.背景平铺

background-repeat : repeat | no-repeat | repeat-x | repeat-y （x,y指向哪个轴平铺）

repeat意为平铺，即为占满空间，如若图片不够盒子长宽，则不断重复直至铺满

4.背景图片位置

background-position：x y ;

其中x和y指坐标的位置，可以是方位名词，也可以是阿拉伯数字

x的名词有left,center和right，y的名词有top和down

若为方位名词，xy的顺序可以随意写。只指定一个方位名词，第二个默认居中对齐

若为精确单位，表示对于左和上边的距离. 只写一个精确单位，第二个默认垂直居中

两种单位的解释可以混合使用，但是顺序严格按照先x再y的顺序

5.背景图像固定

background-attachment：scroll | fixed

默认是scroll跟随对象滑动，fixed是为固定图像

6.背景复合写法

background: 背景颜色图片地址背景平铺背景图像滚动背景图片位置

7.背景颜色半透明

background：rgba(0,0,0,0);

前三个为color的rgb颜色
其中最后一个为透明度，范围在0到1。值越大越不透明(可以省略0,直接写.n)

该方法只对于容器背景的透明，容器中的内容不受影响

8.让页面所有元素变为灰色

filter:grayscale(1);

应用的是filter对整个页面的效果直接进行改变

九、CSS的三大特性

1.层叠性

给相同的选择器赋予了相同的样式，样式便会层叠于另一个样式

原则：哪个离对应标签近，就执行哪个语句

2.继承性

子标签会继承父标签的某些样式(text，font、line和color之类)

div {/*行高跟不跟单位都可以*/
    font: 12px/1.5 'Microsoft YaHei'
    其中1.5指子元素继承了父辈行高的1.5倍
    }
p {
    font-size: 14px;
    此时行高为14*1.5
  }
即子元素若没有设置行高，则继承父元素行高的1.5倍
如若设置了，则行高为当前子元素文字大小的1.5倍

但是！！如果父辈也没有设置行高，则跳过父辈直接继承祖辈乃至之上的

当然不是所有的标签都有继承属性，如border

3. 优先级

给同一个标签赋予多个选择器，执行顺序便是优先级的产生条件

选择器	选择器权重
继承或*	0,0,0,0
标签选择器	0,0,0,1
类、伪类选择器	0,0,1,0
id选择器	0,1,0,0
行内样式style	1,0,0,0
! important	无穷大

div {
    color: pink!important;
    }

!!!:仔细观察选择器的所在位置，如若是父辈的继承就算是style也是最低权重

<style>
    #father {
        color: red;
            }
    p {
        color: pink;
      }
</style>
<body>
    <div id="father">
        <p>good</p>
    </div>
</body>
    此中最后显示出来的颜色便是pink

这里是权重、继承和层叠的综合考点，需要先考虑权重，再考虑层叠和继承

其中a标签被浏览器默认制定了样式为蓝色下划线，所以要更改需要单独改而不是继承

4.权重的叠加

复合选择器的使用会导致权重进行叠加，执行权重最大的那个选择器所选内容

它会不断的进行叠加，但是不存在进位的问题

eg：a：hover的权重为0，0，1，1

十、盒子模型

ps: 可以通过设置max-width或height来控制响应式布局

如：设置之后，缩小页面窗口会自动变换。而非未设置时的滚动条切换

1.组成部分

a.border边框

属性	作用
border-width	定义粗细，px
border-style	边框的样式
border-color	边框颜色

简写语法：border：width style color；没有顺序之分，约定俗成

且边框可以分开写，eg:只改变下边框的格式 border-bottom：；

其中如果只写三个格式，则1为上，2为左右，3为下

其中style的样式多样：

solid	实线边框
dotted	点线边框
dashed	虚线边框

1.border-collapse：collapse；用于合并两个重合的表格线条

2.边框会影响盒子模型的大小，故测量盒子长宽时不能量边框

ovi：1.如果没有对border的颜色进行设置，则会继承元素的颜色属性

2.至少对两个边进行设置（且必须在【上下】和【左右】两个类中都任选一个，且必须先写【上下】中的）

b.padding内边距

同border一样用top，bottom，left和right来控制各个方位的性质

div {
    padding-bottom: 20px;
    }

简写属性较为复杂

padding：5px；上下左右均为5像素的内边距
padding：5px 10px；上下内边距为5，左右为10像素
padding：5px 10px 20px; 上为5，左右为10，下为20像素
padding: 5px 10px 20px 30px; 按上右下左的顺序依次入座 (顺时针)
ps：padding也会影响盒子的大小，因此如果先设定长宽再指定边框会被撑大

但是在height或者width未被指定的时候，padding则不会撑大盒子的大小

也可以通过box-sizing: border-box;实现不撑大盒子

div {
    height: 200px;
    padding: 30px;
    此时width不变，但是height会被撑大
    }
div p{
    width: 100%;
    继承的属性不能指定，虽然它会自动继承
    但是你提一句就相当于指定了它的宽度
    用padding就会把他撑大，反之不会
     }

c.margin外边距

用于控制盒子与盒子之间的距离，同样也有top，bottom一类的方位名词 0

margin本身也不具有继承性，所以如果要继承父元素的属性，需要添加代码

margin: inherit;

块级元素水平居中

div {
    将块级盒子水平居中的条件：
    1.盒子要指定宽度 2.左右外边距设置为auto
    width: 960px;
    margin: auto; /*上下左右都居中*/
    margin: 0 auto;/*上下外边距为0，左右水平居中*/
    }

ps: 让行内元素二号行内块元素进行水平居中，需对其父元素添加text-align: center;

外边距合并（实际问题的解决）

1.相邻块元素垂直外边距相遇(一个bottom一个top), 边距取二者较大的值而不是之和

这是页面自己的属性，我们并不需要设置任何属性！

2.嵌套块元素垂直外边距塌陷

父元素有上外边距的同时子元素也有上外边距，此时父元素会有二者较大的外边距值

解决方案：一、为父元素添加上边框

二、为父元素添加上内边距

三、为父元素添加上overfolw：hidden

因为浏览器自身会为不同的标签设置不同的内外边距，所以我们布局之前需要清除

* {
    padding: 0px;
    margin: 0px;
  }

2.圆角边框

 border-radius: length;
    参数可以为百分比和数值

原理：以length为半径的圆同四个角相切，以圆的边取代方框的边(故越大越圆)

一、输出圆形

由此我们可以通过这个原理输出一个圆形

div {
    height: 200px;
    width: 200px;
    我们以一个正方形为基础
    将半径设为其边长的一半
    即可完成
    border: 1px solid black;
    border-radius: 100px or 50%;
    }

二、圆角矩形

div {
    height: 300px;
    width: 100px;
    border-radius: 50px;
    }

此时取圆角矩形是取高度的一半

div {
    可以写1到4个数值进而简写
    分别代表从左上角开始顺时针进行
    或者可以直接分开写
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    }

3.盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必须。水平阴影位置，可以为负
v-shadow	必须。垂直阴影位置，可以为负
blur	可选。模糊距离
spread	可选。阴影尺寸
color	可选。阴影颜色(或rgba)
inset	可选。将外部阴影改为内部阴影

h-shadow:数值越大，阴影像右边移动
v-shadow:数值越大，阴影像下方移动
blur:数值越大，其阴影就越模糊

ps：1、默认的是外阴影(outset)，但是不可以写这个单词会导致阴影无效

2、盒子阴影不占用空间，不会影响其他盒子排序

3、若要对于鼠标停留的地方赋予阴影即可 div: hover {}

4.文字阴影

text-shadow : h-shadow v-shadow blur color ;

ps：各描述同盒子阴影一样

5.轮廓（outline）

1.介绍

在元素周围绘制一条线，在边框之外以凸显元素

ps：轮廓可能同其他元素重叠。同时也不算入尺寸的一部分，盒子不会被扩大

outline-style

outline-color

outline-width

outline-offset

outline

ps：其他的属性都是建立在style之上的，没有style其他属性都不能显示出来

2.outline-offset

offset指轮廓的偏移位置，即在边框和轮廓之间添加一段透明的距离

div {
    margin:20px;
    border:1px solid black;
    outline-style:1px solid red;
    outline-offset: 25px;
}

十一、浮动

Ⅰ、传统网页布局的三种方式

1.标准流（普通流）

标签按照规定好的默认方式进行排列

eg：块级元素独占一行，行内元素从左到右一次排列

纵向排列的块级元素用标准流，多个块级元素横向排列用浮动！important

2.浮动

用于创建浮动框，将其中移动到一边，直到左或右边缘包含块或另一个浮动框的边缘

div {
    float: 属性值;
    }

none	默认值，不浮动
left	向左浮动
right	向右浮动

特性：1.浮动会脱离标准属性(脱标)

一、脱离标准流的位置而移动到指定位置

二、浮动的盒子不再保留原先的位置

2. 多个盒子都设有浮动，则按照属性值在一行内进行显示并顶端对齐排列

1.布局偏向于响应式，一行不足以显示则会另起一行显示（但还是从左边开始对齐）

2.如果有元素没有进行浮动，则会直接占左上方的位置从而导致盒子重叠

3. 浮动元素具有行内块元素的特性

即任意类型元素都可以被赋予，且赋予浮动后都具有行内款元素的特性

ps：1.块级盒子若未设置宽度，默认与父级一样宽。但添加浮动后由其内容决定大小（）

2.浮动元素之间无任何间隙（紧挨）

3.块级元素浮动在遇到标准流时会有特别之处：

一、块级元素会单独成行，因此若元素在浮动之前，则浮动在第二行开始

二、块级元素夹杂在两浮动之间或在浮动之后，则会覆盖第一个浮动

实际开发（补）

因为浮动总是依照浏览器的边缘进行排版，所以我们通常会先进行系列操作

先在页面中创造出标准流父元素盒子，再在盒子里放入需浮动的盒子并调整

<div class="box">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
</div>

.box {
        height: 460px;
        width: 1200px;
        background-color: pink;
        margin: 0 auto;
}

.left {
        width: 230px;
        height: 460px;
        background-color: purple;
        float: left;
 }

.right {
        height: 460px;
        width: 970px;
        background-color: orange;
}

开发补(Ⅱ)：

1.其中，对于横向排列的盒子一般不用div进行排列。一般用ul和li进行排列从而达到排列效果

2.浮动只会对它之后的标准流有影响而压住，对之前的标准流无影响（因为之前的独占一行）

Ⅱ、清除浮动

用上述方法会有缺陷。高度既定，如若元素不定，则会超出父元素的盒子从而另起一行进行排列。而如果不给高度，添加浮动之后父元素盒子的高度会随子代设置为0，更影响分布

清除浮动之后，父盒子会自动访问到子盒子的高度，所以不会影响网页的日常布局

因此可以放心清理浮动，因为已经排版的元素不会因为清除浮动而受影响。只需对父代（直系父元素）添加清除浮动的属性即可

方法1. 额外标签法

首先在最后一个要浮动的元素后面添加一个空的标签
    <div class=""></div>

    ★且该新增的元素必须为块级元素★
    如<span>就不能清除浮动
    
选择器 {
    clear: 属性值;
       }

left	清除左侧浮动
right	清除右侧浮动
both	清除两侧的浮动(最多)

方法2、父级元素添加overflow

选择器 {
    overflow: hidden;
       }

直接清除了浮动，但是盒子多出来的部分也会被清除

方法3、after伪元素法(复制粘贴法)

.clearfix:after {
    content: "";
    display: block;
    height:0 ;
    clear: both;
    visibilit: hidden;
                }
.clearfix {
    *zoom: 1;
          }

clearfix不为默认的类名，可以自行修改

方法4、双伪元素清除浮动

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

.clearfix:after {
    clear:both;
}

.clearfix {
    *zoom: 1;
}

ps: CSS有一定约定俗成的编写顺序

1.布局定位: display / position / float / clear / visibility /overflow

2.自身属性: width / height / margin / padding / border / background

3.文本属性: color / font / texr-decoration / text-align / white-space /break-word/vertical-align

4.其他属性: content / cursor / border-radius / box-shadow / text-shadow

十二、定位

一、组成

定位 = 定位模式 + 边偏移

1.定位模式

定位模式决定元素的定位方式，通过position属性进行设置

static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

2.边偏移

定位的盒子移动到最终的位置，包含top,bottom,left和right四个属性

含义是距离几个属性距离多远

二、静态定位static

是默认定位方式，可以理解成标准流

选择器 { position : static;}

三、相对定位(relative)

1.是相对于自身原来的位置，根据原来的x，y轴进行移动

2.虽然已经位移，但是原来的占用位置仍存在，其他盒子仍对它以标准流对待

选择器 { position : relative;} //不脱标，保留原来位置，其他属性不可使用

四、绝对定位(absolute)

相对于祖先元素进行定位

1.如果没有祖先元素或者祖先元素没有定位，则以浏览器作为基准

2.如果祖先元素有定位，则以最近的有定位的祖先作为基准

3.绝对定位是脱标的，不再占有原来的位置

ps：子绝父相

孩子用绝对定位，父盒子用相对定位；父盒子用绝对定位会被之后的盒子覆盖，影响布局

子级绝对定位，不占有位置，可以放到父盒子的任意一个地方，从而不影响其他的兄弟盒子

pps：绝对定位的垂直居中

因为加了绝对定位absolute的盒子不能通过margin：0 auto；进行居中对齐，所以需要通过算法进行实现

方法和下面固定定位的方法相同

1.走浏览器页面的一半

2.向反方向走自身宽度或高度的一半

ps：先left:50%; , 再margin-left：【-本身长度/2 px】；因为是以left作为基准进行，所以只能对left进行设置，如果用margin-right盒子则不会进行相关的移动操作

五、固定定位

可以固定某个元素的特定位置，主要应用于滚动时的固定元素

1.不跟祖先元素相关，只同浏览器的可视窗口相关联，且不随滚动条移动而移动

2.固定定位不占有原先的位置（脱标）

ps：固定到版心的右侧

共分为两步：

.good {
    首先确保版心是居中对齐的(margin: 0 auto;)
    position: fixed;
    1、先走页面宽度的一半
    left: 50% ;

    2、利用margin走版心的一半
    margin-left: aa px;
}

六、粘性定位

选择器 {position: sticky; top: 100px; }

1.仍然是以浏览器的可视窗口作为参照点移动元素（固定定位特点）

2.占有原来的位置（不脱标，相对定位特点）

3.必须添加边偏移属性才会生效

边偏移属性含义：当该盒子距离可视窗口的边偏移达到给定的距离后，成为固定定位

七、叠放次序

通过使用z-index从而定义定位布局中，不同盒子重叠的情况

选择器 {z-index：1；}

数值可以为任何整数，默认为auto，数值越大，盒子越靠上

ps：若多个盒子有相同的z-index值和边偏移值，则后来者居上

八、特殊属性

1.添加了绝对或固定定位的行内元素，可以直接设置高和宽

2.添加了绝对或固定定位的块级元素，不给定高和宽，默认是内容的大小

3.脱标的盒子不会触发外边距塌陷的问题

4.浮动会压住标准流的盒子，但是不会压住文字和图片

5.固定或绝对定位会压住一切元素

6.border-radius是以后面给出的px或者以作为基准的百分比，画出相应的圆，因此如果要实现边缘的原框过渡，则接height/2 px，不可使用50%，会导致上下左右均以一半的长度画⚪

十三、元素的显示与隐藏

1、display属性

选择器 {display：属性；}

none	隐藏对象
block	转换为块级元素，同时显示元素

ps：对于none隐藏元素之后，不再占有原来的位置

2、visibility属性

选择器{visibility：属性；}

visible	元素可视
hidden	元素隐藏

ps：对于visibility属性会保留原来的位置

3、overflow溢出属性

选择器{overflow：属性；}

visible	元素可视
hidden	超出部分隐藏
scroll	添加滚动条(左右和上下)
auto	按情况自动添加滚动条

ps：只对溢出的部分进行操作

十四、精灵图

为减轻服务器多次传输图片压力，将小组件的图标组合成一张大图，再通过background-position选取大图特定位置裁剪进行小组件的使用，则该大图称为精灵图（雪碧图）

eg：游戏解包图片文件

步骤：

1.使用background : url(图片位置);将图片作为背景展示

2.使用background-position:x轴位置 y轴位置;进行裁剪

ps：是图片为基准进行移动，向下和向右为正（图片动！！！！）

十五、字体

1.字体文件

2.字体图标引入

1.直接将下载包中的fonts文件夹放入页面的相关根目录中
2.将文件夹中style.css的txt文件前面属性代码进行粘贴即可

3.点击demo.html将需要的矢量图后面的框复制，并用<span>标签进行选定，并在css中进行font-family的一致设置

@font-face{相关代码}

十六、CSS进阶技巧

1、CSS三角

原理：对于长和宽均为0的盒子，设置边框，则会出现三角形！

因此，我们将其他边都设置为透明的transparent，只留下一边，则我们就可以画出一个三角形

ps：同理，设置哪边有颜色则为四分正方形中的哪一个小三角形

2、用户界面样式

a.鼠标样式

选择器 {cursor：属性；}

b.轮廓线

输入文本表单选中时高亮的部分进行消失处理

input{outline:none;}

c.防止拖动文本域

textarea { resize：none；}

d.vertical-align属性！！！

设置元素的垂直居中，但只对于行内元素和行内块元素有效

e.文字溢出省略号显示

1.单行

①将文本强行一行显示
white-space: nowrap;
②将溢出部分隐藏
overflow: hidden; 
③设置溢出的显示样式
text-overflow: ellipsis
意思为用省略号代替溢出的部分

2.多行

ps：如果长度超过两行不满三行，则还是写2行，并修改高度至只显示2行！！！

十七、CSS3属性

1.盒子扩大恢复

对于div标签中，添加border，padding等属性会导致盒子扩大，因此运用次属性，使大小保持原来的不变

选择器{box-sizing：border-box；}

2.图片模糊效果

img{ filter：blur(..px)；} //里面数值越大，图片效果越模糊

3.calc函数

可以通过本函数对相关的属性值进行数值表示

eg.要使子盒子的宽度永远比父盒子少30px，则可以写作

width {calc(100% - 30px)}

ps：1.继承宽度，所以用100%表示父盒子的宽度

2.30px前必须要加空格！！

4.动画过渡效果！！

transition：要过度的属性花费时间运动曲线延迟触发；（后两者可以省略）

1. 如果有多个变化的需求，则在transition后面添加“，”继续编写（也可直接写all .5s）

2.谁要进行变化，就对谁用transition

上官 learner

关注

3
点赞
踩
39

收藏

觉得还不错? 一键收藏
1
评论
CSS知识点总结

CSS学习期间记录的部分知识点总结
复制链接

扫一扫