前端入门到熟悉day02

01文本域和select-option

select 元素可创建单选或多选菜单。

<select&> 元素中的 <option> 标签用于定义列表中的可用选项。

 

02表格1

表格的基本构成元素最少需要三个 table tr td

表格元素的汇总：

table：表示表格

thead:表示标题行

tbody:表示表格的主体

tfoot: 表示表脚

tr:表示一行单元格

th:表示标题行单元格 实际作用就是将内部的文字居中并且加粗

td:表示一列

col：表示一列

colgroup:一组列

caption 表示表格标题

rowspan colspan合并行和和并列

 

 

03表格2

细线表格border-collapse:collapse;

表格的外边框border: 1px solid red;

标题的方位caption-side: bottom;

表格的拉伸table-layout:auto;

空白的单元格不显示 配合separate使用 empty-cells: hide;

表格的内边框table tr th ,table tr td{border: 1px solid red;}

 

 

04css书写方式

h1     {font-size: 16px;}

选择器   属性名称    属性值

1.内联样式 <p style="color: pink;">dsadsadad</p>

2.内部样式表 <style>

span {

color: blue;

}

</style>

3.外部样式 在头部通过link标签引入css样式表

优先级：内联样式>内部样式表>外部样式

05css基本选择器

* 通配符选择器

P span div 标签选择器 页面上所有同类型的标签都会被作用到

.class类选择器通过具体的calss类名添加样式一个标签可以拥有多个类名可以同时作用

# id选择器 id就像我们的身份证 唯一的 不能多个id同时作用

 

06组合选择器

后代选择器（以空格分隔） 包括儿子和孙子

子元素选择器 （以大于号链接） 只认儿子

相邻兄弟选择器（以加号链接） 最近的那个兄弟

后续兄弟选择器（以波浪线链接）

 

07盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

08盒子模型误区

你给普通的盒子添加border和padding 普通的盒子的宽度是会撑大的

如果你想保持普通的盒子的宽度不变 又能够添加border和padding 就要给盒子添加box-sizing: border-box;

 

09float布局

float 属性定义元素在哪个方向浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

 

10导航条制作

display: inline-block;  因为内联元素 不支持宽高 不完全支持padding和marging方位 只有转化成块级元素才能支持 display:block；

 

11position-relative

1.标准流布局

2.浮动布局 float

3.定位布局 position

4.flex布局 弹性布局 弹性盒子

5.百分比布局

 

position

1.static :默认值 元素按照正常文档流排列

2.relative 相对定位 相对于上面最近的元素进行定位 元素仍然处于正常的文档流当中

使元素具有层级关系

 

1. position-absolute

position:

absolute 绝对定位

元素将会脱离正常的文档流 相对于可视窗口去定位

拥有层级关系 \

 

relative和absolute的根本区别:

relative属性处于正常的文档流中相对于最近的元素的元素去定位

absolute属性设置了就会脱离正常的文档流 相对于整个网页定位确立定位的对象

 

13relative和absolute同时使用

如果父级元素使用了相对定位relative

子级用了这个绝对定位absolute 子元素会相对于父元素进行定位

 

14position-fixed

position:fixed 固定定位

脱离正常的文档流 相对于整个可视区域进行定位 拥有层级关系

最常见的地方：对联广告 登录弹窗 顶部导航条或者搜索框

 

15position-inherit

position:inherit;继承   儿子继承老爸的定位元素

16z-index

z-index : 指定一个元素的堆叠顺序

只服务于有定位属性的元素 position

z-index 大的元素会覆盖z-index小的元素

z-index为auto的元素不参与层级比较（默认）

z-index为负值 元素就会别普通流中的元素覆盖

z-index 遵循后来居上的原则 父元素的层级无论多大 子元素的层级无论多小都比父元素层级要高一点 加入了有z-index的父元素，无论子元素的z-index多小 他都比父元素相邻的兄弟元素的z-index要高