再战CSS样式

• 近来口试，发现CSS层叠样式表很多细节已经忘得差不多了。
  
• 写样式，画界面是一个前端工程师最底子的素养。
  

标签： 标署名 { css属性名：属性值； }
类： .类名 { css属性名：属性值； }
id： #id属性值 { css属性名：属性值； }
通配符： *{ css属性名：属性值； }

复合选择器（后代、子代）、并集选择器、交集选择器、hover伪类选择器

字体样式：巨细：font-size   粗细：font-weight    样式：font-style:italic  范例：font-family    范例：font属性连写
文本样式：

• 缩进：text-indent：2px
  
• 程度对齐方式（文本、span、a、input、img的父元素）：text-align
  
• 修饰：text-decoration：underline下划线/none扫除装饰
  

行高：line-height：父元素高度     line-height : 1可以取消上下间距

配景致background-color、配景图background-image、配景平铺background-repeat：no-repeat、配景位置background-position  配景图巨细background-size：cover/contain
连写：background：color image repeat position

• 直接写上img标签即可：img标签是一个标签，不设置宽高默认会以原尺寸表现
  
• div标签 + 配景图片：需要设置div的宽高，因为配景图片只是装饰的CSS样式，不能撑开div标签
  

块级元素：

• 独占一行、内容决定高度、继承父宽、可设置宽高
  
• div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……
  

行内元素：

• 一行表现多个、内容决定宽高、不可以设置宽高
  
• a、span 、b、u、i、s、strong、ins、em、del……
  

行内块元素：

• 一行可以表现多个、可设置宽高
  
• input、textarea、img、button、select……
  

元素表现模式转换

继承性的特性是什么？

• 子元素有默认继承父元素样式的特点
  

有哪些常见属性可以继承？

• color
  
• font-style、font-weight、font-size、font-family
  
• text-indent、text-align
  
• line-height
  

常见应用场景：

• 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
  
• 直接给body标签设置同一的font-size，从而同一差别欣赏器默认笔墨巨细
  

• 给同一个标签设置差别的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
  
• 给同一个标签设置雷同的样式 → 此时样式会层叠覆盖 → 终极写在最后的样式会见效
  

特性：差别选择用具有差别的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

• 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
  

注意：!important不能提升继承的优先级
权重叠加盘算：

• CSS 中规定每个盒子分别由：内容地区（content）、内边距地区（padding）、边框地区（border）、外边距地区（margin）构成，这就是 盒子模子
  
  
  
  • 标准(W3C)盒子模子：内容content+添补padding+边框border+边界margin
    
  • 低版本IE盒子模子：内容（content+padding+border）+ 边界margin
    
  
  
• box-sizing中比力常用的两个属性值为 content-box和 border-box，它可以改变盒子模子的剖析盘算模式。
  
  
  
  • 当设置box-sizing:content-box时，采取标准模式举行盘算，默认就是这种模式width=content；
    
  • 当设置box-sizing:border-box时，采取怪异模式举行盘算width=content+padding+border；
    
  
  

给margin和padding加属性序次是上右下左

元素：HTML 设置的标签
伪元素：由 CSS 模仿出的标签结果
注意点：

• 必须设置content属性才气见效
  
• 伪元素默认表现模式是行内元素
  

• 块级元素：从上往下，垂直布局，独占一行
  
• 行内元素 或 行内块元素：从左往右，程度布局，空间不敷自动折行
  

浮动的作用是什么？

• 早期作用：图文围绕
  
• 如今作用：用于布局，让垂直布局的盒子酿成程度布局，如：一个在左，一个在右
  

左浮动的属性是？右浮动的属性是？

• 左浮动：float : left
  
• 右浮动：float : right
  

浮动的特点

• 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
  

• 相当于从地面飘到了空中
  

• 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
  
• 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
  
• 浮动元素有特别的表现结果
  

• 一行可以表现多个
  
• 可以设置宽高
  

注意点：
浮动的元素不能通过text-align:center大概margin:0 auto
浮动元素的特点有哪些？

• 浮动元素会脱标，在标准流中不占位置
  
• 浮动元素比标准流高出半个级别，可以覆盖标准流中的元素，可以扫除浮动
  
• 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
  
• 浮动元素有特别的表现结果：① 一行可以表现多个 ② 可以设置宽高
  

网页常见布局方式
标准流：块级元素独占一行 → 垂直布局、行内元素/行内块元素一行表现多个 → 程度布局
浮动：可以让原来垂直布局的 块级元素酿成程度布局
定位：可以让元素自由的摆放在网页的恣意位置、 一样平常用于 盒子之间的层叠环境

• 静态定位static、相对定位（不脱标）relative、绝对定位（脱标）absolute、固定定位（脱标）fixed
  

子绝父相的寄义是什么？

• 子元素：绝对定位
  
• 父元素：相对定位
  

子绝父相的应用场景是什么？

• 让子元素相对于父元素举行自由移动
  

子绝父相的利益是什么？

• 父元素是相对定位，则对网页布局影响最小
  

在使用子绝父相的时间，发现父元素已经有绝对定位了，此时直接子绝即可！

精灵图的长处：淘汰服务器发送次数，减轻服务器的压力，进步页面加载速率
使用精灵图的步调是什么？

• 创建一个盒子
  
• 设置盒子巨细为小图片巨细
  
• 设置精灵图为盒子的配景图片
  
• 将小图片左上角坐标 取负值，设置给盒子的background-position：x y
  

属性text-shadow：
参数作用h-shadow必须，程度偏移量。答应负值v-shadow必须，垂直偏移量。答应负值blur可选，暗昧度color可选，阴影颜色

属性box-shadow：
参数作用h-shadow必须，程度偏移量。答应负值v-shadow必须，垂直偏移量。答应负值blur可选，暗昧度color可选，阴影颜色spread可选，阴影扩大inset可选，将阴影改为内部阴影

• margin固定宽高居中
  
• 子绝父相，上下左右0，margin：auto
  
• 子绝父相，left：50%，top50%，margin-left:-50%盒子宽度，margin-top：-50%盒子高度
  
• 子绝父相，transform居中，left: 50%，top: 50%，transform: translate(-50%,-50%);
  
• 子绝父相对，left: 25%，right: 25%，top: 25%，bottom: 25%，margin:auto;
  
• flex布局，justify-content: center，align-items: center;
  

• 给父盒子添加高度（不保举）
  
• 父级添加overflow属性（父元素添加overflow:hidden）（不保举）
  
• 额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不保举）
  
• 使用after伪元素扫除浮动（保举使用）
  
• 使用before和after双伪元素扫除浮动