用纯CSS创建一个三角形的原理是什么?**
使用一个边框实现,
将三个边框设置宽度背景颜色为透明,一个边框设置为有颜色有宽度
absolute的containing block计算方式跟正常流有什么不同?
包裹决定定位元素的父容器必须是具有position属性为absolute或者relative。
父元素为absolute会脱离文档流 ,父元素为relative不会脱离文档流
CSS里的visibility属性有个collapse属性值?在不同浏览器下以后什么区别?
collapse 属性可以使元素折叠隐藏起来
不同的浏览器相当于visibility:hidden占据位置 先隐藏再添加伪类不能实现 鼠标放上去的时候不能js不能取到
对BFC规范(块级格式化上下文:block formatting context)的理解?
bfc是用来规定块级元素布局
给元素添加float 、visibility等属性时会触发bfc。
块元素 行内块进行布局
html
float:not none
overfloew:not visibility
display:inline-block,table-cell table-caption
position:absolute fixed
为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式?
添加浮动后,元素会脱离文档流浮动,只有遇到不是static 属性的元素时才会停下来。
子元素浮动会造成父元素高度无法被子元素撑开,当我们需要父元素有高度就需要清除浮动, 重新给父元素计算高度。
清除浮动的方式有给父元素手动添加高度,或者使用伪类清除浮动。
.clear::before{display: "block";
clear:both;
height:0;
content: "";
visibility: hidden;
overflow:hidden;}
CSS优化、提高性能的方法有哪些?
使用外部样式,减少代码重复度。
使用精灵图片等减少加载次数,http请求
浏览器是怎样解析CSS选择器的?
浏览器是通过从右往左从上到下的方式解析css选择器的。
因为如果从左往右解析选择器时,匹配的css tree如果和dom树不匹配需要回溯重新寻找匹配。而从有往左一直遍历到匹配html根节点为止就可以高效匹配不需要回溯操作。
介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?
标准盒子为内容盒子 宽度=内容的宽度 + paddiing +border +margin
内容盒子设置的宽度就是纯内容的宽度
低版本为边框盒子 宽度=内容的宽度(宽度+padding +border)+margin
边框盒子设置的宽度为内容的宽度 加上 padding 加 border
position的值? 及每个值的作用是什么
position: relative | absolute | fixed
相对定位: 相对自身元素进行定位 ,使用top ,bottom , left,right, 调整元素位置
不会脱离文档流
绝对定位:相对祖籍元素中position属性不为static的元素进行定位 ,使用top ,bottom , left, right, 调整元素位置
会脱离文档流
固定定位 :相对浏览器窗口进行定位 主要用于测边栏 使用top ,bottom , left, right, 调整元素位置
会脱离文档流
<!Doctype html> 的作用
1:声明该文档的类型为html文档
2:!为严格模式 ,严格模式情况下被废弃的标签不能使用
圣杯布局;谈谈你的认识,并说明如何实现??????
圣杯布局主要通过设置margin为负值,使元素达到理想的布局位置。
双飞翼 margin正值
比如 实现一个容器中左右两个div交换位置,给右边的蓝色div添加margin-left:-两倍自身宽度即可
<style>
.container{
width: 100%;
height: 100%;
padding: 400px;
background-color: pink;
}
.left{
width: 100px;
height: 100px;
float: left;
background-color: red;
}
.right{
width: 100px;
height: 100px;
float: left;
<!-- 右边的到左边 -->
margin-left: -200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
如何实现背景透明;文字不透明?
线性渐变 linear-granted
默认从上到下渐变 from 起点 to终点 只写一个时,相反方向为另一个
0deg to top
45deg to right top
90deg to right
135deg to right bottom
180deg to bottom
225deg to left bottom
270deg to left
315deg to left top
径向渐变 方形 圆形从里到外渐变
使用rgba设置alpha 透明度即可,opacity会造成子元素都透明的情况
css3新增的伪类有哪些
p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一元素
p:nth-child(2) 选择属于其父元素的第二个元素
:enabled :disabled 表单控件的禁用状态。
p:checked
p:focus
:hover
:link
:target
:nth-of-type
html元素的特点有哪些;分别是什么
html 元素分为块元素 、行元素、行内块元素
块元素特点:独占一行 ,不设置宽高,宽度为父元素的宽度,高度为内容的高度
行元素特点:不独占一行,紧跟着前面的元素,不可设置宽高,宽高由内容决定 可以设置padding border值
行内块特点:不独占一行,紧跟着前面的元素,可以设置宽高,margin ,padding
CSS3新特性有哪些?
css3新特性有 transition过渡 keyframe动画 @media 媒体查询 旋转等
box-shadow
text-shadow
2d 3d
背景图片
边框图片
媒体查询
文本效果
特殊字体
字体图标
resize:both (拖拽进行元素大小的改变)
渐变
伪类
伪元素