CSS基础学起来 第二名意味着你是头号输家

本文主要是介绍CSS基础学起来 第二名意味着你是头号输家，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.什么是CSS?

CSS是层叠样式表或级联样式表。

三大特性:层叠性、继承性、优先级

A.相同的选择器设置相同的样式,此时一个样式就是覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题。遵循的原则是就近原则,哪个样式离结构近就执行哪个样式。

B.继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0。

C.优先级 !important(无穷大)>行内样式(1000)>ID选择器(100)>类选择器(10)>标签选择器(1)

D.权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重。

2.CSS选择器

选择器分为基础选择器和复合选择器两大类。

类选择器、属性选择器、伪类选择器,权重都是10;标签选择器和伪元素选择器为1。

基础选择器:标签选择器、类选择器、id选择器、通配符选择器

复合选择器:

后代选择器 ul li a

子元素选择器 ul>li

并集选择器 ul,ol

伪类选择器 未访问div:link 点击过div:visited 鼠标经过div:hover 鼠标按下没有弹起div:active

新增属性选择器:

A.input[value]{color:red}

必须是input但同时具有value这个属性,选择这个元素[ ]。

B.input[type="text"]{color:red}

属性选择器还可以选择属性=值的某些元素。

C.div[class^=kobe]{color:red}

选择class=kobe开头的这些元素。

D.div[class$=curry]{color:red}

选择class=curry结尾的这些元素。

E.div[class*="kd"]{color:red}

选择所有class=kd的这些元素,不管开头还是结尾。

新增结构伪类选择器:

A.ul li:first-child{color:red}

选择父元素中第一个子元素。

B.ul li:last-child{color:red}

选择父元素中最后一个子元素。

C.ul li:nth-child(2){color:red}

选择父元素中第2个子元素,

D.ul li:nth-child(n){color:red}

n选择所有子元素,也可以选择偶数even/2n或者奇数odd/2n+1。

n+3从第三个元素开始到最后;-n+3前三个。

E.nth-child和nth-of-type的区别?

nth-child对父元素里面所有的孩子排序选择,先找到第n个孩子,然后看看是否和选择器匹配。

nth-of-type对父元素里面所有子元素排序选择,先去匹配选择器,再根据选择器找到第n个孩子。

新增伪元素选择器:

A.在元素的内部前面插入内容div::before{content: "曼巴"}

B.在元素的内部后面插入内容div::after{content: "曼巴"}

3.CSS字体系列

A.字体系列 font-family: "微软雅黑"

B.字号大小 font-size: 12px

C.字体粗细 font-weight: bold或直接使用font-weight: 100~900

D.字体样式 font-style: normal/italic

字体复合属性 font: font-style font-weight font-size/line-height font-family

不能更换顺序,并且各个属性用空格隔开,不需要设置的属性可以省略,但必须保留font-size和font-family属性,否则font属性将不起作用。

4.CSS文本属性

A.字体颜色 font-color:

