HTML+CSS学习Day06笔记

Day06笔记

一、font-size 文字(文本)大小

1. 浏览器默认支持的最小字体大小是12px。

2. 单位:

   px:像素,固定的单位,它是网页中最基本的单位

   pt:点(榜),印刷行业的单位(打印),保证设计出来的效果图打印后不改变

   单位转换:9pt=12px9/123/4==0.75

   em:相对于容器字体大小的单位,会随着文字的大小它的值会改变,不是一个固定值.注意点:默认情况下16px=1em.

3. text-indent 首行缩进 推荐使用的单位是2em

   letter-spacing 字间距,字与字之间的距离

二、color 文本颜色

1. 文本或者背景颜色支持的颜色值,英文单位、十六进制、rgb()

2. 颜色值

   英文单词:red green blue yellow

   十六进制:#fff #000

   rgb形式:表示计算机的三原色

三、font-family 字体

1. 字体来说说属性值可以有多个，属性值和属性值之间使用逗号隔开。英文字体如果是单个单词不需要加引号，如果是一组词需要加引号，英文也需要加引号
2. 浏览器首先会寻找字体1、如存在就使用改字体来显示内容，如在字体1不存在的情况下，则会寻找字体2，如字体2也不存在，按字体3显示内容，如果字体3 也不存在；则按系统默认字体显示
3. 注意点：相同字号大小的文本，如果字体不一样最终在页面中呈现的效果不一致

​ font-weight:bolder(更粗的)/bold（加粗 - 推荐使用）/normal（常规）

​ 说明：在css规范中，把字体的粗细分为9个等级，分别为100——900，其中100对应最轻的字体变形，而900对应最重的字体变形

​ 100-400 一般

​ 500常规字体

​ 600-900加粗字体

​ font-style：italic/oblique(推荐使用)/normal（取消倾斜，常规显示

​

​ 说明：italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值

四、下划线

1. 下划线

   text-decoration:underline

   <!--<u>下划线</u>-->

2. 上划线

   text-decoration:overline

3. 中划线，删除线

   text-decoration:line-through

   <!--<del>删除线</del>-->

   <!--<s>删除线</s>-->

4. 代码标记

   <code></code>

5. 预格式化标记，独占一行，自上而下排列，按照html排列格式显示在网页中

   <!--<pre>文本</pre>-->

五、列表属性

1. list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块/none(去掉列表符号)  

2. list-style:none=list-style-type:none

3. list-style-image:url(所使用图片的路径及全程)

4. list-style-position:outside(外边)/inside(里边)     列表符号位置，不是调整列表符号具体位置，它只是调整整体位置移动

六、边框属性

1. border-style 边框样式（线型）solid（实线）dashed（虚线）dotted(点划线)double（双线）

   注意点：如果边框样式是double类型，边框宽度必须大于2px

2. border-top:上边框

   border-bottom:下边框

   border-left:左边框

   border-right:右边框

   可单独设置一方向边框

七、浮动属性

1. 标准（文档流）

元素类型，把标记划分成不同的状态：块级元素、内联元素、内联块元素

   块级元素：独占一行，自上而下排列的，可以设置宽和高，例如：div、h1-h6、p、ul、li、ol、dl、dt、dd、form、table
   
   内联元素：横向排列的，不能设置宽和高，例如：font、span、a、b、em、strong、i、code、u、s、del、span...
   
   内联块元素：横向排列的，可以设置宽和高，例如：img、input、select、textarea、button...

2. 浮动流

浮动流：一个标记设置了float属性后就成为浮动流。把元素设置了float属性后把这种现象也叫做脱离文档流（脱标）

3. 什么是流？流在css里面指的是规则。css有标准（文档）流、浮动流、定位流

4. float浮动介绍：

   1、语法：float:left|right|none;

   2、作用：让自上而下排列的元素横向排列

   3、定义：网页中其他文本如何环绕该元素显示

5. 浮动使用注意事项

   1、浮动定义是网页中其他文本如何环绕该元素显示，一开始float属性出来的时候是为了解决文本环绕现象存在的，在咱们使用过程中发现浮动属性还可以改变块级元素的排列方向

   2、对于内联元素标准流下不能设置宽和高，当它脱离文档流后成为浮动流就可以设置宽和高了

   3、两个div元素，第一个设了float属性，第二个没有设置，这个时候会发生什么呢？这个时候会发生元素重叠，第一个div会把第二个给覆盖了

   4、两个div元素，第二个设置了float属性，第一个没有设置，这个时候会发生什么呢？这个时候两个div元素的位置保持不变

   5、两个div元素，都设置了float属性，当容器的宽度不够的情况下，第二个元素依旧会被挤到第二行去

八、清除浮动

清除浮动介绍：

1、所谓清除浮动就是清除浮动给咱们带来的一些负面影响

2、负面作用：高度塌陷和元素重叠

3、在实际的开发中需要容器的高度自适应（不设置高度，让子元素撑开），在标准流中容器不设置高度子元素可以撑开。当容器没有设置高度的时候，子元素设置了float属性后，这个时候子元素无法将容器的高度给撑开，就会发生高度塌陷问题

清除浮动方式：

1、给容器设置overflow:hidden;属性，设置后可以清除浮动。先定义一个类名，然后把定义好的类名赋给浮动元素的父级元素
    

2、在需要清除浮动的同级元素下设置了一个空元素，并给这个空元素设置一个clear:both; 注意点：这个空元素不能有除了clear以为其他属性

clear:left|right|both|none;

3、添加空盒子，较流行，将浮动元素给包含起来，需独占一行。