Html 百草园
琐碎的知识
html 有关
<!--comment-->
H5
新增语义化标签
1.布局标签
1.header nav articale section aside footer
2.状态标签
1.<meter min="0" max="100" low="20" high="80" optimum="90" value="70"></meter>
1.optimum 最优数值 value 当前数值
2.<progress max="100" value="80"></progress>
3.列表标签
1.<datalist><option value="jack">jack</option><option value="lucy">lucy</option></datalist>
2.<details><summary>how study?</summary> 加杂多个p标签即可 </details>
4.文本标签
1.<ruby><span>好</span><rt>hao</rt></ruby>
1.注音用
2.<mark>needflag</mark>
5.表单新增
1.placeholder[伪元素 可设置样式 input::placeholder{}]
2.required autofocus pattern[需要有required 否则不生效]
3.autocomplete [需要打开地址]
5.type类型新增
1.email url number search[有关闭按钮] range color data month week time datatime-local
1.<input type="number" name="age" step="2" max="40" min="20">
2.<input type="range" name="age" max="40" min="20" value="30">
6.媒体标签
1.vedio audio
1.<video src="" controls muted autoplay loop poster="pic" preload="auto/metadata/none"></video>
2.<audio src="" controls muted autoplay loop preload="auto/metadata/none"></audio>
7.全局属性
1.contenteditable draggable
1.<div draggable="true" ondragend="ondrag"></div>
8.兼容Ie8
1.<!--[if lt ie 9]><script src="html5shiv.js"></script><![endif]-->
<!DOCTYPE html>
css 有关
关于选择器
关于选择器类别
l. 通用 *{}
2. div{}
3. .css{}
4. #id{}
5.a:link{} a:visited{} a:hover{} a:active{}
6.input:focus
选择器的各种配合
1.div p
2.div > p
3.div + p
4.div ~ p
5.div>p:first-child{} | div>p:last-child | div>P:nth-child(1)
关于5的解释代码如下
点击查看代码
<div>
<span></span>
<p></p>
<p></p>
<p></p>
</div>
这个第一个元素有点儿特殊，如果仅仅是div的子元素 假如第一个元素为span 后面四个为p 那么是选不中的 因为 第一个p不是 first
p:first-child{} 只要是父亲的第一个儿子 并且自己的p元素 就选中
关于nth-child(x) x 为表达式的情况下 必须为 an + number a 可以为 负数,正数,0,0n + 3 就相当于 nth-child(3)
0.an + number a 取值(负数,正数,0),number 取值(0,正数)
1.若括号中填入数字 1 就选中第一个元素
2.如果nth-child(even) 偶数元素 选中 nth-child(odd) 奇数元素选中
3.nth-child(5) 选中第5个 那么如何选中前5个呢 nth-child(-n+5) -n + 5 相当于 -1*n + 5 n依次为 0 1 2 3 4 那么依次选中的元素
为 5 4 3 2 1
4.同样 2n + 1 n 依次为 0 1 2 3 4 选中依次为 1 3 5 等同与 odd ,2n 等同于 even 偶数 , 也可以认为是 2n + 0
6.div>p:first-of-type 第一个 为 p 的儿子 可以不是第一个子元素 last-of-type nth-of-type(x) x的取值同 nth-child()
nth-last-of-type() 凡是 child 的 都是子女(整体排序) 凡是 type的是同类的兄弟姐妹(排序)
example 下面的p可以被选中
点击查看代码
<div id ="root">
<span>0</span>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<!--比如上面的 div>p:nth-child(2) 等同与 div>p:nth-of-type(1)-->
7.div>p:only-child{} 独生子(所有子女排序) only-of-type 男 女 分别排序 独生子 或者 独生女
8.div：empty{} 如果没有子女 自己就被选中 连空格都不能有 :root 根元素
9.div>p:not(.success) div下的所有p元素除了 类型为 .success 的 p 被选中 div.p:not([title^="abc"])
10. input:checked input:disabled input:enabled input:active div:target(如果从 a跳转到 id为a的href的时候 生效)
11.伪元素和伪类的区别:伪类是一种元素的特殊状态 伪元素是元素的一种特殊位置
1.::first-letter ::first-line selection placeholder before after
文本类的属性
字体相关
13.关于字体
1.字体的属性是可以继承的
2font-size font-famile:a,b,serif,sans-serif font-style{italic[字体有斜 找字体中的斜,没有强制斜]/normal/oblique[强制倾斜]}
3.font-weight{lighter/normal/bold/ 100-300 400-500 600-> 三个区间分别相当于前三个属性}
4.font 符合写法 font-size font-family 必须有 并且放最后 其他的放前面随便 font:italic bold 100px yahei,sans-serif
5.@font-face{font-family:"myfont";src:""}
1.https://www.iconfont.cn/webfont
文本相关
14.常见文本属性
1.letter-spaceing word-spacing 正数值间距增大 负数值 让间距缩小
2.text-decoration:none/underline/line-through/overline wavy/dottd red
3.text-indent:2em/10px
4.text-align:left/center/right
5.line-height:[font-size+上距+下距离等于 line-height 如果line-height和font-size相等 容易出现上下两行字打架]
1.如果不设置 line-height 默认为 mormal 系统会自己计算 永远不会打架
2.line-height 一般是 font-size 的1.5倍 比较合理
3.line-height:40px/1.5/150%/mormal 行高的 1.5倍数是以 font-size 为基准的 font-size:20px line-height:1.5 等价 30px
4.最小值 为 0px 不能为负数 过小后 多行会重叠
5.line-height和height高度有什么关系呢
1.设置了height就是height的高度
2.没有设置高度 height 就是 line-height * 行数
3.如果没有设置height line-height 设置为0 就看不到背景色 因为行数 * 0 等于0 高度就是0 当然就没有背景色
4.所以单行文字上下居中 height 和 line-height 设置相等 在背景上看 文字就处于居中状态
5.如何通过行高让单行文字居下呢 line-height = height * 2 -font-size
6.line-height设置为0 单行文字顶部会被吃掉一部分 因为就算没有行高 文字也要尽量上下 平均显示 从父容器左上角走起 于是一部分出去了
6.vertical-align{top/baseline/bottom/middle} 控制元素自己在其那一行上的对齐情况
1.baseline x 的下边缘 middle 使元素的中部 与 父元素 baseline + x-height/2 对齐
2.默认是baseline对齐 一行的高度是由 个子 最高的那一个元素决定的 谁最高 谁不动 别的元素都需要以它为基准 向右看齐
1.这就意味着 vertial-align 属性加到谁身上并不重要 如果加到个子低的上面 就去找别人看齐 如果加到高的上面 别人看齐自己
3.控制行元素 和 表格 对块元素无效
4.对于子元素 要想绝对垂直居中 父元素的 font-size 为 0 只有这样子元素才不受父元素内baseline的影响 vertical-align:middle
5.可以绝对居中 如果于多个元素 可以在多个元素上 同时设置 vertical-align:middle 同时给需要的元素增加 font-size 属性
6.vertical-align{10%} 这里的属性百分比 是相对于 line-height
7.关于vertical-align的一些想法
1.在一行中inline和inline-block类型的元素 会以 inline-box 形成一个 line boxes,它的高度是由 各个 inline-box元素
2.最高那个决定的,高度确定后,这个 inline-box元素就是大哥 不用动了 其他的元素都以它为参照 默认是以 baseline 对齐 在
3.每一个 line-boxes中 都由一个看不见的幽灵空白节点 它有 baseline等各种属性 如果最高的那个元素 设置 vertical-align
4.属性后 其他的个子低的元素会 主动拿对应的属性 去对齐 像 图片下面的空白解决方法 设置父元素的 font-size 为 0 后 默认
5.图片的下margin就是 baseline 对齐 幽灵 的baseline 于是如果 font-size 不为0 会导致x的下面往下压 于是就会出现空白
6.只要一行中 所有的inline-box 的verticl-align:middle 而且父的font-size为0 就不会有元素x往下压的显现 于是就可以
7.居中 就算父font-size为0 只要 line-box 中有任意一个 inlie-box 设置为默认的 baseline 其他的就不会上下居中 就会
8.往下压 于是其他等待上下居中的元素 就有一种偏下的 感觉
7.文本相关的属性都继承 除了verfical-align 包括 color 之所以 像 <a>aaa</a> 标签的颜色总是默认蓝色 好像不继承父元素的字体颜色
1.是因为 继承<默认<样式<行内 继承自父元素的颜色 被 默认的 蓝色 覆盖了 所以细看 color亮色 但是划了一个删除线
8.text-shadow:x y blur color
9.文本是否换行处理
1.white-space:normal/pre/pre-wrap/pre-line/nowrap
0.normal 换行被解析为空格
1.pre 原样显示
2.pre-wrap 原样输出 如果超出盒子 折行
3.pre-line 同pre-wrap 但除了回车其他空白一概忽略
4.nowrap 永不换行
2.text-overflow:clip/ellipsis/
1.显示三个点
1.父 overflow:hidden
2.white-space:nowrap
3.text-overflow:ellipsis
列表相关
15.list-style-type{decimal} list-style-position{inside/outside} list-style-image{[自定义列表图标]}
1.list-style:decimal inside url()
边框相关(含表格)
1.border-width{} border-color{} border-style{} border:1px solid red
表格独有
1.table-layout{auto/fixed} auto 会根据表格内容多少 自动拓展宽度
2.borde-spaceing{0px}[相当于表格的属性 cellspacing]
3.border-collapse{collapse/separate}[相当于表格属性 border-collapse]
4.empty-cells{hide/show} 生效前提 不要让边框塌陷
5.caption-side{top/bottom} 标题位置
位置相关
背景相关
1.background-color[默认 transparent] background-image{url} background-repeat{repeat-x/repeat-y/repeat[默认]/no-repeat}
2.background-position{left top}
1.如果写一个 center 水平垂直都是中心 如果写一个 left 垂直默认为 center 如果写一个top 水平默认是center
2.数值 默认是以 本元素左上角为原点 以图片的左上角为 起点 可以为负数
3.background:color url repeat position/size origin clip
4.background-image 配合 background-origin 详细
1.覆盖 border-box 但是如果repeat:no-repeat 图片很大的话 发现是从 content-box 左上角起点[右和下边框也与图片 图片小看不出来]
2.要想观察 border:100px dotted rgba() 从哪里做起点 是 background-origin:border-box/padding-box[默认值]/content-box
3.不管 background-origin 设置什么数值 只要 repeat 打开 都会入侵到 border-box
5.background-clip:border-box[默认]/padding-box/content-box/text 无论颜色和图片都会受到这个属性的影响
1.background-clip:text 属性 需要配合 文字颜色为 color:transparent 会出现字中画效果
6.background-size
1.数值/百分比/contain/cover[等比例缩放 图片宽高谁大把谁全装下]
7.background:a,b,c 复合属性
8.linear-gradient 线性渐变
1.linear-gradient(red,green,blue)
2.linear-gradient(to right top/,red,green,blue)
3.linear-gradient(20deg,red,green,blue)
4.linear-gradient(red 50px,green 150px,blue 200px)
5.linear-gradient(20deg,red 50px,green 150px,blue 200px)
9.radial-gradient 径向渐变
1.radial-gradient(red,green,blue)
2.radial-gradient(at right top,red,green,blue)
1.带at是原点 不带at是半径
3.radial-gradient(at 100px 50px,red,green,blue)
1.radial-gradient(100px 50px,red,green,blue)
4.radial-gradient(circle,red,green,blue)
5.radial-gradient(red 50px,green 100px,blue 150px)
6.radial-gradient(100px 50px at 30px 50px,red 50px,green 100px,blue 150px)
1.半径 100 50 在原点 30 50 画
10.repeating-linear-gradient 重复渐变
1.重复没有渐变的区域 已经渐变的区域忽略 比如 linear-gradient(red 50px,green 150px,blue 200px) 50px的位置红 0-50 就没有变色
2.这个区域就会重复 150px 为绿 50到100变色了 所以不再重复 150到200同样如此 200到剩下的部分会重复
3.如果没有repeating 0-50为红色 200到最边为蓝色 变化的部分为50到200 [0-50 和 200~] 会重复
4.渐变的应用
1.background-image: repeating-linear-gradient(transparent 0,transparent 29px,gray 30px); 画数学线格子
盒子模型相关
1.content(默认的width height) padding border margin
2.背景颜色覆盖到的: content + padding + border
3.默认宽度充满父元素 除非受到 width min-width max-width 限制 [另外对于 max-hight min-height 和这里无关]
4.如果不设置width width = 父content - margin - border -padding
5.关于padding
1.不能为负数 行内元素 左右padding可以 上下不完美 块和行内块上下左右都正常
6.关于margin
1.margin-top margin-left 自己要动 margin-bottom margin-right 别人动
2.block元素和inline-block margin 四边都可以设置 inline元素只可以设置左右 上下无效[和padding很类似 至少人家是不完美]
3.margin[0,auto 左右有多远跑多远 可以使其在父元素居中,上下不行]
4.margin 可以设置负数值
5.margin 塌陷问题
1.第一个子元素margin-top 或者最后一个元素 margin-bottom 会被父亲抢走
2.解决方法
1.父元素设置边框 border:1px solid red;
2.父元素 overflow:hidden;[overflow{visiable/hidden/scroll/auto}]
6.margin合并问题
1.第一个子元素margin-bottom和第二个元素margin-top 会选择最大的那一个margin(节省空间) [左右不存在这种情景]
2.解决方法
1.float 可以解决
2.不用解决 自己注意 解决有代价
7.box-sizing:cotent-box/border-box
元素的隐藏
1.display{none} visibility {hidden/show}
2.去比在于 display 元素不占位了不在文档流了 visibility{hidden} 元素看不见 但是仍在文档流
浮动篇
1.元素浮动后的特点
1.脱离文档流 无论什么类型 浮动后 宽高被撑开[尽可能小] 可以设置宽高
2.位置高一层 与其他元素共行 没有留白问题
3.margin 塌陷和合并都没有了 可以完美设置四个方向的 margin padding
2.浮动后的影响
1.对兄弟的影响 浮动后面的元素 会跑到它的下面[文字不会到下面 被挤出去 历史文字环绕设计的] 占据它原来的位置 对前面兄弟没有影响
2.对父的影响 父元素高度塌陷 但父元素的宽度依然束缚浮动元素 当不够时候 换到下一行
3.解决浮动影响的方法
1.父设置高度 [无法消除对后面不浮动兄弟影响]
2.父设置浮动 带来对大伯的影响 [无法消除对后面不浮动兄弟影响]
3.给父加 overflow:hidden [无法消除对后面不浮动兄弟影响]
4.父::after{content:"";display:block;clear:both} [无法消除对后面不浮动兄弟影响]
5.也就是说 父元素里面的子元素 要浮动尽可能一起浮动 因为都无法消除对后不浮动兄弟的影响
定位篇
1.相对定位
1.position:relative; 配合 left/right/top/bottom 参考点是自己原来的位置
2.不脱离文档流 在地上 但是高级别[属于地上个子比较高的] 高得和天上的浮动平级
1.如果第一个元素浮动 正常第二个进入第一个的位置 并被第一个元素压着 文字被挤下来 但是 当第二个设置相对定位后 top之类的不设置
2.第二个元素会压在浮动元素上面 如果第一个元素相对定位 第二个元素浮动 当 top:50px 后 第一个会压在第二个上面 说明相对定位
3.后 之所以压住其他的没有定位的元素 和 在文档中元素的 骨架先后位置无关 定位就是能压
4.也可以理解为并不是 定位的层级高 可能是因为 渲染的时候 其他的先行 定位最后计算并渲染 后发制人
3.同设置定位的元素 骨架后面的会压在前面的上面 left right 不能同时设置 top bottom 不能同时设置
4.相对定位的元素 浮动 margin 设置都可以正常设置[先清算 浮动 margin 位置后 再计算相对的位置] 一般不同时用 只和绝对定位配合
绝对定位
1.position:absolute 参考包含块
1.对于文档流元素 包含块 就是父元素
2.对于脱离文档流的元素 包含块是第一个拥有定位的父元素 如果祖先都不是定位元素 那包含块就是整个页面
3.脱离文档流 对父兄都有影响 对下面兄弟的影响 比浮动更严重 下面的兄弟会连文字进入 浮动元素原有的位置[浮动的时候 位占文字出]
4.如果有 margin 和 绝对定位的 top left 的这些属性 成匹配出现,如果定位 top:50 margin-bottom 无效
5.绝对定位和浮动不能同时出现 否则浮动失效 浮动 top botome 不能同时出现 left right 不能同时出现,无论什么元素 绝对就撑开宽高
固定定位
1.position:fixed 参考点 视口 脱离文档流 影响父兄 left right 选其一 top bottom 选其一 固定定位和浮动不能同时 浮动会失效
2.如果有 margin 和 固定定位的 top left right bottom 的这些属性 成匹配出现
粘性定位
1.position:sticky 四个数值都可用 最常用 top
2.参考点:离它最近的拥有 "滚动机制" 的祖先元素 就算这个祖先不是最近的真实可滚动元素 比如:强制在父亲上加 overflow:scroll
3.不脱离文档流 可用和浮动一起 不推荐 能和margin 配合使用 它与相对定位的特点基本一致 不同的是 可用在元素到达 设置的数值
4.时候 把元素变为 固定定位的特征
定位层级
1.定位层级比普通元素高 如果发生重叠 后压前 可用通过 z-index调整 只有定位元素有 z-index 如果大的z-index被小的压住
2.可用考虑受到父元素的连累了 设置父的 z-index
元素3d变换
1.transform [对行内元素无效]
1.translateX(100px) translateY translate(50%,50%) 和 相对定位很像 也不脱离文档流 但是效率更好 对行内元素无效
1.translateX Y 可以为百分比 但是 translateZ 不能设置百分比
2.scaleX(1.5) x 可以为负数 scaleY scale()
3.rotate rotateX(30deg) rotateY 旋转有3d效果 绕着 rotateZ 轴旋转 2D 效果 rotate(x) 写一个数值 默认是绕Z轴 2D 旋转
1.默认是围绕中心点[对角线交叉点儿]
4.变换原点 transform-origin
0.对scale 和 rotate 都有影响
1.transform-origin: 10px 10px/left bottom 后 transform:rotate(30deg) 设定旋转点儿后再旋转 默认是 center
5.skew skewX(30deg) skewY 没有Z
6.3d场景
1.首先在父元素开启 3d 空间 并设置透视距离
1.transform-style:flat/preserve-3d 开启3d
2.perspective:500px 透视距离
3.perspective-origin 透视点的位置 [我蹲在哪个地方看屏幕]
2.transition:duration property delay function
1.transition-property:width,height/all
2.transition-duration:1s;
3.transition-delay
4.transition-timing-function
1.http://www.cubic-bezier.com 生成贝塞尔函数
3.animation
1.@keyframes donghua{from{},to{}}/@keyframes donghua{0%{},25%{},100%{}}
2.animation-name animation-duration animation-delay animation-timing-function:steps(20) 分20步完成
3.animation-iteration-count:1/infinite
4.animation-direction:normal/reverse/alternate/alternate-reverse
4.动画和过渡的区别
1.动画可以直接播放 过渡必须有触发条件 2.动画可以控制关键帧 25% 之类的 过渡不行
弹性盒子flex
1.display:flex/inline-flex[flex 父容器 设置后 独占 inline-flex 父容器设置后 在一排 有留白 需要 爷元素 font-size:0]
1.父元素一般很少设置 inine-flex 因为有留白需要处理 还不如设置爷元素 display:felx 一样效果
2.设置后 子元素就变成了 伸缩项目 但孙元素不受影响 仍然保持着原有的倔强
3.无论是 inline inline-block block 元素 父flex后 子元素都全部 变成 块状化特征 display:block
2.flex-direction:row/row-reverse/column/column-reverse 主轴 决定 item 序 3 2 1 和row-reverse 和 flex-end 有区别 1 2 3
3.flex-wrap:nowrap/wrap/wrap-reverse 换行方式
1.flex-flow:flex-direction flex-wrap 复合属性
4.justify-content:flex-start/flex-end/center/space-around/space-between/space-evenly 主轴 对齐方式
1.flex-end 靠尾部排列 1 2 3 center 中间 space-around 元素两边空相等 space-between 元素靠最两边 空分 evenly 最平均分配
5.侧轴 对齐方式 align-items
1.一行方式
align-items:stretch[默认 元素没有设置高度可以拉拽 设置高度无用]/flex-start/flex-end/center/baseline
2.多行方式
1.flex-start 从原点侧轴方向开始 多行尽量紧挨着 顺序不变 1 2 3 [挨着的位置 侧轴开始]
2.flex-end 目的到侧轴结束方向结束 多行尽量紧挨着 顺序不变 1 2 3 最后一个 还是最后一个 [挨着的位置 侧轴结束]
3.space-around 和 主轴的感觉差不多 [项目直接的距离相等 而且是边缘距离的 2 倍]
4.stretch 同 主轴
6.flex-basis:auto/100px 设置主轴方向的 基准长度 会让宽或高失效 flex-direction:row 宽失效 column 高失效
1.根据这个设置 计算富裕空间 很少用
7.弹性盒子的的 伸和缩 flex-grow:0 默认 0 有空间不瓜分 flex-shrink:1 [需要压缩时候的计算方式]
1.伸 子设置 flex-grow:1 每个子盒子会根据 这个数值按 比例去分配 剩余空间
2.缩 子设置 flex-grow:1 每个子盒子会根据 这个数值按 比例去缩小 前提是 父 flex-wrap:nowrap
3.如果设置 flex-wrap:wrap 子 flex-grow:2 当空间多了 均分 当空间刚好够 不分 当空间小 掉到下一行后 没掉下去的 均分
1.掉下去元素的空间 掉下去元素在第二行 占据全部二行空间 猴子称大王 这时候就会受到 align-items 的影响了
4.flex-shrink:1 收缩比例的计算方式 分母: 200*1+300*1+200*1 = 700 分子: (200*1) 分子/分母 收缩比就出来了
1.也就是说 收缩的时候 不但和flex-shrink 有关 还和盒子本身的宽度有关
2.缩小的极限是 item 里面的内容必须能够呈现 压缩到一定程度就不动了
5.子综合 flex:flex-grow flex-shrink flex-basis
1.flex:1 1 auto 可以拉伸 可以压缩 不设置基准长度 可简写为 flex:auto
2.flex:1 1 0 可以简写为 flex:1 主轴宽或高 为 0 所有的宽度都是 伸缩来的
3.flex 0 0 auto 简写为 flex:none
4.flex 0 1 auto 可简写为 flex:0 auto 为flex的默认数值
8. item 项目的排序
1.order:0[默认] 视觉顺序
9.item 在侧轴 方向的 单独对齐方式 [主轴都挨着呢 所以只对侧轴有意义]
1.algin-self:flex-start/flex-end/center/stretch
媒体查询
1.@media print{h1{background:transparent}} // 打印机打印的预览时候 就没有颜色了 虽然网页中是有颜色的
2.@media screen{} 在屏幕上显示的样式
3.@media (width:700px){h1{}} 等于700触发 (max-width:700px) 小于等于700px 发生 (min-width:700px) 大于等于 700px 时发生
4.height min-height max-height 上面是视口 浏览器的 宽度高度
5.device-width:设备宽度 屏幕宽度[物理的] min-devicpe-width max-device-width
6.orientation:portrait [纵屏 高度>宽度]/landscape[横屏 高度<宽度]
7.@media screen and (min-width:700px) and (max-width:800px) [与关系 ]
8.@media (min-width:700px),(max-width:800px) [或关系 or/,]
9.@media not screen{} [not 运算符 不是屏幕] @media only screen{} [only是为了处理兼容性问题 因为Ie认识 screen 不认识 only]
10.动态引入css时候的媒体查询 <link rel="stylesheet" media="screen and(min-width:700px)" href="a.css">
布局技巧
1.关于单居中
1.块元素
1.margin:x,auto 其中x 为 父(content - 子border-box)/2
2.行内元素
1.text-align:center;line-height = height; [height 可以不设置也不影响 只设置适当的 line-height 只要 font-size为0]
2.文字和图片都是div的子元素 要求 文字和图片一起绝对居中 怎么办 [代码如下0001]
点击查看代码[代码如下0001]
<style>
#test{
width: 700px;
height: 300px;
background-color: rgba(0,0,0,.5);
text-align: center;
/* 先让子元素大致居中 */
line-height: 300px;
/* 避免子元素在 vertical-align:middle的时候，受到字体的影响 */
font-size: 0px;
}
#test img{
width: 100px;
/* 让子元素居中，默认受父元素该行中 baseline 的影响*/
vertical-align: middle;
}
#test span{
/* 给需要的子元素重新加 字体大小 */
font-size: 200px;
/* 让子元素居中，默认受父元素该行中 baseline 的影响*/
vertical-align: middle;
background-color: purple;
}
</style>
<div id="test">
<span>xxxxx</span>
<img src="../image/pic.jpg" alt="">
</div>
2.多列布局[css3 本身属性]
1.column-count 指定列数
2.column-width 指定列宽
3.columns:3 150px 复合属性
4.column-gap 列间隙
5.column-rule:1px solid red 列与列中间的线 可分为 column-rule-width/style/color
6.column-span:none/all 指定是否跨列 用于设定标题
7.可以用于排多列 文字/图片[图片不论宽高如何 设置 width:100% 会参照当前列的宽度 图片也会实现流水布局]
3.弹性布局
1.单元素布局
1.方案一
1.父 display:flex; justify-content:center; align-items:center; 子不用设置
2.方案二
1.父 display:flex; 子[已设置 宽高] margin:auto
4.绝对和固定定位特殊用法
1.让没有设置宽高的子元素充满包含块
1.left right top bottom 都为0
3.如果要充满并且在周围都留 10px 可用 margin:10px;
2.让设置了宽高的子元素在包含块中居中
方案1[设置了宽高]
1.left right top bottom 都为0, margin:auto
2.元素必须设置宽高,如果不设置 优先满足 border-box,就充满了 margin:auto 被忽略 除非margin:10px 可用被解析
方案2[设置了宽高]
1.left:50%;top:50%; transform:translateX(-50%) translateY(-50%);
2.translateX的百分比相对于自身(border-box) 当然也可以用 margin 在 top 和 left 上 负自身的一半
5.父元素高度不固定怎么居中
1.父 display:flex;height:calc(100vh - 70px);子:margin:auto
6.如何 让 文字 不足一行时候 居中 超过一行 居左
1.方法 父 子 巧用 text-align
1.父 text-align:center 或者 flex 父设置宽度
2.子不设置 宽度 由文字决定 子 text-align:left
3.这样 子居中 宽度文字宽度 不足一行 对于父 来看 居中 对于子来看 居左
4.多行后 无所谓 中不中了 都盛不下了
2.display:talbe margin:0 auto
常见问题以及解决办法
图片下缝隙
1.父 font-size:0[幽灵不会再往下压了]
2.display:block[vertical-align默认的baseline 只对 inline打头的元素有效]
3.vertical-align设置不要为默认的 baseline 就不会出现压的空虚 比如 top bottom middle
元素留白
1.不换行
2.父元素 font-size 0
杂项相关
URL 路径聚会
1.href
a link
2.src
javascript image audio video
3.action
form
4.url
ajax
BFC详解
1.官方解释 Block Formatting Context 块级格式化上下文 类似元素的一种特异功能
2.开启了BFC就相当于打开了特异功能 有哪些功能呢
1.子元素不会再产生 margin 塌陷
2.自己不会被其他浮动元素覆盖
3.就算其子元素浮动 自身高度不会塌陷
3.如何开启元素的BFC功能
1.根元素 [天生丽质]
2.浮动元素
3.绝对 固定 元素
4.inline-block
5.表单元素 table/thead/tbody/th/td/tr/caption [元素只要加上 display:table]
6.overflow 不为 visible
7.伸缩项目 [是项目 item 不是容器 也就是说父元素需要 display:flex]
8.多列容器[父] column-count:1
9.clumn-span:all 多列 子项目[多列 子标题]
10.display:flow-root
Css3杂项
1.resize:horizontal/vertical/both [需配合overflow属性 可拖拉元素大小 没有使用意义]
2.box-shadow:x y blur outset[外阴影大小一般意义不大] color inset[内阴影]
3.opacity
4.outline 1px solid red
各种百分比关系
1.父 paddingbox
1.绝对定位百分比
2.父 contentbox
1.相对定位
2.width/height
3.margin/padding
3.自身borderbox
1.translateX/Y
2.border-radius
4.top left 设置为0 和 不写 top left 的默认行为是不同的 默认保持原来的位置
一些特殊的默认样式
1.input button 默认的 font-size 不为0 所以当其父元素设置 font-size:0 后,他们作为子元素 还可以输入[继承<默认]
2.a 的 color 有默认颜色 和 text-decoration:underline
一些特殊的继承样式
鼠标相关
1.cursor{drag/poinder/url()}
长度单位(px/em/rem/ex)
1.px em 相对于本元素的 font-size,如果没有设置font-size 就找父元素
1.如果本元素的 font-size:2em 向上找 先找到 父元素的 font-size * 2 算出自己的 font-size 其他再以本元素的 font-size做基准
2.rem 相对于 html根元素的 font-size 为基准
3.% 相对于 父元素对应属性的 百分比(定位 traslate 之类的除外)
4.ex 是 x-height 很少用的一个高度 相对单位
5.vw/vh 视口的宽度 50vw相当于视口的50%
6.vmax/vmin 取视口宽和高最大的10% 10vmax
元素的种类 block/inline/inline-block
0.display{inline/inline-block/block/none}
1.block 块元素
1.宽度默认继承父亲的宽 独占一行 高度由内容撑开 可以通过css设置宽高
2.元素代表
1.主体结构 html body
2.排版 h1-h6 hr p pre div
3.列表 ul ol li dl dt dd
4.表格 table thead tbody tfoot tr caption
5.表单 form option
2.inline 行内
1.无法通过css设置宽高 集在一行 宽高均由内容撑开
2.元素代表
1.文本 br em strong sup sub del a label
3.inline-block 行内块
1.css可以设置宽高 集在一行 宽高由内容撑开
2.元素代表
1.img th td
2.表单 input textarea select button
3.框架 iframe
关于颜色
12关于颜色 red rgb rgba hex hexa:00bb000f(十六进制) hsl hsla(0,50%,50%，0.6) h 色相 s饱和度(在原有颜色中添加点儿灰) l 亮度
