展开

关键词

div盒子模型

标准盒模型尺寸的计算 盒子模型的实际宽度:width+左右padding+左右border 盒子模型的实际长度:width+上下padding+上下border

26720

关于p标签不能div标签引发的标签问题总结

问题由来:中标签,两个都是块级元素,按理应该可以正常显示,但是最后的结果居然是多出来一段的效果,所以就在网上找了许多关于标签规则的资料,下面做一个个人总结。 : 1,内联元素,可以内联元素,不可以块状元素 2,块元素,可以块元素,或者是内联元素 3,部分块元素,不能块元素,只能内联元素,如:p、h1-h6 4, 块元素中的元素,块元素和块元素一级 ,内联元素和内联元素一级内联标签可以内联元素,不可以块状元素       正确  (内联内联)      正确  (内联内联)     错误  (内联块级)块元素可以块元素(不是所有块级都可以块级 所以说p里面不能div,就是我犯的错误。     错误  (特殊块级标签只能内联标签)         错误  (特殊块级标签只能内联标签)块元素中的元素,块元素和块元素并列一级,内联元素和内联元素并列一级            正确(块级和块级并列一级

53730
  • 广告
    关闭

    云加社区有奖调研

    参与社区用户调研,赢腾讯定制礼

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

    P不能包div

    W3C这样说:“ 如果你这样做,将会严重违反P的语义 ” 解决方法暂时没有 于是我找到了块级元素和内联元素的规则,如下:最基本:内联不能块级,块级可以内联元素 < div>< h1>< h1 >< p>< p>< div> 正确(块级并列) < a href=#>< span>< span>< a> 正确(内联内联) < span>< div>< div>< span> 错误(内联块级 所以说p里面不能div,就是我犯的错误。 < p>< ol>< li>< li>< ol>< p> —— 错 < p>< div>< div>< p> —— 错 特殊的< li>里面可以div(< li>可以但< p>不行)块级元素与块级元素并列 h2>< h2>< span>< span>< div>  错误(块级和内联并列了) 以上是它的规则,但违反了不一定报错,比如我经常用 a 标签去 div,我觉得挺好用的。

    14310

    Sass速通(二):与作用域

    Sass 提供了的书写方式,用以简化选择器的书写,同时也带来了“作用域”。 选择器在 Sass 中,可以在父选择器中写子选择器,以的形式来表达关联的关系,这样做可以减少我们重复书写父选择器的工作量。 而其它选择器也可以复合使用,如 div#id、div.class、div 等。Sass 为了在中更好地表达这些复合关系,提供了父选择器 &。 p,选中条件: 节点为 div 后面的同层节点节点标签为 p对于组合选择器,直接就可以了。 : 1px; border-color: #ccc;}作用域Sass 引入了,出现了层级,自然也就有了“层级作用域”。

    6820

    bootstrap笔记(六)——列偏移与

    col-md-1 col-md-1 col-md-1 col-md-1 col-md-1 col-md-1 col-md-1 col-md-1 col-md-2 col-md-3 col-md-4 列 为了使用内置的栅格系统将内容再次,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。 被的行(row)所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列)。 Title div{ border: solid 1px red; } div{ border: solid 1px red; } .row{ margin-bottom: 20px; } col-md 列 ?

    8540

    Emmet 常用语法

    或 html:5HTML 文档类型 > 运算符可以用来生成彼此的元素,即后代元素 缩写: section>div>p后代元素 + 运算符可以用来生成彼此相邻的元素,即兄弟元素 缩写: div+p+bg 兄弟元素 ^ 运算符,可以让你的代码返回上一层 缩写: div>p>span+em^bq上层 1缩写: div>p>span+em^^bq上层 2 () 分组 缩写:div>(header>ul>li *2>a)+footer>p分组 1缩写:(div>dl>(dt+dd)*3)+footer>p分组 2 * 运算符,能一次性生成多个相同的标签 缩写:ul>li*5乘法 $ 递增 缩写:ul>

    29230

    采用DIV+CSS布局对SEO优化有何好处?

    表格的问题,很多SEO在其文章中称,搜索引擎一般不抓取三层以上的表格,这一点一直没有得到搜索引擎官方的证实。 我的几项实验结果没有完全出来,但根据目前掌握的情况来看,spider爬行Table布局的页面,遇到多层表格时,会跳过的内容或直接放弃整个页面。 使用Table布局,为了达到一定的视觉效果,不得不用多个表格。如果的表格中是核心内容,spider爬行时跳过了这一段没有抓取到页面的核心,这个页面就成了相似页面。 而DIV+CSS布局基本上不会存在这样的问题,从技术角度来说,HTML在控制样式时也不需要过多的。 这虽然没有得到确认,但还是建议使用Table布局的朋友们,在设计时尽可能的不要使用多层表格,SEOer们在文章中说明了这一点,相信他们也不是没有依据的。

    28660

    SASS学习笔记(一)

    三、基本用法1)变量,所有变量以$开头,如果变量镶在字符串中,用#{}包含$red:#f00;$lside:left;div{  color:$red;  border-#{$lside}-radius :10px;}2)计算功能,sass允许使用加减乘除算式div{  width:100px+20px;}3),sass可以将css中的包含选择器写成形式3.1) 标签css:div  h2{   color:red;}写成sass:div{  h2{    color:red;  }}3.2)属性(如border-color拆开成格式:如下)注意border后有冒号(想象成将-改成了 :)div{  border:{    color:red;  }}3.3)用&引用父元素(如a:hover改成)a{  &:hover{    color:red;  }}4)注释*    *      {  @include  left;}2.2)用mixin指定参数和缺省值@mixin left($value:20px){  float:left;  margin-left:$value;}div{

    30180

    重构代码的Tricks

    比如,我有个业务需求,是创建一个div并且渲染数据到页面上,并且根据data的不同,改变div的状态.function(data){ var div = document.createElement(div function(data){ var div = document.createElement(div), div = data.name; document.body.append(div); changeState 而使用分支还要主意一个tip就是.不要过度这里想说的就两点,一是,尽可能不使用分支,二是,如果分支,尽量改为不。 不使用分支的情况上面已经说了,如果使用分支,那么请不要,或者说不要过度。因为一个分支已经很难阅读了,md,你再加个,你还让不让人读了。 而解决过度的方法真的是千千万万,我这里就介绍一个比较简单的。使用return 提早退出

    55010

    PHP | 条件、循环、条件循环相

    1.条件demo: 假设在发3月工资的时候,不仅判定性别,还要判定男性是否有房,没有房,可以发放住房补贴,对于女性,判定是否怀孕,怀孕还有怀孕补贴: ----2.循环 循环结构,就是类似于跑多个足球场 (多层循环), 例如假设有两个足球场(两个循环),一个大足球场(外循环),一个小足球场(内循环), 在大足球场跑一圈后,再到小足球场跑几圈,跑完几圈后,再到大足球场中继续跑。 592011:林平之442012:曲洋892013:任盈盈922014:向问天932015:任我行872016:冲虚582017:方正742018:岳不群912019:宁中则90----3.条件循环相有个学生数组存储了学号和姓名

    21730

    JQuery选择器(上)

    ,如:$(div,#test1,p,.test2,#test3)3.后代选择器:$(mix mix),当然可以是多个,但后代选择器可以是深层子代,所以$(mix mix mix ...)这种写法作用不大 .例子:$(div .test):在div标签内的所有具有test的class的后代元素(就是被div的class属性为test的标签)可以见DEMO。 4.子选择器:$(mix>mix),这个放在后代选择器后面是为了和它做对比.子选择器只能选择第一代子代.不处理深层.例子:$(div>.test)对这里的p段落标签有效.但对对这里的p段落标签无效, 这里要用$(div .test)

    34040

    HTML css的一个例子

    源代码: div { color: blue; border: 2px solid red; padding-right: 10px; margin-right: 10px;} Hello World 内容为World的div,被在另一个div里。 注意内层div的padding实际为:10px + 10px = 20px?css似乎不能仿照下图的scss一样,定义的标签选择器???更多Jerry的原创文章,尽在:“汪子熙”

    11230

    NEC html规范

    严格的尽可能以最严格的xhtml strict标准来,比如内联元素不能包含块级元素等等。正确闭合标签且必须闭合。严格的属性属性和值全部小写,每个属性都必须有一个值,每个值必须加双引号。 常用的标签 常见标签表 标签 语义 常见错误 常用属性(加粗的为不可缺少的或建议的) 超链接锚 a不可a href,name,title,rel,target 换行 按钮 不可表单元素 type ,disabled 段落 不能块级元素 引用脚本 不可任何元素 type,src 列表框或下拉框 只能option或optgroup name,disabled,multiple 内联容器 强调文本 引用样式 不可任何元素 type,media 下标 上标 表格 只可表格元素 width,align,background,cellpadding,cellspacing,summary 避免被在不正确的容器里惑:因为容器可能是body或div,所以,我们邮件内容不应该是一个完整的html。解:所以邮件内容应该是以div为根节点的html片段。

    43150

    sassscss 变量与规则

    $fontSize: 16px;div { $fontSize: 24px; font-size: $fontSize; 24px;}p { font-size: $fontSize; 16px;} sass变量作用域二、规则选择器 选择器1选择器2,编译结果是选择器1下的选择器2。属性 拥有同样前缀的属性可以将将前缀提取为公共部分。 $fontSize: 12px;$fontweight: 600;* 标签 *div { p { font-size: $fontSize; } span { font-size: $fontSize ; }}* 属性 *p { font: { size: $fontSize; weight: $fontweight; }}编译结果? 规则

    36830

    网页html结构搭建方法总结

    div+css布局中,一般都这样来整体构架的: 而对于header部分,肯定要显示网站标题,除了显示网站标题外,还可能要显示其他比较重要的对象,比如网站的导航栏: 这里是网站的标题这里是网站导航栏 很多人一般都这样写的 但对于div来说有个原则,那就是尽少的使用div(和table一样的缺点:1、对于用户:浏览器要消耗资源对的关系进行解析,影响速度;2、对于搜索:搜索引擎对的层数可能有所限制)。 我们选用其他的Xhtml代码来取代上面的div,那又如何选择呢??

    55860

    第153天:关于HTML标签的问题详解

    HTML标签  1、块级元素 div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes 3、标签规则  虽然HTML标签有很多,并且我们在制作页面的时候可以无限的,但是也有规则,不能随意的。     只要p标签里面也任何形式块级标签,都会被解析为兄弟级关系,即使设置display属性;  (5)li标签可以包含div标签,因为li和div标签都是装在内容的容器。 (6)a标签不能a标签(链接)    只要a标签里面也任何形式a标签,都会被浏览器解析为兄弟级关系    (7)如若需要进行链接,可以推荐使用area标签对于链接的,平时如果大家留意的话 content)  4、不可  5、子元素是语句型元素,不可交互型元素(interactive content)  6、不可  7、、不可、、区块型元素(sectioning content

    46020

    自动化平台搭建之css样式详解(二)

    规则:硬的包软块标签可以任意标签,p不能块标签行内标签只能行内标签,a可以任意标签,但是a不能包aopacity:透明度,很暴力,子级也透明了选择器:通配符:*标签选择器:div{} 类选择器:.box{}ID选择器:#box{}群组选择器:p,div,span{}筛选选择器:.div1.box{}选择器:p span{}伪类选择器:a:link{}a:visited{}a:hover important>行间样式>id>.box>div>*超无敌>无敌>100>10>1>0.1文本样式都能继承如果自己有的样式,那就不继承父级的样式清空默认样式:body,p,ul,ol,dl,dd,h1

    33150

    jquery 绑定事件 - mouseover() mouseout() mouseenter() mouseleave() hover()

    写一个简单的两个div来演示一下看看,如下:??进入子元素也会触发mouseover()事件,那么如果#small的div没有在里面是否会触发呢? 这样应该就不会。? 测试发现,mouseenter()这个事件,移动到子元素#small div也是会被触发的。 那么如果重叠起来,子元素进入会不会触发呢?? 也就是刚刚进入父元素#big div的时候触发,再进入#small div的时候就不会触发了。 当两个元素在一起的时候,只有父元素触发了事件。 下面来看看不在一起的时候。??可以看到,#small div会将事件冒泡给#big div,导致触发mouseleave()事件。如果想要阻止呢? 可以写一个#small div执行return false;拦截事件冒泡,如下:?

    82630

    快速学习Ant Design-布局

    2.3.1、组件概述Layout:布局容器,其下可 HeaderSiderContentFooter或Layout本身,可以放在任何父容器中。 Header :顶部布局,自带默认样式,其下可任何元素,只能放在Layout中。Sider :侧边栏,自带默认样式及基本功能,其下可任何元素,只能放在Layout 中。 Content :内容部分,自带默认样式,其下可任何元素,只能放在Layout中。Footer: 底部布局,自带默认样式,其下可任何元素,只能放在Layout中。 style = { { padding: 24, background: #fff, minHeight: 360 } } > { this.props.children } < div> < Content () { return ( < Layout > < Sider width = { 256 } style = { { minHeight: 100vh, color: white } } > < div

    73810

    前端-CSS-初探-注释-语法结构-引入方式-选择器-选择器优先级-01(待完善)

    (标签上直接写,最不推荐使用)1.文件导入式(最规范的形式) 2.head标签内 写style 标签 p{ color: red } 3.入式加油,努力选择器 这一块儿内容可参考 CSS Selectors 可以完全不看下面的内容 我们通过选择器来选择,指定标签,给标签添加样式基本选择器 标签选择器、类选择器、id选择器、全局选择器、兄弟选择器、后代选择器属性选择器组合选择器伪元素选择器伪类选择器 选择器可 下面的span、div下的p的span)div span{ color: red;}* ######### 子代选择器 ########## *子代选择器(div下面的span)div>span{ color * ######### 选择器分组 ########## *选择器分组p, span{ color: red;}最规范的写法:p,span{ color: red;} * ######### 选择器 ########## *选择器(所有选择器都可以(案例:id选择器、class选择器、标签选择器))#d1 .c1 span{ color: red;} * ######### 伪类选择器 #

    14940

    相关产品

    • 云服务器

      云服务器

      腾讯云服务器(CVM)为您提供安全可靠的弹性云计算服务。只需几分钟,您就可以在云端获取和启用云服务器,并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费,可以为您节约计算成本。

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      扫码关注云+社区

      领取腾讯云代金券