1.浏览器内核?
1、IE浏览器内核:Trident内核(三叉戟),IE内核
2、Chrome浏览器内核:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核;
3、Firefox浏览器内核:Gecko内核,俗称Firefox内核;
4、Safari浏览器内核:Webkit内核;
5、Opera浏览器内核:最初是自己的Presto内核,后来是Webkit,现在是Blink内核;
6、360浏览器、猎豹浏览器内核:IE+Chrome双内核;
7、搜狗、遨游、QQ浏览器内核:Trident(兼容模式)+Webkit(高速模式);
8、百度浏览器、世界之窗内核:IE内核;
9、2345浏览器内核:以前是IE内核,现在也是IE+Chrome双内核
2.盒子模型?
content(内容)+padding(内边距)+border(边框)+margin(外边距)
3.元素类型分类
(1)块状元素
A:块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域,
B:默认情况下,块状元素都会占据一行,通俗地说,两个相邻块状元素不会出现并列显示的现象;默认情况下,块状元素会按顺序自上而下排列。
C:块状元素都可以定义自己的宽度和高度。
D:块状元素一般都作为其他元素的容器,它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。
*嵌套规则:p>p(错误) p>div(错误) span>p(错误) div>p(正确) p>span(正确)
div -最常用的块级元素
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 -h6- 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
li
fieldset - 表单字段集
colgroup-col - 表单列分组元素
table-tr-td 表格及行-单元格
pre
-(2)行内元素(内联元素):
A:内联元素的表现形式是始终以行内逐个进行显示;
B:内联元素没有自己的形状,不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定,它的最小内容单元也会呈现矩形形状;
C:内联元素也会遵循盒模型基本规则,如可以定义padding,border,margin,background等属性,但个别属性不能正确显示;(padding-top/bottom;margin-top/bottom;)
a –超链接(锚点)
span - 常用内联容器,定义文本内区块
br - 换行
i - 斜体
em - 强调
label - 表单标签
b - 粗体(不推荐)
strong - 粗体强调
sub - 下标
sup - 上标
u - 下划线
(3) 内联块状元素(css2.1增加):
img - 图片
input - 输入框
textarea - 多行文本输入框
select button
(4)可变元素:
需要根据上下文关系确定该元素是块元素或者内联元素。
4.弹性盒子
display:flex
主轴对齐方式:justify-content:
flex-start
flex-end
center
space-between
space-around
交叉轴对齐方向:align-items:
flex-start
flex-end
center
baseline
stretch:如果项目未设置高度或设为auto,将占满整个容器的高度。
定义一条轴线排不下,如何换行:flex-wrap:
nowrap:默认不换行
wrap:换行,第一行在上方
wrap-reverse:换行,第一行在下方
定义主轴方向:flex-direction:
row、row-reverse
column、column-reverse
flex-flow:flex-wrap与flex-direction的缩写属性
flex-flow:<flex-direction> <flex-wrap>
默认:row nowrap
以下是flex的项目属性:

align-self:允许单个项目与其他项目有不同的对齐方式,能覆盖align-items属性
默认值:auto,继承父元素的align-items,
flex-start/flex-end/center/baseline/strech
order:默认为0,数字越大越往后排,支持负数
flex:1 1 10%/px
(三项分别是:flex-grow、flex-shrink、flex-basis)
flex-grow:规定项目相对于其他灵活的项目进行扩展的量(默认为0.有空间也不放大)
flex-shrink:项目默认为1,值为0不压缩
flex-basis:在分配多余空间之前,项目占据的主轴空间,计算主轴是否有多余的空间,默认值为auto,即项目的本来大小,还可以设置px,则项目占据固定空间
默认属为:flex:0,1,auto
常用:flex:1
定义多根轴线的对齐方式:align-content:
flex-start
flex-end
center
space-between
space-around
strech
flex-wrap: wrap;
align-content: flex-start;
flex-wrap: wrap;
align-content: flex-end;
flex-wrap: wrap;
align-content: center;
flex-wrap: wrap;
align-content: space-around;
flex-wrap: wrap;
align-content: space-between;
flex-wrap: wrap;
align-content: stretch;
/* 项目不设置高 */
5.margin合并问题
描述: 处于上下位置关系的两个div容器,在分别设置margin-top、margin-bottom时,如果两个属性的值相同时,则两容器间的距离就是这个值;如果两个属性的值不同,则取较大值作为两容器间的距离;
解决:
(1)给其中一个元素设置外边距
(2)给元素外层套一个元素,给父元素设置overflow:hidden
<style>
div{
width: 30px;
height: 30px;
background:orangered;
}
.box1{
margin-bottom: 10px;
}
.box2{
margin-top: 20px;
}
h1{
overflow: hidden;
}
</style>
<body>
<h1>
<div class="box1"></div>
</h1>
<div class="box2"></div>
</body>
描述: 父级盒模型不加padding或border的时候内部文档流中第一个子元素的margin-top会将父元素向下拉去,也就是外边距转移到了父元素的外边距
解决:
(1)给父元素加overflow-hidden
(2)给父元素加border
(3)给父元素加padding
(4)添加绝对定位 、添加浮动
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 100px;
height: 100px;
background: rgb(238, 177, 155);
/* border: 1px solid #fff; */
/* overflow: hidden; */
/* float: left; */
position: absolute;
}
.box div{
width: 30px;
height: 30px;
background: palegoldenrod;
margin-top: 20px;
}
</style>
<body>
<div class="box">
<div></div>
</div>
</body>
6.margin塌陷问题(清除浮动):
描述: 父元素不设置高度时会被子元素自动撑开,但是子元素浮动后脱离布局流不占位,父元素高度消失(相当于浮动的元素在二楼、父元素在一楼)。
(上下元素,有一个浮动影响时,直接用clear:left/right/botn,clear就是避免元素受到浮动元素的影响)
解决:
(1)给父元素设置固定高度(不能自适应)
(2)父元素浮动(影响整体布局)
(3)overflow:hidden 里面的子元素溢出会有影响
(4)display:inline-block(影响后面元素 X)
(5)设置空标签,不推荐,会多添加一个标签
<div class="box">
<div></div>
<div style="clear:both"></div>
</div>
(6)after伪类:
.clearfix:after{
content: '';
display: block;
height: 0;
width: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
7.BFC规范
Formatting context(格式化上下文)
是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
BFC 即 Block Formatting Contexts (块级格式化上下文)
它属于上述中的其中一种规范。具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。
触发BFC:
-
浮动元素:float 除 none 以外的值
-
绝对定位元素:position (absolute、fixed) 注意:relative不可以
-
display 为 inline-block、table-cells、flex
-
overflow 除了 visible 以外的值 (hidden、auto、scroll)
BFC的布局规则:
-
内部的Box会在垂直方向,一个接一个地放置。
-
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
-
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
-
计算BFC的高度时,浮动元素也参与计算。所以BFC的作用之一就不不让浮动元素乱跑。
应用:
解决margin合并与margin塌陷
8.实现元素水平垂直居中:
(1)定位实现居中:
<div class="box1">
<div class="box2"></div>
</div>
.box1{
width: 300px;
height: 300px;
position: relative;
background: rosybrown;
}
.box2{
width: 100px;
height: 100px;
position: absolute;
left:50%;
top:50%;
margin-top:-50px ;
margin-left: -50px;
background:royalblue;
}
(2) 子元素:始终固定居中
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
width: 100px;
height: 100px;
background: salmon;
(未完…)