CSS学习笔记
层叠样式表 (Cascading Style Sheets)常用的属性。
CSS的重点和难点在：元素的位置。
语法
选择器，以及一条或多条声明。每条声明由一个属性和一个值组成。
组合选择符
后代选择器(以空格 分隔)
子元素选择器(以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号 ～ 分隔）
上、右、下、左
上、左右、下
上下、右左
伪类
伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
伪类的语法：
selector:pseudo-class {property:value;}
CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}
-
anchor伪类
a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ a:active {color:#0000FF;} /* 已选中的链接 */ -
first-child 伪类
选择父元素的第一个子元素。
p:first-child 选择器匹配作为任何元素的第一个子元素的元素 p > i:first-child 选择相匹配的所有
元素的第一个 元素 p:first-child i 选择器匹配所有作为元素的第一个子元素的
元素中的所有 元素
字体
-
font-family 属性设置文本的字体系列。
-
font-style 主要是用于指定斜体文字的字体样式属性。
正常 - 正常显示文本 font-style:normal
斜体 - 以斜体字显示的文字 font-style:italic;
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持） font-style:oblique;
- font-size 属性设置文本的大小。默认大小和普通文本段落一样，是16像素（16px=1em）。
像素
em
- font-weight 字体的粗细
盒子模型
元素的总宽度：
总元素的宽度=宽度(width)+左填充(Padding)+右填充+左边框(border)+右边框+左边距(margin)+右边距
元素的总高度：
总元素的高度=高度(height)+顶部填充+底部填充+上边框+下边框+上边距+下边距
div {
width: 300px;//内容占据的空间
border: 25px solid green;
padding: 25px;
margin: 25px;
}
300px (宽)
+ 50px (左 + 右填充)
+ 50px (左 + 右边框)
+ 50px (左 + 右边距)
= 450px
-
margin
可能的值：auto、length（使用像素，pt，em等） 、%
Margin可以使用负值，重叠的内容。
-
padding
可能的值：length（使用像素，pt，em等） 、%
Display&Visibility
-
块元素是一个元素，占用了全部宽度，在前后都是换行符。
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
-
内联元素只需要必要的宽度，不强制换行。
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
a
{
display:block;//显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
width:60px;
}
行内元素设置margin无效果。
-
可变元素(根据上下文关系确定该元素是块元素还是内联元素)：
applet ,button ,del ,iframe , ins ,map ,object , script
-
利用CSS可以摆脱上面HTML标签归类的限制，自由地在不同标签/元素上应用需要的属性。
主要用的CSS样式有以下三个：
display:block – 显示为块级元素
display:inline – 显示为内联元素
display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将所有 li 元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
span {display:block;} 把span元素作为块元素
隐藏元素 - display:none或visibility:hidden
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
Position
-
static 默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
-
relative 相对定位元素的定位是相对其正常位置。
相对定位元素经常被用来作为绝对定位元素的容器块。
h2.pos_left { position:relative; left:-20px;//从元素的原始左侧位置减去 20 像素。 } h2.pos_right { position:relative; left:20px;//向元素的原始左侧位置增加 20 像素。 } -
absolute
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
-
fixed 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。
-
sticky 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
Overflow
overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
|---|---|
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
Float
Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
清除浮动
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
CSS中所有的浮动属性：
| 属性 | 描述 | 值 | CSS |
|---|---|---|---|
| clear | 指定不允许元素周围有浮动元素。 | left right both none inherit | 1 |
| float | 指定一个盒子（元素）是否可以浮动。 | left right none inherit | 1 |
水平&垂直对齐
- 水平居中
水平居中对齐一个元素, 可以使用 margin: auto;。设置到元素的宽度将防止它溢出到容器的边缘。
元素通过指定宽度，并将两边的空外边距平均分配。
如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。
如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;
- 左右对齐（定位方式）
可以使用 position: absolute; 属性来对齐元素:
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
绝对定位元素会被从正常流中删除，并且能够交叠元素。
- 左右对齐（float方式）
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 “clearfix(清除浮动)” 来解决该问题。
-
垂直居中对齐
很多种方法，其一：
-
Padding
.center { padding: 70px 0; border: 3px solid green; } -
line-height
-
position 和 transform
-
-
水平和垂直都居中
使用 padding 和 text-align: center:
.center { padding: 70px 0; border: 3px solid green; text-align: center; }