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

块元素, 内联元素, 内联块元素块元素(默认为父级宽度的100%,支持全部样式):内联元素(不支持宽高, 不支持margin上下, 不支持padding上下)内联块元素(从其它元素转换而来, disp

块元素(默认为父级宽度的100%,支持全部样式): body h1 , h2, h3, h4, h5, h6 p div li (条目) ul(定义无序列表, 子标签li, 带点号) ol(定义有序列表...span em(语气强调,斜体) i(专业词汇, 斜体) b(关键词, 加粗) strong(非常重要, 加粗) input(输入框, 支持全部样式) img(图片, 支持全部样式) 间隙问题: 父级设置字体为...0, 子级单独设置字体尺寸 居中问题: 使用text-align: center 内联块元素(从其它元素转换而来, display: inline-block, 支持全部样式!...) 没有原生的内联块元素 任何元素都可以转换为内联块元素 display: inline-block(内联块元素) inline(内联元素) block(块元素) none(隐藏)

1.2K60

2020前端面试题含解析汇总——基础篇(二)

补充第45点,设置水平居中的方法,如果是行内元素中的文字,text-align必须设置在父级块元素才有效。...比如行内元素标签中的文字,text-align: center设置在中是无效的,如果没有额外写父级块元素,那么父级块元素就是,text-align: center写在.../body>        如果父级元素(不一定是块元素)和子级块元素都有text-align属性,那就是就近原则,所以以子级块元素的text-align属性为准,如果子级块元素没有text-align...:center,父级行内元素有text-align:center,则子级块元素的文字还是居中!...综上所述:如果文字是块元素中的,会从自身开始往上找text-align属性,找到就生效,就近生效,找不到就不生效。如果文字是行内元素中的,会找父级块元素(块!元!

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

    cssjshtml css之display:inline-block布局

    可以使用padding上下左右都有效,margin只有left和right产生边距效果,但是top和bottom就不行. block(块级元素): 使元素变成块级元素,独占一行,在不设置自己的宽度的情况下...,块级元素会默认填满父级元素的宽度. ...inline-block(融合行内于块级): 结合了inline与block的一些特点,结合了上述inline的第1个特点和block的第2,3个特点. 用通俗的话讲,就是不独占一行的块级元素。...两个图可以看出,display:inline-block后块级元素能够在同一行显示,有人这说不就像浮动一样吗。...>>乍一看两个都能做到几乎相同的效果,(仔细看看display:inline-block中有间隙问题,这个留到下面再讲)   c.浮动布局不太好的地方:参差不齐的现象,我们看一个效果: 图三:

    1.1K20

    【手把手】制作一个简单的HTML网页

    p元素表示里面的文字是一个段落,h2元素就是二级标题,这些元素都是块级元素。还记得块级元素是什么意思吗?对了,它是不是会默认占满一整行啊。...以这个例子来说,他们的父元素就是body,所以,他们会默认占满body的宽度。让我们来看一下效果吧。...他来了个404错误,404就是找不到资源,也就是说找不到图片。我们看一下,他去哪里找的:http://localhost/img/1.jpg 。看不出来?...一个比较好的思路,就是专门用一个元素,把它包进去,比如: 在这里,我们是不是只能用行内元素呀,因为如果我们用div,p等块级元素,那么是不是就要换行啦。...然后在style元素中添加一个类选择器 刷新一下页面: 好像这个配色不太好看,那么我打开F12,选择这个font元素,重新配一个色(看好了,我就做这么一遍): 然后,我们把颜色复制过来: 刷新页面

    1.3K40

    【手把手】制作一个简单的HTML网页

    p元素表示里面的文字是一个段落,h2元素就是二级标题,这些元素都是块级元素。还记得块级元素是什么意思吗?对了,它是不是会默认占满一整行啊。...以这个例子来说,他们的父元素就是body,所以,他们会默认占满body的宽度。让我们来看一下效果吧。...1488776920277080610.png 他来了个404错误,404就是找不到资源,也就是说找不到图片。我们看一下,他去哪里找的:http://localhost/img/1.jpg 。...一个比较好的思路,就是专门用一个元素,把它包进去,比如: 1488779505199094000.png 在这里,我们是不是只能用行内元素呀,因为如果我们用div,p等块级元素,那么是不是就要换行啦。...1488779663809060722.png 然后在style元素中添加一个类选择器 1488779711496008955.png 刷新一下页面: 1488779733449033200.png 好像这个配色不太好看

    7.8K112

    关于BUS通信系统的一些思考(二)

    节点A->公共父节点:找不到直连信息,发给父节点 公共父节点->节点B:转发消息 这种情况又有分支,一种是接下来父节点通知两个子节点直接建立连接通道,另一种是不通知,每次都由父节点转发。...如果子节点要建立直连通道则如下图所示: 节点A->公共父节点:找不到直连信息,发给父节点 公共父节点->节点B:转发消息 公共父节点->节点A:通知节点A直连到节点B 节点A->节点B:有直连信息,直接发送...节点A->A的父节点:找不到直连信息,发给父节点 A的父节点-->B的父节点:任何方式都可能 B的父节点->节点B:直接转给节点B 这种情况可以简单暴力了,每次有消息都转给父节点就好了。...双方都是高优先级时: 节点B->父节点:共享内存,优先级1(通路) 父节点->节点A:共享内存,优先级1(通路) 节点B->节点A:共享内存,优先级1(通路) 一方是高优先级时: 节点B->父节点:共享内存...,优先级1(通路) 父节点->节点A:网络Socket,优先级3(通路) 节点B->节点A:网络Socket,优先级3(通路) 节点B->父节点:网络Socket,优先级3(通路) 父节点->节点A:共享内存

    56330

    如何让你的 JS 写得更漂亮

    这样写也不太好,虽然它是符合JS语法的,但这种编码风格是不好的。使用你这个函数的人会有点无所适从,不敢直接进行加减乘除,因为如果返回字符串进行运算的话值就是NaN了。...所以应该要把它搞成一个局部的作用域: 上面用了一个function制造一个局部作用域,也可以用ES6的块级作用域。...(2)不要滥用闭包 闭包的作用在于可以让子级作用域使用它父级作用域的变量,同时这些变量在不同的闭包是不可见的。...这样就导致了在查找某个变量的时候,如果当前作用域找不到,就得往它的父级作用域查找,一级一级地往上直到找到了,或者到了全局作用域还没找到。因此如果闭包嵌套得越深,那么变量查找的时间就越长。...(4)块级作用域变量 块级作用域变量也是ES6的一个特色,下面的代码是一个任务队列的模型抽象: var tasks = []; 但是上面代码的执行输出是4,4,4,4,并且不是想要输出:0,1,2,3

    1.4K30

    5分钟快速回顾HTML CSS

    块级元素左右居中:先设置自身width;然后,margin: 0 auto; 2.内联元素(行内)[不支持width, height, margin上下,padding上下] 常用内联元素...span(无语义) 超链接标签 a src可以为空,但一定要写 其它常见问题 子级内联元素之间有间隙,可以把父级元素font-size设置为0,子级单独设置font-size 内联元素居中...:由于内联元素自身不支持width,使用在父级元素设置text-alian : center 的解决方案 3.内联块元素(支持全部样式的内联元素) 转换为内联块 设置样式 display:...子元素已经脱离了文档流 定位的四种方式同相对定位 如果子元素找不到父元素,则会一直向上找,直到找到最外层标签页面 3.固定定位(相对于浏览器定位) 元素css设置 position: fix...,才能被子元素撑开 相邻浮动的块元素可以并在一行,超出父级元素会自动换行 元素设置浮动后,会自动转为"行内块元素"(元素之间也不会有间隙) 浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动元素内的文字会避开浮动的元素

    1.3K90

    寒假提升 | Day9 CSS 第七部分

    绝对定位(重点) 元素脱离 normal flow(脱离标准流、脱标) 可以通过left、right、top、bottom进行定位 定位参照对象是最邻近的定位祖先元素 如果找不到这样的祖先元素,参照对象是视口...行内块级(inline-block)的很多特性都会消失 不再给父元素汇报宽高数据 脱标元素内部默认还是按照标准流布局 绝对定位元素(absolutely positioned element)...800 = 200 + ml0 + mr0 + 0 + 0 auto -> 交给浏览器你来出来 width: auto; 1.行内非替换元素 -> width: 包裹内容 2.块级元素 -> width...浮动规则 浮动规则一 元素一旦浮动后, 脱离标准流 朝着向左或向右方向移动,直到自己的边界紧贴着包含块(一般是父元素)或者其他浮动元素的边界为止 定位元素会层叠在浮动元素上面 浮动规则二 如果元素是向左...元素、块级元素的文字内容 浮动规则五 规则五: 行内级元素、inline-block元素浮动后,其顶部将与所在行的顶部对齐 2.3.

    79220

    那么如何让你的 JS 写得更漂亮?

    这样写也不太好,虽然它是符合JS语法的,但这种编码风格是不好的。使用你这个函数的人会有点无所适从,不敢直接进行加减乘除,因为如果返回字符串进行运算的话值就是NaN了。...document.querySelector("#my-map"); map.style.height = "600px"; }() 上面用了一个function制造一个局部作用域,也可以用ES6的块级作用域...(2)不要滥用闭包 闭包的作用在于可以让子级作用域使用它父级作用域的变量,同时这些变量在不同的闭包是不可见的。...这样就导致了在查找某个变量的时候,如果当前作用域找不到,就得往它的父级作用域查找,一级一级地往上直到找到了,或者到了全局作用域还没找到。因此如果闭包嵌套得越深,那么变量查找的时间就越长。...(4)块级作用域变量 块级作用域变量也是ES6的一个特色,下面的代码是一个任务队列的模型抽象: var tasks = []; for(var i = 0; i < 4; i++){ tasks.push

    1.4K00

    如何让你的 JS 代码写得更漂亮

    这样写也不太好,虽然它是符合JS语法的,但这种编码风格是不好的。使用你这个函数的人会有点无所适从,不敢直接进行加减乘除,因为如果返回字符串进行运算的话值就是NaN了。...document.querySelector("#my-map"); map.style.height ="600px"; }() 上面用了一个function制造一个局部作用域,也可以用ES6的块级作用域...(2)不要滥用闭包 闭包的作用在于可以让子级作用域使用它父级作用域的变量,同时这些变量在不同的闭包是不可见的。...这样就导致了在查找某个变量的时候,如果当前作用域找不到,就得往它的父级作用域查找,一级一级地往上直到找到了,或者到了全局作用域还没找到。因此如果闭包嵌套得越深,那么变量查找的时间就越长。...(4)块级作用域变量 块级作用域变量也是ES6的一个特色,下面的代码是一个任务队列的模型抽象: var tasks =[]; for(var i =0; i <4; i++){ tasks.push

    2K20

    CSS 定位布局 - 相对、绝对、固定三种定位

    absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。...,如果找不到,则相对于body元素进行定位。...父元素div设置了绝对定位之后,的确绿色div就以外层div进行偏移了。但是同时父级div也与body进行了定位,需要重新设置偏移量才可以居中。 ?...先看看原来基于父级定位的绝对定位的div情况如下: ? 将绿色div的绝对定位改为固定定位,如下: ?...从上面的结果来看,固定定位是完全不管父级元素是否设置了定位属性的,直接就与body进行定位偏移。 这种定位方式最适合用于放广告了。

    3.5K40

    10个比较流行的PHP框架

    CodeIgniter ? CodeIgniter以其占用空间小而闻名(包括文档在内,它的大小只有大约2mb),是一个适合开发动态网站的PHP框架。...与其他框架相比,CodeIgniter要快得多。由于它还提供了可靠的性能,所以当您想要开发轻量级应用程序以在普通服务器上运行时,它是一个不错的选择。...特点: Zend Framwork非常适合复杂的企业级项目。它是大型It部门和银行的首选框架。 Zend Framwork关键特性包括MVC组件、简单的云API、数据加密和会话管理。...通过Istio/Envoy等服务网格框架,为中小型企业提供了一组快速构建的微服务治理组件,包括服务注册和发现、服务块、服务节流和配置中心。 9. PHPixie ?...ThinkPHP是为了简化企业级应用开发和敏捷WEB应用开发而诞生的。最早诞生于2006年初,2007年元旦正式更名为ThinkPHP,并且遵循Apache2开源协议发布。

    13.2K20

    CSS基础(二)

    伪元素 概念:使用CSS模拟标签,创建网页中不重要的图 用法:找父级,在父级中添加子标签 伪元素 作用 ::before 在父元素内容最前添加一个伪元素 ::after 在父元素内容最后添加一个伪元素...占有原来的位置 仍然具有具体标签原有的显示模式特点 改变的位置是参照自己原来的位置 三、绝对定位 先找已经定位的父级...(一般是 相对定位),以这个父级为参照物 子绝父相 就近找定位的父级,如果逐层找不到这样的父级,就以浏览器窗口为参照物定位。...如果父级没有定位,那么以浏览器窗口为参照物。...特点: 脱标,不占位 改变标签的显示模式特点( 变为行内块) 绝对定位的盒子不能使用左右margin : auto居中

    1.8K20

    html、css 实现二级菜单「建议收藏」

    对于css代码,我来逐个讲解 一:解决高度坍塌(清除浮动) 因为一级菜单我是用ul li来做的,虽然ul是块级元素(display: block;)...,但是lidisplay: list-item;,多个是一行一行显示的 所以我使用了浮动,来让多个li元素排在一行 但是,li使用了浮动之后,会导致一个问题,高度坍塌: li的父元素ul是常规流元素块盒...5个元素,在水平方向上各占20% 我给一级菜单的li元素还设置了一个属性:相对定位 它是用来把一级菜单的li元素的内容盒给二级菜单作为包含块的: 包含块:决定了盒子的排列规则 将二级菜单的元素设置为绝对定位...position: absolute; 绝对定位元素的包含块:找祖先元素中第一个定位元素,改元素的填充盒;若找不到,则它的包含块为整个网页(初始化包含块) 这样,二级菜单就会相对于其对应的一级菜单的内容盒进行定位了...三:实现二级菜单 以免篇幅拖沓,本文只给一级菜单的第四个li元素设计了二级菜单 一般,页面上只显示一级菜单,需要点击一级菜单,才会出现相应的二级菜单 需要用到伪类:hover 鼠标悬停在元素上时的样式

    2.6K50
    领券