前端面经（2）--CSS3基础

标签选择器

        我们在写样式的时候，通常使用class而不是id，因为一个标签里面只能写一个id,id的权重太高了会影响样式的显示。

        在实际应用中，class常被用到文字版块和页面修饰上，而id多被用在宏伟布局和设计包含块，或包含框的样式。

 

盒子模型

1.普通盒子模型

box-sizing:content-box

盒子的大小只包含内容，不包含boreder和padding

2.怪异盒子模型

box-sizing:border-box

padding和border都会挤压到内容里面，内容区域会变小

3.盒子的margin合并

margin 纵向重叠取重叠区最大值，不进行叠加

解决方法：BFC

元素居中的方法
 

（1）行内元素居中（常用的是文字居中）

text-alinn:center;

line-height:行高

（2）块级元素居中

margin:0 auto;

样式单位

px:一个屏幕能显示的最小的区域

em:作用于字体的时候相对于父元素的大小，作用于其他的时候相对于自身字体大小的单位

rem:相对于html标签字体大小的单位，作用于根元素的字体大小的时候，相对于初始字体的大小（16px）
vh:相对于视口高度大小的单位，20vh == 视口高度/10020

vw:相对于视口宽度大小的单位,20vw ==视口宽度/10020

rpx:微信小程序的单位

文档流

（1）position元素定位

relative:相对自身之前正常文档流中的位置发生偏移且原来的位置仍然被占据。发生偏移时,可能覆盖其他元素。

body默认是relative,子绝父相！！！！！
absolute:元素框不再占有文档位置，并且相对于包含块进行偏移（所谓包含块就是最近一级外层元素position不为static的元素)。他的定位通过top\bottom\left\right
fixed:元素框不再占有文档流位置，并且相对于视窗进行定位。

static:默认值，取消继承。
sticky: css3新增属性值，粘性定位，相当于relative和fixed的混合。最初会被当作是relative，相对原来位置进行偏移;一旦超过一定的阈值，会被当成fixed定位，相对于视口定位。
inherit

（2）元素浮动

float：none、left、right；

浮动元素会脱离标准流（脱流）. 浮动的盒子不在保留原先的位置

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

元素的隐藏

常见的隐藏属性的方法有display: none 与visibility: hidden
display: none:渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
visibility: hidden:元素在页面中仍占据空间，但是不会响应绑定的监听事件。
opacity:0︰将元素的透明度设置为0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
position: absolute:通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。z-index:负值:来使其他元素遮盖住该元素，以此来实现隐藏。
clip/clip-path:使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
transform: scale(0,0):将元素缩放为0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
 

flex布局

 弹性盒子布局，通过主轴和交叉轴控制子元素的排列布局

父容器

1. flex-direction   主轴方向
2. flex-wrap        主轴一行满了换行
3. flex-flow        1和2的组合
4. justify-content  主轴元素对齐方式

        flex-start (默认值)︰左对齐flex-end:右对齐
        center:居中
        space-between:两端对齐，项目之间的间隔都相等、

        space-around:两个项目两侧间隔相等
5. align-items      交叉轴元素对齐方式//单行
6. align-content    交叉轴行对齐方式//多行

子容器

flex-grow：长大
flex-shrinik: 缩小
align-self: 覆盖container align-items 属性
order 排序
flex-basis: 有效宽度

flex属性是flex-grow, flex-shrink和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
 

过渡动画

transition:all (all代表所有属性) 0.3s(0.3s代表过渡时间)  ease(运动曲线) 1s(何时开始)

这是合并的写法，可以搭配hover使用