随笔分类 - html+css
摘要：v-if实质就是动态添加删除dom元素 v-show则是利用display属性来控制标签的显示和隐藏,其标签仍在dom中 display:none标签不占据原来的位置,会触发回流和重绘 visiablity:hidden标签仍占据原来位置,只触发重绘
阅读全文
摘要：继承就是指子节点默认使用父节点的样式属性。 可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。 所有元素可继承：visibility和cursor。 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、
阅读全文
摘要：三栏布局就是在网页上以平铺方式展现左中右三列布局，其特点在于，左右两列固定在网页两侧，中间一列永远居中，且当网页宽度大于左右两列宽度之和时，中间一列可随网页整体宽度的变化而变化，简单来说就是两端固定，中间自适应。常用的主要有6种布局方式：浮动，绝对定位，flex，grid，圣杯布局和双飞翼布局浮动:
阅读全文
摘要：回流:当元素的尺寸,结构属性改变,浏览器需要重新渲染部分或全部文档流的过程 浏览器首次加载 元素尺寸位置改变 元素内容改变 字体大小改变 添加删除dom元素 重绘:元素样式改变并不会影响其位置的变化,浏览器将新样式赋予它并重新绘制 color background-color 区别: 回流一定重绘,
阅读全文
摘要：position属性规定用于元素定位的方法类型 元素其实是使用top,bottom,right,left来定位的;除非首先设置了position,否则这些属性不起作用 static html默认情况下的定位方式static(静态),不受上述属性的影响,根据页面的正常流进行定位 relative 相对
阅读全文
摘要：BFC块级格式化上下文 其容器内排列规则如下 纵向一个挨着一个排列 两个盒子的纵向间距由margin属性决定,相邻盒子的margin会有重叠现象,此时间距值取较大的margin BFC可以看作一个独立的布局环境,容器内的元素和容器外的元素布局互不影响 BFC可以包含浮动元素 清除浮动效果;BFC会排
阅读全文
摘要：文档流中父元素高度是由子元素撑起的,当我们为子元素添加浮动后,子元素脱离文档流,无法撑起父元素,导致父元素高度塌陷 <body> <div class="box1"> <div class="box2"></div> </div> </body> <style> .box1 { width: 200
阅读全文
摘要：采用flex布局的元素,称为flex容器,其内部的子元素为flex项目 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。 主轴的开 始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross sta
阅读全文
摘要：px是固定像素,一旦设置就无法因适应页面大小改变 em,rem都是相对长度单位,适用于响应式布局 em是相对于父元素设置字体大小,一般都是以body中的font-size为基准 (浏览器中默认字体尺寸为16px，换句话说1em=16px;那么0.75em=12px,0.625em=10px。为了简化
阅读全文
摘要：选择器的特殊性值分为四个等级 行内样式:X 0 0 0 id选择器:0 X 0 0 类选择器/伪类选择器/属性选择器:0 0 X 0 元素选择器/伪元素选择器:0 0 0 X 在判断优先级时先看是否有权重(!important),如果有那么它的优先级最高;前提是它之后不再出现相同权重的声明。如果权重
阅读全文
摘要：简单选择器(根据标签名称,id,类选取元素) * 通用选择器,页面类所有元素 .class 类选择器,具有类名class的元素 #id id选择器,id名为id的元素 E 标签选择器,标签名为E的元素 组合器选择器(根据特定关系选取元素) 后代选择器(空格) 子选择器(>) 相邻兄弟选择器(+) 通
阅读全文
摘要：通过vertical-align: middle 注意:vertical-align: middle生效的元素必须是 display: inline-block;且必须有一个兄弟元素做参照(其原理是寻找兄弟元素中最高的元素做参照让自身的中点高度和参照的中点高度对齐) <style> .box1 {
阅读全文
摘要：伪元素:用于创建一些不存在文档树的元素,并为其添加样式;比如我们可以通过:before在一个元素前增加一些文本并为其添加样式;用户可以看到这些样式,但其并不存在于文档树中 伪类:用于当某个元素处于某个状态时为其添加样式,这个状态是根据用户状态变化的;比如当鼠标悬停时我们通过:hover来描述这个元素
阅读全文
摘要：html每个标签都有自己的含义,语义化是指使用语义恰当的标签,是页面结构更清晰,页面元素有含义,让人容易理解 常见的有: header:定义页面的展示区域,通常包含logo,导航,搜索框等 nav:定义页面的导航链接区域 main:定义页面的主要内容区域,一个页面用一次 acticle:定义页面的独
阅读全文
摘要：块元素:排斥与其他元素同处一行;一般都是其它块元素或行内元素的容器 行内元素(内联元素):可以和其它行内元素同处一行;一般那只能容纳文本和其他行内元素;其高度由容纳的文本的大小决定,宽度由内容的长短决定 在加入了css控制后,这两个元素也可互相转换 区别: 块元素占据一整行;多个行内元素可以共处一行
阅读全文
摘要：盒模型本质就是一个盒子,封装了周围的html元素,包括边距,边框和实际内容;允许我们在其他元素和周围元素边框之间放置元素 盒模型有标准盒模型和怪异盒模型(IE盒模型)在编辑html时最顶上会有DOCTYPE标签,即使用标准盒模型,如果没有该标签则由浏览器自己决定 在css3中增加了属性box-siz
阅读全文
