html

块级元素

h1,p,ul,ol div, table,form,footer

行内元素

a,i (倾斜),b（加粗）,em(倾斜，强调语义),span（定义文档中的节）,mark(标记加背景色)code,

css的盒子模型

组成：content(内容), padding(填充) margin(边界) border(边框)
类型：ie盒子模型，标准w3c盒子模型
区别：
标准盒子：宽高值就是 content
ie标准：宽高值是 content+padding + border
设置：
box-sizing: content-box 标准
box-sizing: border-box ie标准

css选择符优先级

1.就近原则
2.以最后加载的为准

!import > 内联 > id > class > 标签伪类属性选择 > 伪对象 > 继承 > 通配符 *
伪类选择器和伪对象选择器
伪类：用于定义元素的特殊状态

/* 未访问的链接 */
a:link {
  color: #FF0000;
}
/* 已访问的链接 */
a:visited {
  color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}
/* 已选择的链接 */
a:active {
  color: #0000FF;
}

伪对象/伪元素：设置元素指定部分的样式。
:first-letter 定义对象内第一个字符的样式
:first-line　　定义对象内第一行的样式

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

清除浮动的几种方式

浮动到底是什么？
浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。

image.png

，默认三个设置了宽高的block元素，本来会格子独占一行；如果框1设置了向左/向右浮动，他会忽略框2和框3，直到碰到父元素；同时也存在盖住普通元素的风险。

// css
.box-wrapper {
  border: 5px solid red;
}
.box-wrapper .box {
  float: left; 
  width: 100px; 
  height: 100px; 
  margin: 20px; 
  background-color: green;
}
// html
<div class="box-wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

image.png

因为脱离文档流，所有没有高度

父元素添加 overflow:hidden

  <div style="overflow:hidden" class="box-wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

会自动清除里面 img的float对页面的影响，但缺点如果内容超出限定的高度会被隐藏
2.在子元素最后直接添加多一个元素 clear:both
clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素，
被清除浮动的元素上边或者下边添加足够的清除空间。
<div class="box-wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div style="clear:both;"></div>
</div>
img{ float:left;}
注意不能直接加载float浮动元素上，因为float已经脱离了文档流，所以不能找到同一父级下的所有浮动元素
<div class="box-wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box" style="clear:both;"></div>
</div>

通过伪元素清除（常用）
相当于在父级容器里添加了隐藏的子元素 <div style="clear:both;"></div>

 <div class="box-wrapper clearfix:after">
  <div class="box"></div>
  <div class="box"></div> 
</div>
.clearfix:after {
    display: block;
    content: " ";
    clear: both;
}

一个盒子如果不给宽高如何水平垂直居中

1.子元素设置position

  position : absolute;
  top:50%;
   left:50%;
  transform:translate(-50%,-50%)

由于元素是top left 是以最左边和上边的距离，要减去自身多出来的一般的宽和高。用translate(-50%,-50%)进行平移

父容器设置flex布局

  display:flex;
  justify-content:center;
  align-items:center;

使用table-cell

        text-align: center;
        display:table-cell;;
        vertical-align: middle;

<style>
    .par{
        width:200px;
        height:200px;
        text-align: center;
        display:table-cell;;
        vertical-align: middle;
        background-color: chartreuse;
    } 
</style>
<body>
    <div  class="par">
        <span  >234</span>
    </div>
</body>
  display:table-cell;
  text-align:center;
  vertical-align:middle;

如何实现左中右布局

<style>
 .item {
    height: 400px;
}
.left,
.right {
    width: 300px;
    background: #f00;
}
.center {
    background: yellow;
} 
</style>
<div class="wrapper">
    <div class="item left">左</div>
    <div class="item center">中</div>
    <div class="item right">右</div>
</div>

(1) 使用浮动1

.left {
    float: left;
}
.right {
    float: right;
}

<div class="wrapper">
    <div class="item left">左</div>
    <div class="item right">右</div>
    <div class="item center">中</div>
</div>

原理： float不会完全脱离文档流,会占用原空间
为什么 center 要放在left和right之后? 渲染center时候，发现left还占用着300px ,右边right又占用了300px,所以center的宽度在left和right之间,达到宽度自适应

