周末总结2

CSS基础

#  定位

视觉格式化模型，大体上将页面中盒子的排列分为三种方式:

1. 常规流

2. 浮动:float

3. 定位:position

定位:手动控制元素在包含块中的精准位置

涉及CSS属性:position

## position

- 默认值:static,静态定位

- relative: 相对定位

- absolute: 绝对定位

- fixed: 固定定位

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

定位元素会脱离常规流(相对定位除外)

一个脱离了文档流的元素:

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

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

## 相对定位

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

可以通过四个CSS属性设置其位置:

- left

- right

- top

- bottom

盒子的偏移不会对其他盒子造成任何影响。

如果出现矛盾时它以左边和上边为准

## 绝对定位

1. 宽高为auto,适应内容

2. 包含块变化:找祖先元素中第一个定位元素，该元素的填充盒为其包含块.若找不到，则他的包含块为整个网页(初始化包含块)

## 固定定位

其他情况和绝对定位完全一样。

包含块不同: 固定为视口 (浏览器的可视窗口)

 

## 定位下的居中

某个方向居中:

1. 定宽(高)

2. 将左右 (上下) 距离设置为0

3. 将左右 (上下) margin设置为auto

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

## 多个定位元素重叠时

堆叠上下文

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

只有定位元素设置z-index有效

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

## 补充

- 绝对定位、固定定位元素一定是块盒

- 绝对定位、固定定位元素一定不是浮动，浮动会被强制转换为none

- 没有外边距合并

## 二级菜单

### 隐藏二级菜单

给二级菜单display属性设置为none,在其hover时将display设置为block

## 透明

每个颜色都具有透明通道,0 ~ 1  （1是完全不透明，0是完全透明，可取小数）

1. rgba(红、绿、蓝、alpha)

alpha表示透明通道

2. hex: #红绿蓝透

# 更多的样式

## 透明度

1. opacity:他设置整个元素的透明度

2. 在颜色位置设置alpha通道(rgba)

## 鼠标

使用cursor设置

可以将鼠标样式设置为图片，但图片的扩展名为.ico

```

    cursor:url("img/2.ico"),auto; **auto表示如果图片格式浏览器识别不了，就用默认样式 **

```

## 盒子隐藏

1. display:none,不生成盒子

2. visiblity:hidden,生成盒子，只是从视觉上移除盒子，盒子仍然占据空间。  默认值为visible

## 背景图

### 和img元素的区别

img元素是属于HTML的概念

背景图属于CSS的概念

1. 当图片属于网页内容时，必须使用img元素

2. 当图片仅用于网页美化时，必须使用背景图

 

### 涉及的CSS属性

1. background-image

eg: background-image:url(../imgs/2.ico);

 

2. background-repeat (为速写属性){background-repeat-x或background-repeat-y}

   设置重复次数  

默认情况下，背景图会在横坐标和纵坐标中进行重复

3. background-size

一般图片大小不变，通过background-size设置尺寸

预设值:contain、cover,类似于object-fit

数值或百分比

contain: 是图片完整显示且不改变比例

cover: 保证图片撑满区域且比例不变

百分比相对于盒子的大小，前为横向，后为纵向

4. background-position

设置背景图的位置。

预设值:left、bottom、right、top、center

数值或百分比(百分比不常用)

雪碧图 (精灵图)  (spirit)

5. ackground-attachment

通常用他控制背景图是否固定

6. 背景图和背景颜色混用

在没有背景图的地方就会使用背景颜色

7. 速写属性

background   内部先写position/size(这两个顺序与格式必须是这样)

HTML进阶

# iframe元素

通常用于在网页中嵌入另外一个网页

iframe 可替换元素

1. 通常是行盒

2. 通常显示的内容取决于元素的属性

3. CSS不能完全控制其中的样式

4. 具有行块盒的特点

# 在页面中使用flash

在网页上嵌入flash文件

object元素

```

  <object data="" type=""></object>

```

data表示数据路径   type表示嵌入资源的类型(用标准格式MIME)

MIME:多用途互联网邮件类型:

比如，资源是一个jpg图片，MIME:image/jpeg

embed元素

他们都是可替换元素

# 表单元素

一系列元素，主要用于搜集用户数据

## input元素

输入框

- type属性: 输入框类型

常见：

type:text, 表示普通文本输入框

type:password, 密码框  (输入内容后会自动变成:...)

type:date, 日期选择框，兼容性问题

type:search, 搜索框，兼容性问题

type:number, 数字输入框，兼容性问题 ,可设置最大值、最小值、步径

type:checkbox, 多选框  在内部加name属性,对多选框进行分组   默认选中: 元素加checked属性

type:radio, 单选框   默认选中: 元素加checked属性

type:file, 文件选择

不常见：

type:range, 滑块  可设置最大值、最小值

type:color, 颜色选择器

- value属性: 输入框的值

- placeholder属性: 显示提示的文本，如果文本框没有内容时显示,点一下提示文本还在

  可通过伪元素选择器 ::placeholder进行更改样式

#### input元素可以制作按钮 (快过时)

以下取值时可表示按钮

type:reset  重置按钮

type:submit  提交按钮

type:button  普通按钮

 

## select元素

下拉列表选择框

select:表示下拉列表

option:表示下拉列表的选项

通常和option元素配合使用

默认中哪个，就在元素中加属性 selected (布尔属性)

多选，加属性 multiple (布尔属性)   选择时按住Ctrl或Shift键用鼠标选择

## textarea元素

文本域，多行文本框

属性:

cols="30" rows="10"

表示英文30列，10行

无空白折叠

## 按钮元素

button

type属性: reset、 submit、 button, 默认值时submit

# 表单状态

readonly属性: 布尔属性，是否只读，不会改变表单显示样式

disabled属性: 布尔属性，是否禁用，会改变表单显示样式

可通过伪类:disable 设置此时显示样式

# 配合表单元素的元素

## label元素

普通元素，通常配合单选和多选框使用

可以使点击选项值时也能被选中

-显示关联

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

-隐式关联

## datalist

数据列表

该元素本身不会显示到页面，通常与普通文本框配合

起提示作用

 

## form元素

通常情况下，会将整个表单元素，放置在form元素内部，作用是当提交表单时，会将form元素内部的表单内容以合适的方式 提交到服务器。

form元素对开发静态页面没有什么意义。

action属性：表示把表单提交给谁  不写会提交给当前页面

method属性： 表示提交方式  属性值：GET 或POST

***给服务器传输数据，有name属性才能提交数据，提交的是value值， 文字是给用户看的**

## fieldset元素

表单分组

子元素：legend元素，表示分组标题

# 美化表单元素

## 新的伪类

1. focus

元素聚焦时的样式

 

tabindex属性可以设置聚焦顺序  (按Tab键可按照顺序切换页面聚焦)

outline-offset: 表示外边框偏移量

2. checked

单选框或多选框被选中的样式

## 常见用法

1. 重置表单元素样式

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

resize属性:

- both:默认值，水平竖直都可调整

- none : 水平竖直都不可

- horizontal : 水平可

- vertical :竖直方向可以调整尺寸

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

        /* 方式一: padding */

        /* input{

            padding:0 10px;

        } */

        /* 方式二: text-indent */

        input,textarea{

            text-indent:each-line;

        }

4. 控制单选和多选的样式

##  表单练习

border-radius为速写属性

    border-top-right-radius:0;

    border-bottom-right-radius:0;

溢出的部分就算设置了背景颜色也无法遮挡位于他后边的元素

overflow属性:溢出部分处理

cursor属性: 设置鼠标样式