前端学习博客

【CSS】圣杯、双飞翼布局文章目录【CSS】圣杯、双飞翼布局圣杯布局基本布局样式接下来要把主区域移动到中间把右区域放在主区域的右边移动左右区域，防止两边挡住中间完整代码双飞翼布局基本布局样式使左右区域移开，不要挡住主区域需要为主区域包裹一个wrapper父元素完整代码二者对比圣杯布局左右固定，中间自适应，并且中间内容优先加载基本布局样式因为要优先加载，所以中间区域放在布局的最前面。为了让中间三个区域在一行显示，为它们包裹起来，并设置浮动。设置浮动后，发现底部也跑到了上面，和中间三个元

【CSS】栅格(Grid)布局文章目录【CSS】栅格(Grid)布局声明栅格划分行列一个🌰简写形式的🌰行列间距栅格命名元素定位一个🌰根据偏移量(span)定位栅格对齐justify-content 和 align-content (栅格在容器内的排列)justify-items 和 align-items (所有元素在栅格内的排列)元素单独对齐声明栅格display: grid;display: inline-grid;划分行列使用 grid-template-columns 划分列数

【css】三栏布局三栏布局主要是前后两列定宽，中间自适应文章目录【css】三栏布局1.浮动 + margin2.浮动 + BFC3. flex4.定位1.浮动 + margin左边元素左浮动，右边元素有浮动，并给两遍元素都设置宽度。然后给中间元素设置 margin-left和 margin-right，值都等于左右元素的宽度。<style> .container { background-color: bisque; } .lef

【css】两栏布局一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应。文章目录【css】两栏布局1.浮动 + margin2.浮动 + BFC3.定位 + margin-left4.定位5. flex1.浮动 + margin先将左元素设置定宽为100px，并左浮动。然后给右元素设置margin-left，值等于左元素的宽度。<style> .container { background-color: bisque; } .le

【CSS】水平垂直布局文章目录【CSS】水平垂直布局一、水平布局（1）行内元素（2）块级元素给要居中的块级元素设置 margin: 0 auto;要居中的块级元素：left + margin-left要居中的元素：left + transform父元素开启 flex布局(1)父元素开启 flex布局(2)二、垂直布局（1）单行文本元素（2）行内块元素垂直居中（3）块级元素垂直居中要居中的元素：top + margin-top要垂直居中的元素: top + transform要垂直居中的元素：top + b

【css】媒体查询文章目录【css】媒体查询媒体查询：一、认识viewport二、关于三个viewport的理论layout viewport（布局视口）visual viewport（视觉视口）ideal viewport（理想视口）三、利用meta标签对viewport进行控制widthJS延迟四、媒体设备stylelink@import@media多设备支持五、查询条件设备方向逻辑与逻辑或不应用only六、面试题：对媒体查询的理解？七、面试题：响应式设计的概念及基本响应式媒体查询：Media

【css】移动端适配文章目录【css】移动端适配一、物理像素（设备像素） && css像素（逻辑像素）设备像素比二、px、em、rem 的区别及使用场景三者的区别：使用场景：rem：三、vw 与 vh四、单位混合使用：calc()五、如何根据设计稿进行移动端适配？一、物理像素（设备像素） && css像素（逻辑像素）像素是网页布局的基础，一个像素表示了计算机屏幕所能显示的最小区域，像素分为两种类型：css像素和物理像素。在pc端，通常认为css中,1px所表示的真实长

【css】定位布局文章目录【css】定位布局一、position的属性relative（相对定位）位置偏移absolute（绝对定位）居中定位发生滚动的情况sticky（粘性定位）fixed（固定定位）二、absolute 与 fixed 共同点与不同点一、position的属性position 有以下属性值：属性值概述absolute生成绝对定位的元素，相对于 static 定位以外的一个父元素进行定位。元素的位置通过 left、top、right、bottom 属性进行规定

【css】清除浮动及BFC文章目录【css】清除浮动及BFC一、理解BFCBFC的定义：BFC的渲染规则：创建 BFC 的条件：BFC 的作用：1.用BFC防止垂直 margin 合并2.解决高度塌陷的问题：3.利用BFC清除浮动二、清除浮动1.给父级元素定义height属性2.在最后一个浮动元素之后添加一个空的div标签，并添加clear：both样式3.包含浮动元素的父级标签添加overflow:hidden或者overflow:auto4.使用 ::after 伪类为父元素添加后标签，实现清除浮动

