CSS核心概念精讲-优快云博客

本文链接：https://blog.youkuaiyun.com/lovekun_03/article/details/62236939

CSS基础知识深入探讨

写这篇文字一则是为了整理和归纳CSS一些基础知识，加深对CSS基础内容的记忆和理解,另外文中也加入了个人对CSS的理解，达到活学活用的效果。同时这篇文章还可以作为以后编码时的查询手册。

块级元素和行内元素(内联元素)

HTML中所有元素都可以分为两类，块级元素(block)和内联元素(也称为行内元素，inline).

文档流

默认情况下，CSS对窗体中的元素是从上到下，从左往右，一行一行的放置元素，这就是文档流。
每一个非浮动的块级元素都会独占一行，和其他块级元素在窗体中从上往下依次放置。
每一个内联元素不会独占一行，它会从左往右依次和同一行内的其他内联元素依次放置。
为了使页面表现效果更加丰富，CSS也会使某些元素脱离文档流存在，被设置为浮动(float), 绝对定位(position:absolute), 固定定位(position: fixed)的元素都会脱离文档流，脱离了文档流，就不会遵守文档流的从上到下，从左往右的规则，从而使页面展示效果更加丰富
此部分内容参考自: CSS块级元素,内联元素概念
也可以参考CSS权威指南

相对定位,绝对定位和固定定位

相对定位: 当对某个元素设置为相对定位，并对其设置响应的偏移量时，该元素会偏离他正常应该在的位置，而它偏离出的空白位置并不会被其他元素占据，而是一直空着。
绝对定位: 当一个元素被设置为绝对定位时，该元素就会脱离文档流，其上下左右的偏移量是相对于最近被position的父级元素，如果找不到最近被position的父级元素，则是相对于body标签。而它偏离出的空白位置也会被其他元素补充进来。
固定定位: 被设置为固定定位的元素，也会脱离文档流，其偏移量是相对于整个浏览器窗口，并不随着浏览器的下拉而改变位置。

CSS盒子模型

CSS属性

相关属性都参考自: CSS参考手册

定位

CSS包含的定位属性有: position, z-index, top, bottom, left, right

position: static: 这个是position属性的默认值,所有未指定定位的元素，其默认值都是static，即遵守文档流的规则，从上到下，从左往右依次放置。
position: relative: 相对布局,relative属性值的表现和static一样，除非你设定一些其他参数，比如top, left, right, bottom。这些属性值搭配relative一起使用，可以是元素偏离其正常位置。
position: absolute: 绝对布局，搭配top, bottom, left, right属性设置其偏移量，但是不同的是，绝对布局会脱离文档流，其偏移量是相对于最近被position的父级元素，如果找不到，则相对于body元素。(被position的元素是指position的值不是static的元素)
position: fixed: 固定布局，搭配top, bottom. left, right属性设置其偏移量，该布局也会脱离文档流，其偏移量是相对于整个浏览器窗口。即使页面滚动，其位置也不会变动.

另外一个定位属性是z-inde，如其字面意思，是对元素在z轴方向上的位置进行设置，也就是层叠顺序的设置。z-index的默认值是auto，表示该元素的层叠级别为0.通过改变元素z-index的值，可以改变其在窗口中的层叠位置。

布局

布局属性包含有: display, float, clear, visibility, overflow, overflow-x, overflow-y.
这里先对已经使用过的属性和值进行总结，其他的待用到后再回头做整理。
display属性是设置元素在窗口中如何显示，其默认值是inline.
这有一点要特别的注意，display:none会使元素隐藏，同时该元素的物理空间也不会被保留，和它不同的是visibility: hidden，该属性也会是元素隐藏，但是隐藏后，该元素在浏览器窗口中占据的位置依然存在。
另外区分下display: block, display: inline, display: inline-block。
前两个比较好理解，分别设置元素为块级元素和内联元素，后面一个意思是设置元素为内联块级元素，也就是说该元素为内联元素，但是该元素的内部对象表现为块级元素。

float的值包括none, left, right
需要注意的是，float对设置了绝对定位(position: absolute)的元素不起作用.

尺寸

外边框、内边距

margin和padding是一个复合属性，可以为其提供1~4个参数值。
当提供一个参数值时，默认将该值用于四个边
当提供两个参数值时，两个参数值分别设置上下和左右的的外边距
当提供三个参数值时，三个参数值分别对应上、左右、下的外边距
当提供四个参数值时，分别对应上、右、下、左(顺时针)的外边距

当然，你也可以对具体某个方向设置外边距和内边距

边框、背景、颜色、字体

文本

很多文本属性都可以应用于行内元素。
比如:
text-align: 可以设置文本(行内)元素的对齐方式
line-height:可以设置文本(行内)元素的行高
vertical-align: 可以设置文本(行内)元素垂直方向的对齐方式

文本方式和书写模式

列表

经常，通过多&ltul&gt和&ltli&gt的样式设置，可以将列表用于导航或目录等内容
比如:
list-style: none 可以取消列表前面的标记

表格、内容、多列、伸缩盒待以后补充

变换、过度、动画

CSS选择器

CSS利用选择器来对指定元素进行样式设置，如果想将某一样式应用于所有元素上，可以使用通配符*。
其他大体可以分为:
元素选择器、id选择器、类选择器。可以对多个选择器进行设置，每个选择器用逗号隔开。

元素选择器

根据html文档中的标签进行选择

选择器分组

用逗号告诉浏览器，规则中包含两个不同的选择器

h2, p {
    color: gray;
}

类选择器

标签增加class属性，在css中利用”.”+ 类名进行选择。

多类选择器：一个class值中可以包含多个词，各个词之间用空格分隔。

<p class="important warning">
This paragraph is a very important warning.
</p>

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

ID选择器

ID选择器使用”#”进行选择

后代选择器

后代选择器创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。如下只对h1中的em元素应用样式。

h1 em{color: red;}

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

子元素选择器

选择某个元素的子元素，用”>”进行选择.子元素选择器只对儿子元素有效果，对孙子元素无效。
与后代选择器的区别：后代选择器可以使用标签、类、id进行选择，而子元素选择器只能用标签

h1 > strong {color:red;}
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>