1.讲一下盒模型,普通盒模型和怪异盒模型有什么区别?
盒模型:CSS把每个元素视为一个盒子,每个盒子包括分为内容(content)、填充(padding)、边框(border)、边界(margin)四个部分。盒模型是CSS布局的基本单元。
W3C标准盒模型(content-box):(属性width,height只包含内容content,不包含border和padding。)
IE盒模型(也称怪异盒模型)(border-box):(属性width,height包含content、border和padding)
2.块元素和行内元素区别是什么?常见块元素和行内元素有哪些?
1.常见的块元素有<h1>~<h6> <p> <div> <ul> <ol> <dl> <li>等
块元素的特点有:
1.总是从新的一行开始
2.宽度(width),高度(heigth),外边距以及内边距都可以控制
3.宽度默认是父容器的%
4.可以容纳内联元素或者其他块元素
2. 常见的行内元素有<a>、<strong>、<em>、<i>、<s>、<ins>、<u>、<span>等,其中<span>标签是最典型的行内元素
行内元素的特点有:
1.和相邻行内元素在一行上
2.高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效
3.默认高度就是它本身内容的宽度
4.内行元素只能容纳文本内容和其他内行元素(<a>比较特殊)
3.行内块元素: <img />、<input />、<td>
行内块元素的特点:
1.和相邻行内元素(行内块元素)在一行上,但是之间会有空白缝隙
2.默认宽度就是它本身内容的宽度
3.高度、行高、外边距以及内边距都可以控制
3.HTML语义化标签有哪些?
通过使用恰当语义的HTML标签,让页面具有良好的结构与含义.
header网页的头部
main网页的主体部分(只有一个main)
nav 网页的导航
section 一个独立的区块
aside 和主体相关的其他内容(侧边栏)
article独立的文章
footer 网页的底部
4.伪类和伪元素的区别是什么?
伪类(pseudo-class)是一个以冒号作为前缀,被添加到一个选择器末尾的关键字,样式被呈现到指定的元素时。如:(:last-child、:nth-of-type(n)),通过在元素选择器上加入伪类改变元素状态。
伪元素是以两个冒号作为前缀,用于创建一些不在文档树中的元素,并为其添加样式。通过对元素的操作进行对元素的改变。
5.CSS如何实现垂直居中?
1)设定行高(line-height):设定行高是垂直居中最简单的方式,适用于“单行”的“行内元素,行内元素的上下都加上行高的1/2,所以就垂直居中
2)添加伪元素:
.div0::before{
content:'';
width:0;
height:100%;
display:inline-block;
position:relative;
vertical-align:middle;/* vertical-align针对行内元素,div是block*/
background:#f00;
}
3)calc属性动态计算:top: calc(“50%的外框高度- 50%的div高度”
至于为什么不用margin-top,因为margin相对的是水平宽度,
4)使用表格或假装表格
5)Transform:
position:relative;
top:50%
transform:translateY(-50%);
6)绝对定位
7)用Flexbox
6.水平方向布局
一个元素在父元素中,水平布局满足一下等式:( margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素内容区的width)
7 .垂直方向布局
如果子元素超过了父元素大小,则会溢出使用overflow属性设置父元素如何处理溢出
overflow:overflow-x/overflow-y:
visible(默认值) 会溢出,在父元素外部显示
hidden 溢出的内容会被裁剪,不会显示
scroll 生成滚动条
auto 根据需要生成滚动条
8、CSS常见的选择器有哪些?
1)元素选择器:元素{}
2)id选择器:#id{}
3)类选择器:.class{}
4)复合选择器
选择器1 选择器2....(交集)
选择器1,选择器2,...(并集)
5)关系选择器
5.1 子元素选择器:父元素>子元素{}
5.2 后代选择器:祖先元素 后代元素{}
5.3 兄弟选择器:前一个+后一个{}(只会选择一个)
前一个~后面{}(前面的兄弟不会被选中)
6)属性选择器
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和指定值的元素
7)伪类选择器(带一个:)
7.1 :first-child:第一个子元素
7.2 :last-child :最后一个子元素
7.3 :nth-child():选中第n个 2n/even偶数个 2n-1/odd奇数
7.4 :first-of-type
7.5 :last-of-type
7.6 :not():除了
8)超链接的伪类
8.1 :hover 鼠标移入
8.2 :link 表示一个没访问过的链接
8.3 :visited 表示一个访问过的链接,只能改变颜色
8.4 :active 鼠标点击
9)伪元素选择器(特殊的位置)
9.1 ::after 元素的结束位置
9.2 ::before 元素的开始位置
使用9.1 9.2 必须结合content!!!
9.3 ::first-leter 第一个字母
9.4 ::first-line 第一行
9.5 ::selection 选中的内容
9..CSS的优先级如何计算?
对于每一条css规则,生成四元组(内联,id,class,元素)
!important 无穷大
style 属性 1,0,0,0
id 选择器 0,1,0,0
类、伪类、结构伪类、属性选择器 0,0,1,0
元素、伪元素选择器 0,0,0,1
通配符选择器 0,0,0,0
继承的样式 没有权重
10长度单位px、em和rem,rpx,vw,vh的区别是什么?
px:相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em :相对与父元素的font-size来计算的
rem:相对于根元素html的font-size
rpx:小程序独有的,论大小屏幕,规定屏幕宽为750rpx
vw:相对于浏览器视口宽度
vh:相对于浏览器视口高度
11.讲一下flex弹性盒布局?
弹性容器
1)display:
flex:块级弹性容器
inline-flex:行内的弹性容器(不会独占一行)
2)flex-direction:设置主轴的方向
row:默认值,水平排列
主轴:右——>左
row-reverse:反向水平排列
主轴:左——>右
column:垂直排列
主轴:上——>下
column-reverse:反向垂直排列
主轴:下——>上
主轴:弹性元素的排列方向
侧轴:与主轴垂直
3)flex-wrap:弹性元素是否自动换行
nowrap:不换行
wrap:换行
wrap-reverse:辅轴反方向换行
4)flex-flow:flex-direction和flex-wrap的简写,无顺序要求
5)jusitify-content:主轴上的元素如何排列
flex-start:沿主轴开始
flex-end:沿主轴终边
center:元素居中排列
space-around:空白分布在元素两侧
space-evenly:空白分布在元素单侧
space-between:空白均匀分布到元素两侧
6)align-items:元素在辅轴上如何对齐
strench:默认值,将同一行的元素设置成相同高度
flex-start:元素不会拉伸,沿辅轴起边对齐
flex-end:元素不会拉伸,沿辅轴终边对齐
center:垂直居中
baseline:基线对齐
7)align-content:辅轴空白的如何分配
flex-start:沿主轴开始
flex-end:沿主轴终边
center:元素居中排列
space-around:空白分布在元素两侧
space-evenly:空白分布在元素单侧
space-between:空白均匀分布到元素两侧
弹性元素
弹性容器的子元素,是弹性元素,一个元素可以同时是弹性容器,元素
1)flex-grow:
指定弹性元素的伸长系数,默认是0
父元素的剩余空间,按比例分配
2)flex-shrink:
指定弹性元素的收缩系数,默认时1
父元素的空间容纳不下时,对子元素进行收缩
3)align-self:用来覆盖align-items
4)flex-basis:元素在主轴上基础长度
5)flex:增长 缩减 基础长度
initial:0 1 auto
auto:1 1 auto
none:0 0 auto
6)order:元素的排列顺序
12.float:设置浮动,
float:none /left/right在其父元素内, 设置浮动后,水平等式不需要强制满足
浮动的特点:
1)完全从文档流脱离,不再占用文档流的位置,下边的元素会向上移动
2)通过浮动,可以使一个元素向其父元素的左侧或右侧移动,不会超过其他浮动元素,不会从父元素中移出
3)如果上边是一个无浮动的元素,浮动元素无法上移
4 )浮动元素不会盖文字,文字会环绕图片
脱离文档流特点!!
--块元素不再独占一行 宽 高被内容撑 开
--行内元素可以设置宽高(变为块元素)
13.清除浮动有3种办法:
1)在浮动元素后面增加一个元素,设置clear: both;
2)父元素设置伪元素,给伪元素设置clear: both,设置clear的元素不受前面浮动元素影响,位置会放在浮动元素后面,因此可以把父元素撑开。
3)父元素设置overflow: hidden。overflow: hidden让父元素形成一个BFC,所以可以清除浮动。
13.浮动塌陷问题解决方法是什么?(bug)
高度塌陷:元素的高度默认是被子元素撑开的,但子元素设置浮动后,脱离文档流,导致父元素高度丢失,导致下面元素向上移,导致页面混乱
开启BFC:
1)设置浮动 flaot=left/right
2)display: flex/inline-flex/
3)overflow:hidden/auto/scroll
4)position:absolute/fixed
/* 解决外边距重叠和高度塌陷 */
clearfix::before,
clearfix::after{
content: '';
display: table;
clear: both;
}
14.BFC、IFC是什么?
BFC(Block Formatting Contexts)直译为“块级格式化上下文” BFC就是页面上的一个隔离的渲染区域,容器里面的子元素不会在布局上影响外面的元素,反之也是如此。
IFC (Inline Formatting Context) 内敛格式化上下文。
隐含属性,开启BFC后,变成独立的布局区域
特点:
1)开启BFC元素后,不会被浮动元素覆盖
2)子与父元素外边距不会重叠
3)可以包含浮动的子元素
15.position属性的值有哪些?各个值是什么含义?
position:left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=父元素内容区的width
static:默认值
relative:相对定位
1) 参照自身在文档流中的位置
2) 会提升元素层级
3)不会脱离文档流
4)不会改变元素性质
5)不设置偏移量,没有变化
absolute:绝对定位
1)不设置偏移量,位置没有变化
2)脱离文档流
3)会改变元素性质(变为块元素)
4)会提升元素层级
5)开启了定位的祖先元素,没有则是根元素
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: o;
margin: auto; //实现水平垂直居中
fixed:固定定位
1)不设置偏移量,位置没有变化
2)脱离文档流
3)会改变元素性质(变为块元素)
4)会提升元素层级
5)参考于浏览器视口
sticky:粘滞定位