文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Html中div学习使用过程中踩过的坑（一）

在学习工作中，我通常使用偏后端的开发语言ABAP，SQL进行任务的完成，对SAP企业管理系统，SAP ABAP开发和数据库具有较深入的研究。...文章概要： 标签是Html5中运用到的最重要的一个标签之一，本文是我对在div学习使用过程中踩过的坑进行的一个小总结系列(一) 每日一言：人的最高尚行为除了传播真理外，就是公开放弃错误...一.div横向排布 (一).float:left 在标签的使用中，通常默认是竖直排列如下图所示 <!...从外层的阴影（开始时）改变阴影内侧阴影 ---- 最后这里提供一段上面图片的样式代码，有需要的可以复制下来自己改改使用（个人觉得我这个名片div做的还行⌇●﹏●⌇） .div{ display...就如这样子 找了很久的方法，用到了一个属性解决了问题——vertical-align: text-top;，加上之后，div便不会移动了，我想是因为没有设置文字在div中的对齐方式！

53250
您找到你想要的搜索结果了吗？
是的
没有找到

7月工作小结

也就是说，浮动对象的 display 属性将被忽略。 跟随浮动对象的对象将移动到浮动对象的位置。浮动对象会向左或向右移动直到遇到边框、内补丁、外补丁或者另一个块对象为止。...div 和 span 对象假如没有指定宽度会被分配默认的宽度，在IE5之前的浏览器版本中则必须指定宽度值才可以呈递此属性。 三，样式的重用问题。...样式的名称真是个头大的问题，太多了也不好维护，虽然可以使用包含选择符，但同时也会带来继承的问题。...一直都知道样式有继承的特点，可什么时候会继承，怎么继承就不得而知了，还好在《HTML与XHTML权威指南》里发现了这么一段“类继承了它们的一般基本标签的样式属性……”、“类无法继承其他类的属性，只能从它们代表的标签的未分类版本中继承...此外，如果宽和左右边界都定义了宽度，而且它们之和小于父元素的宽，会向左对齐；如果左右边界为auto，会居中；都为auto时会向左对齐。 以上只是把这段时间里想到的做了下总结，会在以后再分别展开讨论。

20330

【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )

, 将盒子左侧设置到中心位置 , 这个 50% 是相对于父容器的 比例 , 也就是浏览器 ; /* 将固定定位的盒子在页面中居中对齐 先将盒子左侧设置到中心位置 注意...Firework 中 , 将精灵图缩小一半 ; 测量坐标 : 在缩小一半的精灵图中测量坐标 ; 设置代码 : 将代码中的 background-size 缩小一半 , 也就是精灵图缩小一半 ; 插入的放大镜精灵图...-- 搜索栏右侧按钮 --> 我 的 2、CSS 样式 body {...{ /* 图片与文字对齐样式 默认是与文字基线对齐 */ vertical-align: middle; } div { /* css3 盒子模型 */ box-sizing.../* 固定定位盒子位置紧贴顶部 */ top: 0; /* 将固定定位的盒子在页面中居中对齐 先将盒子左侧设置到中心位置 注意 : 这个 50% 是相对于父容器的

28220

CSS样式

text/css" href="xxx.css"> 选择器 全局选择器： *{ margin: 0; padding: 0; } 元素选择器：HTML文档中的元素，p、b、div、...: 1000 优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器 字体属性 color：规定文本的颜色 div{ color:red;} div{ color:#ff0000;}...p{ text-indent:50px; } 如果值是负数，将第一行左缩进 表格属性 表格边框：指定CSS表格边框，使用border属性 table, td { border: 1px solid...:collapse; } table,td { border: 1px solid black; } 表格文字对齐：表格中的文本对齐和垂直对齐属性，text-align属性设置水平对齐方式，向左，右，或中心... 第二个元素 h1~p{ color:red; } 盒子模型 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用 CSS盒模型本质上是一个盒子

23430

HTML5中类jQuery选择器querySelector的使用

('.foo,.bar');//返回带有foo或者bar样式类的首个元素 querySelectorAll 该方法返回所有满足条件的元素，结果是个nodeList集合。...elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div 但需要注意的是返回的nodeList集合中的元素是非实时（no-live...）的，想要区别什么是实时非实时的返回结果，请看下例： //首先选取页面中id为container...先看个例子，比如我们有个div它的样式类为'foo:bar'，当然我知道你一般不会这样写。当我们需要选择它的时候，就需要将其中的冒号进行转义，否则抛错。...理解这点后，可以来看一个更有趣的例子了。比如我们要选择类名里面含反斜杠的元素。是的，我们需要一共使用四个反斜杠！才能正常工作。 ?

3.2K70

【移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航栏 | 固定定位下面的布局设置 | 设置横向导航栏弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )

一、横向导航栏实现核心要点 需求 : 实现如下布局 ; 上一篇博客中 , 已经实现了顶部的搜索栏 , 本篇博客开始实现后续部分 ; 1、固定定位下面的布局设置 在上一篇博客中实现的搜索栏 , 使用..., 左右各有 4 像素的外边距 ; 导航栏整体背景为白色 ; 在该横向导航栏中 设置了 5 个元素 , 这里可以使用百分比布局实现 , 也可以使用 Flex 弹性布局实现 ; 将父容器设置为 Flex...; 二倍精灵图设置步骤 : 缩小精灵图 : 在 Firework 中 , 将精灵图缩小一半 ; 测量坐标 : 在缩小一半的精灵图中测量坐标 ; 设置代码 : 将代码中的 background-size...: 0 -128px; } 上面的代码中的 [class^="local-nav-icon"] 是属性值选择器 , 选择以 local-nav-icon 为开头的 class 类名称的元素标签 ; 二、.../* 固定定位盒子位置紧贴顶部 */ top: 0; /* 将固定定位的盒子在页面中居中对齐 先将盒子左侧设置到中心位置 注意 : 这个 50% 是相对于父容器的

41720

8.图片样式-CSS基础

一、图片大小 在CSS中，我们可以使用width、height属性来定义图片的大小。 1.实际开发 在实际开发中，需要使用多大的图片，就用Photoshop制作多大的图片。...为img设置边框-整体样式.png 三、图片对齐 1.水平对齐（text-align） 在04-文本样式.md中，我们知道使用text-align属性来控制文本在水平方向上的对齐方式，那么对于图片该如何在水平方向向上对齐呢...在CSS中，可以使用text-align属性定义图片水平对齐方式。...（1）语法格式 text-align:取值; ① text-align属性值 属性值 说明 left 左对齐（默认值） center 居中对齐 right 右对齐 这和之前学习文本样式中的都是一样的...图片样式垂直对齐（vertical-align）示例1.png 四、文字环绕（float） 在CSS中，可以使用float属性实现文字环绕图片的效果。

2.2K20

CSS 浮动布局，解决清除浮动的问题

可以从上图看到，里面的两个div是挨在一起的，那么如何设置两个div左右两边对齐呢？ 此时就需要使用float:left和float:right分别设置一下了。 ?...好了，写完了上面的示例，已经知道浮动布局中左右对齐的用法了。现在再来看看这第二个示例该怎么写。 首先先把基本页面写上，这次使用ul配合超链接a标签来编写，如下： ?...清除浮动 ：子元素设置为浮动，父元素无法被撑开的这种情况 父级上增加属性overflow：hidden 在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐） 使用成熟的清浮动样式类...因为需要在最后写多一个div标签，完全没用的。 那么还有什么更加好的方法呢？可以使用之前在解决margin-top塌陷时候的clearfix样式来试试。...使用clearfix样式来解决 只不过这次不是使用 before来解决了，而是使用after，再最后模拟刚才添加div的行为。 ?

2.7K30

web前端学习摘要。

区段、板块等（类似div，但主要针对文档类区域） 侧边栏 文章/文档 HTML5布局的优势：页面代码更加简单、高效；新布局标签本身具有的语义明确告知浏览器其在页面中的位置和结构意义...CSS：float浮动属性 作用：将页面元素浮动起来，使其能够向左或者向右排列；应用：实现页面中布局的左右排版，实现图文环绕的版式效果。...class="main">中中中中中间 左边左边左边左边 右边 </html...什么是伪类？一种动态的类选择符，不是预先创建而是动态形成。当html元素具有不同的状态或特征时，伪类可以设定该元素不同状态或特征下的样式效果。...使用盒子模型属性来精确控制列表 2. 使用列表项的背景属性来模拟项目符号.由于list-style主要设置项目符号且无法精确控制，所以实际应用中并不建议使用list-style去实现样式效果。

3.6K30

一文读懂HTML和CSS的关系

这是必然的，因为如果连最核心的信息都无法有效传递，那围绕着它的一切装饰物和附属品都是毫无意义的。 除满足承载核心信息的需求外，HTML还解决了一个重要的问题——将信息结构化。...他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。 ...但注意，HTML本身没有样式，字体大小和粗细有变化的原因是浏览器的默认样式起了作用，与HTML没有关系。而重点就在这里，这意味着我们可以基于这个结构设计自己的页面效果，见下方的示例。...HTML的语法及结构。不过既然HTML已经有结构了，为什么不好好利用呢？ 以前面示例中的文章页面为例，如果我们想更改标题，是否可以先统一选中所有标题，然后说明想要什么样式规则呢？...同时这个规则与HTML语法无关，相当于另一种语言。这样结构和样式就不会互相影响，结构是结构，样式是样式，两者隔离开了。

36320

CSS 实用手册

内联方式，又称为行内样式，将样式定义在某 html 元素中(style 属性中) 语法: 内容部分 ...外部样式表，将样式定义在外部独立的 css 文件中(*、css)，哪个页面想使用，可以引入css 文件 语法: <link rel="stylesheet" href="文件...分类选择器，允许<em>将</em>元素选择器和<em>类</em>选择器放在一起进行声明定义，以便达到对某种元素<em>中</em>不同<em>样式</em><em>的</em>细分控制 语法:元素选择器、<em>类</em>选择器{<em>样式</em>声明;} <em>div</em>.redColor{ margin:0;...结构伪<em>类</em> ⑥. 否定伪<em>类</em> 注意:自定<em>的</em>选择器<em>中</em><em>的</em><em>样式</em>永远都会覆盖继承<em>的</em><em>样式</em>(不看权值) 4....[class~=value] 主要<em>使用</em>在多<em>类</em>选择器上 语义:匹配页面<em>中</em> class 属性值列表<em>中</em>包含 value 选择器<em>的</em>元素 A. <em>div</em>[class~=redColor] 匹配 class 属性值列表<em>中</em>包含

2.6K10

【CSS】绝对定位元素设置 水平 垂直 居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )

一、问题提出 ---- 绝对定位 不能通过 设置 margin: auto; 样式的方式 , 设置盒子模型水平居中 ; 相对定位 的 盒子模型 , 并没有脱离标准流限制 , 仍然可以使通过设置 margin...: auto; 样式的方式 令盒子水平居中 ; 举例说明 : 绝对定位 的元素 需要居中对齐的地方很多 , 如下图所示 , 右侧的 固定定位 按钮 , 需要在浏览器中居中对齐 , 轮播图中的 五个小圆点...的容器需要居中对齐 ; 二、绝对定位 居中设置 ---- 1、设置固定尺寸 使 绝对定位 元素 水平 / 垂直 居中 最简单的方法就是 使用标尺测量父容器的宽高 , 通过设置四个边的边偏移量 , 设置元素...水平 / 垂直 居中 ; 2、先偏移50%再回退固定值 父容器 盒子 如果尺寸发生了改变 , 使用上述固定边偏移的方式设置的居中就会出现问题 ; 先设置 50% 的 宽度 / 高度 偏移量 , 然后再往回退...div> 执行效果 :

1.7K40
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券