html+css总结经验

最新推荐文章于 2020-12-20 02:44:27 发布

飞行指挥家

最新推荐文章于 2020-12-20 02:44:27 发布

阅读量217

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/pengji123456/article/details/110914906

版权

一、html标签

基本
<html>…</html>      定义 HTML 文档

<head>…</head>   文档的信息

<meta>                    HTML 文档的元信息

<title>…</title>        文档的标题

<link>                      文档与外部资源的关系

<style>…</style>    文档的样式信息

<body>…</body>   可见的页面内容

文本
<h1>...</h1>               标题字大小（h1~h6）

<b>...</b>                   粗体字

<strong>...</strong>   粗体字(强调) 

<i>...</i>                      斜体字 

<em>...</em>              斜体字(强调)

<center>…</center>   居中文本

<ul>…</ul>                 无序列表 

<ol>…</ol>                 有序列表

<li>…</li>                    列表项目

<a href=”…”>…</a>    超链接

<font>                         定义文本字体尺寸、颜色、大小

<sub>                         下标

<sup>                         上标

<br>                           换行

<p>                            段落

图形
<img src=’”…”>   定义图像

<hr>                   水平线

 
表格
<table>…</table>   定义表格

<th>…</th>            定义表格中的表头单元格

<tr>…</tr>             定义表格中的行

<td>…</td>           定义表格中的单元

其它
<form>…</form>    定义供用户输入的 HTML 表单

<frame>                 定义框架集的窗口或框架

二、css样式类型，分为三种

1、标签选择器
语法：
标签{
    属性：属性值；
}
不需要调用，直接创建标签就能使用
2、class选择器
语法：
. 类名{
      属性：属性值；
}
调用：在需要使用的地方做为属性调用（class=类名）
3、id选择器
语法：
#名称{
     属性：属性值；
}
调用：在需要使用的地方做为属性调用（id=名称）

常用的样式属性
1、文本属性
font-size：字体大小
font-family：字体类型
font-style：字体样式
color：字体颜色
文字水平居中：text-align:center;
单行文本垂直居中：line-height
标签水平居中：margin:0 auto;
2、背景属性
background-color：背景颜色
background-image：url('图片地址')背景图片
3、边框属性
border:2px solid #000;
border-top:2px solid #000;
solid是实线 dashed虚线
4、超链接样式
a:link初识状态
a:visited 访问过后的
a:hover鼠标经过
a:active鼠标点击的一瞬间

margin和padding几个值各代表什么意思？

margin-left 左外边距 margin-riht右外边距 margin-top上外边距margin-bottom下外边距

padding-left 左内边距 padding-right 右内边距 padding-top 上内边距 padding-bottom上内边距

margin的合并和塌陷，如何解决？

margin的合并：

原因：

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和

取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷)。

解决：

尽量给只给一个盒子添加margin值。

margin塌陷：

原因：

父元素与子元素都有上外边距时，此时父元素会塌陷较大的外边距值

解决：

1.给父元素添加上边框

2.给父元素添加上内边距

3.给父元素添加overflow:hidden;

浮动有什么属性？为什么浮动？如何清除浮动？

左浮动与右浮动

页面布局的时候子元素不浮动的时候会撑起父盒子的高度，如果浮动了父盒子的高度为0，对后面的页面布局造成影响，所以需要清除浮动。

对父级设置合适的CSS高度额外标签法 overflow:hidden; 伪元素清除浮动

定位几种模式的语法！参照点是什么？

position定位有三种：相对定位relative 绝对定位absolute 固定定位fixed

z-index层叠顺序

相对定位参照点是其本身

绝对定位参照点是上一级定位父级元素

固定定位的参照点是浏览器页面

css3有什么属性？

border-radius圆角边框

border-shadow边框阴影

border-image边框图片

background-size背景图片的尺寸

background-origin：规定背景图片的定位区域

text-shadow文本阴影

word-wrap允许文本进行换行

@font-face 规则可以自定义字体。

css什么属性可以继承？

line-开头的属性 text-开头的属性 font-开头的属性 color

display后面有几种值？含义是什么？

display后面的值有inline inline-block block三种

inline行内元素

inline-block行内块元素

block块元素

input有几种type类型？

text button password radio checkbox file hidden submit

css引入方式？三种方式间的区别，优先级？

行内样式内部样式外部样式

优先级一句话总结：近水楼台先得月

行内样式（优先级最高）

1.在标签头部的style属性内

2.属性值满足css语法

3.属性值用key:value形式赋值，value具有单位

4.属性值之间用分号；隔开

内部样式（优先级排第二）

在style标签内（style标签一般为head的子标签
属性值满足的是css语法
属性值用key:value形式赋值，value具有单位
属性值之间用分号；隔开

display：none； visibility：hidden；有什么区别？

display:none和visibility:hidden虽然都是把网页上某个元素隐藏起来的功能

display:none 一般用于JavaScript动态隐藏元素，值得注意的是：被隐藏的元素不占据原本的位置空间

visibility:hidden，确实可以隐藏元素，但是隐藏元素仍占有原本的位置，即没有彻底消失，这与 display:none还是有很大区别的！

盒模型

html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。盒模型通过四个边界来描述：margin（外边距），border（边框），padding（内边距），content（内容区域），如图所示：
在这里插入图片描述
CSS盒模型
几点提示
1.padding，border，margin都是可选的，默认值为0，但是浏览器会自行设置元素的margin和padding，通过在css样式表中设置

*{
     margin:0;
     padding:0
 }

来覆盖浏览器样式。注意：这里的*表示所有元素，但是这样性能不好，建议依次列出常用的元素来设置

2.如果给元素设置背景，并且边框的颜色为透明，背景将应用于内容，内边距和边框组成的区域。

