HTML相关重点 1. 标题标签 h1-h6 加粗的默认样式 2.
段落 两段落之间有一定间距 3. 斜体 4.
换行 5. 加粗 6.
行级块元素 既有行级元素的特点 也有块级元素的特点 常见的块级元素 img 11.table 表格 border 属性 表格的边框 tr 行 td 列 eg
| 123 | 456 |
| 789 | 101112 |
} 分类选择器 .container,.list{ background: pink; } .content>span>a{ color: red; }
伪类选择器 #link:hover{ color:red; } 19.背景
20.文本1234567890
BAIDU 21.字体 设置字体 可以设置多个字体 从前往后依次识别 直到某一个字体支持为止 字体的名称如果是多个单词 需要用引号括起来 字体 font-family: , , ; 字体大小 font-size: ***px; 字体风格 normal:默认 italic:斜体 oblique :倾斜展示 font-style:oblique; 字体粗细:权重值表示 100~900 默认值 400 bold 加粗 对应权重值 700 bolder 更粗 相对于已设置过的字体粗细之上 再粗一点点 font-weight:bold; 22.链接 访问样式 a:link{} 未访问过 a:visited{} 已访问过 a:hover{} 鼠标滑过 a:active{} 鼠标点击 23.列表 list-style 列表样式 list-style-type: type:none 取消不展示 disc 默认实心圆 square 正方形 circle 空心圆 decimal 数字 list-style-position position:inside 内部 outside 外部 24.盒模型 外边距 margin margin-top margin-right margin-bottom margin-left margin:一个值 代表着四个外边距相同 两个值 第一个 上下 第二个 左右 三个值 第一个上 第二个 左右 第三个 下 四个值 上右下左 块级元素在父元素里水平居中 margin:0 auto 内边距 padding 规则同上 边框 border border-width 边框大小 border-style 边框样式 solid 实线 dashed 虚线 dotted 点状 double 双线 border-color 例子 border:4px solid blue; 25.外边距合并 溢出隐藏 overflow:hidden; 浮动 float 定位 position:absolute 绝对定位 position:relative 26.溢出 overflow 溢出 hidden 隐藏 scroll 滚动 overflow-y:scroll; overflow-x:hidden; 27.定位 postion 定位 relative 相对定位 相对于元素本身进行的定位 定位后空间不会被释放 absolute 绝对定位 定位后空间会释放 相对于最近的已定位的祖先元素进行定位 如果祖先元素都没有定位的话,就相对于body进行定位 fixed 固定定位 定位后空间释放 相对于浏览器的窗口定位
元素定位以后可以修改 top left right bottom
元素可以只进行定位 不改变位置的值,但是一旦想改变位置的值必须要先进行定位
z-index 表示层级
元素只有定位以后才可以设置层级
z-index的值越大 元素约在上面
28.浮动 float 浮动 元素浮动以后空间会释放 left 按照html结构的顺序 从左向右依次排列 right 按照html结构的顺序 从右向左依次排列 clear 清除浮动 clear:left; clear:right; clear:both; display:清除浮动 元素浮动后 造成的塌陷问题 1.给父元素设置高度 2.给父元素设置溢出隐藏 overflow:hidden 3.在父元素里的最后面加一个空的子元素(块级元素),并且给这个子元素设置清除浮动 clear:both 4.增加伪元素 设置clearfix .clearfix::after{ /* 设置内容 / content: ""; / 设置为块元素 / display: block; / 清除浮动 */ clear: both; } 29.display布局 none 隐藏 block 块级元素 inline 行级元素 inling-block 行级块元素 行级元素设置宽高 1.设置display 2.设置float 块级元素 1.单个元素占一行 2.可以设置宽高
行级元素/行内元素
1.多个元素占一行
2.不可以设置宽高(被内容撑开)
行级块元素(既有行级元素的特点又有块级元素的特点)
1.多个元素占一行
2.可以设置宽高
30.选择器优先级 同一个元素的相同属性 优先级 id > class > 标签 同一个元素 不同选择器里的不同是属性 会合并 同一个元素 选择器的优先级相同时 同一个属性 后面的会把前面的覆盖 选择器的权重 !important 最高的 内联样式 1000 id 100 class 10 伪类 10 标签 1 伪元素 1