学前基础培训三天html个人笔记总结

css样式属性：

网页追求细节。样式旨在美化，不会改变结构。
样式布局没有唯一的答案，要看页面效果。代码在一定程度上，够简单、够优化，就可以了。

1. 颜色
   rgb，red,green,blue,三基色。

   0-255，00-ff。

   两位颜色值相同，可以缩写成一个。如，#fff，#abc。16进制值只能是3位或6位。

2. 字体

   大小、粗细、风格
   font-size:12px;

   font-weight:bold bolder

   font-family:“中文字体”,英文字体 （中文带双引号或单引号，而英文不带）

   字体可以造，系统字体库文件夹，在Windows->Fonts

3. 对齐

   表格对齐:align valign 表格是不同于div的另一种布局，align是表格的一种属性，不属于样式内容。

   div中文本水平对齐：text-align:left center right
   对于div中的文字垂直方向的居中，可以借助height和line-height相等的方式实现。

line-height，行高指行的整体高度，基线在中间。网页是一个框子模型，文字本身没有边框和上下边距，手动调整行高，调整框子整体的高度，文字以基线居中对齐。
盒子模型都是有边框的，和框子模型一样意思，不冲突！

解释:align基于基线对齐。text-align 文本对齐，我们使用的都是语义标签，语言的意思。

table>tr>td*3 tab键，在Hbuilder，内置emme插件中可以这样实现。>表示下级。

div+p tab键，+表示同级。

在表格中，表头自动设置样式，文本居中加黑。td手动设置样式。

4. 边框:

   border-color:

   border-style:实虚 solid dashed

   border-width:

   习惯性地：我们会将上述3个属性缩写为一行，取属性为： border

   一个元素的边框可以细分为4个方向：上 右 下 左
   如果只有两个值，那么就是上下和左右。
   border-radius:50%，div宽和高相等，圆形，宽和高不相等，椭圆。

   border-radius:值1，值2。对角的比例或者像素。类似于四个方向，上右下左。

   圆矩角，扇形的半径就是宽和高，按比例之后，形成的扇形的宽和高，不显示半径的边框，只显示扇形的弧形边框，就成了圆矩角。

5. 背景：

   background-color:

   background-image:url(" " ) 或() 或( ’ ')

   background-repeat:no-repeat; repeat-x; repeat-y; 自动x-y轴都重复。

   background-position:距离y轴，距离x轴。

   而padding和margin都是：上下边距，左右边距。

   距离y轴，负值，超过容器页面向上；距离x轴负值，超过容器页面向左。

搜索背景图标下载

background可以合写。

6. a标签

   title属性一般不写，常写的是href target两个属性，这是自带属性，不属于style属性，不是style里关于样式的子属性。
   text-decoration:underline overline(顶部带线) line-through blink(闪烁，需要浏览器支持) none(不显示装饰效果)
   任何一个属性都不能写两个属性值，会覆盖的！只能出现一个属性值的效果。
   伪元素： a标签，一个标签就是一个元素，元素的一种状态作为一个元素，是伪元素。
   a{ }表示a的四种状态。 如果要分状态，就不能写a标签样式。而是

   <style>
       a:link {
         
           color: pink;
       }
   
       a:visited {
         
           color: blue;
       }
   
       a:hover {
         
           color: red;
       }
   
       a:active {
         
           color: yellow;
       }
   </style>

   而且，四种状态的书写，存在顺序！必须按照顺序，书写。
   :link 链接正常的状态

   :visited 链接被访问过之后

   :hover 鼠标放到链接上的时候

   :active 链接被按下的时候

盒子模型，网页布局

浏览器认为：页面的一切元素都可以抽象理解为一个盒子（容器）：比如：div span p img a
上述的所有的盒子可以分为两类：块级元素 行内元素

块级元素：

1. 独占一行；
2. 如果没有设置宽度，那么默认和父元素一样宽；
3. 如果设置了宽度，那么就根据设置的来显示；

行内元素：

1. 不会独占一行；
2. 如果没有设置宽度，那么默认和内容一样宽；
3. 行内元素是不可以设置宽度和高度的。

行内块级元素：
1.为了能够让元素既能够不独占一行，又可以设置宽度和高度，那么就出现了行内块级元素。例如 img

行、块元素的转换：

display: none block inline inline-block

none: 不显示，表示将一个元素隐藏

block: 让一个元素显示为 块级

inline: 让一个元素显示为 行内

inline-block：行内块，可以设置宽、高， 且不主动独占一行

拓展：

box-sizing属性语法格式

box-sizing: content-box/border-box/inherit;

参数说明

content-box：这是由CSS2.1规定的宽度高度行为，宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框；border-box：为元素设定的宽度和高度决定了元素的边框盒，就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度;inherit：规定应从父元