20190402-display展现、float浮动

dadong 发布于2019-04-23 11:41 / 1783人阅读

摘要：目录展现主流浏览器不支持不会显示块级元素，前后带换行符内联元素，前后不带换行符行内块元素列表如果的后面跟着一个为水平的，那么这个应用了的将会变成属性，同时内容嵌入到后面的为的中否则这个的维持其本身的属性。

1、display展现

每个元素都有两个盒子，外在盒子和容器(container)盒子（内在盒子）

display："inline"（"inline-inline"）；

display："inline-block"（"inline-block"）；

display："inline-table"（"inline-table"）；

display："inline-flex"（"inline-flex"）；

display："inline-grid"（"inline-grid"）；

display："block"（"block-block"）；

display："table"（"block-table"）；

display："flex"（"block-flex"）；

display："grid"（"block-grid"）；

2、float浮动

内容

1、display展现

1.1概念：每个元素都有两个盒子，外在盒子和容器(container)盒子（内在盒子），外在盒子负责元素是否独占一行（inline：不独占一行，block：独占一行），容器盒子负责宽度、内容呈现（内联、块、表格、flex、栅格）

将元素的display设置为gird时，该元素即为grid container（网格容器），其子元素直接成为grid items（网格项）

注意：text-align：是针对文本对齐的方式，对内联元素起作用，而对于块级元素不起作用，具体表现为文本居中，元素不居中，如下图：

CSS Code

div{
width: 200px;
height: 200px;
background: olive;
text-align: center;
}
p{
width: 100px;
height: 100px;
background: red;
text-align: center;
}

HTML Code

<div class="parent">
    <p class="child">centerp>
div>

Result

2、float浮动

待阅读完CSS世界补充

专线服务超融合服务器 Floats Floating float html展现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1016.html

理解CSS浮动与清除浮动

摘要：那我们举个栗子当先声明一个元素向左浮动时，由于脱离文档流，这个元素的右边就会空出一片空间，空间的长宽与浮动元素长宽相同。总结总结下来，浮动与清除浮动的顺序关系如下设置元素浮动，元素脱离文档流，不计算高度。本文主要探讨两个问题：为什么CSS设置浮动会引起父元素塌陷为什么设置clear:both能清除浮动，并撑开父元素。起因 CSS的浮动，算是我在写网页时用的最多的属性之一。但...

刘东 2019-08-30 12:45 评论0 收藏0
浅谈 CSS 中的伪类 after

摘要：而不会因为高度塌陷而被隐藏在内部浮动的子元素下。若果不考虑的高度塌陷问题，直接在其弟元素处设置属性即可。开始我误认为了是将中的内容插入至被选元素的弟元素位置上。中的示例从这个示例可以看出，伪类内容的默认方式应该为内联。 1. 引子前段时间学习 web 布局的时候，因为要用浮动 float 属性，所以就顺理成章地碰到了清除浮动 clear 属性。教学的案例中是用新建一个空的 div ...

shinezejian 2019-08-28 18:07 评论0 收藏0
边距重叠以及解决方案BFC

摘要：边距重叠统一的解决方案设置或者或者触发边距重叠有一下三种情况首先把所有的格式清空边距重叠父子元素之间块级父元素与第一个或者最后一个子元素父元素不存在上边框上内边距内联元素清除浮动。边距重叠统一的解决方案；设置padding或者border或者触发BFC 边距重叠有一下三种情况：首先把所有的margin格式清空边距重叠 html *{ margi...

Tychio 2019-08-30 13:56 评论0 收藏0
边距重叠以及解决方案BFC

摘要：边距重叠统一的解决方案设置或者或者触发边距重叠有一下三种情况首先把所有的格式清空边距重叠父子元素之间块级父元素与第一个或者最后一个子元素父元素不存在上边框上内边距内联元素清除浮动。边距重叠统一的解决方案；设置padding或者border或者触发BFC 边距重叠有一下三种情况：首先把所有的margin格式清空边距重叠 html *{ margi...

NervosNetwork 2019-08-26 11:38 评论0 收藏0
CSS布局

摘要：圣杯布局圣杯布局和双飞翼布局都是为了解决两边定宽，中间自适应的三栏布局，中间栏在最前面优先渲染，多见于商城类网站布局。双飞翼布局不用设置相对布局，以及对应的和值。合理的布局是产品的基础，可以使人感觉整齐大方，提升用户体验。掌握几种常见的布局形式也是前端开发的基础，对于快速实现页面重构有很大帮助。原文链接单列布局单列布局通常用于网站的首页，分为头部的导航、网页内容、页脚相关信息。...

kviccn 2019-08-30 13:46 评论0 收藏0