3.浏览器兼容性
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。
根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。
不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

水平格式化
非替换元素的水平格式化
水平格式化的7大属性是：margin-left，border-left，padding-left，width，padding-right，border-right，margin-right。这7个属性值加起来往往是父级元素的width值。

其中margin-left，width，margin-right可以设置为auto。
主要有下面几种情况：

一个属性设置成auto
如果三个属性中某个属性设置了auto，其余两个为特定的值，那么设置auto的属性为确定所需的元素，从而使得元素框的宽度等于父级元素的width。

例子

HTML代码

<div class="parent"> 
     <span class="block">块级元素</span> 
 </div>

CSS代码

.parent{
    width:600px
}
 
div {
    background: #eeb3b3 none repeat scroll 0 0;
}
 
.block {
    background: #ffd800 none repeat scroll 0 0;
    display: block;
    margin-left: auto;
    margin-right: 100px;
    padding: 30px;
    width: 100px;
}

在这里插入图片描述

被设置为auto的margin-auto属性值为340px，即margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=340+0+30+100+30+0+100=600

总和不等于父级元素的width
使用auto可以弥补实际值与所需总和的差距，如果三个属性都设置了特定值，但是总和不等于父级元素的width。
修改上面例子中的margin-left为100px，即

.block {
    background: #ffd800 none repeat scroll 0 0;
    display: block;
    margin-left: 100px;
    margin-right: 100px;
    padding: 30px;
    width: 100px;
}

在这里插入图片描述

在上面的CSS中，margin-left，width，margin-right都设置了特定值，但是七大属性总和不等于父级元素的width。这种情况下：
在FF中，margin-right的值为开发者设定的值
在Chrome中，margin-right被强制为auto

width设置为auto
如果margin-left和margin-right都设置特定值，width设置为auto，则width将会等于某个特定值以达到父级元素的width。
如果将width修改为auto，即：

.block {
    background: #ffd800 none repeat scroll 0 0;
    display: block;
    margin-left: 100px;
    margin-right: 100px;
    padding: 30px;
    width: auto;
 
}

在这里插入图片描述

元素的width将被被设定为340px来使总和达到父级元素的width

margin-left和margin-right设置成auto
如果margin-left和amrgin-right都设置为auto，则它们会设置相等的值，因此元素将在父级元素中居中。这是将块级元素居中的一种方法。注意：text-align设置为center只适用于块级元素中的内联内容居中，并不能使块级元素居中。
设置margin属性为margin:0 auto
在这里插入图片描述

margin-left和margin-right的值会被设置为相等，使得元素居中

某个外边距和width设置成auto
如果设置某个外边距和width为auto，则设置为auto的外边距会为0，width会设置为所需的值来填充父级元素。

.block {
    background: #ffd800 none repeat scroll 0 0;
    display: block;
    margin-left: auto;
    margin-right: 100px;
    padding: 30px;
    width: auto;
}

在这里插入图片描述

设置margin-left和width为auto，则margin-left将被设置为0，width会被设置为440px来满足父级元素的width

全设置成auto
如果margin和width都设置为auto，则两个外边距会设置为0，width会尽可能宽。

.block {
    background: #ffd800 none repeat scroll 0 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 30px;
    width: auto;
    }

在这里插入图片描述

三个值都设置为auto，则两个外边距会设置为0，width会被设置为540px

负外边距
7个属性只要都是大于等于0的值，总和总是等于父级元素的width，不会超过父级元素的区域
但是可以通过制定负外边距来得到比父级元素width更大的区域

.block {
    background: #ffd800 none repeat scroll 0 0;
    display: block;
    margin-left: 100px;
    margin-right: -400px;
    padding: 30px;
    width: auto;
}

在这里插入图片描述

设置margin-right为-400px，则元素会大于父级元素width，因为100+0+30+840+30+0-400=600，元素的width为840px

替换元素的水平格式化
替换元素的水平格式化规则和非替换元素的规则类似，只有一个width有区别，如果width设置为auto，则元素的宽度是内容的固有宽度。注意：对于img标签，如果width不等于其固有宽度，则height也会等比例增加，除非设置特定值。反过来如果height设置高度，width也会等比例增加

垂直格式化
垂直格式化和水平格式化类似，也有7个相关属性：margin-top，border-top，padding-top，height，padding-bottom，border-bottom，margin-bottom，这7个属性的总和必须等于父级元素的height属性。
其中margin-top，margin-bottom和height可以设置成auto
一个正常流中的块元素的margin-top和margin-bottom设置为auto后，会被设置为0，即不能将元素垂直居中，实际上元素没有外边距。定位元素如果设置成auto有不同的处理结果。

如果正常流元素的height设置为auto，则其高度将会被设置为其内容元素的高度总和。

垂直外边距合并
垂直外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

例子：

html代码

<div class="m20"> 外边距20px </div>
<div class="m10"> 外边距10px </div>
 

css代码

.m20 { padding: 20px; }
.m10 { padding: 10px; }

在这里插入图片描述
如图所示，两个div标签的外边距分别是20px，10px，但是最终两个div之间的距离是20px，而不是20+10=30px

行内元素的盒模型
行内元素也是有盒模型的，但是有几点要注意：

1.对于非替换元素，比如a，span标签等
（1）可以设置margin-left和margin-right属性，无法设置margin-top和margin-bottom属性
（2）行内元素border和padding可以设置，但是border-top和padding-top到页面顶部后就不再增加

2.对于替换元素，比如input，img标签

margin，padding，border都有效果

飞行指挥家

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html+css总结经验

一、html标签基本<html>…</html> 定义 HTML 文档<head>…</head> 文档的信息<meta> HTML 文档的元信息<title>…</title> 文档的标题<link> 文档与外部资源的关系<style>…</style>
复制链接

扫一扫