首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

自学DIV+CSS总结

1、CSS有四种控制方式:行内样式、内嵌式、链接式、导入式(优先级从高到低) 2、CSS选择器有:标记选择器(p、ul、a、li、img、span、input、select、等)、类别选择器(class...值)、ID选择器(id值);区别在于标记选择器使用所有,类别选择器适用不同类中相同样式,ID选择器适用唯一不变样式(比如:div class=“one two”就是既使用.one定义也使用.two...8、定位 divspan区别在于div是块级标记可以包含span但是span不可以包含div,span是行内元素 float定位:可以向左靠紧float:left、float:right向右靠紧...div设置成relative z-index:空间定位,z-index值大在小上面 9、CSS控制盒子模型 所有的div都可以看成盒子,其中内容(content)、边框(border)、间隙(padding...,内容与边框距离)、间隔(margin块距离) 注意:设置widthheight大小都指的是width+padding值,IE不支持border-style,而且设置背景ie影响是内容间隙

2K60
您找到你想要的搜索结果了吗?
是的
没有找到

javascript基础修炼(11)——DOM-DIFF实现

再谈从Virtual-Dom生成真实DOM 在上一篇博文《javascript基础修炼(10)——VirtualDOM基本DFS》中第三节演示了关于如何利用Virtual-DOM树结构生成真实DOM...许多读者留言表示对如何从Virtual-Dom得到真实DOM节点仍然很困惑。 所以本节会先为Element类增加渲染方法,演示如何将Virtual-Dom转换为真正DOM节点并渲染在页面上。...来渲染),DOM-Diff所实现功能就是找出新旧两棵Virtual-DOM之间区别,并将这些变更渲染到真实DOM节点上去。...新旧节点tagNamekey相同 开始检查属性: 检查属性删除情况 检查属性修改情况 检查属性新增情况 将变更以属性变更类型标记加入patches补丁包中 完成比较后根据patches补丁包将...:我和我所有的子级节点都已经遍历完了,最后一个节点(或者下一个可使用节点)索引是XXX,这样遍历函数能够正确地标记追踪节点索引了,觉得这一部分不太好理解读者可以自己手画一下深度优先遍历过程就比较容易理解了

64420

vertical-align刨根问底

不需要知道元素大小,元素仍然处于标准文档流中,其它元素能响应其尺寸变化。...上图中,把行盒文本盒(更多信息见下文)顶边底边用绿色画出来,而baseline还用蓝线,还给文本元素设置了灰色背景高亮标记出来 行盒顶边与该行最高元素顶边对齐,并且底边与该行最低元素底边对齐...-块元素中,因为内容已经移到baseline上了 内联级元素之间间隙破坏布局 这主要是内联级元素自身问题,但因为它们是vertical-align依赖项之一,所以最好了解清楚 在前一个例子中也能看到列表项之间间隙...,间隙来自出现在标记代码(HTML/XML等)里内联元素之间空白字符。...内联元素之间所有空白字符都被合并成一个空格,就是这个空格碍事,例如想让两个内联元素仅挨在一起并都设置width: 50%的话,就没有足够空间容纳两个50%元素一个空格。

1.2K50

【CSS】课程网站 网格商品展示 模块制作 ② ( 网格商品展示盒子模型测量及样式 | 处理列表间隙导致意外换行问题 | 代码示例 )

