HTML+ CSS基础学习

亦凉 2022-05-18 11:07 577阅读 0赞

在CSS中，html中的标签元素大体被分为三种不同的类型：**块状元素**、**内联元素(又叫行内元素)**和**内联块状元素**。

**常用的块状元素有：**

**常用的内联元素有：**

**常用的****内联块状元素****有：**

**块级元素、行内元素、行内块元素****特点：**  
块级元素;  
1. 总是从新行开始；  
2.高度、宽度、外边距以及内边距可控  
3. width是容器的100%  
4. 可以容纳内联元素以及其他块元素

行内元素：  
1. 和相连行内元素在一行上；  
2. 高宽无效，但水平方向的padding 、margin可以设置，垂直方向无效

行内块元素：

1. 和相连行内元素在一行上；  
2. 高可以设置宽高

注意：

1-》 linne. inline-block 可以视作为文字。  
    行高--line-height 等于盒子的高度，可以让单行文本垂直居中

2-》 只有文字才能组成段落，因此p里面不能放块级元素。同理标题标签h1等都是文字类块级标签不能放块级元素

3-》 a链接里面不能再放链接，但是可以放块级元素

# #

### 创建表格四个元素：table     tbody    th     tr  td ###

1. <table>…</table>：整个表格以`<table>`标记开始、`</table>`标记结束。

2.  tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。

3.<th>…</th>：表格的头部的一个单元格，**表格表头**

4、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

5、<td>…</td>：表格的一个单元格，一行中包含几对`<td>...</td>`，说明一行中就有几列。

表格设置居中：align：center；  
单元格与单元格之间的距离：cellspacing  
单元格内容与它所在边框之间的距离：cellpadding

合并单元格（上到下，左到右）：  
行rowspan="要删除的个数"  
列colspan="要删除的个数"

小总结：border是HTML属性，只能设置宽度值，例如border="1"；而1px solid red为样式属性值，需要放到style属性值里，例如style="border:2px solid green"

--------------------

### caption标签，为表格添加标题和摘要 ###

**摘要**

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

`<table summary="表格简介文本">`

**标题**

用以描述表格内容，标题的显示位置：表格上方。

### 权重大小： ###

！ important (+∞) >  行内样式(1000)  >  id选择器(0100)  > 类/伪类选择器(0010)  >  标签选择器 (0001 ) > \*（0000）

注意：

1.权重相同 ，就近原则

2.权重可以叠加 0001+0001 =0002

### background： ###

background-color :

background-image:url ( ../...);

background-repeat: repeat / no-repeat / repeat-x /repeat-y  (平铺方式）

background-position : x y 轴；（left right center ； top  center  bottom）设置单边时另一边默认居中；

background-attachment：scorll / fixed （背景图随对象内容滚动还是固定）

一般写法：

background ：背景颜色   图片地址（url）背景平铺  背景滚动  背景位置  背景透明度

注意：

多背景时用逗号隔开。若是重叠设置不同的position，left / right /，top /bottom；

多背景设置背景颜色时background-color要设置到background 下面，防止覆盖。

背景大小-background-size：

1. 设置为 px 或百分比  ，只设置一边时，另一边auto ，自动约束比例

2. 设置为cover ，占满整个背景大小，

3.设置为 contain ，以长的那边为准，等于背景的某一边大小，约束比例

用法：设置backgroun-size大小为原来css精灵图数值的一半。

background-position：先处理精灵图，选中整个精灵图，将图像大小设为原来的一半（勾选缩放样式，约定比例），再用选择工具勾选背景图片需要的大小，切图，回车。移动切图到想要的精灵图上，写对应的x y轴。

background: url(images/ctrip.png) no-repeat 0 -234px;

background-size: 104px;            //二者先后顺序不可调？？二者不可分开写？？？  待考察。

背景渐变（没有浏览器支持，必须加前缀）

background： \-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)

background: -webkit-linear-gradient(top, red, green);

:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色 位置....)

background: -webkit-linear-gradient(top, red 0%, green 50%, blue 100%);

**常用的前缀列表：**

<table> 
 <thead> 
  <tr> 
   <th>前缀名称</th> 
   <th>浏览器内核</th> 
   <th>浏览器</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>-webkit</td> 
   <td>Webkit</td> 
   <td>Chrome、Safari</td> 
  </tr> 
  <tr> 
   <td>-moz</td> 
   <td>Gecko</td> 
   <td>Firefox</td> 
  </tr> 
  <tr> 
   <td>-o</td> 
   <td>Presto</td> 
   <td>Opera</td> 
  </tr> 
  <tr> 
   <td>-ms</td> 
   <td>Trident</td> 
   <td>IE</td> 
  </tr> 
 </tbody> 
</table>

### 内边距padding： ###

1.当设置了宽高之后，padding 会撑大div盒子；

若想盒子大小固定为某值，改变宽高大小（预期盒子大小 - 2× padding）；

### 外边距margin： ###

1.行内元素是没有上下外边距的

2.两个垂直元素设置上边设置 margin-bottom 、下边margin-top， margin会合并，以大的数值为准。

3. 嵌套块级元素的垂直外边距合并

设置小div的位置：1.给大div设置padding  /border

2.给小div设置margin-top   --->垂直方向会导致塌陷问题：父元素会被一起移动（图二）

解决办法：2.1      给父元素的div设置1px 的上边框或上内边距

2.2     给父元素 添加overflow：hidden

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70][]  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 1][]

### 什么时候用内外边距？ ###

答：可以混用。但建议 padding  --> margin

1.margin 会有外边距合并，ie浏览器下bug多

2.padding会影响盒子大小，需要进行宽高减计算。

### 盒子阴影box-shadow： ###

box-shadow：水平阴影 垂直阴影  模糊距离  阴影尺寸（影子大小）   阴影颜色  内/外阴影

### 浮动 float:   ###

目的让块级元素保持在同一行上。

1.浮动不会超过padding

2.浮动影响的是后面的盒子，漂浮在后面元素上面。所以定义浮动了的盒子，后面的盒子也必须加浮动才能把保持在同一行

3.浮动让元素默认转为行内块元素

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 3][]                       ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 4][]

注意：float 不会影响字体 。

### 清除浮动 clear： ###

目的：解决父级元素没有设置高度时因为子集浮动造成内容高度为空的问题。

原因：当 大盒子没有设置高度时 ， div1与div2设置float后，浮动让div1与div2不占大盒子位置，因而大盒子内容会空，div3会跑到图二的位置。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 5][]           ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 6][]

清除浮动的方式  (自动检测子类高度)：

1. 添加额外标签  ：在设置浮动的子类最后一个元素后面添加一个标签；

一般是< div style="clear : both" > </div >

2. 给父类添加： overflow ：hidden /auto /

3. 给父类添加 after 伪元素：        （网易）

.clearfix :after \{ content:" " ;  display : block ; height: 0;  clear: both ; visibility: hidden; \}

.clearfix \{ \*zoom :1 ; \}  (针对IE6.7浏览器 )

4.before 、after双伪元素              (腾讯、小米)

.clearfix:before  , .clearfix:after\{  content;"";   display:"table"; \}

.clearfix:after \{ clear :both ;\}

.clearfix \{\*zoom :1 ;\}      (针对IE6.7浏览器 )

### 定位 position : ###

目的：移动位置，让盒子漂浮到我们想要的位置。

一、边偏移

top  / bottom  /  right  /left

优先级:

*  left  > right
 *  top > bottom

二、定位模式

1.  静态定位 static，（默认模式 ）   唯一用处：当设置了对应定位模式 ，用来取消定位；

2. 相对定位 relative  ；以自己标准流的形式左上角为基点移动 ，脱标，占着原来位置。

