HTML
- 图片宽高只设置一个的话，另一个也会等比例变化。
- 图片相关
gif:支持颜色少，支持简单透明，动态图
jpeg(jpg):支持颜色多，不支持透明，可压缩，一般照片使用该格式
png:支持颜色多，并且支持复杂透明，不支持动态图 - 超链接
<a href='#'/> ：#自动回到页面顶部
<a href='http://www.baidu.com' target='tom'> :tom对应的是iframe的name属性，在内联框架里面显示a标签链接内容
<a href='#bottom'/>:对应是某个标签的id ，可以实现页面内部跳转
<a href='mailto:abc@163.com'/>:会自动打开电脑安装的默认的邮件客户端，并且会自动填写上收件人地址，此时是abc@163.com。没有默认邮件客户端，各个浏览器处理方式不同。
<a/>:元素可以包含任意元素，除了它本身
- p:虽然是块级元素，但是不能包含任何其他的块级元素。
- 行高：其实就是添加的上下padding
选择器
- 交集选择器
<style>
span.p2{
color: red;
}
</style>
<span class="p2">asvchan</span>
说明：既需要是span元素还要有p2的class值，要区别于并集选择器
- 并集选择器
<style>
span,.p2{
color: red;
}
</style>
<p class="p2">asavc</p>
<span>asvchan</span>
- 后代选择器
<div><span>hehe</span></dvi>
<div>
<p>
<span>esh</span>
</p>
</div>
div span{
color: red;
}
说明：都变红
- 子元素选择器
div>span{
color: red;
}
<div><span>hehe</span></dvi>
<div>
<p>
<span>esh</span>
</p>
</div>
说明：只有第一个变红
- 属性选择器
<body>
<p title="标题">测试</p>
<p>测试</p>
<p>测试</p>
<p title="hello">测试</p>
</body>
p[title]{
color: red;
}
p[title="hello"]{
color: yellow;
}
//以hehe开头的
p[title^="hehe"]{
color: yellow;
}
//以hehe结尾
p[title$="hehe"]{
color: yellow;
}
//包含hehe
p[title*="hehe"]{
color: yellow;
}
说明：第一个p红色，最后一个黄色
- 子元素选择器
<style>
p:first-child{
color: aquamarine;
}
p:last-child{
color: blue;
}
p:nth-child(3){
color: red;
}
/* 下一个兄弟选择器，此时是第二个 */
p:first-child+p{
color:yellow;
}
/* 补充：
span~p{
会选中span后面所有的p
}
*/
/* even:偶数 */
/* odd 奇数 */
p:nth-child(even){
background-color: aliceblue;
}
</style>
</head>
<body>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
</body>
</html>
图一
说明：上面三种，针对的是内部所有的子元素排序，如果对应条目不是p(或者)
其他标签，则不起作用
说明：下面三种是针对对应元素其实进行设置，此时即使增加了span，也会
查找p的第N个进行设置
- 对比：
<style>
p:first-of-type{
color: aquamarine;
}
p:last-of-type{
color: blue;
}
p:nth-of-type(3){
color: red;
}
</style>
</head>
<body>
<span>csg</span>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
</body>
</html>
- 否定伪类
<style>
p:not(.hello){
background-color: aqua;
}
</style>
</head>
<body>
<p>测试</p>
<p class="hello">测试</p>
<p>测试</p>
<p>测试</p>
</body>
</html>
说明：除了第二条，都有背景色
- 样式的继承
背景相关都不会被继承,可以在w3c查询继承性
- 选择器优先级
规则：
内联样式 优先级1000
id选择器 优先级100
类和伪类 优先级10
元素选择器 优先级1
通配* 优先级0
继承的样式 没有优先级
注意：
如果优先级一样，则使用靠后的样式(css中后书写的样式)
并集选择器优先级会单独计算
优先级不论怎么叠加都不会超过上一个优先级(不论按照数字计算)
在样式的最后添加!important，则此时该样式会获得一个最高的优先级
伪类的顺序
- 例如a标签的四种伪类选择器:link(正常),visited(访问过)
- hover(鼠标覆盖),active(鼠标点击)
- 一般书写顺序是: link visited hover active
- 因为四个优先级一样，状态不是点击过就是未点击过，所以如果写在hover
- 和active之后会覆盖这两者的样式(优先级一样，后书写的生效)
- 所以link visited必须在前面(这两个顺序无所谓),同理hover active
- 必须在后面，而且active必须在最后面。
font
- font-size:字体都有一个看不到的框框，一般此属性设置的都是 框框的大小，
所以一般字真的大小都是小于font-size(但是针对不同字体，可能字体比框框大)
<div>测试</div>
<style>
div{
font: italic bold 100px/300px "微软雅黑"
}
</style>
说明：italic是斜体(对应font-style) bold是加粗(对应font-weight),
不论顺序，但是字体大小(倒数第二个)和font-family(必须最后)必须存在
- 行间距(行与行之间的间距,上一行的下划线和下一行的上划线之间的距离，不是行内两条线的间距)
行间距=行高-字体大小
如果设置百分比，是相对于字体的大小进行计算的。
直接传数字，则行高会设置字体大小相应的倍数
如果把line-height：写在font上面，则会无效，因为font里面如果不再次设置line-height则会使用默认值
会覆盖上面的line-height。
盒模型
- 背景色=padding+content
- 盒子宽高=padding+content+border
margin
- margin(外边距):会影响盒子的位置，不会影响盒子的大小
- margin可以设置为auto,auto一般只设置给水平方向的margin，垂直方向设置auto无效相当于设置0
- 如果只指定左外边距或者右外边距的margin为auto则会将外边距设置为最大值(效果是：完全靠右或者完全靠左)
垂直外边距的重叠
- 在网页中相邻的垂直方向的外边距会发生外边距的重叠
所谓的外边距重叠指的是兄弟元素之间的相邻外边距会取最大值而不是取和。
如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素。
兄弟外边距重叠
父子外边距重叠
内联元素
- 内联元素不能设置width和height
- 设置水平内边距，内联元素可以设置水平方向的内边距
- 垂直方向内边距,内联元素可以设置垂直方向内边距，但不会影响页面的布局
- 为元素设置边框，内联元素可以设置边框，但是垂直的的边框不会影响到页面的布局
- 内联元素支持水平方向的外边距，水平方向外边距不会重叠而是求和
- 内联元素不支持垂直方向的外边距
display
- display:inline
转换为行内元素，不可以设置宽高
- display:block
转换为块级元素，可以设置宽高，独占一行
- display:inline-block
既可以设置宽高，又不独占一行(例如:img标签)
- display:none
隐藏元素，并且不占用位置
对比：visibility属性规定元素是否可见，有两个值visible（默认值）,hidden(元素不可见，但是占据位置)
overflow
- visible:默认值，不会对溢出的部分做处理
- hidden:裁剪溢出的部分
- scroll:会为父元素添加滚动条，拖动滚动条来查看内容
- auto:如果内容溢出则显示滚动条
文档流
脱离文档流的方式
- 浮动
- 定位
浮动
- 在文档流中，父元素高度(不包括宽度)可以靠子元素高度撑起来
- 但是当子元素设置浮动之后，无法撑起父元素的高度，导致父元素高度塌陷
- 父元素高度塌陷，则父元素下面的所有元素都会向上个，影响页面整体布局
- 浮动的元素没有margin的重叠，会合并计算
清除浮动
就是在受影响的标签最后加上一个div，这样就可以避免浮动造成的影响(例如：父元素高度塌陷)
<style>
ul{
background-color: blue;
}
li{
width: 50px;
height: 50px;
float: left;
list-style: none;
}
.clearfix::after{
content: '';
display: table;
clear: both;
}
</style>
</head>
<body>
<ul class="clearfix">
<li >1</li>
<li >1</li>
<li >1</li>
<li >1</li>
<li >1</li>
<li >1</li>
</ul>
</body>
补充
.clearfix::after,.clearfix::before{
content: '';
display: table;
}
.clearfix::after{
clear: both;
}
.clearfix{
zoom: 1;
}
:after针对是清除浮动，:before针对的是margin的重叠(父子之间的重叠)，注意：浮动元素不存在margin的重叠,此时两个虽然写在一起，但是一个是针对浮动的一个是针对标准文档流的。
