qq_41893334的博客

知识清单伸缩布局基本概念设置给容器的属性：flex-direction属性justify-content属性（主轴上的对齐方式）align-items(侧轴上的对齐方式)flex-wrap（如何换行）align-content（控制换行后的对齐方式）flex-flow设置给伸缩项的属性align-self(单独控制伸缩项在侧轴上的对齐方式)order（伸缩项的排序属性）flex-grow（伸缩项的扩充）flex-shrinkflex-basisflex伸缩布局基本概念Flex 是 Flexible Bo

媒体查询1.通过媒体查询媒体查询的方式可以说是早期采用的布局方式，它主要是通过查询设备的宽度来执行不同的css代码，最终达到界面的配置2.媒体查询优势简单, 哪里不对改哪里调整屏幕宽度的时候不用刷新页面即可响应式展示特别适合对移动端和PC维护同一套代码的时候3.媒体查询劣势由于移动端和PC端维护同一套代码, 所以代码量比较大，维护不方便为了兼顾大屏幕或高清设备，会造成其他设备资...

1.隐藏滚动条父元素的样式height:固定死；box-sizing:border-box;overflow:hidden;有滚动条的子元素的样式width: 100%;white-space: nowrap;overflow-x: scroll;padding-bottom: 100px;思想：将滚动条挤出父元素，父元素设置overflow:hidden;然后就看不见滚动...

圣杯布局圣杯布局是一种常见的实现三栏布局的方式，两端固定，中间自适应编写步骤1.搞一个容器，里面放三个盒子2.设置两侧盒子的宽度固定3.设置中间盒子的宽度为容器的宽度（100%）4.设置容器的左右padding为两侧盒子的宽度5.让3个盒子在同一方向上浮动6.设置左盒子的margin-left=-100%7.通过定位调整左边盒子，让左边的盒子不要盖住中间的内容区域8.设置右边盒...

1.像素1、在前端开发中视口的水平方向和垂直方向都是由很多个小方格组成的，一个小方格就是一个像素，例如div的尺寸是100*100，那么水平方向就占用100个小方格，垂直方向也占用100个小方格2、像素的特点像素的大小不会随着视口的变化而变化，像素是一个固定的单位（绝对单位）2.百分比1、百分比是一个动态单位，永远都是以当前元素的父元素作为参考进行计算例如：父元素的宽高都是200px，...

盒子模型每一个html元素都可以看成是一个矩形的盒子，每个盒子包含外边距、边框、内边距和内容页面的布局就是一个一个盒子按一定的方式来摆放，一般有两种摆放方式：1.在正常流中，元素会按照其在html文档中的位置从左向右，从上向下按顺序排布2.脱离正常流，也就是不按顺序来排布，常用的方法有浮动和绝对定位两种盒子模型1.W3C盒模型、IE盒模型当一个元素包含其他元素时，这个元素的内容区域...

方式一1.给盒子添加高度

对于谷歌浏览器来说只要给容器加上下面几行代码即可：overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp:3;/*指定文字显示的行数*/-webkit-box-orient:vertical;要兼容其他浏览器的话，用插件clamp.js实现...

外边距塌陷也称为外边距合并，是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距，组合在一起变成单个外边距，不过只有上下外边距才会有塌陷，左右外边距不会出现这种问题。第一种：父子关系<div class="father1"> <div class="son1">子元素1</div></div> .father1{ ...

开始之前先了解一个概念：文档流（标准流）：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的顺序)注意点：在标准流中，内容的高度可以撑起父元素的高度相对定位1.相对定位不会脱离标准流2.在相对定位中同一个方向上的定位属性只能使用一个（使用了top就别使用...

z-index属性的使用1.什么是z-index？  z-index就是专门用于控制定位流元素的覆盖关系的，默认取值为02.默认情况下，定位流的元素会覆盖标准流的元素3.默认情况下写在后面的定位流的元素会盖住前面的定位流元素4.如果定位流元素设置了z-index属性，那么谁的z-index比较大，谁就显示在上面注意点：从父现象1.如果两个元素的父元素都没有设置z-index属性，那么...

需求：子盒子在父盒子中水平垂直居中效果图如下：结构代码：<div class="father"> <div class="son"></div></div>第一种实现方式：定位 + 偏移 .father{ width: 300px; height: 300px; ...