来自 奥门威尼斯网址 2019-09-21 03:38 的文章
当前位置: 威尼斯国际官方网站 > 奥门威尼斯网址 > 正文

最核心的几个概念

要素类型

HTML 的因素得以分为二种:

  • 块级元素(block level element)
  • 内联成分(inline element 有的人也叫它行内成分)

两侧的分别在于以下三点:

  1. 块级成分会把持一行(即不能够与其余因素显示在同等行内,除非你显式修改成分的 display 属性),而内联成分则都会在一行内体现。
  2. 块级成分得以安装 width、height 属性,而内联成分设置无效。
  3. 块级成分的 width 默以为百分百,而内联成分则是根据其自己的剧情或子成分来决定其调幅。

最常见块级元素应该是 ``<div>啊,内联元素有 ``<img> ``````等等,完整的成分列表能够谷歌(Google)时而。

具体来讲一下吧,

JavaScript

.example { width: 100px; height: 100px; }

1
2
3
4
.example {
    width: 100px;
    height: 100px;
}

我们为 `<div>` 设置上面的样式,是有效果的,因为其是块级元素,而对 设置上面的样式是没用的。要想让 ` 也可以改变宽高,可以通过设置display: block;` 来到达效果。当 display 的值设为 block 时,成分将以块级方式显示;当 display 值设为 inline 时,成分将以内联方式展现。 若既想让要素在行内展现,又能设置宽高,能够安装:

JavaScript

display: inline-block;

1
display: inline-block;

inline-block 以我之见正是让要素对外呈内联成分,能够和其他因素共处与一行内;对内则让要素呈块级成分,可转移其宽高。


HTML 代码是各种推行的,一份无任何 CSS 样式的 HTML 代码最终展现出的页面是依照成分出现的次第和档案的次序排列的。块级成分就从上到下排列,碰到内联成分则从左到右排列。这种无样式的情状下,成分的布满叫普通流,成分出现的职分应该叫好端端职责(那是自己瞎起的),同临时间享有因素会在页面上占领四个空中,空间尺寸由其盒模型决定。

float

float 看名就会知道意思,便是把成分浮动,它的取值一共有多个:left right none inherit,光看名字就懂了,没有必要多言。

最先的 float 只是用来贯彻文字环绕图片的功能,仅此而已。而前日 float 的施用已不仅仅那个,前辈们也是写了重重博文来深入显出的教师它。
浅如:
经历分享:CSS浮动(float,clear)通俗疏解 篇幅非常短,简单明了,能够看完那篇小说再回过头来看本文。
深如:
CSS float浮动的尖锐商量、详解及开展(一)
CSS float浮动的永不忘记钻研、详解及实行(二)
从精神上教学了 float 的原理。

自己就不自作聪明写原理了,只说说 float 的多少个要点就行了:

  1. 唯有左右转变,没有前后变动。
  2. 要素设置 float 之后,它会脱离普通流(和 position: absolute; 同样),不再攻下原本那层的上空,还只怕会覆盖下一层的要素。
  3. 变迁不会对该因素的上多少个小家伙成分有别的影响。
  4. 变动之后,该因素的下一个男人成分会紧贴到该因素此前从未安装 float 的要素之后(很好精通,因为该因素脱离普通流了,恐怕说不在这一层了,所以它的下二个要素当然要补上它的职责)。
  5. 只要该因素的下多个兄弟元素中有内联成分(平常是文字),则会围绕该因素显示,变成类似「文字围绕图片」的成效。(可参看CSS float浮动的中肯研商、详解及进行(一)中的讲明)。这几个本身也许举办了刹那间的:Demo
  6. 下四个兄弟成分如若也安装了一样方向的 float,则会紧随该因素之后显得。
  7. 该因素将产生块级成分,也等于给该因素设置了 display: block;(和position: absolute; 一样)。

此地还会有个东西,就是著名的——免除浮动。具体的艺术三种各类,能够看这篇:那多少个年大家一齐清除过的变通,作者就异常少说了。

写完本文后,脑子中又冒出了一层层难题,假若 position 和 float 同一时间安装会油然则生什么样难点?包容性如何?哪个属性会被遮住?还没赶趟实行,改天以排列组合的方法看看究竟是怎样意义……假如有人施行过能够私行告诉小编^_^


本文章使用文化分享 签名-非商业性利用-禁止演绎 4.0 国际 许可协商举行许可。

1 赞 7 收藏 评论

图片 1

盒模型

页面上显得的每种成分(包含内联成分)都能够作为四个盒子,即盒模型( box model )。请看 Chrome DevTools 里的截图:

