子元素在父元素中 水平垂直居中
基础css
<div class="father">
<div class="son">son</div>
</div>
最常用的 flex
.father {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #dddddd;
}
.son {
margin: 20px;
padding: 20px;
border: 1px solid #eeeeee;
}
transform 弹出框常用
.father1 {
border: 1px solid #dddddd;
position: relative;
width: 200px;
height: 200px;
}
.son1 {
border: 1px solid #eeeeee;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
效果
列举Css3新特性
选择器
边框(border-image、border-radius、box-shadow)
背景(background-clip、background-origin、background-size)
渐变(linear-gradients、radial-gradents)
字体(@font-face)
转换、形变(transform)
过度(transition)
动画(animation)
弹性盒模型(flex-box)
媒体查询(@media)
CSS3 中的盒模型有以下两种:
- 标准盒模型、
- IE(替代)盒模型。
两种盒子模型都是由 content + padding + border + margin 构成,其大小都是由 content + padding + border 决定的,
但是盒子内容宽/高度(即 width/height)的计算范围根据盒模型的不同会有所不同:
- 标准盒模型:只包含 content 。
- IE(替代)盒模型:content + padding + border 。
可以通过 box-sizing 来改变元素的盒模型:
box-sizing: content-box :标准盒模型(默认值)。
设置盒子:width:200px; border:1px;padding:10px;
实际宽度200px=content
box-sizing: border-box :IE(替代)盒模型。
设置盒子:width:200px; border:1px;padding:10px;
实际宽度200px=content+border+padding
2.8 flex 布局考点flex: 1
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
flex:1:
- flex-grow: 1 该属性默认为 0 ,如果存在剩余空间,元素也不放大。设置为 1 代表会放大。
- flex-shrink: 1 该属性默认为 1 ,如果空间不足,元素缩小。
- flex-basis: 0%:该属性定义在分配多余空间之前,元素占据的主轴空间。
浏览器就是根据这个属性来计算是否有多余空间的。默认值为 auto,即项目本身大小。
设置为 0% 之后,因为有 flex-grow 和 flex-shrink 的设置会自动放大或缩小。
在做两栏布局时,如果右边的自适应元素 flex-basis 设为 auto 的话,其本身大小将会是 0。
pointer-event
如果用一个蒙层做水印 会遮挡底部事件触发 pointerEvents可以解决这个问题,使操作对象不会成为鼠标事件的target
/* 该元素不会成为鼠标事件的target */
pointer-event:none;
- 任何元素设置pointer-event:none的效果相当于 input[type=text|button|radio|checkbox]
设置disabled 属性,可以实现事件的禁用,例如:
<a href="xxxxxx" style="pointer-events: none">click me</a>
这个链接,是点不了的,并且 hover 也没有效果, 没有鼠标事件,但是键盘可以操作。
- 当要禁用select下拉框可以设置pointer-event:none;
- 当很多元素需要定位在一个地图层上面,需用到绝对定位、相对定位的元素,这样的话,这些元素就会盖住下面的地图层, 以至于地图层无法操作。这时元素设置 pointer-events: none,然后地图就可以拖动和点击了。但是操作区域本身却无法操作了,可以再给需要操作的元素区域设置为 pointer-events:auto
margin重叠的方案
考点: BFC 块级格式化上下文就是页面上的一个隔离的独立容器
计算的原则
- 两个都为正值直接去最大值;
- 两个一正一副时, 使用正值去减去负值的绝对值;
- 两个都为负值时, 两个都使用绝对值, 在使用0减去最大值。
解决办法
兄弟间重叠时
底部元素变为行内盒子(display: inline-block);
底部元素设置flot
底部元素的position的值为absolute/fixed
父元素与子元素重叠
父元素加入(overflow: hidden);
父元素添加透明边框(border:1px solid transparent);
子元素变为行内盒子(display: inline-block);
子元素加入浮动属性或定位
什么是回流,什么是重绘,有什么区别?
DOM Tree 和 css 结构体组合后构建render tree,
render tree类似于DOM tree,但区别很大,因为render tree能识别样式,render tree中每个NODE都有自己的style,而且render tree不包含隐藏的节点(比如display:none的节点,还有head节点),因为这些节点不会用于呈现,而且不会影响呈现的,所以就不会包含到 render tree中。我自己简单的理解就是DOM Tree和我们写的CSS结合在一起之后,渲染出了render tree。
什么是回流
当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流,就是在页面第一次加载的时候,这时候是一定会发生回流的,因为要构建render tree。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。
什么是重绘
当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。