答案解析
html的每个元素都可以理解成是一个盒子,包含内容有margin、border、padding、content4个属性。盒子模型常见有两种w3c 标准模型,IE模型。其中标准模型:width是指的content的宽度,而IE模型是指的content + padding + border的总和。
在开发过程中 我们会通过通配符+box-sizing ,将元素的标准统一,解决不同浏览器的兼容问题 ,box-sizing可选属性:content-box(content)、border-box(content + border)、padding-box(content + border + padding)。
拓展知识点 margin属性:
答案解析
常用css3新特性:动画属性animation、弹性布局盒子、颜色设置支持rgba、媒体查询@media、盒子属性定义、形状转换transform、text的相关属性(超出内容换行、超出内容展示形式)
div{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
答案解析
属性 | 描述 |
---|---|
static | 默认值,没有定位,处于正常文本流中(会忽略top、bottom、left、z-index的声明) |
relative | 相对定位,相对于其本身正常位置进行定位。元素文本流保留在原位置不变(可通过z-index改变层级)、不影响元素属性 |
absolute | 绝对定位,相对与static定位以外的第一个父级元素进行定位,元素脱离文本流 (改变z-index层级)、会使得内联元素支持宽高设置 |
fixed | 固定定位,相对于浏览器窗口进行定位。在元素处于自身所在浏览器窗口时,与relative特性一致,当超出自身所在浏览器窗口,则于position特性一致 |
inherit | 默认继承父级的定位属性 |
答案解析:
css的选择器有:标签、类、ID、全局、组合、后代、兄弟、伪类、伪元素选择器。
css的优先级:
!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
复制代码
css选择器的权重计算规则
css选择器符号表示
,
选择器分组,每组的样式一致*
通配符,表示可以与任何元素匹配#
ID选择器[]
属性选择器 ,例如:[href],[title]div p
定义后代选择器div > p
定义子元素选择器p + li
相邻兄弟选择器,两者有相同元素,选择的是前一个选择器相邻的后一个选择器答案解析:
弹性布局是css3的新属性,是一种当页面需要去适应不同类型和屏幕大小时确保元素能够具有恰当行为的布局。作用是能够提供一个有效的帮助我们管理一个容器中子元素的排列、对齐和分配空白空间。
答案解析:
BFC是指块级格式化上下文,决定了元素如何对其内容进行定位、以及与其他元素的关系和相互作用。可以用来解决子元素浮动,父元素的高度没有了、两栏布局右栏不自适应、垂直方向上两元素边距有误等情况。
触发情况:
触发后作用
都是利用触发BFC,使得元素有自己独立空间
答案解析:
清除浮动是指的是父元素中的子元素设置float导致父元素的高度为0的情况
解决方案
{content:"",clear:both}
答案解析:
块级元素未知宽高情况下
.parent{
diplay:flex;
justify-content: center; //实现横轴
align-items:center;
}
复制代码
.child{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
.child{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%); //根据本身元素
}
.parent{
display:table;
width:300px;
height:300px;
}
.child{
display:table-cell;
vertical-align:middle;
text-align:center;
}
已知宽高实现水平垂直居中
答案解析
animation :animation-name animation-duration animation-timing-function animation-delay animation-iteration-count ;
分别表示动画名 (与@keyframes对应)、动画持续时间、动画执行速度、动画延迟时间、动画循环规律
1) rotate旋转
transform :rotate(20deg) //旋转角度
transform-origin:50% 50% //定义旋转基点
2) translate移动
translate:translate(20px,10px)
translate:translateX(20px)
translate:translateY(30px)
3) scale 缩放
transform-origin:50% 50% //定义缩放基点
translate:scale(20px,10px)
translate:scaleX(20px)
translate:scaleY(30px)
因为可能有些浏览器不兼容这些属性,所以需要加上浏览器前缀:-wekit-、-ms-、-moz-、-o- : 谷歌、IE9、火狐、Opera
答案解析:
flex:<flex-grow> <flex-shrink> <flex-basis>
//默认值 flex:0 1 auto
原因如:浏览器渲染页面的过程分析
选择器 | 功能描述 |
---|---|
E:last-child | 选择父元素的倒数第一个子元素E |
E:nth-child(n) | 选择父元素的第n个元素 |
E:nth-last-child(n) | 选择父元素的倒数第n个元素E,须满足倒数第n个元素以及为E标签,否则无效 |
E:first-of-type | 选择满足条件下的同种标签的第一个元素 |
E:last-of-type | 选择满足条件下的同种标签的最后一个元素 |
E:nth-of-type(n) | 选择满足条件下的同种标签的第n个元素 |
参考文章
less和scss都是属于css的预处理器。
例如在css使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧,可以让我们的css更加简洁、适应性更强,代码直观
box-shadow:offset-x offset-y blur spread color position
//从左到右表示:x轴偏移量、y轴偏移量、阴影的模糊半径、阴影扩展半径、颜色、阴影位置(默认外阴影,设为inset则表示内阴影)
区别:伪元素的操作对象是新生的元素,而不是原来dom结构里就存在的;而伪类的操作对象是原来dom结构就存在的元素