【css】再学盒模型文章目录【css】再学盒模型一.标准模型和IE模型二、盒模型的注意点1.背景色会平铺到非margin的区域2.margin-top 传递的现象解决方案：1.给父元素加边框2.利用padding-top3.利用BFC解决3.margin上下叠加的现象（边距重叠）解决方案：1.只给其中一个元素添加 margin2. 父子之间重叠3.兄弟之间重叠三、块级盒子(block box)与内联盒子(inline box)块级盒子的特性内联盒子的特性display控制显示隐藏解决 inline-blo

文章目录一.水平居中1.单行的文本、inline 或 inline-block 元素2.居中div（块级元素）二.垂直居中1.单行的文本、inline 或 inline-block 元素2.固定宽高的块级盒子三.水平垂直居中1.行内块级水平垂直居中方案2.定位+定宽+定高实现水平垂直居中方案(一)3.定位+定宽+定高实现水平垂直居中方案(二)4.定位+定宽+定高实现水平垂直居中方案(三)5.定位+transform实现水平垂直居中6.Flex 方案一.水平居中1.单行的文本、inline 或 inlin

文章目录一.弹性盒子1.**声明定义**2.flex-direction3.flex-wrap3.flex-flow4.justify-content5.align-items5.align-content二.弹性元素1.align-self2.flex-grow3.flex-shrink4.flex-basis5.flex6.order一.弹性盒子1.声明定义容器盒子里面包含着容器元素，使用 display:flex 或 display:inline-flex 声明为弹性盒子。2.flex-dir

文章目录一.display: none二.visibility: hidden三.opacity: 0四.`display: none`与`visibility: hidden`的区别五.元素隐藏方法总结：一.display: noneDOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间；事件监听：无法进行 DOM 事件监听；性能：动态改变此属性时会引起重排，性能较差；继承：不会被子元素继承，毕竟子类也不会被渲染；transition：transition 不支持

文章目录一.px1. 像素二.百分比(1)子元素height和width的百分比(2)top和bottom 、left和right(3)padding、margin(4)border-radius三.自适应场景下的rem解决方案四.通过vw/vh来实现自适应五.混合使用calc()语法一.px在静态网页中，我们经常用像素（px）作为单位，来描述一个元素的宽高以及定位信息。在pc端，通常认为css中,1px所表示的真实长度是固定的。在pc端，字体通常为16px。1. 像素像素是网页布局的基础，一个像

文章目录清除浮动1.BFC 清除浮动2.通过 clear 清除浮动3.父元素结束标签之前插入清除浮动的块级元素4. 利用伪元素（clearfix）5.将父级也设置成浮动清除浮动什么是浮动：浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。为什么要清楚浮动，它造成了什么问题？因为浮动元素会脱离正常的文档流，并不会占据文档流的位置，所以如果一个父元素下面都是浮动元素，那么这个父元素就无法被浮动元素所撑开，这样一来父元素就丢失了高度，这就是所谓的浮动造成的父元素高度坍塌问题。1.B

文章目录一.标准模型和IE模型二.box-sizing三.根据盒模型解释边距重叠四.BFC、IFC1. 用BFC防止垂直 margin 合并2.用BFC消除内部浮动3.高度坍塌五.inline-block1.**解释一下display的几个常用的属性值，inline ， block， inline-block****2.inline-block布局 vs 浮动布局****3.inline-block存在的小问题：**4.**去除inline-block元素间间距的N种方法**一.标准模型和IE模型盒模型

文章目录一.用到的相关属性1.white-space2.word-break3.text-overflow:4.`overflow`二.单行文本溢出三.多行文本溢出一.用到的相关属性1.white-space这个属性是用来控制空白字符的显示的，同时还能控制是否自动换行。它有五个值：normal | nowrap | pre | pre-wrap | pre-line。默认是normal。①white-space: nowrap:不仅空格被合并，换行符无效，连原本的自动换行也没有了！只有<br

文章目录一.字体属性1.用行高让单行文本居中2.font属性简写3.字体加粗属性4.大小写转换二.文本属性1.空白处理2.overflow属性：超出范围的内容处理一.字体属性css样式中，常见的字体属性有以下几种：p{ font-size: 50px; /*字体大小*/ line-height: 30px; /*行高*/ font-family: 幼圆,黑体; /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/ font-style: italic ; /*ital

文章目录一.基本选择器二.结构选择器1.后代选择器,用空格隔开2.子代选择器，用符号`>`表示3.紧邻兄弟元素4.后面兄弟元素三.属性选择器四.伪类选择器1.超链接伪类2.结构伪类:first-child:first-of-type:only-child::only-of-type:nth-child(n):nth-of-type(n)计算数量偶数元素奇数元素:nth-last-child(n):nth-last-of-type(n):not(selector)3.表单伪类表单属性样式表单必选样式表单