直接用浏览器打开代码。
div 和 span 都没有语义 div有换行span没有
换行
一行
hahahaahaha h1
<© >
- 名词
- 名词补充解释
- 名词补充解释
- 名词补充解释
- 名词补充解释
- 名词补充解释
| 姓名 | 电话 | 地址 |
| 小明 | 123 | 地址 |
| 姓名 | 性别 | 电话 | |
| 小王 | 女 | 22344 | 海淀区 |
| 小李 | 男 | 555666 | |
| 小张 | 男 | 9008939012 | |
| 小张 | 男 | 9008939012 | 123 |
|---|---|---|---|
| 排名 | 关键词 | 趋势 | 今日搜索 | 最近七日 | 相关链接 |
|---|---|---|---|---|---|
| 123 | 鬼吹灯 |  |
1xx3 | 456 | 贴吧 |
input的checked的代表默认选中
123
class选择器可以多次重复使用，id选择器一般只有唯一性。
div a 子代选择器 div > a亲儿子 第一级子代 子代选择器不要漏层标签，每一层都要有大于号指下去
.nav , .sitenav{}并集选择器
块级元素
行内元素 指定宽高无效，默认为本身内容大小，里面只放行内元素(a特殊，a可以放块级元素)
行内块元素inline-block 可以设置宽高，默认不换行，但是之间会有留白空隙
显示模式的转换
div{ //转化为行内元素
display:inline;
}
span{ //转化为块级元素
display:block;
}
a{ //转化为行内块元素
display:inline-block;
}
行内元素和行内块级元素可以当成文字来看
css三大特性
1.css层叠性
就近原则
2.继承性
文字的样式和颜色等继承
3.优先级
div(标签选择器) 权重 0，0，0，1
.nav(类选择器) 权重0，0，1，0
#na(id选择器) 权重0,1,0,0
!important 最重要
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
border: 1px solid red;
border-collapse: collapse;//表格合并相邻边框
pading：上右下左
margin: 100px auto;//居中
两个相邻盒子margin外边距合并问题，以最大的为准
两个包含盒子 外边距塌陷，父盒子给1px边框或者overflow:hidden溢出隐藏
.fu{
height: 150px;
background-color: pink;
/* overflow: hidden ; 这三种方法解决塌陷问题 */
/* border: 1px solid red; */
/* padding-top: 1px; */
}
.zi{
height: 100px;
width: 100px;
background-color: purple;
margin-top: 100px;
}
float:left;使用浮动脱离文档标准流。主要解决块级元素一行排列问题，可以left可以right方便排版。浮动不会超过边框和padding
使用浮动之后，元素默认转化为行内块级元素了，不写宽则默认内容文字大小
转化为inline-block和block的一个区别，inlineblock会和父控件有一个默认边距，显得大一些，再加一句overflow:hidden可以解决这个问题。而转化为block不会出现这个问题，会铺满整个父控件
清除浮动的四种方法(为了解决子元素浮动导致的父控件高度为0的问题)
1.额外标签法
最后一个浮动标签添加一个div，然后.xx{clear:both}
2.父级添加overflow属性方法
3.after伪元素清除
.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;} 父元素使用一下这个类
4.使用before和after双伪元素清除
.clearfix:before , .clear:after{content:"";display:table;} 和 .clearfix{clear:both}
定位 position
有四个属性值，top bottom left right
1.static静态定位，相当于取消定位，标准文档流模式
2.相对定位 positon:relative;移动以自己上个状态为基准点。标准流中，原来的位置还占有。
3.绝对定位positon:absolute;不在标准流里面占位置，跟浮动一样。如果父元素没有定位，以浏览器当前屏幕为基准。找到最近一级父元素有定位的为基准。子绝父相
4.fixed固定定位
跟浮动一样，定位之后的元素也会默认转化为行内块元素，尺寸默认为内容宽高
小例子，用最后一个定位会覆盖在最上面的特性做a的边框，在hover状态下加相对定位，如果已经用定位了就修改z-index值
display:none 隐藏 不在文档流里占位置。visibility:hidden隐藏，但是文档流里面还占有位置。
display:block;对应的显示出来 visibility:visible对应的显示;
cursor改变鼠标样式
input轮廓线outline
textarea防止拖拽 设置resize:none;
img设置图文关系 设置vertical-align
设置文字溢出处理white-space:nowrap;
精灵图。background-positon:
滑动门效果。a里面包含span标签，span里面包含文字，然后给a的背景图片为左对齐，给span的bg-postion右对齐,注意span和a标签都要转为inline-block，都要给高度，分别设置paddingleft和right撑开背景图片圆边框