3. 绝对定位 absolute ；以document为参照进行定位,完全脱标，与浮动一样不占位置

如果父类没有定位（绝对相对），子类定位了，则子类还是以document为参照定位。

如果父类或再上一级类有定位，根据最近的定位为参照———（**已定位父元素的属性 值必须为                                                            relative absolute**）

（如果子类绝对，父类也绝对，由于绝对不占位置，所以父类会飘浮起来，父类的兄弟类会接替原                                                 来父类的位置）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 7][]

4. 固定定位 fixed （特殊的绝对定位）； 只以document为参照进行定位,  完全脱标 ，不占位置。对布局没有影响。

### 定位模式转换 ###

与 flaot  一样， 元素加了绝对定位与固定定位后 会默认转换为行内块元素（宽度高度与内容有关）

解决当内容为空时办法：加宽高 width：100%；height：xxpx；

![20190808000819182.png][]                      ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 8][]

图一  只设置了hegiht：100px；                                                          图二 加上position：absolute后，div盒子里没有内容

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 9][]

图三   加上width：100%之后

--------------------

绝对定位的盒子 水平/居中 对齐：

（.元素加了浮动、定位后，margin ：0 auto会 失效；）

1. 首先left ：50%；

2. margin-left ：-25px ; (自身盒子外边距的一半)

![20190807173451120.png][]       ![20190807173528123.png][]          ![20190807173616697.png][]

图一（初始位置）                  图二（left ：50% ）             图三（ margin-left ：-25px）

### 叠放次序 z-index: ###

调整定位元素的层级，值越大,元素显示越靠前，该属性的默认值为0,当元素的z-index 相同时,遵循后来居上的原则(后定位的元素会盖住先定位的元素)。

### 设置透明度： ###

1.设置盒子透明度：opacity      取值范围: 0~1

IE 6 不识别opacity属性,是通过 filter属性来设置透明度的

语法结构:

filter:alpha(opacity=50);      取值范围 0~100;

2.设置背景透明度 ： background-color: rgba(0,0,0,0.5);

### 让div盒子在一行的方式： ###

1. display：inline-block   （缺点与前一个元素会有距离）

2.display ： float ；（重点）

### div 盒子居中方式： ###

1. margin ：0  atuo； （水平居中，上下0  左右auto ；必须设置宽度）

--》margin： auto  ；垂直方向不起作用，所以在水平方向也是居中；

文字对齐：

<div> <span> <span>  文字</div>   span内容与div的文字对齐

display：inline block；  与vertical-align：middle ；搭配

元素隐藏的

document.getElementById("div").style.display = " none";   //不占位

document.getElementById("div").style.visibility = " hidden";   //设置可见性为hidden

document.getElementById("div").style.opacity =  0 ;                 //设置透明度为0

.style.height = 0;             //设置宽高

.style.border

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190806160135437.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 1]: /images/20220518/29d1e3bb5978474ab648d19c16a8ddfa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 2]: /images/20220518/0f91dfd4f8ad4621ac35bc7b125bb539.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190806171836795.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 4]: /images/20220518/0ac309312d6d4e119cdbd31c6bf8281a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20190807144801866.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 6]: /images/20220518/8400f5506ff94770866a596c2a7246cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 7]: /images/20220518/cddbfd50ddd749d19146d05362fa9fc8.png
[20190808000819182.png]: https://img-blog.csdnimg.cn/20190808000819182.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 8]: /images/20220518/2c6da5fec0e449a2bba32a11f5238509.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk4MDA4Nw_size_16_color_FFFFFF_t_70 9]: /images/20220518/c93cad3642804c42a7a0842a14bd4b1e.png
[20190807173451120.png]: https://img-blog.csdnimg.cn/20190807173451120.png
[20190807173528123.png]: https://img-blog.csdnimg.cn/20190807173528123.png
[20190807173616697.png]: /images/20220518/aa7db41dd96a4816b85990218669da95.png