css复习笔记（二）

css复习笔记（二）

七.常见的样式声明

1，Color 元素内部的文字颜色，预设值：定义好的单词，一般用三原色色值（光学三原色，红绿蓝）用0-255之间的数字来表达颜色rgb表示法rgb（123 23 33）经常使用hex（16进制）表示法，常见的，淘宝红#ff4400，黑色#oooooo，白色#ffffff ，红#ff0000，绿#0000ff，蓝#f0f，灰色#ccc，

2，Background-color元素背景颜色

3，font-size元素内部文字尺寸大小 单位有两种。Px（像素）文字的高度占多少个像素，em是相对单位，相对于父元素的字体大小，如果父元素没有字体大小，则使用基准字号

4，font-weight文字粗细程度，可以取数字，或者预设值普通值，加粗bold，normal正常不加粗

5，Font-family 文字类型，必须用户计算机中存在这个字体，所以可以多写几种字体，sans-self，非称线字体，这个比较万能

6，Font-style 字体样式，通常用它设置斜体>i元素默认斜体，在实际使用中，通常用他表示图标icon >strong重要元素 ，默认加粗 em 强调元素，默认斜体

7，Text-decration文本修饰，为文本加线 line-thought 在文字中间加线 over-line在文字顶部加线 wuder-line在文字底部加线（a超链接也是这样） del元素是废弃的元素，也有线，默认 s元素过期的内容，用于原价和现价的区别 可以用none没有加线

8，Text-indent，首行缩进，可以设置像素

9，line-height行高，每行文本的高度，设置行高为容器的高度可以垂直居中（单行文本），一般设置相对高度直接写数字，表示相对于当前文字的倍数，如1.5，很少用em

10，Width宽度

11，Height高度

12，Letter-space文字间隙，可以设置像素或者em

13，text-align 元素文字内部的水平排列方式

八、常规流

盒模型是规定单个盒子的规则

视觉格式化模型（布局规则）：页面中多个盒子排列规则

有三种：常规流 浮动 定位

常规流布局，文档流，普通文档流，常规文档流

所有元素，默认情况下，搜属于常规流布局

总体规则：块盒独占一行，行盒水平一次排列

****包含块****（containning block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域。

绝大部分情况下，盒子的包含块是其父元素的内容盒。

块盒规则

1，每个块盒的总宽度，加起来必须等于父元素的内容盒，宽度默认值是auto，margin的取值也可以是auto，默认0，auto可以将剩余空间吸收掉。Width的吸收能力强于margin

若宽度边框，内边距，外边距计算后还有剩余空间，该剩余空间被margin-right全部吸收

在常规流中，块盒在其包含块中居中，可以定宽，然后左右，margin设置成为auto

2，每个块盒垂直方向上的auto值

Height：auto，适应内容高度

Margin：auto 0、

3.百分比取值

Padding，宽，margin可以取值为百分比

所有百分比相对于包含块的宽度（高度和宽度都是相对宽度）

包含块的高度取决于子元素的高度，这种情况设置百分比无效

包含块的高度不取决与子元素的高度，百分比相对于父元素高度

4上下外边距的合并

两个常规流的块盒上下外边距的相邻会进行外边距的合并。

两个外边距取最大值，如果要取消在中间加东西，

九、浮动

应用场景

1，文字环绕

2，横向排列（也可以使用行块盒）

浮动的基本特点

修改float属性

Left：左浮动，元素靠上靠左，

Right：右浮动，元素靠上靠右

默认值为none，就是常规流

1，当一个元素浮动后，元素必定是块盒，更改display属性为block

2，浮动元素的包含块盒常规流一样，为浮元素的内容盒

盒子尺寸

当宽度为auto时，适应内容宽度，不是吸收剩余空间

当高度一样时，和常规流一样，适应内容高度

Boder内边距，百分比设置和常规流一样

Margin为auto时上下左右都为0

盒子排列规则

左浮动的盒子靠左靠上排列

右浮动的靠右靠上排列

浮动盒子在包含块中无视常规流的盒子，相对于浮动盒子在天上，常规流盒子在地上

行盒在排列时会避开浮动盒子

如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字（叫做匿名行盒）若要设置左边宽度设置图片的marginleft或者bottom

外边距合并不会发生

高度坍塌

原因，常规流盒子的自动高度适应内容，在计算事不会考虑浮动盒子

解决方法，清除浮动，涉及css属性，：clear

默认值：none

left：清除左浮动，该元素必须出现在前面所以左浮动元素的下方

Right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方

Both：清除左右浮动，该元素必须出现在前面所有左右浮动盒子的下方

利用chearfix解除高度坍塌

十、定位

定位：手动控制元素在包含块中的精准位置 一般用在细节的地方

涉及css属性，position

Position属性

默认值：static，静态定位（不定位）

Relative：相对定位

Absolute：绝对定位

Fixed：固定定位

