CSS基础知识笔记

记录一下自己在项目中用到的一些css和css3属性。

一、布局

float（浮动）

浮动之前的元素不会受到影响，浮动之后的围绕它。
float：right，left，none，inherit。右，左，无，继承父类，
clear：right，left，none，inherit。清除对应的浮动

position（定位）

1. static 定位：默认，即没有定位，不会受到 top, bottom, left, right影响；
2. fixed 定位：位置相对于浏览器窗口固定，即使窗口是滚动的它也不会移动；
3. relative 定位：相对其正常位置。其正常位置不会改变；
4. absolute定位：相对于最近的已定位父元素；
5. sticky定位： 基于用户的滚动位置来定位，在 position:relative 与 position:fixed 定位之间切换。

top，right，bottom，left，当前元素与父元素顶部、右侧、底部、左侧的距离值。需要配合position：absolute或者relative使用。
z-index：指定了一个元素的堆叠顺序。

overflow（溢出）

值	描述
visible	默认，超出部分溢出
hidden	超出部分隐藏
scroll	滚动条
auto	没超出正常显示，超出显示滚动条
inherit	继承父类

对齐

• 水平对齐
  元素：指定宽度，使用margin:auto;
  文本：text-align:center;
  图片：display:block,margin:auto;
• 垂直对齐
  设置容器上下padding 相同
  使用 line-height=height
  多行文本可使用 vertical-align: middle;
• 左右对齐
  使用position: absolute; 属性来对齐元素:
  也可以使用 float 属性来对齐元素:

display（显示）

值	描述
inline	改为内联元素。内联元素：不强制换行，宽高内外边距不可变
block	改为块级元素。块级元素：自动换行，宽高内外边距都可变
inline-block	内联块元素，表现为同行显示并可修改宽高内外边距

弹性布局

display:flex;

• justify-content: flex-start | flex-end | center | space-between | space-around;设置弹性盒子元素在主轴（横轴）的对齐方式。
• align-items: flex-start | flex-end | center | baseline | stretch;弹性盒子元素在垂直方向上（纵轴）的对齐方式。其中align-items属性用于弹性容器
• align-self: auto | flex-start | flex-end | center | baseline | stretch;align-self用于弹性项目。
• flex-direction:row|row-reverse|column|column-reverse;设置方向，行列以及反转。
• flex:1;均匀分配元素。

二、盒子模型

Margin：外边距；
Border：边框；
Padding：内边距
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
例：

//总元素的宽度=100px+20px*2+20px*2+20px*2
div {
    width: 100px;
    padding: 20px;
    border: 20px solid red;
    margin: 20px; 
}

margin / padding

margin-[上右下左]： 单独改变元素的上，右，下，左边距。
margin简写：

1. margin:1px 2px 3px 4px 设置上，右，下，左边距1px 2px 3px 4px；
2. margin:1px 2px 3px 设置上边距1px，左右2px，下边距3px；
3. margin:1px 2px 设置上下边距1px，左右边距2px；
4. margin:1px 设置上下左右边距1px

padding和margin类似，padding是内边距，margin是外边距。

border

1. border-[上右下左] 或 border-[宽度 颜色 样式]
2. border-[宽度 颜色 样式]-[上右下左]
3. border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
4. 简写：border：width style color。

三、选择器

选择器	例子	说明
element,element	div,p	并集选择器，选择所有div元素和p元素
element element	div p	交集选择器，选择div元素内的所有p元素
element>element	div>p	儿子选择器，选择父级是div的p元素，区别于交集：不能隔代
element+element	div+p	兄弟选择器，选择所有紧接着div元素之后的p元素
[attribute]	[target]	选择所有带有target属性元素
[attribute=value]	[target=-blank]	选择所有使用target="-blank"的元素
[attribute~=value]	[title~=flower]	选择标题属性包含单词"flower"的所有元素
[attribute|=language]	[lang|=en]	选择 lang 属性以 en 为开头的所有元素
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择活动链接
:hover	a:hover	选择鼠标在链接上面时
:focus	input:focus	选择具有焦点的输入元素

四、颜色和背景

颜色

• 十六进制 - 如："#ff0000"
• RGB - 如：“rgb(255,0,0)”
• 颜色名称 - 如：“red”

背景

• 色彩 background-color: #FFFFFF;
• 图片 background-image: url();
• 重复 background-repeat: no-repeat;
• 滚动 background-attachment: fixed;(固定) scroll;(滚动)
• 位置 background-position: left(水平) top(垂直);
• 简写方法 background:#ffffff url(‘img_tree.png’) no-repeat right top;

五、文本

属性	值	描述
text-overflow	ellipsis clip	三个点 剪裁
text-decoration	overline line-through underline none	文本装饰，线
text-align	center right justify	对齐方式

六、其他

鼠标cursor

cursor:default 箭头 | pointer 一只手 | move 移动 | text 文本;

!import

设置优先级