1.盒子模型:
image.png
上面的图片说明了盒子模型(Box Model)：
Margin(外边距) - 清除边框外的区域，外边距是透明的
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
一、何为BFC
BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
二、形成BFC的条件
1、浮动元素，float 除 none 以外的值；
2、定位元素，position（absolute，fixed）；
3、display 为以下其中之一的值 inline-block，table-cell，table-caption；
4、overflow 除了 visible 以外的值（hidden，auto，scroll）；
三、BFC的特性
1.内部的Box会在垂直方向上一个接一个的放置。
2.垂直方向上的距离由margin决定
3.bfc的区域不会与float的元素区域重叠。
4.计算bfc的高度时，浮动元素也参与计算
5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
2.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?
行内元素：
①行内元素只能容纳文本或者其他行内元素。
②宽度只与内容有关。
③和其他元素都在一行上。
④高,行高及外边距和内边距部分可改变。内外边距上下不可改变,左右可改变.
常用的行内元素:
span、img、a、input、textarea、select、strong、lable、
button（默认display：inline-block）、abbr（缩写）、
em（强调）、cite（引用）、i（斜体）、q（短引用）、
small、big、sub、sup、u（下划线）
注意:
img、input、select、textarea、button、label等是置换元素（浏览器根据元素的标签和属性，来决定元素的具体显示内容），置换元素在其显示中生成了框，故可以设置width、height、padding、margin，表现同行内块级元素
块级元素：
①独占一行
②高度、行高及外边距和内边距都可控制，
③可以容纳行内元素和其他元素；'
常用块级元素：
div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、
address、table、menu、pre，HTML5新增的header、section、aside、footer等
行元素转换为块级元素方式：display：block；
行内块元素:
3.浮动的作用?浮动的问题以及如何清除浮动?
浮动的作用: 处理复杂布局,在同一行显示多个div,使div脱离标准流,漂浮在标准流之上.
| 特点 | 说明 |
|---|---|
| 浮 | 加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。 |
| 漏 | 加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。 |
| 特 | 特别注意：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙 |
为什么要清除浮动:
在父布局无法给出定死的高度时,子布局设置为浮动之后,父布局无法获取子布局的高度(根据内容获取高度),从而使得父布局的高度为0,从而影响了后面的标准流;
因为父级盒子很多情况下，不方便给高度，
但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
n.png
no.jpg
如何清除浮动:
在CSS中，clear属性用于清除浮动，在这里，我们先记住清除浮动的方法，具体的原理，等我们学完css会再回头分析。
- 语法：
选择器{clear:属性值;} clear 清除
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
但是我们实际工作中， 几乎只用 clear: both;
- 清除浮动：clear
给父元素内部添加一个空的div元素，设置clear:both。
复现问题代码:
clear 属性规定元素的哪一侧不允许其他浮动元素。
<div class="container">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
</div>
<div class="bottom">哈啊哈</div>
问题效果图:
image.png
1).例：在container父元素中，在item（浮动盒子）的最后，添加一个空盒子(clearfix)，来清除浮动，以解决高度坍塌
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<!-- 空盒子，用来解决高度坍塌 -->
<div class="clearfix"></div>
</div>
.container .clearfix {
clear: both;
}
效果：
image.png
这个方法，不是很推荐，毕竟是多加了一个无意义的标签！ 不太友好，要是多写几个，就有点泛滥！
2). 利用伪类::after
利用::after来清除浮动，跟上面的添加一个空元素来解决浮动是差不多的意思，但是不会凭空添加无意义元素，而是通过伪类的方式。
例：在父元素（.container）中直接添加css样式（.clearfix）
<div class="container clearfix">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
解决高度坍塌代码（万能代码，直接拿去用就好）
.container::after {
content: "";
display: block;
clear: both；
}
3).父级添加overflow属性方法
可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。
.container {
background: pink;
overflow:auto;
}
优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
效果:
4).使用双伪元素清除浮动
使用方法：
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
-
优点： 代码更简洁
-
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
-
代表网站： 小米、腾讯等
4.伪类与伪元素的区别
这里通过两个例子来说明两者的区别。
下面是一个简单的html列表片段：
<ul>
<li>我是第一个</li>
<li>我是第二个</li></ul>
</ul>
如果想要给第一项添加样式，可以在为第一个<li>添加一个类，并在该类中定义对应样式：
<ul>
<li class="first-item">我是第一个</li>
<li>我是第二个</li></ul>
li.first-item {
color: orange}
如果不用添加类的方法，我们可以通过给设置第一个<li>的:first-child伪类来为其添加样式。这个时候，被修饰的<li>元素依然处于文档树中。
li:first-child {
color: orange}
下面是另一个简单的html段落片段：
<p>Hello World, and wish you have a good day!</p>
如果想要给该段落的第一个字母添加样式，可以在第一个字母中包裹一个元素，并设置该span元素的样式：
<p>
<span class="first">H</span>ello World, and wish you have a good day!
</p>
.first {
font-size: 5em;
}
如果不创建一个<span>元素，我们可以通过设置<p>的:first-letter伪元素来为其添加样式。这个时候，看起来好像是创建了一个虚拟的<span>元素并添加了样式，但实际上文档树中并不存在这个<span>元素。
<p>Hello World, and wish you have a good day!</p>
p:first-letter {
font-size: 5em;
}
从上述例子中可以看出，伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。
5.元素上下左右居中的几种方式
1.position定位
<div class="box">
<div class="content"></div>
</div>
样式:
.box {
height: 200px;
width: 200px;
background: pink;
position: relative;
.content {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
height: 50px;
width: 50px;
background: red;
}
}
效果:
image.png
2.flex布局
just-content:center;
aligin-item:center;
3.利用position
.box {
height: 200px;
width: 200px;
background: pink;
position: relative;
.content {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
height: 50px;
width: 50px;
background: red;
}
}
6.CSS 选择器有哪些，优先级呢
常用的选择器:
1、ID #id
2、class .class
3、标签 p
4、通用 *
5、属性 [type="text"]
6、伪类 ：hover
7、伪元素 ::first-line
8、子选择器、相邻选择器
SS权重计算
优先级最高的 !important
- 第一等级：代表内联样式，如style=""，权值为 1000
- 第二等级：代表id选择器，如#content，权值为100
- 第三等级：代表类，伪类和属性选择器，如.content，权值为10
- 第四等级：代表标签选择器和伪元素选择器，如div p，权值为1
注意：通用选择器（*），子选择器（>），和相邻同胞选择器（+）并不在这个等级中，所以他们的权值为0
image
7.css 布局
六种布局方式总结：圣杯布局、双飞翼布局、Flex 布局、绝对定位布局、表格布局、网 格布局。
圣杯布局:
所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。我们可以用浮动、定位以及flex这三种方式来实现
一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的，如京东手机版主页面顶部搜索
image.png
可以看到左边有个菜单按钮，中间是搜索框，右边是登录两个文字，左右大小是固定的，而中间部分则是随着手机屏幕尺寸的大小而自适应。
双飞翼布局:
image.png
区别: 圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。
8.css预处理器
CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题
通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”。
例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
常用的预处理器:Sass（SCSS）,LESS,Stylus
9.移动端适配
lib-flexible
px2rem-loader
10.浅谈CSS中line-height:200% | 2.0em | 2.0 的区别
<div style="line-height:200%; font-size: 15px;background:red">
父元素
<div style="font-size: 30px;background:blue">子元素</div>
</div>
① 父元素的行高为200%时，会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:200%时，子元素的行高等于15px * 200% = 30px。
image.png
<div style="line-height:2em; font-size: 15px;background:red">
父元素
<div style="font-size: 30px;background:blue">子元素</div>
</div>
② 父元素的行高为2.0em时，会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:2.0em时，子元素的行高等于15px * 2.0em = 30px。
image.png
<div style="line-height:2; font-size: 15px;background:red">
父元素
<div style="font-size: 30px;background:blue">子元素</div>
</div>
③ 父元素的行高为2.0时，会根据子元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:2.0时，子元素的行高等于30px * 2.0 = 60px。
image.png
网友评论