; 测量 单个盒子宽高为 228 x 270 ; 水平方向上 , 模块之间间隔 15 像素 , 垂直方向上 , 模块之间间隔 也是 15 像素 ; 2、处理列表间隙导致意外换行问题...一排有 5 个 228x270 盒子 , 其中间隙 15 像素 , 版心宽度为 1200 像素 ; 228 * 5 + 15 * 4 = 1200 像素 , 但是最后一个盒子右侧添加 15 像素右边距地话...样式如下 : /* 网格商品展示 */ .box-bd { /* 处理列表间隙导致意外换行问题 一排有 5 个 228x270 盒子 , 其中间隙 15 像素 228 * 5 +...像素 正好放 5 盒子 + 5 间隙*/ width: 1215px; } /* 网格中 ul 列表中每个列表项样式 */ .box-bd li { /* 设置左浮动 让列表项在一行中从左到右排列..., 这里需要将盒子宽度从 1200 像素修改为 1215 像素 正好放 5 盒子 + 5 间隙*/ width: 1215px; } /* 网格中 ul 列表中每个列表项样式

2.3K20

css学习--css基础

常用块状元素有: div,p,h1..h6,ol,ul,dl,table,address,blockquote,form 常用内联元素有: a,span,br,i,em,strong,label,q...div{ display:inline; } 内联元素特点: 其他元素都在一行上; 元素高度、宽度及顶部底部边距不可设置; 元素宽度就是它包含文字或图片宽度,不可改变 解决行内元素间隙bug...问题 行内元素之间会产生间隙bug问题场景: 1、当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。...div> 解决方法:  1、写在一行,之间不要有空格之类符号。...: div{padding:10px;} 如果上下填充为10px,左右填充为20px: div{padding:10px 20px;} 3.5盒模型边界 元素与其他元素之间距离可以使用边界margin

2.2K100

深入学习下 CSS 间距相关知识

但是,在处理具有大量细节子元素组件时,这可能会变得越来越复杂。 Margin- 外部间距 它用于在一个元素另一个元素之间添加间距。...请参阅下面的问题是如何解决: CSS: .element:not(:last-child) { margin-bottom: 1rem; } 使用 :not CSS 选择器,你可以轻松地删除最后一个子元素边距以避免不必要间距...editors=0100 网格系统中间距 - Flexbox 网格是间距最常用情况之一,考虑以下示例: 间距应该在列之间,考虑以下 HTML 标记: ...我在检查 Facebook 新设计 CSS 时,首先注意到了这一点。 我们将内联样式div设置为width :16px, 它唯一目的是在左边缘包装器之间添加一个空间。...:使用等于 2vmax 间隙,但不应超过 32px。

13.4K40

冷门布局方法 tabel-cell 可行性研究

可以实现大小不固定元素垂直居中。 margin 设置无效,响应 padding 设置。 对高度宽度高度敏感。 不要对 display:table-cell 使用百分比设置宽度高度。...> 以前进行类似的布局我都会使用 display:inline-block; 方式,需要在 ul 上设置 font-size: 0; 来清除每一个小块之间间隙,还需要为每一个项写一个百分比宽度。...使用 table-cell 后,不需要写百分比宽度,也不需要清除小块间间隙。而且添加额外项时,会自动平均分配宽度。 5....布局原理也可以用 BFC 来解释,左侧右侧都是 BFC 块,BFC 块是不会 float 块发生重叠。 6....小结:所有的 display:table-cell; 布局中,vertical-align 属性对于文字对齐都是很关键。 Q&A Q: 有兼容性坑么,生产环境使用的如何

36720

CSS第二天

> .mark { css } ⭕并集选择器 找到多类元素 选择器之间通过 ,分隔 div,p,span { css } 交集选择器 找同时满足多个选择器元素 选择器之间紧挨着 p.mark { css....one > .two 快速生成olli ul > li\ * 3 快速生成li里面带有a链接 ol > li * 3>a CSS篇: 生成宽 w200 生成高 h300 字体样式 font-style...,让元素符合布局要求 ①块级元素:display:block 独占一行(一行只能显示一个) 可以设置宽度高度 默认宽度是父元素宽度,默认高度是内容高度 注意:ph里不能放块元素 代表标签:div...、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer…… ②行内元素:display:inline 一行显示多个 默认宽度/高度是内容高度宽度 不能设置高度宽度...,你把代码排成一排,就没有间隙了 注意点: p标签不要嵌套div、p、h等块级元素 a标签可嵌套任意元素,但a标签不能嵌套a ---- CSS 三大特性: 1️⃣继承性: 子元素有默认继承父元素样式特点

1.2K10

5分钟快速回顾HTML CSS

即使通过css设置宽度width,也会占一行位置) div(无语义) 列表 ur/ol/li 段落 p 标题 h1-h6 自定义列表 dl/dt/dd 其它常见问题 块元素居中问题...不支持width, height, margin上下,padding上下] 常用内联元素 span(无语义) 超链接标签 a src可以为空,但一定要写 其它常见问题 子级内联元素之间间隙...margin: 0; padding: 0; } ul,ol{ /*去掉左边点或者数字*/ list-style:...相邻浮动块元素可以并在一行,超出父级元素会自动换行 元素设置浮动后,会自动转为"行内块元素"(元素之间也不会有间隙) 浮动元素后面没有浮动元素会占据浮动元素位置,没有浮动元素内文字会避开浮动元素...important 权重1000:内联样式 style 权重100:ID选择器 权重10:伪类, :hover 权重为1:div.p (五)容易忘属性 字体 color: red; 清除下划线

1.3K90

webapi(一)初识DOM&定时器

DOM树 含义: 将HTML文档以树状结构直观地表现出来 作用: 直观地体现了标签与标签之间关系 DOM对象 含义: 浏览器根据html标签生成JS对象 核心思想: 把网页内容当作对象来处理...document.write 是DOM提供一个对象 提供属性方法都是用来访问操作网页内容 网页所有内容都在document中 获取DOM对象 1....根据CSS选择器来获取DOM对象(⭐) 1.选择单个元素 document.querySelector('选择器') //选择器一定是用引号引起来 匹配是使用深度优先先序遍历,从文档标记第一个元素开始...返回值: 匹配第一个元素, 如果没有匹配到,则返回null 1 2 3...('类名') // 检测一个元素是否有某个类名 有就是true, 没有就是false 元素.classList.contains('类名') classList 是追加删除不影响以前类名 注意:add

50920

什么是前端架构?

---- 一、HTML设计 当我们开始网站构建时,面临第一个挑战就是标记规范化,如果初始内容标记不好,后期就要写很多不必要CSSJavaScript来弥补,造成后期时间困扰维护代码麻烦...如上所示,显而易见是普遍代码没有控制标记,这就造成了复杂渲染标记源码打乱在一起,这不仅意味着更新标记困难,而且给后端开发人员实现前后端合并造成了极大困扰。...ul > li > ul > li > a { color: blue; } 为了更好实现标记可控化,模块化标记是最好选择,它可以给你带来理想灵活性必要自动化 <nav class...开发人员几乎不需要标记添加额外类,或者去掉一个容器 div,或者调整代码顺序,因为所有的迭代测试工作都在原型阶段完成了。...如发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除

63110

HTML 快速入门

未能添加结束标记是标准初学者错误之一,可能会导致奇怪结果。 内容:这是元素内容,在本例中,它只是文本。 元素:开始标记、结束标记内容共同构成了元素。...: 它与元素名称(或上一个属性,如果元素已具有一个或多个属性)之间空格。...请注意,结束标记名称前面有一个斜杠字符 ,并且在空元素中,结束标记既不是必需,也不是允许。如果未提及属性,则在每种情况下都使用默认值; 注意! 元素标签不是一回事。...标记列表始终包含至少 2 个元素。最常见列表类型是有序列表无序列表: 无序列表(Unordered List)中项目的顺序并不重要,就像购物列表。用一个元素包围。...(表格数据),它能够使你简捷迅速地查找某个表示不同类型数据之间某种关系值 。

2.8K10
领券