(2)绝对定位

<style>
.left {
        position: absolute;
        top: 0;
        left: 0;
    }
.right {
        position: absolute;
        top: 0;
        right: 0;
    }
.center {
        margin: 0 300px;
    }
</style>
<div class="wrapper">
    <div class="item left">左</div>
    <div class="item center">中</div>
    <div class="item right">右</div>
</div>

原理：左右绝对定位,脱离文档流。中间不设置宽度,只设置左右边距，自动撑满块级元素一行的剩余空间

(3) flexbox

.wrapper {
         display: flex;
    }
.center {
         flex: 1;
    }

(4)网格布局 grid

.wrapper {
        display: grid;
        grid-template-columns: 300px 1fr 300px;
      }

(5)表格布局

.wrapper {
       width: 100%;
       display: table;
     }
.wrapper>.item:not(.center) {
      display: table-cell;
     }

问: 为什么要设置width为100%?
答: display:table 与table元素类似 ,实际上是行内块级元素, 而不是块级元素。

(6) css计算、 JS计算

什么是BFC

常见定位方案
普通流 (normal flow)
元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位。
浮动 (float)
在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。
绝对定位 (absolute positioning)
元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

定义：块格式化上下文
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。 BFC 理解为一个封闭的大箱子。
特征：使BFC内部浮动元素不乱跑
和浮动元素产生边界
定位和清除的样式规则只适用与同一个上下文。
清除浮动只清除同一个块格式上下文中在他前面的元素浮动。

触发条件：
body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
display:flow-root 最新的css语法兼容差
特点：

同一个 BFC 下,两个子元素margin外边距会发生重叠

<body> 
    <div class="box"></div>
    <div class="box"></div>
</body>
    .box {
        width: 100px;
        height: 100px;
        background: lightblue;
        margin: 100px;
    }

这里body也是一个BFC
解决办法，在每一个box外部包裹一个bfc，
<div class="container">
<div class="box"></div>
</div>
<div class="container">
<div class="box"></div>
</div>
.container {
overflow: hidden;//打开bfc模式，两个div都开启bfc模式
}

父子关系，子元素margin影响父元素的margin
.container {
width: 300px;
height: 300px;
background: red;
}
.box {
width: 100px;
height: 100px;
background: lightblue;
margin-top: 50px;
}
<div class="container">
<div class="box"></div>
</div>

image.png

这时候父容器包裹成bfc，这样bfc的变化都不影响外部。

image.png

image.png

BFC 可以包含浮动的元素
.box {
width: 100px;
height: 100px;
background: lightblue;
float : left;
}
<div class="container">
<div class="box"></div>
</div>
由于容器内元素浮动，脱离了文档流，所以容器只剩下 2px 的边距高度。如果使触发容器的 BFC，那么容器将会包裹着浮动元素。
.container {
overflow: hidden;//打开bfc模式 ,这样高度不会消失。
}
BFC 可以阻止元素被浮动元素覆盖
.box1 {
width: 100px;
height: 100px;
background: lightblue;
float : left;
}
.box2 {
width: 200px;
height: 200px;
background: red;
}
<div class="box1">我是一个左浮动的元素</div>
<div class="box2">我是一个没有设置浮动XXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
在box2 添加overflow:hidden 打开bfc模式，
.box2 {
overflow:hidden
}

img的title和alt区别

title是鼠标移动上去的提示，
alt是一个占位符，当图片为加载，可以先友好的显示文字，并且有利于seo搜索。

src与href区别

src是指向外部资源的位置，指向内容会插入到当前元素的位置。表示替换当前元素，用在img，script，iframe上。浏览器需要加载完毕src的内容才会继续往下走。
href 这是hypertext refernce 标识超文本引用。指向网络资源的位置。用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系
<a href="http://www.baidu.com"></a>
<link href="style.css" rel="stylesheet"/>
当浏览器加载到link标签时，会识别这是CSS文档，并行下载该CSS文档，但并不会停止对当前页面后续内容的加载。
@import需要页面网页完全载入以后加载。不建议用@import
总结：
href用于建立当前页面与引用资源之间的关系（链接），而src则会替换当前标签。遇到href，页面会并行加载后续内容；而src则不同，浏览器需要加载完毕src的内容才会继续往下走。

