摘要: position属性规定用于元素定位的方法类型 元素其实是使用top,bottom,right,left来定位的;除非首先设置了position,否则这些属性不起作用 static html默认情况下的定位方式static(静态),不受上述属性的影响,根据页面的正常流进行定位 relative 相对 阅读全文
posted @ 2022-09-22 15:33 天青色等烟雨灬 阅读(182) 评论(0) 推荐(0)
摘要: BFC块级格式化上下文 其容器内排列规则如下 纵向一个挨着一个排列 两个盒子的纵向间距由margin属性决定,相邻盒子的margin会有重叠现象,此时间距值取较大的margin BFC可以看作一个独立的布局环境,容器内的元素和容器外的元素布局互不影响 BFC可以包含浮动元素 清除浮动效果;BFC会排 阅读全文
posted @ 2022-09-22 15:01 天青色等烟雨灬 阅读(237) 评论(0) 推荐(0)
摘要: 文档流中父元素高度是由子元素撑起的,当我们为子元素添加浮动后,子元素脱离文档流,无法撑起父元素,导致父元素高度塌陷 <body> <div class="box1"> <div class="box2"></div> </div> </body> <style> .box1 { width: 200 阅读全文
posted @ 2022-09-22 10:25 天青色等烟雨灬 阅读(124) 评论(0) 推荐(0)
摘要: 采用flex布局的元素,称为flex容器,其内部的子元素为flex项目 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。 主轴的开 始位置(与边框的交叉点)叫做 main start,结束位置叫做 main end;交叉轴的开始位置叫做 cross sta 阅读全文
posted @ 2022-09-22 09:30 天青色等烟雨灬 阅读(176) 评论(0) 推荐(0)
摘要: px是固定像素,一旦设置就无法因适应页面大小改变 em,rem都是相对长度单位,适用于响应式布局 em是相对于父元素设置字体大小,一般都是以body中的font-size为基准 (浏览器中默认字体尺寸为16px,换句话说1em=16px;那么0.75em=12px,0.625em=10px。为了简化 阅读全文
posted @ 2022-09-22 08:20 天青色等烟雨灬 阅读(224) 评论(0) 推荐(0)
摘要: 选择器的特殊性值分为四个等级 行内样式:X 0 0 0 id选择器:0 X 0 0 类选择器/伪类选择器/属性选择器:0 0 X 0 元素选择器/伪元素选择器:0 0 0 X 在判断优先级时先看是否有权重(!important),如果有那么它的优先级最高;前提是它之后不再出现相同权重的声明。如果权重 阅读全文
posted @ 2022-09-22 08:09 天青色等烟雨灬 阅读(94) 评论(0) 推荐(0)
摘要: 简单选择器(根据标签名称,id,类选取元素) * 通用选择器,页面类所有元素 .class 类选择器,具有类名class的元素 #id id选择器,id名为id的元素 E 标签选择器,标签名为E的元素 组合器选择器(根据特定关系选取元素) 后代选择器(空格) 子选择器(>) 相邻兄弟选择器(+) 通 阅读全文
posted @ 2022-09-21 20:34 天青色等烟雨灬 阅读(382) 评论(0) 推荐(0)
摘要: 通过vertical-align: middle 注意:vertical-align: middle生效的元素必须是 display: inline-block;且必须有一个兄弟元素做参照(其原理是寻找兄弟元素中最高的元素做参照让自身的中点高度和参照的中点高度对齐) <style> .box1 { 阅读全文
posted @ 2022-09-21 20:04 天青色等烟雨灬 阅读(105) 评论(0) 推荐(0)
摘要: 伪元素:用于创建一些不存在文档树的元素,并为其添加样式;比如我们可以通过:before在一个元素前增加一些文本并为其添加样式;用户可以看到这些样式,但其并不存在于文档树中 伪类:用于当某个元素处于某个状态时为其添加样式,这个状态是根据用户状态变化的;比如当鼠标悬停时我们通过:hover来描述这个元素 阅读全文
posted @ 2022-09-21 16:19 天青色等烟雨灬 阅读(2202) 评论(0) 推荐(0)
摘要: html每个标签都有自己的含义,语义化是指使用语义恰当的标签,是页面结构更清晰,页面元素有含义,让人容易理解 常见的有: header:定义页面的展示区域,通常包含logo,导航,搜索框等 nav:定义页面的导航链接区域 main:定义页面的主要内容区域,一个页面用一次 acticle:定义页面的独 阅读全文
posted @ 2022-09-21 15:53 天青色等烟雨灬 阅读(1560) 评论(0) 推荐(0)