HTML_3

10.常见CSS属性

字体大小

font-size: 40px;
1.Chrome浏览器支持的最小文字是12px，默认文字大小是16px
tip：网页缩放 ctr l + 0（重置）
2.不同浏览器默认的文字大小可能不一致，所以最好给一个明确的值，不要用默认大小
3.通常以给body设置font-size属性，这样body中的其他元素就可以继承了

字体族

**font-family：“字体样式”；**必须使用引号包裹
衬线：横竖撇捺有棱角
非衬线：与衬线相对
建议使用英文名来写字体样式，现用现查，一般以sans-serif（非衬线），serif（衬线）结尾

字体风格

font-style：normal（正常的，默认）/ italic，oblique（斜体）
< em>在于强调字体，语义化

字体粗细

font-weight：lighter（细的100~ 300）/ normal（正常 400~ 500） / bold（粗的600 及以上）/ bolder（更粗的）

字体复合属性（推荐使用）

font：字体风格/字头粗细 字体大小（倒数第二位） 字体族（最后一位）
字体大小和字体组必须写上，各属性间用空格隔开

11.常用的文本属性

文本颜色

文本间距

letter-spacing：20px；字母/汉字间距
word-spacing：20px；单词间距（空格识别）

文本修饰

text-decoration： overline（上划线）/ underline（下划线） / line-through（删除线）/ none（没有）
underline dotted（虚线）/ underline wavy red （中间加空格）
a标签中有下划线可以用none去掉
ins插入文本，del删除文本

文本缩进

text-indent： 80px；

文本对齐-水平方向

text-align：left / cover / right；

细说font-size

文本行高

line-height：normal / 像素 / 数值（推荐） / 百分比
行高和字体大小一样会导致重叠
注意事项：
（1）行高过小，文字重叠，且最小值为0，不能为负数，若是负数，浏览器自动改为normal；
（2）行高是可以继承的；
（3）height与line-height的关系：
设置了height，高度就是height的值；没有设置height，高度就是line-height *（行数）的值。
（4）行高的应用场景：调整多行文字的间距；单行文字的垂直居中（height=line-height）。

文本对齐-垂直方向

利用行高：底部：line-height=（height*2）- font-size - x

vertical-align：top / baseline / bottom / middle

middle，是元素的中部与父元素的基线加上父元素x-height（x的高度）的一半对齐
注意点
（1）vertical-align，控制的是div中的子元素
（2）不能操控块级元素，只能操控行内元素
（3）可以控制单元格内的文字对齐方式

12.列表相关属性

无序列表(ul,ol,li)

列表符号list-style-type：none / square / lower-roman / upper-roman / decimal（数字）
list-style-position：inside / outside
list-style-image： url（. . /）;
list-style

13.表格相关属性

边框相关属性

html属性（border=“样式”）
CSS属性：border-width： 2px；
border-color：颜色；
border-style：solid（实线） / dashed（虚线） / dotted（点线）/ double（双实线）
border

table独有属性

只能通过html给单元格进行跨行跨列，不能用CSS
（1）控制表格列宽：table-layout：fixed（固定的）
（2）控制单元格间距（生效的前提是：不能合并相邻的边框）：html中用cellspacing
CSS中用border-spacing
（3）合并相邻的单元格的边框：border-collapse：separate（叠在一起）/ collapse合并
（4）隐藏没有内容的单元格（生效的前提是：不能合并相邻的边框）：empty-cells：show（展示） / hide（隐藏）
（5）设置表格标题的位置：caption-side：top / bottom

14.背景相关的属性background

（1）background-color：transparent（透明的）
（2）设置背景图片：background-image： url（. . /）;
（3）设置背景图片的重复方式：background-repeat：no-repeat / repeat-x / repeat-y
（4）控制背景颜色的位置：background-position：（水平和垂直方向的中间都是center，垂直方向默认为center）还可以写像素
（后来者居上）

15.鼠标相关的属性cursor

pointer（小手）move（拖动）wait（等待）crosshair（十字架）help（帮助） / url（. . /）

三.盒模型

1.CSS中常用的长度单位

（1）像素px
（2）相对于当前元素或其父元素的font-size的倍数em
（3）相对于根元素的font-size的倍数rem
（4）相对其父元素的百分比%
text-indent： 2em缩进两个字大小