一个元素、只要position的取值不是static，认为该元素是一个定位元素。

定位元素会脱离文档流，（相对定位除外）

一个脱离了文档流中的元素：

1文档流的元素摆放时，会忽略脱离了文档流的元素。

2文档流中元素计算高度时会忽略脱离了文档流的元素

相对定位

不会导致元素脱离文档流，只是让元素在原来位置上进行偏移

可以通过四个css属性对其位置进行偏移 ：left right bottom top（出现矛盾时，以左边和上边为主）

相对定位下盒子的偏移不会对其他的盒子造成影响

Absolute绝对定位

宽高为auto，适应内容

包含块变化：找祖先元素中第一个定位元素，该元素的填充和为包含块，若找不到则整个网页为包含块。

关键在于找到绝对定位的包含块，

固定定位 fixed

其他情况和绝对定位完全一样，包含块不同，固定为视口（浏览器的可视窗口）就是相对位置是相对于视口的

居中

定位下的居中

某个方向的居中

1，定宽（高）

2，将左右（上下）距离设置为0

3，将左右（上下）margin设置为auto

绝对定位和固定定位中，margin设置为auto会自动吸收剩余空间

多元素重叠时

堆叠上下文

设置z-index，通常情况下，值越大，越靠近用户，

只有定位元素设置有效

z-index可以是负数，如果是负数，则遇到常规流，浮动元素，则会被其覆盖

绝对定位，固定定位一定是块盒

绝对定位，固定定位元素一定不是浮动

没有外边距合并

十一、iframe元素

在页面中去嵌入另外一个页面

iframe属于可替换元素，是行盒

Css不能完全控制其中的样式

具有行块盒的特点

在页面中使用flash

Object 嵌入对象

Embed嵌入

他们都是可替换元素

Mime多用途互联网邮件类型：通过一个文本来确定资源的类型

Param name 参数，未知信息

十二、表单元素

主要用于收集用户数据 写在p里面

Input元素，可替换元素，可以与用户交替

type输入框

1，Type：输入框类型,可以使用一下元素 input type=“元素属性”

Password。可以使用密码框

Date：日期选择框，但是旧的浏览器不兼容

Search：手机内的搜索框，

Range：滑块，

Color：颜色选择

Number：数字，可以设置最小和最大值，staple是bujing

Checkbox：多选框

Radio：单选框，要做特别提示

Int在HTML5之前可以制作按钮

当type值为rest重置按钮，button普通按钮，submit提交按钮，input时可以为按钮

要配合js才有作用

Select下拉列表

下拉列表元素，里面写option元素及内容,3Multiple：多选元素

Value：输入框的值

Placeholder：显示提示的文本，文本框没有内容时显示，输入内容时取消

Textarea元素

（属于可替换元素，行盒），没有空白折叠，可以写空格

多文本，多行文本框 clos属性行数，rows列数

建议使用css来写

按钮元素button

尽量使用，比input好

Type属性：rest，submit提交，button，和input一样

配合表单元素使用的元素

Label元素

表示一个表单元素的标签。

通常配合单选框和多选框来使用，就是点击按钮和文字也能选中

显示关联。

可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素id的值

隐式关联

Datelist元素：数据列表

不会显示在页面上，通常配合文本框使用，即输入选项时提醒的文字

使用的比较少

Form元素

Form action=“，，，服务器网址”

通常，会将整个表单元素，放置form元素的内部，作用是当提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器、目前对于静态页面没有什么帮助。相对于静态页面的div

Fieldset元素（多个字段的集合）

表单分组，

美化表单元素

新的伪类

Focu：元素聚焦，鼠标滑到时聚焦，一般浏览器有默认聚焦，可以设置为none后设置自己想要的样式

Checked：单选或者多选框被选中的样式

常见用法

1重置表单元素样式

2设置textarea是否允许调整尺寸

设置css属性resize：

both，两个方向都可以调整尺寸

None，不能调整尺寸

Horizontal，水平方向可以调整尺寸

Vertical，垂直方向可以调整尺寸

3文本框边缘到内容的距离

使用paddding，text-indent（首行缩进）

4控制单选和多选的样式（重点），就是把默认浏览器的按钮隐藏，自己加一个按钮元素

十三、表格元素table

在css技术出现之前，网页通常使用表格布局

一般在后台管理系统中会使用

前台：面向用户

后台：面向管理员，对界面要求不高，对功能要求高。

表格不在适用网页布局，原因表格渲染速度过慢，嵌套过多，代码多

表格：table

表格标题：caption，默认居中，可以加h元素其他表头等可以省略

表头：thead

表格主题：tbody

表尾：tfoot

表行rh

标题单元格th

单元格td

相邻的两个边框有空隙：

border-collapse元素cllapse两个表格合并separate分离（默认）

表格中单元格的合并，把多余删除，用colspan4合并行，

Tthead tr

background设置背景颜色

隔行变色，nth-child（odd）