css中 link和@import 的区别

link是html标签，@import 是css提供，只用在css
页面加载时候link可以同时加载，@import必须等待整个页面加载完再加载。
@import需要ie5以上
link优先级高于@import
js只能控制css的时候只能用link，因为@import只能css控制

rgba和opactiy设置透明区别

opactiy是元素和元素下所有都变成透明
rgba 只改变元素，子元素不被影响

css样式继承

在特殊的css 属性向下传递。
文本相关：
font font-family font-size font-style font-weght line-height color
列表相关：
list-style list-style-type list-style-image

css sprite原理优点缺点

优点：
可以减少请求的次数
有效压缩的图片的大小
解决命名问题
整体更换风格容易

缺点：
前期需要很精准对坐标
在大屏设备，背景图宽度不够问题。
后期改动添加删除比较麻烦，需要整张图片维护

H5

1.什么是html语义化标签

让定义的标签有意义
优势：
代码跟清晰易阅读，有利于团体开发
有利于SEO优化
有利于屏幕阅读器，盲人阅读，移动设备使用语义方式进行渲染

ios 首字母大写如何关闭

怎么让chrome 支持比12px更小的字体

body {
    transform:scale(0.5);
 }

浏览器样式-兼容方式

-moz-对应 Firefox,
-webkit-对应 Safari and Chrome
-o- for Opera
-ms- for Internet Explorer

rem和em的区别

都是相对 font-size字体大小
rem相对于根节点html
em相对于父节点

ios触摸产生的半透明遮罩问题

-webkit-top-higlingt-color : rgba(0,0,0,0)
最后一个参数0设置透明度为0

表单输入 placeholder 的颜色如何改变

非标准，每个厂商都不一样
:-moz-placeholder { /* Mozilla Firefox /
color: #000; opacity:1;
}
input:-ms-input-placeholder{/ IE /
color: #000;opacity:1;
}
input::-webkit-input-placeholder{/ chrome 和 safari */
color: #000;opacity:1;
}

禁止ios长按触发

-webkit-touch-callout:none;
//或
e.preventDefault()

禁止ios和安卓选中文字

img{-webkit-user-select:none}

开启硬件加速

解决白屏 ，保证动画流畅
transform:translate3d(0,0,0)

安卓去掉语音输入按钮

input::-webkit-input-speech-button{
  display: none
}

前端常见面试题-h5-css

前端常见面试题-h5-css

html

块级元素

行内元素

css的盒子模型

css选择符优先级

清除浮动的几种方式

一个盒子如果不给宽高如何水平垂直居中

如何实现左中右布局

什么是BFC

img的title和alt区别

src与href区别

css中 link和@import 的区别

rgba和opactiy设置透明区别

css样式继承

css sprite原理优点缺点

H5

1.什么是html语义化标签

ios 首字母大写如何关闭

怎么让chrome 支持比12px更小的字体

浏览器样式-兼容方式

rem和em的区别

ios触摸产生的半透明遮罩问题

表单输入 placeholder 的颜色如何改变

禁止ios长按触发

禁止ios和安卓选中文字

开启硬件加速

安卓去掉语音输入按钮

前端常见面试题-h5-css

html

块级元素

行内元素

css的盒子模型

css选择符优先级

清除浮动的几种方式

一个盒子如果不给宽高 如何水平垂直居中

如何实现左中右布局

什么是BFC

img的title和alt区别

src与href区别

css中 link和@import 的区别

rgba和opactiy设置透明区别

css样式继承

css sprite原理优点 缺点

H5

1.什么是html语义化标签

ios 首字母大写如何关闭

怎么让chrome 支持比12px更小的字体

浏览器样式-兼容方式

rem和em的区别

ios触摸产生的半透明遮罩问题

表单输入 placeholder 的颜色如何改变

禁止ios长按触发

禁止ios和安卓 选中文字

开启硬件加速

安卓去掉语音输入按钮

一个盒子如果不给宽高如何水平垂直居中

css sprite原理优点缺点

禁止ios和安卓选中文字