cwjxyp的博客

当 alignToTop 为 true 时，scrollIntoViewOptions: {block: “start”, inline: “nearest”}这是它的默认值，当 alignToTop 为 false 时，scrollIntoViewOptions: {block: “end”, inline: “nearest”}这是它的默认值。block：定义元素的垂直方向的对齐方式，有"start", “center”, “end”, 或 “nearest” 4 个选项，默认 start。

radial-gradient ：（径向渐变）边框圆角：（border-radius）边框图片：（border-image）边框阴影：（box-shadow）

flex布局父元素属性flex-direction：元素排列方向row从左到右（默认） row-reverse从右到左 column(从上到下） column-reverse如果父元素不设置高度，会有子元素的高度把他撑起来如果给父元素设置了display：flex，并且宽度小于子元素总体宽度的和，自动对子元素进行压缩如果想让他换行：flex-wrapflex-wrap：元素换行nowrap：默认值，不换行、不换列wrap：换行或换列wrap-reverse：换行或换列，

单行文本溢出text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本 white-space：设置文字在一行显示，不能换行 overflow：文字长度超出限定宽度，则隐藏超出的内容overflow设为hidden，普通情况用在块级元素的外层隐藏内部溢出元素，或者配合下面两个属性实现文本溢出省略white-space:nowrap，作用是设置文本不换行，是overflow:hidden和text-overflow：ellipsis生效的基础text-overflow属性值

面试官：什么是响应式设计？响应式设计的基本原理是什么？如何做？#一、是什么响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整描述响应式界面最著名的一句话就是“Content is like water”大白话便是“如果将屏幕看作容器，那么内容就像水一样”响应式网站常见特点： 同时适配PC + 平板 + 手机等 标签导航在接近手持终端设备时

grid布局：二维网格布局，最强大的css布局方案1、容器属性grid-template-*grid-template-columnsgrid-template-columns:100px 100px 100px;有几个值代表有几列，每一列的宽度为多少，不设置默认撑满父元素宽度grid-template-rows grid-template-rows:100px 100px 100px;有几个值代表有几行，每一行的高度为多少，不设置默认撑满父元素高度 grid-templa

1、利用定位+margin:auto父级设置为相对定位，子级绝对定位 ，并且四个定位属性的值都设置了0，那么这时候如果子级没有设置宽高，则会和父元素宽高相同，完全覆盖这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个margin：auto它就可以上下左右都居中了<style> .father{ width:500px; height:300px; border..