2.元素的显示模式

（1）块元素

（2）行内元素

（3）行内块元素

3.总结各元素的显示模式

4.修改元素的显示模式

display：block（块元素）/ inline-block / inline / none

5.盒模型的组成部分

border（边框）设置的背景颜色会填充边框区域
margin（外边距）影响盒子的位置，但不能影响盒子的大小
padding（内边距）设置的背景颜色会填充内边距区域

6.盒子的内容区content

min-width / max-width min-height / max-height

关于默认宽度

覆盖视口
若给定border，padding，默认的content会减小
总宽度=父的content - 自身左右margin
内容区的宽度=父的content - 自身的margin - 自身的border - 自身的padding

7.盒子的内边距

padding-left / padding-top / padding-right / padding-bottom
padding（复合属性）：上，左右，下（写三个值）
上右下左（顺时针，写四个值）
注意：（1） 不能写负数；
（2）内边距设置可能被下面文字占位，上下内边距不能完美设置，img可以

8.盒子的边框（后来者居上）

border-style：solid（默认为黑色3px）
border-width /border-left-width / border-right-width / border-top-width / border-bottom-width
border-color /border-left-color / border-right-color / border-top-color / border-bottom-color
border-style/border-left-style/ border-right-style/ border-top-style / border-bottom-style
border-left / border-right / border-top / border-bottom

9.盒子的外边距

margin / margin-left / margin-right / margin-top / margin-bottom
注意事项：
（1）子元素的margin是参考父元素的content计算的；
（2）上margin，左margin会影响自己的位置，下margin，右margin会影响兄弟的位置
（3）对于行内元素，左右的margin可以完美设置，上下的margin是无效的
（4）margin-left：auto表示离左边最远（相对于块级元素）
给块级元素左右margin设置auto可以实现该元素在父元素内水平居中
（5）margin的值可以是负值

10.margin塌陷问题

第一个子元素的上外边距，最后一个子元素的下外边距会被父元素“吃掉”（历史遗留问题）
解决方案：优先考虑（3）
（1）border：
（2）padding：
（3）overflow：hidden

11.margin合并问题

相邻的两个盒子，上面盒子的下外边距和下面盒子上外边距会合并，左右不会出现合并问题
float：left

12.处理内容的溢出

谁是容器就在谁身上加上：overflow：hidden / visible / scroll（滚动条）/ auto（自动）
overflow-x / overflow-y（不推荐）

13.隐藏元素的两种方式（主流）

（1）display：none
（2）visibility：hidden（占位）

14.样式的继承

15.元素的默认样式

重置默认样式：如超链接：color：black；
text-decoration：none；
cursor：default；

16.元素之前的空白问题(行内元素，行内块元素)

缝隙（写代码时的回车）
解决办法：（1）font-size：0；
（2）并列到一行。

17.行内块的幽灵空白问题

原因：行内块元素与文本的基线对齐，而文本的基线与文本的地段之间有一定的距离
解决方案：（1）vertical-align：top / bottom / middle
（2）display：block（后面没有内容）
（3）font-size：0；

四.布局小技巧

五.浮动（float）

1.简介

早期：设置为了产生文字环绕图片，文字环绕文字的效果
float：left
margin-right：

2.元素浮动后的特点

（1）脱离文档流；
（2）无论是什么元素，浮动之后一定是被内容撑开；
（3）能和其他元素共用一行；
（4）浮动之后，四个方向的margin，padding都是完美设置的，不存在塌陷问题，空白问题等；
（5）可以按照文本的对齐方式处理，但是不会按照行内块一样当作文本处理。

3.浮动小练习

4.浮动后的影响

（1）对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响；
（2）对父元素的影响：不能成其父元素的高度，导致父元素的高度塌陷；但父元素的宽度依然束缚浮动的元素。

5.解决浮动后的影响

解决方法：（1）display：inline-block；
（2）给父元素height：
（3）给父元素float：left；
（4）overflow：hidden
（5）补上一个没有内容的元素
clear：both；（接近完美）（或者本身不浮动，且是行内元素）
（6）前面所有的都是浮动的**.outer：：after {
content：‘ ’；
display：block；
clear：both；
}**

6.浮动布局练习