CSS的重点整理，适合快速复习

最新推荐文章于 2022-04-11 15:23:48 发布

hy l

最新推荐文章于 2022-04-11 15:23:48 发布

阅读量178

点赞数 1

本文链接：https://blog.csdn.net/zabr1314/article/details/120461074

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS

1.选择器

1.1(*)通用选择器

可以匹配页面所有的元素

* {color:red;}

1.2(#X)id选择器

id选择器比较局限，不能重用

#container { width: 960px; margin: auto; }

1.3(.X)类选择器

类选择器的开头用.（点）进行表示

可以重用

.error { color: red; }

1.4(X)元素选择器

假如你想针对Html预定义的标签，比如类似：p,h3,em,a这些标签、

a { color: red; } ul { margin-left: 0; }

1.5(X Y)后代选择器

li a { text-decoration: none; }

经验分享: 如果你的选择器看起来像X Y Z A B.error这样就错了。问问自己是否真的需要加入这么多负荷, 这样写的可读性也太差了。还有一个需要注意的，后代元素的层级问题，可能会很深。

1.6（X>Y）子元素选择器

有时候我们并想选择所有的后代元素，而是想缩小范围，只选择一个元素的子元素，比如我们只想选择 #container>ul 定义id为container的div里的ul元素，而不是曾经更深的后代元素比如li里的ul。

div#container > ul {
border: 1px solid black;

2.属性

2.1 背景

**background-color **

设置背景颜色，颜色值通常以下面几种方式定义：
十六进制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

h1 { background-color:#6495ed; }

2.2文本

color 设置文本颜色

body{ color:gray; }

direction 设置文本方向（rtl:从右到左，ltr:从左到右，inhreit:继承）

p{ direction:rtl; }

letter-spacing 设置字符间距

line-height 设置行高

text-align 对齐元素中的文本(center:居中，right:向右对齐)

text-decoration 向文本添加修饰（overline：上划线，line-through：中划线，underline：下划线）

2.3字体

font-family 设置文本的字体系列

font-size 设置文本的字体大小

font-style 设置文本的字体样式

font-weight 指定字体的粗细

2.4链接

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  
/* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

2.5列表

list-style-image

指定列表项标记的图像

ul{
	list-style-image:url('sqpurple.gif');
}

list-style-position

指定列表项标记的位置
inside或者outside

ul {
    list-style-position: inside;
}

list-style-type

指定列表项标记的类型

2.6表格

border

表格边框

table, th, td{
    border: 1px solid black;
}

border-collapse

属性设置表格的边框是否被折叠成一个单一的边框或隔开

table{
    border-collapse:collapse;
}
table,th, td{
    border: 1px solid black;
}

3.文档流和布局

3.1文档流概念

本质为normal flow（普通流、常规流）将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素。

3.2浮动布局

float: left | right

##父子、兄弟浮动陷阱：父盒未固定高度，存在显示覆盖问题

注意：

未脱离文档流：子标签在父标签未设置高度的情况下，会撑开父标签高度
脱离文档流：不对父级的高度进行改动
不完全脱离文档流（浮动后）：不清浮动，不撑开父高度；清浮动后，撑开父高度

3.3定位布局

position属性

1.static（静态，默认值）
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
2.relative（相对）
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

以自身原有位置作为参考坐标系

3.absolute（绝对）
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

以最近定位父级作为参考坐标系

4.fixed（固定）—小广告
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。脱离文档流

以文档窗口作为参考坐标系

注意：若发生定位冲突，则左右取左，上下取上

5.z-index：设置浮动显示等级

4.内联元素（inline）和块元素（block）

4.1 内联元素（和相邻的内联元素在同一行;）

宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

内联元素主要有：
a ,**span ** img , input abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , kbd , label , q , s , samp , select , small , strike , strong , sub , sup ,textarea , tt , u , var

4.2块级元素(总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示）

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

块级元素主要有：
ul , li，h1 ，div , dl , fieldset , form , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol ,p, pre , table ,，address , blockquote , center , dir ,

4.3改变元素样式

display:block – 显示为块级元素
display:inline – 显示为内联元素
display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

5.盒

5.1盒子的大小

盒子的宽度 = 内容宽度（width） + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

盒子的高度 = 内容高度（height） + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

box-sizing属性值

5.2盒子成分分析

margin

表示盒子的外边框，他是完全透明的，开发者只可以设置它的边距

margin-top：上边距
margin-buttom：下边距
margin-left：左边距
margin-right：右边距
也可以直接使用简写属性margin同时设置四条边的宽度

##属性值的简写形式

①如果给出两个属性值，前者表示上下的属性，后者表示左右的属性。

②如果给出三个属性值，前者表示上的属性，中间数值表示左右的属性，后者表示下的属性。

③如果给出四个属性值，则表示上、右、下、左的属性。即顺时针排序。