精华内容
下载资源
问答
  • css块级元素垂直居中五种方法

    千次阅读 2020-05-19 17:15:38
    昨天收到京东的面试邀请,面试的是个小姐姐,第一道就是css问题,父元素高度不固定的情况下,如何让内部块元素垂直居中,当时只想到一种方法,因此记录下其他几种方法,以供后续翻看加深记忆 正文 第一种 在父元素...

    前言

    昨天收到京东的面试邀请,面试官是个小姐姐,第一道就是css问题,父元素高度不固定的情况下,如何让内部块元素垂直居中,当时紧张只想到第三种方法,结合网上资料整理了其他几种方法,以供后续翻看,供大家参考!

    正文

    第一种

    • 在父元素添加display:flex;align-items:center
    • 代码如下:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>块级元素居中</title>
    </head>
    	<style>
    		.outer{
    		   background:#fc4964;
    		   height:500px;
    		   display:flex;
    		   align-items: center;
    		}
    		.inner{
    		  background:#fff;
    		}
    		</style>
    <body>
    	<div class='outer'>
    		<div class='inner'>1111</div>
    	</div>
    </body>
    </html>
    
    • 结果图:
      效果

    第二种

    • 将父元素的position设置为position:relative,内部块元素设置为position:absolute;top:50%;并且margin-top向上移动元素的一半
    • 代码如下:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>垂直居中</title>
    </head>
    	<style>
    		.outer{
    		   background:#fc4964;
    		   height:500px;
               position:relative;
    		}
    		.inner{
    		  background:#fff;
    		  width:100px;
    		  height:50px;
    		  position:absolute;
    		  top:50%;
    		  margin-top:-25px
    		}
    
    	</style>
    <body>
    	<div class='outer'>
    		<div class='inner'></div>
    	</div>
    </body>
    </html>
    
    • 效果图:
      在这里插入图片描述

    第三种

    • 设置内部块元素为position:relative;top:50%;transform:translateY(-50%)
    • 代码如下:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>垂直居中</title>
    </head>
    	<style>
    		.outer{
    		   background:#fc4964;
    		   height:500px;
    		}
    		.inner{
    		  background:#fff;
    		  width:100px;
    		  height:50px;
    		  position:relative;
    		  top:50%;
    		  transform:translateY(-50%)
    		}
    
    	</style>
    <body>
    	<div class='outer'>
    		<div class='inner'></div>
    	</div>
    </body>
    </html>
    
    • 结果如下:
      在这里插入图片描述

    第四种

    • 类似第一种方法,设置父元素的display:flex;,然后设置子元素align-self: center;
    • 代码如下:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>垂直居中</title>
    </head>
    	<style>
    		.outer{
    		   background:#fc4964;
    		   height:500px;
    			display:flex;
    		}
    		.inner{
    		  background:#fff;
    		  width:100px;
    		  height:50px;
    		  align-self: center;
    		}
    
    	</style>
    <body>
    	<div class='outer'>
    		<div class='inner'></div>
    	</div>
    </body>
    </html>
    
    • 效果图已省略…

    第五种

    • 设置父元素display:table-cell; vertical-align: middle;
    • 代码如下:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>垂直居中</title>
    </head>
    	<style>
    		.outer{
    		   background:#fc4964;
    		   width:600px;
    		   height:500px;
    		   display:table-cell;
    		   vertical-align: middle;
    		}
    		.inner{
    		  background:#fff;
    		  width:100px;
    		  height:50px;
    		}
    
    	</style>
    <body>
    	<div class='outer'>
    		<div class='inner'></div>
    	</div>
    </body>
    </html>
    
    • 效果如下:
      在这里插入图片描述

    总结

    结合网上资料,整理了这一篇文章,后续有新方法再整理出来,码字不易,请多支持

    展开全文
  • 1 占有空间上的区别 块级元素:占有整一个父元素的空间 ...块级元素:包含行内元素和块级元素 行内元素:只能包含行内元素,不能包含块级元素 4 边距属性的区别 4.1 width, height 上的区别 块级元素:均生效

    1 占有空间上的区别

    • 块级元素:占有整一个父元素的空间
    • 行内元素:占有其对应标签的空间,即使根据其内容的多少,占有父级元素多少的空间

    2 多个同级元素使用时的区别

    • 块级元素:即使在设置宽度的情况下,都直接新起一行
    • 行内元素:除非所占父元素行空间已满,否则都不会换行,在行内向右排列,即使是同级的子标签都是如此

    3 包含嵌套关系的区别

    • 块级元素:包含行内元素和块级元素
    • 行内元素:只能包含行内元素,不能包含块级元素

    4 边距属性的区别

    4.1 width, height 上的区别

    • 块级元素:均生效
    • 行内元素:均无效,受内容限制,体现“行内”这一特性

    4.2 margin padding 上的区别

    • 块级元素:均生效
    • 行内元素:只有padding-left和padding-right有效,即是左右生效,上下不生效
      在这里插入图片描述
      在这里插入图片描述

    5 居中上的区别

    5.1 水平居中

    行内元素:父级元素设置,使其子元素水平居中

    div{
    	text-align:center;
    }
    

    块级元素:设置宽度后,使用margin auto ,在元素两边有剩余宽度时,auto可以使其自动水平对齐

    div{
    	width:50px;
    	margin:0 auto
    }
    

    5.2 垂直居中

    行内元素:设置行内元素高度即可

    div{
    	height:30px; 
    	line-height:30px
    }
    

    块级元素:可以设置父元素宽度,调节通过margin等的方式进行调节

    
    

    6 主要的标签

    • 主要的行内元素:
    <span><a><lable><strong><b><small><abbr><button>
    <input><textarea><select><code><img><br>
    <q><i><cite><var><kbd>
    <sub><bdo>
    
    • 主要的块级元素
    <div><p><li><h1><h2><h3><h4><h5><h6>
    <form><header><hr><ol><address><article>
    <aside><audio><canvas><dd><dl><fieldset>
    <section><ul><video>
    
    展开全文
  • 主要介绍了CSS块级元素与行级元素详解 的相关资料,需要的朋友可以参考下
  • css 复制代码代码如下: #wrap{white-space:normal; width:200px; } 1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行 复制代码代码如下: #wrap{wo
  • css盒子模型中,我们提到了html元素中的块元素(block element)和内联元素(inline element)。那么它们究竟是什么呢? 其实,这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素...
  • 这个名词有点东西,说实在的,我们可能不知道这个名字,但是她在css样式里有着举足轻重的地位,因为最常见的块级元素就《div》,其他的如《》,《table》(各位看官老爷注意一下,这个地方不是我有意打成《》,而是&...

    块级元素
    这个名词有点东西,说实在的,我们可能不知道这个名字,但是她在css样式里有着举足轻重的地位,因为最常见的块级元素就《div》,其他的如《》,《table》(各位看官老爷注意一下,这个地方不是我有意打成《》,而是< >和特殊符号冲突显示不出来)。这一类标签最主要的特点就是水平流(水平方向上)上单独显示,多个块级元素则换行显示,还有他的板砖性质(就是他可以撑开你的div,当然要不做任何处理)
    在这里插入图片描述
    好,块级元素先说到这,我现在先说一个很头大的问题----浮动
    什么是 CSS Float(浮动)?
    这是个问题,简单点说,就是让元素向左或者向右(很有用的技能),所有许多宝宝就随便乱用,然后。。。页面爆炸。
    咱们先看一个页面爆炸的实例:
    先说一个背景:
    你有两张非常棒的图片要把它并排放在页面上,所以你选择使用float来消除块级元素的换行性(简直完美),所以你在大脑里构思的效果是这样的:
    在这里插入图片描述

    <style>
            .container1{
                width:250px;
                height: 0px;/*板砖性质,自己撑开div,所以没设置*/
               background-color: #1E9FFF;
                border:darkorange 5px solid;
    
            }
            .div2{
    
                width: 100px;
                height: 100px;
                background-color: red;
                float: left;
            }
            .div3{
    
                width: 100px;
                height: 100px;
                background-color: #5FB878;
                float: left;
            }
            .container2{
                width:250px;
                height: 100px;
                background-color: #009f95;
                border:lightgreen 5px solid;
            }
        </style>
    </head>
    <body>
    <div class="container1">
        <div class="div2">
           图片1
        </div>
        <div class="div3">
            图片2
        </div>
    </div>
    <div class="container2">
    
    </div>
    

    很好,简直天衣无缝的。。。爆炸!!
    在这里插入图片描述
    这会你就有点急了,很显然,上面的那个container因为没有设置宽度而“扁了”,而下面的container则就被你的两张图片盖着一样。下面咱们分析一下问题的所在。
    总结一下:
    float(浮动)是将一个块或者别的什么东西浮起来,这就像一缸水,被float的块状元素就像落在水缸水面的叶子一样浮在上面,他根本没用进入水中,自然不会进入你的container1,而且还盖着你的container2,这样说是不是好理解一些。
    既然问题已经明了了,那接下来就是解决问题了
    NO.1
    既然叶子没有进入水中,那我干脆把container1扩大一点,让你把container1盖着好了。
    emmmmmm。。。这是一种方法,但是只是亡羊补牢的方法,而且在将来的布局中你不可能精确计算具体尺寸,很有可能顾此失彼,这一块的布局可以了,它周围的元素因为各种原因被挤开了,所以这种方法不可取。
    NO.2
    通过设置父元素 overflow 或者display:table 属性来闭合浮动,给box1添加overflow:hidden(说实在的,这个确实是比第一个好了一些,但是还是不实用,毕竟父元素有时候不是那么好找
    NO.3
    (疯狂安利)
    使用伪元素:after,下面是代码,给box1添加上clearfloat这class即可

    HTML:
    <div class="box clear">
        <img src="/images/common/l/1.jpg">
    </div>
    CSS:
    .box {
        padding: 10px;
        background-color: #cd0000;
    }
    .box > img {
        float: left;
    }
    
    .clear:after {
        content: "";
        display: '';//这里可以选择table,block,但是最好不要选择list-item
        clear: both;
    }
    

    以上代码来之css世界
    添加链接描述
    所以,通过伪元素的方法可以完美解决浮动问题
    好了,这里解释一下为毛最好不要用list-item
    简单点说,就是不美观,因为因为list-item的特性,会在每行开始前加上一个“.”(emmm,怎么在下面,不是在中间)

    在这里插入图片描述

    就是下面的那个小黑点,至于为什么会出现这个小黑点,那就是另一个故事了!!!
    写完收工!!!

    展开全文
  • 盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互。页面上的每个元素都被看成一个矩形框,这个框由元素的内容、内边距、边框和外边距组成。如下图所示: 内边距出现在内容区域的周围。如果在元素...
  • 每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外)。两个块级元素连续编辑时,会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素; 块级元素一般作为...

    一、块级元素:block element

     

    每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外)。两个块级元素连续编辑时,会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素;

    块级元素一般作为容器出现,用来组织结构,但并不全是如此。有些块级元素,如

    只能包含块级元素。其他的块级元素则可以包含 行级元素如

    .也有一些则既可以包含块级,也可以包含行级元素。

    DIV 是最常用的块级元素,元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右撑满。

     

    二、行内元素:inline element

     

    也叫内联元素、内嵌元素等;行内元素一般都是基于语义级(semantic)的基本元素,只能容纳文本或其他内联元素,常见内联元素 “a”。比如 SPAN 元素,IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素,各个字母 之间横向排列,到最右端自动折行。

     

    三、block(块)元素的特点


    ①、总是在新行上开始;

    ②、高度,行高以及外边距和内边距都可控制;

    ③、宽度缺省是它的容器的100%,除非设定一个宽度。

    ④、它可以容纳内联元素和其他块元素

     

    四、inline元素的特点


    ①、和其他元素都在一行上;

    ②、高,行高及外边距和内边距不可改变;

    ③、宽度就是它的文字或图片的宽度,不可改变

    ④、内联元素只能容纳文本或者其他内联元素

     

    对行内元素,需要注意如下

     

    • 设置宽度width 无效。
    • 设置高度height 无效,可以通过line-height来设置。
    • 设置margin 只有左右margin有效,上下无效。
    • 设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。

     

    五、常见的块状元素

     

    • address – 地址
    • blockquote – 块引用
    • center – 举中对齐块
    • dir – 目录列表
    • div – 常用块级容易,也是CSS layout的主要标签
    • dl – 定义列表
    • fieldset – form控制组
    • form – 交互表单
    • h1 – 大标题
    • h2 – 副标题
    • h3 – 3级标题
    • h4 – 4级标题
    • h5 – 5级标题
    • h6 – 6级标题
    • hr – 水平分隔线
    • isindex – input prompt
    • menu – 菜单列表
    • noframes – frames可选内容,(对于不支持frame的浏览器显示此区块内容
    • noscript – 可选脚本内容(对于不支持script的浏览器显示此内容)
    • ol – 有序表单
    • p – 段落
    • pre – 格式化文本
    • table – 表格
    • ul – 无序列表

     

    六、常见的内联元素

     

    • a – 锚点
    • abbr – 缩写
    • acronym – 首字
    • b – 粗体(不推荐)
    • bdo – bidi override
    • big – 大字体
    • br – 换行
    • cite – 引用
    • code – 计算机代码(在引用源码的时候需要)
    • dfn – 定义字段
    • em – 强调
    • font – 字体设定(不推荐)
    • i – 斜体
    • img – 图片
    • input – 输入框
    • kbd – 定义键盘文本
    • label – 表格标签
    • q – 短引用
    • s – 中划线(不推荐)
    • samp – 定义范例计算机代码
    • select – 项目选择
    • small – 小字体文本
    • span – 常用内联容器,定义文本内区块
    • strike – 中划线
    • strong – 粗体强调
    • sub – 下标
    • sup – 上标
    • textarea – 多行文本输入框
    • tt – 电传文本
    • u – 下划线

     

    七、行内元素与块级元素有什么不同?

     

    区别一:

    块级:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度

    行内:行内元素不会独占一行,相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

     

    区别二:

    块级:块级元素可以设置宽高

    行内:行内元素不可以设置宽高

     

    区别三:

    块级:块级元素可以设置margin,padding

    行内:行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。

     

    区别四:

    块级:display:block;

    行内:display:inline;

    可以通过修改display属性来切换块级元素和行内元素

     

    bestick>>CSS块级元素和行内元素

    展开全文
  • css块级元素实现水平垂直居中方法

    千次阅读 2018-10-23 17:42:30
    总结css块级元素水平垂直居中方法 方法一:已知宽高 &lt;style&gt;  .wrapper{  width:500px;  height:500px;  border:1px solid #bbb;  position:relative; /*给父元素设置相对定位*/  }  .demo{ ...
  • 1.块级元素和内联元素 1.1块元素 定义:独占一行的元素 作用:主要用来布局 详细:div、h1、p都是块级元素块级元素独占一行 ​ div没有任何语义,是一个纯粹的块元素。不会给嵌套在它里面的元素设置任何的...
  • css块级元素垂直居中

    2020-09-20 16:43:59
    css块级元素水平居中 该元素style属性设置为: margin:auto;
  • css如何将块级元素中的块级元素同时水平垂直居中显示 将外层块级盒子绝对定位,内层块级盒子相对定位,然后设置内层盒子上下左右全为0,margin:auto;即可 代码如下所示: <!DOCTYPE html> <...
  • 2019独角兽企业重金招聘Python工程师标准>>> css 块级元素 宽度默认继承父类元素宽度 转载于:https://my.oschina.net/yukong/blog/818399
  • 一、块级元素 独占一行 默认width是父元素的100%,height取决于内容的height 设置width、height有效 设置margin,上下左右有效 设置padding,上下左右有效 二、内联元素 不会独占一行 默认width取决于内容的...
  • 一、行内元素和块级元素 1.1、块级元素(block): 它独占一行; 它的宽高可以设置; 默认时,宽度是100%; 例如:<div>、<h1-h6>、<ul>、<ol> 、<li>等。 1.2、行内元素(inline)...
  • CSS中的块级元素、行内元素和行内块元素

    千次阅读 多人点赞 2019-05-21 14:09:11
    元素是文档结构的基础,在css里面,每个元素生成了包含内容的框(box),大家都叫“盒子”。...接下来就详细讲一下在CSS块级元素、行内元素和行内块级元素的区别。 块级元素 block 块级元素,顾...
  • 1.块级元素定位方式: 绝对定位 position:absolute 相对定位 position:relative 固定定位 position:fixed 2.定位语句写法: 写定位方式 使用top right bottom left 四个方向属性进行正负操作 z-index层级的...
  • https://blog.csdn.net/chengxu_kuangrexintu/article/details/83043169
  • css块级元素与行内元素讲解 css的块级元素与行内元素是我们在布局中的基础,但是一般的不会去细究它们之间的区别今天就把自己的心得写出来。 常见块级元素:div p form ul ol li 等; 常见的行内元素:span stronh ...
  • 块级元素:显示在一块内,会自动换行,元素会从上到下垂直排列,各自占一行,如p,ul,form,div等标签元素。行内元素:元素在一行内水平排列,高度由元素的内容决定,height属性不起作用,如span,input等元素。
  • 1.什么是块级元素? w3c定义:块级元素(block)是独占一行,它的兄弟元素不会与其占同一行,都是另起一行显示。(当然脱离了正常文档流的情况除外) 2.块级元素(block元素)的特点 (1)总是从新行上开始 (2)...
  • 块级元素(block-level)每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。常见的块元素有&lt;h1&gt;~&lt;h6&gt;、&lt;p&gt...
  • 默认的行内元素包括:a( 锚点) ,span(定义文本内区块)img(图片)input(输入框)...默认的块级元素包括:divul(无序列表)ol(有序列表)dl(定义列表)table(表格)form(表单)h1(一级标题))p(段落)pre(预格式化)等。 行内...
  • 块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别。  常见块级元素:div p form ul ol li 等;  常见的行内元素:span strong em; 它们的区别主要有以下几点: 1....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 69,864
精华内容 27,945
关键字:

css块级元素