图片 2

能够鲜明的旁观盒模型由 4 部分组成。从内到外分别是:

JavaScript

content -> padding -> border -> margin

1
content -> padding -> border -> margin

按理说来讲一个因素的肥瘦(中度依此类推)应该那样总计:

JavaScript

总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

1
总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

只是区别浏览器(你从未猜错,正是可怜特别的浏览器)对步长的评释不一致样。符合 W3C 规范的浏览器认为叁个元素的宽窄只约等于其 content 的宽窄,其他都要非凡算。于是你明确二个要素:

JavaScript

.example { width: 200px; padding: 10px; border: 5px solid #000; margin: 20px; }

1
2
3
4
5
6
.example {
    width: 200px;
    padding: 10px;
    border: 5px solid #000;
    margin: 20px;
}

则他最终的上升的幅度应该为:

JavaScript

宽度 = width(200px) + padding(10px * 2) + border(5px * 2) + margin(20px * 2) = 270px;

1
宽度 = width(200px) + padding(10px * 2) + border(5px * 2) + margin(20px * 2) = 270px;

而在 IE(低于IE9) 下,最后上升的幅度为:

JavaScript

宽度 = width(200px) + margin(20px * 2) = 240px;

1
宽度 = width(200px) + margin(20px * 2) = 240px;

自家个人认为 IE 的更契合人类思想,究竟 padding 叫内边距,边框算作额外的大幅也说不下去。W3C 最终为了消除这么些标题,在 CSS3 中加了 box-sizing 那特性情。当大家设置 box-sizing: border-box; 时,border 和 padding 就被含有在了宽高之内,和 IE 从前的正儿八经是大同小异的。所以,为了制止你一样份 css 在不一致浏览器下显现分裂,最好增加:

JavaScript

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

1
2
3
4
5
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

此地还大概有二种奇特别情报形:

  • 无宽度 —— 相对定位(position: absolute;) 成分
  • 无宽度 —— 浮动(float) 元素

它们在页面上的表现均不占用空间(脱离普通流,以为像浮在页面上层同样,移动它们不影响别的因素的定势)。那就关系到别的多少个宗旨概念 position 和 float。

position

position 那脾性格决定了成分将怎样牢固。它的值差相当的少有以下各种:

position 值 如何定位
static position的默认值。元素将定位到它的正常位置(上文提到过),其实也就相当于没有定位。元素在页面上占据位置。不能使用 top right bottom left 移动元素位置。
relative 相对定位,相对于元素的正常位置来进行定位。元素在页面占据位置。可以使用 top right bottom left 移动元素位置。
absolute 绝对定位,相对于最近一级的 定位不是 static 的父元素来进行定位。元素在页面不占据位置。 可以使用 top right bottom left 移动元素位置。
fixed 绝对定位,相对于浏览器窗口来进行定位。其余和 absolute 一样,相当于一种特殊的 absolute。
inherit 从父元素继承 position 属性的值。

切实职能能够参见w3school的实例,大概自个儿写一下就知道了。

种种网页都足以用作是由一层一层页面积聚起来的,如下图所示。

图片 3

position 设置为 relative 的时候,成分仍旧在常常流中,地点是常规任务,你能够经过 left right 等运动元素。会影响别的因素的职责。

而当贰个成分的 position 值为 absolute 或 fixed 的时候,会时有发生三件事:

  1. 把该因素往 Z 轴方向移了一层,要素脱离了普通流,所以不再占有原本那层的空间,还有可能会覆盖下层的成分。
  2. 该因素将化为块级成分,约等于给该因素设置了 display: block;(给二个内联成分,如 `` ,设置 absolute 之后发现它可以设置宽高了)。
  3. 设若该因素是块级元素,成分的上升的幅度由原来的 width: 百分百(侵占一行),变为了 auto。

由此观之,当 position 设置为 absolute 或 fixed,就没供给设置 display 为 block 了。何况一旦您不想覆盖下层的成分,能够安装 z-index 值 抵达效果。

CSS 最基本的多少个概念

2017/07/14 · CSS · CSS

原稿出处: geekplux.   

正文将陈说 CSS 中最基本的多少个概念,包括:盒模型、position、float等。这几个是 CSS 的功底,也是最常用的多少个属性,它们中间就疑似独立却又相得益彰。为了调整它们,有不可缺少写出来研讨一下,如有错误应接指正。

本文由威尼斯国际官方网站发布于奥门威尼斯网址,转载请注明出处:最核心的几个概念

关键词: