CSS核心内容整理 - (上)

时间 2019-11-07

标签 css 核心内容整理栏目 CSS 繁體版

原文原文链接

一. HTML标记与文档结构

文本用闭合标签,引用内容用自闭合标签.常见的块级标签:<h1>~<h6>,<p>,<ol>,<li>,<blockquote>等.行内标签则有:<a>,<img>,<em>,<strong>,<abbr>,<cite>,<q>等.
css

下面这是一个最小的完整HTML模板,一个基本页面必然包含这些标签.html

<!DOCTYPE html>
 <html>
   <head>  
     <meta charset="utf-8" />
       <title>An HTML Template</title>
   </head>
   <body>
     <!-- 这里是网页内容 -->
   </body>
 </html>

搜索引擎会给title标签中的文字内容赋予很高的权重,这些文字也会做为网页标题出如今搜索结果列表中.不要让"欢迎访问"之类的废话占据你的title标签.使用简洁明确的文字以及读者在搜索你的网页内容时会使用的关键词. 所谓“文档流”的效果,也就是 HTML 元素会按照它们各自在标记中出现的前后顺序,依次从页面上方“流向”下方.浏览器

几乎全部 HTML 元素的 display 属性值要么为 block,要么为 inline。最明显的一个例外是 table 元素,它有本身特殊的 display 属性值.框架

块级元素(好比标题和段落)会相互堆叠在一块儿沿页面向下排列,每一个元素分别占一行。而行内元素(好比连接和图片)则会相互并列,只有在空间不足以并列的情况下才会折到下一行显示。布局

块级元素盒子会扩展到与父元素同宽,而行内元素盒子会"收缩包裹"其内容,而且尽量包紧.post

DOM是从浏览器的视角来观察页面中的元素以及每一个元素的属性,由此得出这些元素的一个Tree.字体

二. CSS工做原理

除了咱们咱们知道的行内样式,嵌入样式,引用样式以外,还有一种在样式表中连接其余样式表的方法,使用@import指令,@import url(css/style.css)这一命令必须出如今样式表其余命令以前.搜索引擎

选择器是CSS工做的核心:url

<section>     
    <h2>An H2 Heading</h2>
    <p>This is paragraph 1</p>
    <p>Paragraph 2 has <a href="#">a link</a> in it.</p>
    <a href="#">Link</a>
</section>

section h2 {} 或者 section p {} 这就是后代选择器,经过空格分离,只要后者是前者的后代元素便可.若是想更确切,还有 section > p {} 子选择器以及 h2 + p {} 兄弟选择器(这里选中的是p).spa

h2 ~ a {} 同级元素选择器,只要有同一个父节点便可,这里选中的是a.

注意 * 号除了通配选择符还有一个颇有意思的用法,就是构成非子选择符,section * a {} 任何是section的孙子元素,而非子元素的a标签都会被选中.

"标签名.类名" 这样方式能够更准确的选定元素,相似的用法还有 ".A类名.B类名" 这样的方式选中的是class = "A B"的元素,属性也有"标签名[属性]"或者"标签名[属性='属性值']"这两种方式选择.

ID这个属性也能够用在页内导航连接中,好比经过一个超连接,点击跳转到同一页的另外一个位置.

<a href = "#info">info</a>这样写时href开头是#,它表示这个连接的目标在当前页面中,于是不会触发浏览器加载页面.

要避免CSS编写过程当中可能级可能出现的"类泛滥".什么意思呢?就是说不要像使用ID同样为每一个类都指定一个不一样的类名,而后再为类编写规则.这样作极可能会给每一个标签都重复写一样的样式,实际上继承和上下文选择符能让不一样的标签共享样式,从而提高CSS代码的质量.

伪类的使用也许在CSS的初级阶段很少,但一旦你深刻CSS,你会发现伪类无处不在.伪类这个叫法源自它们与类类似,但实际上并无类会附加到标记中的标签上.伪类分两种,UI伪类和结构化伪类,前者会在HTML元素处于某个状态时(好比鼠标滑过)为该元素应用CSS,后者则是元素存在某种结构化的关系时(好比一组中的第一个元素)为元素加上CSS.

a::link{} a::hover{} a::visited{} a::active{} input::focus{} ul::first-child{} ul::last-child{} ul::nth-child(3)

继承!!!

一提及CSS中还有继承我想好多人是惊讶的,包括本身早些时候也认识不到原来这就是CSS中的继承.若是咱们给body加上一些字体样式,咱们会发现只要是body的后代元素就会继承这些字体样式,这些能够继承的样式一般是文本或者字体的.

继承涉及到样式的权重,一个HTML有不少个样式来源的时候,应该听从哪个样式.

CSS继承的规则虽然很繁琐,但基本上只要记住三条规则就够了,它们适用全部状况.

规则一: 包含ID的选择符赛过包含类的选择符,包含累的选择符赛过包含标签名的选择符.

规则二: 若是几个不一样来源都为同一个标签的同一个属性定义了样式,行内样式赛过嵌入样式,嵌入样式赛过连接样式.在连接样式表中,具备相同特指度的样式,后声明赛过先声明.

规则二赛过规则一.也就是选择符更明确的(特指度高),不管它写在哪里,都会胜出.

规则三: 设定的样式赛过继承的样式,此时不须要考虑特指度.

三. 定位元素

盒模型的概念是整个CSS定位布局的核心,这些盒子按照可见版式模型(visual formatting model)在页面上布局.可见的页面版式主要由3个属性控制:position控制页面上元素间的位置关系,display控制元素是堆叠、并列仍是根本不显示,float提供控制的方式.

盒模型的3大属性就是padding、border、margin,它们的按照top、right、bottom、left的顺时针顺序提供缩写.若是有一个方向没写,就会自动使用对边的值.

这里面外边距(margin)的垂直叠加是须要注意的,由于这和咱们通常对盒模型的理解不一样.垂直方向上的外边距会叠加,这个规则十分重要.假设有3个P段落,而且都应用了以下的样式:

p {      
    height:50px;
    border:1px solid #000;  
    backgroundcolor:#fff;  
    margin-top:50px;  
    margin-bottom:30px;
}

按照咱们所想那么相邻的两个P,由于上面的p有一个margin-bottom:30px,下面的P有一个margin-top:50px,那么看上去在页面上显示它们应该有50+30=80px的间距.但其实是50px,由于在垂直方向上,像这样上下边距相遇时,它们会相互重叠,直到一个元素的外边距碰到另外一个元素的border为止.因此其实是较宽的外边距决定了两个元素的垂直间距.

盒模型原理:

盒模型结论一：没有（就是没有设置 width 的）宽度的元素始终会扩展到填满其父元素的宽度为止。添加水平边框、内边距和外边距，会致使内容宽度减小，减小量等于水平边框、内边距和外边距的和。

盒模型结论二：为设定了宽度的盒子添加边框、内边距和外边距，会致使盒子扩展得更宽。实际上，盒子的 width 属性设定的只是盒子内容区的宽度，而非盒子要占据的水平宽度。

总之，你要记住一点：设定了元素的 width 属性后，再给元素添加边框、内边距和外边距，元素的行为与默认的 auto状态下会有大相径庭的表现。

浮动和清除:

浮动元素脱离了常规文档流以后,原来紧跟其后的元素就会在空间容许的状况下提高到与浮动元素持平的位置. 在你浮动一张图片或者其余元素时，你是在要求浏览器把它往上方推,直到它碰到父元素（也就是 body元素）的内边界。后面的段落（带灰色边框）再也不认为浮动元素在文档流中位于它的前面了，于是它会占据父元素左上角的位置。不过，它的内容（文本）会绕开浮动的图片。

浮动元素脱离了文档流，其父元素也看不到它了，于是也不会包围它。这种状况有时候并不是咱们想要的,三种围住浮动子元素的方法:

<section>  
    <img src="images/rubber_duck2.jpg">
    <p>It's fun to float.</p>
</section>
<footer> Here is the footer element that runs across the bottom of the page.</footer>

img跑了出去,section和footer都跑到img右侧了,这样的效果可不行.

(1) 方法一：为父元素添加 overflow:hidden

方法很简单，缺点是不太直观，即为父元素应用 overflow:hidden，以强制它包围浮动元素。实际上，overflow:hidden 声明的真正用途是防止包含元素被超大内容撑大。应用overflow:hidden以后，包含元素依然保持其设定的宽度，而超大的子内容则会被容器剪切掉。除此以外，overflow:hidden还有另外一个做用，即它能可靠地迫使父元素包含其浮动的子元素。

(2) 方法二：同时浮动父元素

浮动 section之后，无论其子元素是否浮动，它都会牢牢地包围（也称收缩包裹）住它的子元素。所以，须要用 width:100%再让 section 与浏览器容器同宽。另外，因为 section如今也浮动了，因此 footer会努力往上挤到它旁边去。为了强制 footer依然呆在 section下方，要给它应用 clear:left。被清除的元素不会被提高到浮动元素的旁边.

(3) 方法三：添加非浮动的清除元素

为父元素的最后添加一个非浮动的子元素，而后清除该子元素。因为包含元素必定会包围非浮动的子元素，并且清除会让这个子元素位于（清除一侧）浮动元素的下方，所以包含元素必定会包含这个子元素——以及前面的浮动元素。

这个方法虽然听着比较绕口,可是这种方式在各个CSS框架都有出现,是一种比较流行的写法.这里也介绍的是比较流行的写法:

首先给section添加一个类clearfix,而后定义这个类:

.clearfix:after {  
    content:".";
    display:block;  
    height:0;  
    visibility:hidden;  
    clear:both; 
}

它只添加了一个清除的包含句点做为非浮动元素（必须得有内容，而句点是最小的内容）。规则中的其余声明是为了确保这个伪元素没有高度，并且在页面上不可见。使用clear:both意味着section中新增的子元素会清除左、右浮动元素（位于左、右浮动元素下方）。这里固然能够只用left，但both也适用于未来图片float:right的状况。

最后这种定义.clearfix:after来清除浮动的方式很是常见,并且能够适应不少种状况相比于overflow:hidden以及父元素的浮动这两种方式要好一些.

position定位

position是CSS盒模型定位的核心,它的应用使元素能够在常规文档流中从新定位,static,relative,absolute,fixed.

static静态定位: 块级元素在页面中自上而下堆叠,维持默认的文档流.

relative相对定位: 光设置这个属性还看不出来有什么不同，由于你只设置了它的定位方式是“相对定位”。到底相对哪里定位呢？相对的是它原来在文档流中的位置（或者默认位置）。接下来，可使用 top、right、bottom和 left属性来改变它的位置了。但多数状况下，只用 top和 left就能够实现咱们想要的效果.

使用相对定位的关键是什么呢？就是要考虑到元素原来的空间。

absolute绝对定位: 绝对定位元素默认的定位上下文是 body元素。经过 top 和 left 设定的偏移值，决定元素相对于 body 元素（标记层次中的祖先容器），而不是相对于它在文档流中的位置偏移多远——这一点与相对定位的元素不一样。因为绝对定位元素的定位上下文是 body，因此在页面滚动的时候，为了维护与 body元素的相对位置关系，它也会相应地移动。

fixed固定定位: 从彻底移除文档流的角度来讲它与绝对定位相似,不过它的定位上下文是浏览器的窗口,所以不会随页面滚动而滚动.

定位上下文: 经过postition设置的元素能够经过left或top等进行元素偏移,相较于偏移的这个元素就是定位上下文.绝对定位时默认的参照物,也就是定位上下文是body,可是其实任何被设置了relative或者absolute的偏移元素的祖先元素均可以是该元素的参照物.

display和visibility的区别

display最重要的地方就是将元素在行内和块级之间转换,并且它的display:none会使标记的占有空间被回收,而visibility的hidden还会保留"占位",可是看上去是什么都没有.

背景

元素背景可使颜色或者图片,它是与CSS盒模型紧密联系的.看一下示意图:

关于背景的应用如今很是多,能够说画面上大多数色彩效果是靠背景色去完成的.不一一列举了,就列出一些关键点好了:

若是没有设置border的颜色,那么元素的背景色会影响元素的border颜色.
比元素小的背景图片会在水平和垂直方向上重复,知道铺满整个元素.
background-position是背景设置中最复杂的一个属性,经过它能够实现一张图片整合多个图样,从而只须要下载一次图片便可.

这里补充一点东西,就是有些属性会出现"厂商前缀"这么个东东.

为了鼓励浏览器的厂商尽早的使用W3C的CSS3标准,因而就有了厂商前缀的概念,有了这些前缀浏览器厂商就能够实现W3C覆盖新CSS属性的草案.这是为了迅速实现CSS3的一种过渡方式,不过很属性必须这么写,好比transform或者border-image等.

说到transform额外多说两句,这个属性通常都不是很熟悉,它表示将一个元素转为2D或者3D,从而能够对这个元素进行旋转,缩放,倾斜和移动.如今已经在CSS3的效果中很普及,用于一些特效上.

CSS核心整理的(上)部分就介绍这些,后续还会有较大篇幅整理整个CSS的内容,欢迎留言给我.