1.如何让一个元素居中
1.块元素：使用绝对定位
.parent {
position: relative;
}
.child {
/* 使用绝对定位 */
position: absolute;
left: 50%;
top: 50%;
/* 宽高已知：
盒子宽和高的一半
*/
margin-left: -150px;
margin-top: -150px;
/* 宽高未知：
偏移50%
*/
transform: translateX(-50%) translateY(-50%);
width: 300px;
height: 300px;
background-color: lightblue;
}
2.flex布局：
.father {
display: flex;
justify-content: center;
align-items: center;
}
3.margin:auto;父级元素需要绝对定位
#father{
position:relative;
}
#son{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin:auto;
}
2.伪类和伪元素区别？
伪类和伪元素的根本区别在于：它们是否创造了新的元素。
伪类作用对象是整个元素，而伪元素作用于元素的一部分，比如一个段落的第一行或第一个字母
a:hover{color:#000}
p::first-line{color:#555}
p::first-letter{color:#666}
a::before{content : "hello world";}
3.display:none和visibility:hidden的区别？
display:none:元素完全隐藏，不占据空间，不产生任何视觉效果。
visibility:hidden:元素完全隐藏，但是占据空间，产生空白。
4.css新特性有哪些？
- 边框：圆角，边框阴影
- 盒子模型：box-sizing
- 弹性布局
- 文字阴影：text-shadow
- border-image图片边框
5.简述css盒模型
盒子模型分为两种:
第一种:是 W3C 标准的盒子模型（标准盒模型）
第二种:IE 标准的盒子模型（怪异盒模型）
标准盒模型与怪异盒模型的表现效果的区别之处:
1、标准盒模型中 width 指的是内容区域 content 的宽度
height 指的是内容区域 content 的高度
标准盒模型下盒子的大小 = content + border + padding + margin
2、怪异盒模型中的 width 指的是内容、边框、内边距总的宽度（content + border +
padding）；height 指的是内容、边框、内边距总的高度
怪异盒模型下盒子的大小=width（content + border + padding） + margin
6.css选择器的优先级及css权重如何计算
！Important>行内样式>ID 选择器>类选择器>标签>通配符>继承>浏览器默认属性
7.列举5个以上h5 input元素type属性值？
button,text,checkbox,radio,submit,email,password,url
input其他属性：name,value,checked,maxlength
8.css中哪些属性可以继承，哪些不可以？
能继承的属性
- 字体系列属性:font、font-family、font-weight、font-size、font-style;
- 文本系列属性:
2.1）内联元素：color、line-height、word-spacing、letter-spacing、
text-transform;
2.2）块级元素：text-indent、text-align; - 元素可见性：visibility
- 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout;
- 列表布局属性：list-style
不能继承的属性 - display：规定元素应该生成的框的类型；
- 文本属性：vertical-align、text-decoration;
- 盒子模型的属性：width、height、margin 、border、padding;
- 背景属性：background、background-color、background-image;
- 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip;
9.定位属性有什么区别
- 默认static:表示没有定位
- absolute:表示绝对定位，相对于最近的已定位的祖先元素
- relative:表示相对定位，相对于自身原有位置进行偏移，可能会覆盖其他元素
- 固定定位fixed:相对于视窗来定位。意味着即便页面滚动，它还时会停留在相同的位置
10.解释下浮动和它的工作原理，清除浮动的方式有哪些及各自优点
float属性用于创建浮动框，可以向左或右移动直至包含块或另一浮动框的边缘。
工作原理：浮动元素脱离文档流，不占据空间
清除浮动：
- 额外标签法：在浮动元素末尾添加一个空的块级元素标签。优点是通俗易懂，书写方便。但是增加额外的标签使HTML结构不够简洁
<div style="clear:both;"></div>
- 父级添加overflow:属性值有hidden,auto,scroll。优点是代码简洁，但是无法显示溢出的部分
- :after伪元素法：是给父元素添加的,优点是没有添加标签，结构更简单，但是需要照顾低版本的浏览器
#parent:after {
content: "";
/* 伪元素是行内元素，需要转变为块元素 */
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#parent {
/* 兼容IE6、7 */
*zoom: 1;
}
11.简述弹性盒布局属性
- flex-direction:决定flex容器的主轴方向(水平布局为row，垂直布局为column)
- flex-wrap:决定flex容器是否换行（nowrap表示不换行，wrap表示换行）
- justify-content:决定flex容器在主轴方向上的对齐方式（flex-start表示左对齐，flex-end表示右对齐，center表示从主轴中间开始，space-between表示两端对齐，space-around表示项目两侧间距相同，项目之间的间距比两侧的间距大一倍）
- align-items:决定flex容器在侧轴方向上的对齐方式（flex-start表示从交叉轴开始，flex-end表示从交叉轴结束，center表示从交叉轴中间开始，stretch表示拉伸，baseline表示文字的基线对齐，stretch为默认值，如果项目未设置高度或设为auto，将占满整个容器的高度）
- align-content:设置行对齐
12.如何解决margin“塌陷”？
- 为父盒子设置 border，添加 border 后父子盒子就不是真正意义上的贴合（可以设置成透
明：border：1px solid transparent）； - 为父盒子添加 overflow：hidden；
- 为父盒子设定 padding 值；
- 为父盒子添加 position：fixed；
- 为父盒子添加 display：table；
- 利用伪元素给父元素的前面添加一个空元素
.father::before { content:’’; display:table; }
13.如何让浏览器显示小于12px的文字
使用css缩放属性:transform:scale()
span{
font-size:12px;
display: inline-block;
-webkit-transform:scale(0.8);
}
14.iframe 有哪些优缺点？
优点：
- 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的
传输，加快了网页下载速度) - 技术易于掌握，使用方便，使用者众多，可主要应用于不需搜索引擎来搜索的页面
缺点： - iframe 会阻塞主页面的 Onload 事件；
- 会产生很多页面，不容易管理
- 不容易打印（目前只能实现分框架页面的打印，不能实现对 frameset 的打印）
- 浏览器的后退按钮无效（只能针对实现当前光标所在页面的前进与后退，无法实现
frameset 整个页面的前进与后退） - 代码复杂,无法被一些搜索引擎索引到（有些搜索引擎对框架结构的页面不能正确
处理，会影响到搜索结果的排列名次） - 多数小型的移动设备（手机）无法完全显示框架
- 多框架的页面会增加服务器的 http 请求，影响页面的并行加载。
（并行加载：同一时间针对同一域名下的请求。一般情况，iframe 和所在页面在同一个域下面，而浏览器的并加载的数量是有限制的。
15.简述px,em和rem
- px是固定像素，一旦设置了就无法因为适应页面大小而改变
- em和rem是相对长度单位，更适应响应式布局
- em相对于父元素，rem相对于根元素
16.vh,vw的理解
vh：相对于屏幕的高度，相对值
vw：相对于屏幕的宽度，相对值
17.BFC是什么？
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干
布局规则：
- 内部的 Box 会在垂直方向，一个接一个地放置
- Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin
会发生重叠 - 每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往
右的格式化，否则相反)。即使存在浮动也是如此 - BFC 的区域不会与 float box 重叠
- BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反
之也如此 - 计算 BFC 的高度时，浮动元素也参与计算
哪些元素会生成 BFC：根元素，Position为absolute或fixed,float属性不为none,Overflow不为visible,display为inline-block,inline-flex,flex
18.如何实现左边固定宽，右边自适应布局
- 左侧固定宽度，右侧flex自适应
#box {
width: 100%;
height: 400px;
display: flex;
}
#left {
width: 100px;
height: 100%;
background-color: lightgreen;
}
#right {
flex: 1;
background-color: lightblue;
}
#box2 {
width: 500px;
height: 500px;
background-color: plum;
}
- 左侧浮动，右侧设置宽度100%，占据左侧普通流位置
#box {
width: 100%;
height: 400px;
background-color: #aaaaaa;
}
#left {
width: 100px;
height: 100%;
float: left;
background-color: lightgreen;
}
#right {
width: 100%;
height: 100%;
background-color: lightblue;
}
#box2 {
width: 500px;
height: 500px;
background-color: plum;
}
- 左侧浮动，右侧设置margin-left等于左侧宽度
#box {
width: 100%;
height: 400px;
background-color: #aaaaaa;
}
#left {
width: 100px;
height: 100%;
background-color: lightgreen;
float: left;
}
#right {
width: calc(100% - 100px);
margin-left: 100px;
height: 100%;
background-color: lightblue;
}
#box2 {
width: 500px;
height: 500px;
background-color: plum;
}
- 左侧固定宽度、固定定位，右侧宽度100%
- 左侧宽度固定、固定定位，右侧左边距等于左侧宽度
19.css实现一个三角形
.Up{
width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-bottom: 100px solid orangered;
}
20.块元素，行内元素和行内块元素
- 块元素：块元素独占一行,高度，宽度可控
<p>,<h1>~<h6>,<div>,<ul>,<ol>,<form>,<table>
- 行内元素：和其他元素都在一行，高度，宽度不可控
<span>,<a>,<label>,<button>
- 行内块元素：一行可以显示多个行内元素，宽度，高度，内外边距可控，默认宽度是它本身内容的宽度
<img>,<input>,<td>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
