2021-09-27

2.1 CSS有哪些引入方式，各有什么优缺点？

行内式：在标签中书写style属性，再书写css样式。

优点：无需书写选择器，权重高。1000

缺点：后续维护性差，没有实现结构样式分离。

内嵌式、内部样式表：在html文件中书写style标签，在style标签中书写选择器和样式。

优点：结构和样式部分分离，方便阅读。

缺点：没有实现完全分离。可移植，可复制性差

外链式、外部样式表：单独书写css文件，在html中通过link标签引入

优点：css样式文件独立存在，影响的范围比较广，整个站点都可以受影响，CSS 与 html 结构实现完全分离

缺点：在平时练习的时候会创建大量css文件。

2.2 表格

下列选项中属于表格头的是

th

td

caption 

thead

table

tr 表格行

th 表头单元格表头单元格---默认水平居中加粗显示

td 单元格

thead 表格头

caption 表格标题-是写在table中的不是写在thead里面

tbody 表格体

注意表格table中不要放表格以外的标签，只允许放thead tbody tfoot caption tr

td th中可以放任何标签

表格中控制单元格和单元格的距离  cellspacing="0"

表格内容和边框之间的距离cellpadding  相当于内边距

表格边框 border

给table标签设置align属性可以控制整个表格在页面中水平的显示方式

给tbody/tr/td设置align属性可以控制单元格中的文字在td中水平的显示方式

跨行合并 rowspan  （tr 全称是表格行 r就是row的缩写）

跨列合并 colspan    （lie  colspan中有l）

2.3 表单

常见的表单type类型

text  文本输入框

password  密码框

radio  单选按钮

checkbox  复选框

button  按钮

submit  提交表单

reset  重置表单

输入框的默认值为value

select option下拉选项框默认值是给option标签添加selected="selected"

checkbox复选框的默认值和 radio单选框的默认值是 checked="checked"

radio想要实现多选一的效果一定要设置相同的name属性

2.4 图片

title 属性：鼠标悬停时提示的文本（任何标签都有这个属性！)

alt 图片无法加载时显示的替换文本

链接

a标签必须写的属性 href 可以留空，但是不写href属性a就不是超链接了

a标签有四个伪类选择器

love hate 

:link 未点击链接

:visited 点击过的链接

:hover 鼠标上移悬停

:active 鼠标按压不松开

2.5 列表

ul 无序列表

ol 有序列表

dl 自定义列表

li  列表项

dt 自定义列表标题

dd 自定义列表项

2.6 文字相关

font-size 文字大小  必须带单位

font-weight 文字粗细  100 -  900  400 正常  700 加粗

font-style  文字样式（是否倾斜）italic 倾斜 normal正常

font-family 字体系列 （字体家族）

text-align  规定容器内的文字水平对齐方式 center left right

text-indent  文本缩进

text-decoration  文本修饰线 常用 none 去掉 underline 下划线

2.7 背景相关

background-image: url(' 路径')  背景图片

background-color:  背景颜色

background-position: 背景图片位置

x水平 y垂直

方位名词 left top center right bottom

px  20px 40px    背景距离左侧20px 距离上40px

混合单位

如果只写一个值 另一值为居中

background-repeat:  背景图片平铺 

no-repeat

2.8 盒子模型

content 内容

padding 内边距

border 边框

margin 外边距

但是计算盒子真实宽高的时候不会带上外边距，也就是说盒子真实宽度 = width + padding + border

宽度200px

padding: 10px 30px 20px;

border-right: 10px solid #000;

margin-left: 20px;

问盒子的真实宽度是多少？

270

2.9 元素显示模式特点以及转换

2.9.1 常见的块级元素

div p  h1 ~ h6  ul ol  table ....

默认占一整行

可以设置宽高

默认宽度和父元素相等

可以设置内外边距

2.9.2 常见的行内元素

span u s b i ins del em strong

u ins 下划线

i em 倾斜

b strong 加粗

s del 删除

a  超链接

一行可以显示很多个

设置宽高无效

默认宽度由内容撑开

可以设置水平内外边距，垂直方向无效

2.9.3 常见的行内块元素

input img button

一行可以显示很多个

可以设置宽高

自带宽度

2.10 浮动

特点

脱离标准流

浮动的元素都贴顶对齐

改变元素显示方式

浮动的元素不会压住文字

理论上一个元素浮动了其余的兄弟元素也要浮动

默认宽度由内容撑开

会默认转换成display: block;

不能通过margin: 0 auto;居中

不会触发margin外边距塌陷

4种清除浮动的方式

给父元素增加高度

隔墙法 在浮动的元素最后加一个块级元素 添加clear: both

给浮动的父元素添加overflow: hidden;

伪元素清除浮动 clearfix

2.11 常见的单标签

img  图像标签

br    换行标签

hr      水平线标签

input  输入框

2.13 css优先级 权重

继承权重是0继承权重是0继承权重是0继承权重是0继承权重是0通配符选择器

标签选择器 1 伪元素

类选择器 10 伪类 属性选择器

id选择器 100

id名不可以重复，一个id名在html中只允许出现一次！！！

行内样式 1000

!important 无穷大

2.14 继承性

能继承的只有4个！！！！！！！！！！！！！！！！！！！！！！！！

text-  line-  font-  color!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

width不能继承，和父元素等宽是由于块级元素独占一行的特性

height不能继承，height如果没有设置，那么永远是由内容撑开

line-height 可以继承！！！！

h系列的标签不能继承字体大小和粗细

a标签不能继承字体颜色！

2.15 选择器

标签选择器  标签名 {}

类选择器    .类名 {}

id选择器    #id {}

通配符选择器  * {}

复合选择器的目的：精确选中要修改的元素、标签

子代选择器 只能选中亲儿子元素，无法选中后代

选择器1>选择器2 {}

后代选择器 可以选中全部的后代元素 符号是空格

选择器1 选择器2 {} 选择器1的后代选择器2

并集选择器 可以分别选中逗号分隔的全部选择器 符号是逗号

选择器1,选择器2 {}

交集选择器  同时满足两、多种条件 两个选择器中间不允许有任何符号

选择器1选择器2 {}