css基础知识整理

体验BAT/TMD面试的模式

@1 什么是标签语义化：合理的标签做合适的事情

@2 都有哪些标签：块，行内，行内块

@3 相互之间有啥区别

1.块级标签独占一行（默认不能同行排列，宽默认100%，高默认auto），可以手动设置宽高

2.行内标签：共占一行（宽默认auto，高默认auto），手动设置宽高无效，margin只能设置左右，无法设置上下

3.行内块：具备块和行内块的特点，共占一行，可以手动设置宽高

@4 如何相互转换

display：block（转换为块级标签）

display：inline （转换为行内标签）

display ：inline-block（转换为行内块）

给行内元素设置浮动、定位等样式，也是可以给当前元素设置宽高（默认转换为行内块）

给行内元素所在的容器设置display：flex，则当前行内元素也可以设置宽高...

@5 display有哪些属性值

block，inline，inline-block，none

flex：css3新增的弹性盒模型

table：table布局

@6 让元素在视口中消失的办法

display：none

visibility : hidden

opacity ：0

足够的负margin

宽高设置为0，还要设置overflow：hidden

定位到视口外

...

梳理HTML的相关知识

梳理CSS的相关知识

@1 导入方式

行内样式<div style="xxx:xxx">不推荐，不利于样式的复用，造成大量冗余代码，样式和结构全部混淆在一起，不利于开发和维护

内嵌样式 <style>...</style>在结构和样式代码量不是很多的情况下（尤其是移动端开发），推荐使用内嵌式，可以提高页面渲染的速度

外链样式 <link rel="stylesheet" href="">最常用的

导入式@import'css/xxx.css',能不用尽可能不用，阻塞页面渲染的进程

@2 选择器：基于不同的选择器，获取需要设置样式的元素

基本选择器：id选择器 #box{...}（精准，不复用）

样式类选择器（常用）：样式复用，经常一个元素同时拥有多个样式类 .box{...}

标签选择器（常用） div{...}

群组选择器：多个选择器选中的元素具备相同的样式，有助于 样式的封装抽离，减少冗余代码 .box，.link{...}

通配符选择器：*{...}

层级筛选选择器

后代选择器 .box a{...} 【css选择器渲染机制是从右到左：先找到页面中所有的A标签，再去筛选出那些在class='box'容器中的A，最后给A设置样式】

子代选择器 .box>a{...}

同级弟弟选择器

.box+a{...}找到样式类为box紧挨着的弟弟，并且还是a标签

.box~a{...}找到样式类为所有弟弟们中的a

同级筛选 .box .link{...} 找到box后代中所有的样式类是link的

.box .link{...}同时具备box和link样式类的

伪类选择器

a：hover{...}鼠标悬停到a上具备的样式，离开回归原样

a:active{...}a标签被激活（列如：点击）

a：visited{...}被访问过的a

.box：before/.box：after 在box盒子开始和结尾设置伪元素

.box>a :nth-child(1){...}找到box的第一个儿子，而且需要a标签

.box>a :nth-of-type(1){...}找到box儿子中所有的A，在找到的A中的第一个【分组效果】

属性选择器：

a[index]有index属性的a

a[index='1']有index属性，且值是1的a

a[index！='1']有index属性，且值不是1的a

a[index^='1']有index属性，以1开头

a[index$='1']有index属性，以1结尾

a[index*='1']有index属性，值中包含1

css选择器的权重问题：

！important 最高级

ID 100

样式类10

标签1

通配符0

@3 关于盒子模型

标准盒模型box-sizing：content-box

border

padding

width/height内容的宽高

怪异盒模型

border

padding

width / height 盒子最终的大小[内容自适应的]

@4 关于位置

margin 外边距{调整元素距离其父元素或者兄弟元素的间距}

负margin值

float浮动

脱离文档流，父容器高度撑不开【解决方法 clearfix】

position

涉及布局排列的事情，交给flex来搞

table布局

....

@5 关于字体

font-family 字体类型

font-size 字体大小

color 字体颜色【单词，RGBA，16进制，hsl】

font-weight 控制文字粗细

font-style 控制文字倾斜 normal正常， italic倾斜

text-decoration 设置下划线： underline有下划线， line-through中间删除线， none没有

text-indent 首行缩进（值可以是px像素，也可以是"Nem"【缩进几个字】）

line-height 设置行高（盒子的高度=行高而且只有一行文字：文字在容器中垂直居中）

text-align 设置水平对齐方式（left，center，right）

vertical-align 设置基线对齐方式（top，middle,bottom）

letter-spacing 设置文字之间的间距

导入字体图标 @font-face

text-shadow 设置文字阴影

超过一行文本自动裁切[前提：文本所在容器有宽度，不是根据内容自动变宽的]

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;（超出的部分不换行）

@6 关于背景

background-color 背景颜色

background-image: 背景图片

background-repeat: 设置平铺方式

background-position 背景图在容器中的位置

background-size ：设置背景图大小

100%宽度和容器一致，高度自适应【不变形，但不一定可以铺满】

auto 100%高和容器高度一致，宽度自适应【不变形，但不一定可以铺满】

100% 100%宽高和容器都一致【可以铺满，可能会出现图片模糊】

cover 以当前图片最合适的缩放比例铺满整个容器，但图片不一定展示全

也可以设置具体值。例如100px 50px

@7 动画&变形

transition 过渡动画

animation 帧动画

transform 变形[ 位移，旋转，缩放，矩阵...]

3D效果

@8 其他方面的样式

display

overflow

box-shadow 设置盒子阴影