基础css

Embrace924

已于 2023-10-26 10:50:17 修改

阅读量152

点赞数

文章标签： css css3

于 2022-03-12 11:43:02 首次发布

本文链接：https://blog.csdn.net/Embrace924/article/details/123440818

版权

子元素在父元素中水平垂直居中

基础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。则就叫称为重绘。