怪物奇妙物语

宇宙无敌超级美少男的怪物奇妙物语

首页 新随笔 联系 管理
  819 随笔 :: 0 文章 :: 2 评论 :: 16万 阅读

水平居中布局

text-align: center;

  • 字面意思:用来控制自己标签内的文字是否居中

  • 如果其子元素是inline元素、inline-block元素,会使其居中

  • 如果其子元素本来是block元素通过转换的方式display: inline;display: inline-block;,也会使其居中

  • 常见的inline内联元素:

    • 纯文字, span、img、a、lable、input、abbr(缩写)、em(强调)、big、cite(引用)、i(斜体)、q(短引用)、textarea、select、small、sub、sup,strong、u(下划线)
  • 常见的inline-block元素:

    • img、input、button

优点:

  • 浏览器兼容性好

缺点:

  • text-align具有继承性,这样就会导致其子级元素的inline元素和inline-block也是居中显示

缺点解决方案:

  • 重新设置子级元素的text-align属性,可能会比较麻烦

margin: 0 auto;

  • 只需要对子级元素本身设置就可以实现居中
  • 只对block元素有效,inline-block无效

缺点:

  • 如果子级元素脱离文档流,导致margin属性无效

image-20210518092949165

position+left+transform

image-20210518094612152

垂直居中布局

vertical-align属性

优点:

  • 浏览器兼容性比较好

缺点:

  • vertical-align属性具有继承性,导致父级元素的文本也是居中显示的
.parent{
width: 200px;
height: 200px;
background-color: antiquewhite;
display: table-cell;
vertical-align: middle;
}
.child{
width: 50px;
height: 50px;
background-color: blueviolet;
}
<div class="parent">
<div class="child">
</div>
</div>

image-20210518101017290

position+top+transform

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.parent{
width: 200px;
height: 200px;
background-color: antiquewhite;
position: relative;
}
.child{
width: 50px;
height: 50px;
background-color: blueviolet;
position: absolute;
top:50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>

image-20210518101631855

image-20210518101653960

水平and垂直居中例子

代码图

image-20211015120939809

水平and垂直居中.html

关键代码

image-20211015121036100

<!doctype html>
<html>
<head>
<title>无标题文档</title>
</head>
<style>
.outer{
width:400px;
height:400px;
border:1px solid red ;
position:relative;
}
.inner{
width: 100px;
height: 100px;
background-color: rosybrown;
position: absolute ;
top:50%;
left:50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>

inline、block、inline-block元素

inline元素

inline元素全称Inline Elements,
英文原意:An inline element does not start on a new line and only takes up as much width as necessary.
一个内联元素不会开始新的一行,并且只占有必要的宽度。

特点:

和其他元素都在一行上;
元素的高度、宽度及顶部和底部边距不可设置;
元素的宽度就是它包含的文字或图片的宽度,不可改变。

block元素

block元素全称Block-level Elements,
英文原意:A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
一个块级元素总是开始新的一行,并且占据可获得的全部宽度(左右都会尽可能的延伸到它能延伸的最远)

特点:

每个块级元素都从新的一行开始,并且其后的元素也另起一行。(一个块级元素独占一行);
元素的高度、宽度、行高以及顶和底边距都可设置;
元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

inline-block元素

inline-block元素,
英文释义:inline-block elements are like inline elements but they can have a width and a height.
它像内联元素,但具有宽度和高度。

特点:

和其他元素都在一行上;
元素的高度、宽度、行高以及顶和底边距都可设置

常见的inline内联元素:

span、img、a、lable、input、abbr(缩写)、em(强调)、big、cite(引用)、i(斜体)、q(短引用)、textarea、select、small、sub、sup,strong、u(下划线)、button(默认display:inline-block))

常见的block块级元素:

div、p、h1…h6、ol、ul、dl、table、address、blockquote、form

常见的inline-block内联块元素:

img、input

区别

  • 块级元素会独占一行,而内联元素和内联块元素则会在一行内显示。

  • 块级元素和内联块元素可以设置 width、height 属性,而内联元素设置无效(可以设置行高)。

  • 块级元素的 width 默认为 100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。

posted on   超级无敌美少男战士  阅读(195)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示