文章目录
- css3有哪些新特性
- 什么是文档流
- css的BFC
- css 盒模型
- margin合并
- 解决浮动高度塌陷问题
- flex属性
- 防抖节流,场景
- block、inline和inline-block区别
- 去掉inline-block行内块元素默认空白间隙
- 隐藏元素方法
- relative和absolute区别
- 行内元素、块级元素,二者的转换
- 图片垂直水平居中、文字垂直水平居中
- css实现文字超出部分...显示
- position有哪些,针对每一个都深挖 static absolute relative fixed
- 如何实现两栏布局,结合盒模型考察width:100%会出现什么问题
- flex:1 、flex:2……有什么区别
- css权重计算
- css会不会阻塞页面加载,css动画会不会阻塞,animation
- 清除浮动
- 左中右布局,左右固定,中级自适应怎么是实现
- px rem em vw vh区别
- 一个未知宽高的元素,如何实现垂直水平居中
- 垂直水平居中
- 两栏布局
- css长度单位
- css实现一个高度随着宽度的变化而变化的正方形
css3有哪些新特性
新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
弹性盒模型 display: flex;
多列布局 column-count: 5;
媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
个性化字体 @font-face{font-family:BorderWeb;src:url(BORDERW0.eot);}
颜色透明度 color: rgba(255, 0, 0, 0.75);
圆角 border-radius: 5px;
渐变 background:linear-gradient(red, green, blue);
阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
倒影 box-reflect: below 2px;
文字装饰 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
边框效果 border-image:url(bt_blue.png) 0 10;
旋转 transform: rotate(20deg);
倾斜 transform: skew(150deg, -10deg);
位移 transform:translate(20px, 20px);
缩放 transform: scale(。5);
平滑过渡 transition: all .3s ease-in .1s;
动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
什么是文档流
网页在解析时,遵循从上向下,从左向右的顺序。
1、从上至上,从左至右的布局。
2、符合html中标签本身含义的布局,比如某些标签独占一行。有些标签属于行内元素等。
css的BFC
BFC(Block Formatting Context)格式化上下文,指一个独立的渲染区域或者说是一个隔离的独立容器。
形成BFC的条件:
- 浮动元素,float 除 none 以外的值;
- 定位元素,position(absolute,fixed);
- display 为以下其中之一的值 inline-block,table-cell,table-caption;
- overflow 除了 visible 以外的值(hidden,auto,scroll);
BFC的特性:
- 内部的Box会在垂直方向上一个接一个的放置;
- 垂直方向上的距离由margin决定;
- bfc的区域不会与float的元素区域重叠;
- 计算bfc的高度时,浮动元素也参与计算;
- bfc就是页面上的一个独立容器,容器里面的子元素不会影响外面元素;
css 盒模型
css的盒模型有两种:IE盒模型和标准盒模型。
标准盒子模型(content-box):width=content
IE盒子模型(border-box):width = content + padding + border
/* 标准模型 */ 不设置box-sizing默认content-box
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box;
margin合并
-
父子margin合并
子元素设置了外边距,在没有把父元素变成BFC的情况下,父元素也会产生外边距。父元素变成BFC时不会随子元素产生外边距,但是父元素的高会变化。 -
兄弟margin合并
同级(兄弟)元素在垂直方向上外边距会出现重叠情况,最后外边距的大小取两者绝对值大的那个
解决浮动高度塌陷问题
不给父元素设置高度,子元素设置了浮动的时候,会发生高度塌陷
解决方法:在父元素添加overflow:hidden
flex属性
- flex-direction属性 row | row-reverse | column | column-reverse;
- flex-wrap属性: nowrap(默认不换行); wrap:换行,第一行在上方。wrap-reverse:换行,第一行在下方。
- flex-flow 是flex-direction属性和flex-wrap属性的简写形式
- justify-content属性定义了项目在主轴上的对齐方式。
- align-items属性定义项目在交叉轴上如何对齐。
- align-content属性定义了多根轴线的对齐方式。
防抖节流,场景
block、inline和inline-block区别
block块级元素
常见的块元素
<
p
>
、
<
d
i
v
>
、
<
o
l
>
、
<
l
i
>
、
<
h
1
h
6
>
<p> 、<div> 、<ol>、<li>、<h1~h6>
<p>、<div>、<ol>、<li>、<h1 h6>等。
特点:
- 独占一行
- 可以设置宽高
- 不设置宽的情况下,默认父元素内容宽
inline内联(行内)元素
常见的内联元素:
<
a
>
、
<
s
t
r
o
n
g
>
、
<
s
p
a
n
>
、
<
i
>
<a>、<strong>、<span>、<i>
<a>、<strong>、<span>、<i>
特点:
- 相邻的行内元素会显示在一行,放不下会换行显示
- 设置宽高无效,内容撑开
- 行内元素只能放文本或者其他行内元素
- a标签里不能放a标签,但是可以放块级元素(实际开发中,某些情况下会把a标签会转化为块元素)
inline-block行内块元素
常见的行内块元素:
<
i
m
g
>
、表单类元素、
<
v
i
d
e
o
>
、
<
a
u
d
i
o
>
<img>、表单类元素、<video>、<audio>
<img>、表单类元素、<video>、<audio>
特点:
- 相邻的行内块元素会显示在一行,放不下会换行显示
- 相邻的行内块元素之间会有空白间隙
- 元素默认宽高为它本身内容宽高
- 可以设置宽高
去掉inline-block行内块元素默认空白间隙
产生间隙的原因
元素被当成行内元素排版,元素之间的空白符(空格、回车换行等)都会被浏览器处理,根据white-space的处理方式(默认是normal,合并多余空白),原来HTML代码中的回车换行被转成一个空白符,所以元素之间就出现了空白间隙。
解决办法:
- 移除标签间的空格回车换行
- 给父元素添加font-size:0px;同时子元素重写font-size
- 给元素添加float
- 单图片和父盒子下面有间隙,给图片添加display:block;
- 多图片和父盒子下面旁边有间隙,给图片添加float
隐藏元素方法
display:none;// 父元素隐藏,子孙不可见;隐藏不占用空间。
visibility:hidden; //父元素隐藏,子孙(visibility:visble; )时候可见;隐藏占用空间。
relative和absolute区别
行内元素、块级元素,二者的转换
图片垂直水平居中、文字垂直水平居中
css实现文字超出部分…显示
position有哪些,针对每一个都深挖 static absolute relative fixed
如何实现两栏布局,结合盒模型考察width:100%会出现什么问题
flex:1 、flex:2……有什么区别
css权重计算
css会不会阻塞页面加载,css动画会不会阻塞,animation
清除浮动
左中右布局,左右固定,中级自适应怎么是实现
px rem em vw vh区别
一个未知宽高的元素,如何实现垂直水平居中
垂直水平居中
两栏布局
一栏固定宽度,一栏自适应。
方法一:左侧 float:left,右侧 margin-left
// 浮动的元素脱离文档流,没有了自己的位置,后面的元素会被浮动的元素覆盖,通过margin或者padding撑开。
.left {
float: left;
width: 200px;
}
.right {
margin-left: 200px;
}
方法二:左侧 float:left,右侧 overflow:hidden
// 还可以通过 overflow: hidden; 清除浮动。
.left {
float: left;
width: 200px;
}
.right {
overflow: hidden;
}
方法三:利用定位 position
.main {
position: relative;
}
.left {
width: 200px;
}
.right {
position: absolute;
top: 0;
left: 200px;
}
方法四:利用弹性布局 flex
.main {
display: flex;
height: 100px;
width: 300px;
background: red;
}
.left {
width: 200px;
background: blue;
}
.right {
flex: 1;
}
css长度单位
绝对单位:cm mm px pt等
相对单位:em ex vm vh等
css实现一个高度随着宽度的变化而变化的正方形
视口(viewport):代表当前可见的计算机图形区域。使用相对于视口的长度单位 vh 和 vw。1vh 意味着值为视口高度的 1%,同理 1vw 即值为视口宽度的 1%。
答: vw vh