预定义颜色值(red) 十六进制(#fff) rgb(255,0,0)

B.文本对齐 text-align:

左对齐(left) 居中对齐(center) 右对齐(right)

C.文本装饰 text-decoration:

下划线(underline) 上划线(overline) 删除线(line-through)

D.文本缩进 text-indent: 10px/1em

E.行间距 line-height: 24px

5.CSS引入方式

内部样式
<style>
    div {
        color: red
    }
</style>
行内样式
<div style="color:red;font-size:30px">库里</div>
外部样式
<link rel="stylesheet" href="style.css">

6.Emmet语法

不仅能快速生成HTML结构也能生成CSS样式

A.生成标签直接输入标签名按Tab键即可,比如div+Tab键就可以生成<div></div>

B.如果想要生成多个相同标签,加上*就可以了,比如div*3就可快速生成三个div

C.如果有父子关系的标签就可以用>,比如ul>li就可以了

D.如果有兄弟关系的标签,用+就可以了,比如div+p

E.如果生成带有类名或者id名字的,直接写.kobe或者#kobe就可以了。

F.如果生成的div类名有顺序,可以用自增符号$,比如div{$}*8

G.如果想要在生成的标签内部写内容可以用{}表示,比如div{科比}*24

7.CSS的元素显示模式

块元素 <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

A.自己独占一行。

B.高度,宽度,外边距以及内边距都可以控制。

C.宽度默认是父级宽度的100%。

C.是一个容器及盒子,里边可以放行内以及块元素。

行内元素 <span>、<a>、<strong>、<i>、<b>

A.相邻行内元素在一行上,一行可以显示多个。

B.宽高直接设置是无效的。

C.默认宽度就是它本身的宽度。

D.行内元素只能容纳文本或其它行内元素。

行内块元素 <img>、<input>、<td>

A.相邻元素在一行上显示,一行可以显示多个。

B.默认宽度就是它本身内容的宽度。

C.高度,宽度,外边距以及内边距都可以控制。

显示模式的转换

A.转换为块元素 display: block

B.转换为行内块元素 display: inline-block

C.转换为行内块元素 display: inline

8.CSS的背景

A.背景颜色 background-color: red

背景颜色半透明 background: rgba(0,0,0,0.8)

B.背景图片 background-image: url(image/banner.png)

C.背景平铺 background-repeat: repeat | no-repeat | repeat-x | repeat-y

D.背景缩放 background-size: 100% 100%

E.背景位置 background-position: x y

x y 可以使用方位名词或精确单位

方位名词 top | center | bottom | left | center | right

1.如果指定的两个值都是方位名词,则两个值前后顺序无关,比如left top和top left效果一致。

2.如果只指定了一个方位名词,另一个值省略,则第二个值默认为居中对齐。

精确单位

1.如果参数值是精确坐标,那么第一个肯定是x坐标,第二个一定是y坐标。

2.如果只指定一个值,那该数值一定是x坐标,另一个默认垂直居中。

混合单位

如果是方位名词和精确单位混合使用,第一个是x坐标,第二个是y坐标。 

F.背景固定 background-attachment: scroll | fixed

背景复合写法 background:背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置

<style>
    div{
        background: transparent url(image/kobe.png) no-repeat fixed center
    }
</style>

9.盒子模型

标准盒模型 总宽度 = width + margin(左右) + padding(左右) + border(左右)

怪异盒模型 总宽度 = width + margin(左右)（即width已经包含了padding和border值）

A.边框的复合写法 border: 1px solid red

B.表格的细线边框 border-collapse: collapse

C.内边距(padding) 盒子本身没有指定width,则此时padding不会撑开盒子宽度。

D.块级盒子水平对齐 margin: 0 auto(必须设置宽度)

E.嵌套块元素塌陷解决办法 可以为父元素设置 overflow: hidden

F.清除内外边距 *{margin: 0;padding: 0}

G.圆角边框 border-radius: 24px

该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角。

分开写是这样的 border-top-left-radius: 30px

H.盒子阴影 box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外部阴影

box-shadow: 24px 30px 35px 23px red inset(内阴影)

I.文字阴影 text-shadow: 10px 10px 10px yellow

J.box-sizing:border-box盒子大小为width

padding和border就不会撑大盒子(前提padding和border不会超过width)

K.calc函数 width:calc(100%-50px) 无论父元素怎么改变大小,子元素永远小50px

10.浮动

A.传统网页布局的三种方式: 标准流、浮动、定位

B.浮动 float: left/right

C.浮动的特性?

1.浮动元素会脱离标准流。

2.浮动的元素会一行内显示并且顶部对齐。

3.浮动的元素会具有块级元素的特性。

D.清除浮动的方法?

1.浮动元素后面加一个空标签设置为clear: both

2.给父元素添加overflow: hidden

3.使用伪元素清除浮动

<style>
    div::after{
        content:"";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
</style>

11.ps切图

A.常见的图片格式有三种: gif、jpg、png

gif: 支持动画、只有全透明和不透明两种模式、只有256种颜色。

jpg: 采用有损压缩算法、体积较小、不支持透明、不支持动画。

png: 采用无损压缩算法、体积也相对较小、支持背景透明、不支持动画。

B.常用的切图方式: 图层切图、切片切图、ps插件切图

图层切图

右击图层→快速导出PNG。

很多情况下我们需要合并图层再导出。

1.选中需要的图层(按住shift键多选图层): 图层菜单→合并图层(ctrl+e)

2.右击→快速导出PNG。

切片切图

文件菜单→导出→存储为web设备所用格式(ctrl+alt+shift+s)→选择图片格式→存储→选中的切片

12.定位

position: static/relative/absolute/fixed/sticky

A.相对定位 relative 

1.它是相对于自己原来的位置进行移动的。

2.不脱标,继续保留原来的位置。

B.绝对定位 absolute

1.如果祖先元素没有定位,则以游览器为准。

2.如果祖先元素有定位,则以最近一级祖先元素为参考点移动位置。

3.绝对定位不再占有原先的位置(脱标)。

4.绝对定位盒子水平居中的算法?

① left: 50%;让盒子的左侧移动到父级元素的水平中心位置。

② margin-left: -100px;让盒子向左移动在自身宽度的一半。

C.固定定位 fixed

1.以浏览器的可视窗口为参照点移动元素。

2.不在占有原先的位置(脱标)

D.粘性定位 sticky

1.以浏览器可视窗口为参照点移动元素。

2.占有原先的位置(不脱标)。

3.必须占有top、bottom、left、right其中一个才有效。

E.定位的特性?

1.行内元素添加绝对或者固定定位,可以直接设置宽度和高度。

2.块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。

F.定位叠放次序 z-index: 1

数值可以是正整数或负整数或0,默认是auto,数值越大盒子越靠上。

13.元素的显示与隐藏

A.隐藏之后不会占有原先的位置。

1. 显示 display: block 

2. 隐藏 display: none

B.隐藏之后继续占有原先的位置。

1. 显示 visibility: visible

2. 隐藏 visibility: hidden

C.溢出 overflow

1.超出部分隐藏掉 hidden

2.不管有没有超出都显示滚动条 scroll

3.超出自动显示滚动条,不超出不会显示滚动条 auto

14.精灵图sprites

A.目的:为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度。

B.原理：

1.精灵图主要针对小的背景图片使用,把多个背景图片整合到一张大的图片当中。

2.主要借助背景位置来实现 background-position

3.一般情况下精灵图里面的值都是负值(x轴右边是正值,左边是负值;y轴下边是正值,上边是负值)

15.CSS三角形的做法

<style>
    普通三角形
    div{
        width: 0;height: 0;
        border: 24px solid transparent;
        border-top-color: red;
    }
    直角三角形
    div{
        width: 0;height: 0;
        border-color: transparent red transparent transparent;
        border-style: solid;
        border-width: 100px 50px 0 0
    }
    上边框宽度调大,下边框设置为0
</style>

16.用户界面

A.鼠标样式

cursor: pointer(小手) | move(移动) | text(文本) | not-allowed(禁止）

B.取消表单轮廓 outline: none

C.防止拖曳文本域 resize: none

D.移动端清除高亮 -webkit-tap-highlight-color: transparent

17.vertical-align属性应用

它只针对行内元素或者行内块元素有效。

vertical-align: top | middle | bottom

18.图片处理

A.解决图片底部空白缝隙

原因: 图片底部会有一个空白缝隙,原因是行内块元素会和文字基线对齐。

解决: A.给图片添加 vertical-align: top | middle | bottom B.给图片转块 display: block

B.图片模糊处理 filter:blur(24px)

17.省略号显示

<style>
    单行
    div{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    多行
    div{ 
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
</style>

18.过渡

<style>
    div{
        width: 100px;height: 100px;
        transition: all 1s
    }
    div:hover{
        width: 200px;height: 200px;
    }
</style>

19.2D转换

A.移动:translate

transform: translate(x,y)

transform: translateX(n) 

transform: translateY(n)

让一个盒子水平垂直居中的办法?

<style>
    div{
        position: absolute;
        top: 50%;left: 50%;
        transform:translate(-50%,-50%)
    }
</style>

B.旋转:rotate

1.transform: rotate(24deg)

2.设置转换中心点  transform-origin: x y

x y默认转换的中心点是元素中心点(50% 50%)

还可以给x y设置像素或方位名词。

C.缩放:scale

transform: scale(x,y)

20.动画

<style>
    @keyframes move{
        from{
            transform: translateX(0px)
        }
        to{
            transform: translateX(1000px)
        }
    }
    div{
        width：100px;
        height: 100px;
        background-color: red;
        animation: move 2s;
    }
    关键词from和to等同于0%和100%
</style>

21.3D转换

透视 perspective: 200px 给父元素加可以看到3d效果。

子元素开启立体空间 transform-style: preserve-3d(给父加)

A.3D移动

transform: translateX(100px)

transform: translateY(100px)

transform: translateZ(100px)

transform: translate3d(x,y,z)

其中x,y,z分别指向移动的轴的方向的距离。

B.3D旋转

transform: rotateX(180deg)

transform: rotateY(180deg)

transform: rotateZ(180deg)

transform: rotate3d(x,y,z,deg) 了解即可

22.弹性盒子

开启弹性布局 display: flex

A.设置主轴方向 flex-direction:

row(左到右) | row-reverse(右到左) | column(上到下) | column-reverse(上到下)

B.设置主轴上子元素的排列方式 justify-content:

flex-start(从头部开始) | flex-end(从尾部开始) | center(居中) | space-around(平分剩余空间) | 

space-between(先两边贴边,再平分剩余空间)

C.设置子元素是否换行 flex-wrap:

nowrap(不换行) | wrap(换行)

D.设置侧轴上子元素排列方式 align-items(单行):

flex-start(上到下) | flex-end(下到上) | center(居中) | stretch(默认拉伸)

E.设置侧轴上子元素排列方式 align-content(多行):

flex-start(从头部开始) | flex-end(从尾部开始) | center(居中) | space-around(平分剩余空间) | 

space-between(先两边贴边,再平分剩余空间) stretch(设置子元素高度平分父元素高度)

F.子项flex属性

flex: 1定义子项目分配剩余空间,用flex来表示占多少份数。

G.order属性

order: -1定义项目排列顺序,数值越小排列越靠前,默认为0

23.渐变

线性渐变 background-image: linear-gradient(to top,red,yellow)

径向渐变 background-image: radial-gradient(circle, red 50%, yellow 50%)

24.px与em和rem区别

A.px是固定的像素,一旦设置了就无法因为适应页面大小而改变。

B.em相对于父元素的字体大小来说的。

C.rem相对于html元素字体大小来说的。

D.rem的优点就是可以通过修改html里面的字体来改变页面中元素的大小可以整体控制。

25.媒体查询

<style>
    @media screen and (min-width: 300px) and (max-width: 500px) {
       div{
          background-color: red
       }
    }
</style>
媒体查询引入资源
<link rel="stylesheet" href="kobe.css" media="screen and (min-width: 200px)">

26.less

less是css的一门扩展语言,也称为css预处理器。

优点:大大简化了css的编写,降低css维护成本,让我们用更少的代码做更多的事情。

less嵌套

<style>
    .kobe{
          width: 200px;
          height: 200px;
          子元素的样式直接写到父元素的里面就好了
         .curry{
                color: red;
                如果有伪类、交集选择器、伪元素选择器,内层选择器需要加&
                &:hover{
                   color:blue 
             }
        }
    }
</style>

less运算

A.乘号(*)和除号(/)的写法。

B.运算符中间左右有个空格隔开 1px + 5

C.对于两个不同的单位之间的值运算,运算结果的值取第一个值的单位。

D.如果两个值之间有一个值有单位,则运算结果就取该单位。

这篇关于CSS基础学起来 第二名意味着你是头号输家的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！