建设图片展示网站一键建站免费
一、语法
选择器{属性：属性值；属性：属性值}
二、书写分类
行内样式：直接通过style属性写在标签上
<p style="font-size=80px">123456</p>页内样式：在html页面创建style标签
外链样式：
<link rel="stylesheet href="css/index.css">三、选择器
3.1 通用选择器
*{padding:0pxmargin:0px
}3.2 标签选择器
p{font-size:20pxwidth:20px
}
div{width:20pxheight:20px
}3.3 类选择器
<div class='class1'></div>.div1{width:200pxheight:200px
}3.4 id选择器
<div id="id1"></div>#id1{width:200pxheight:200px
}四、选择器权重
| 通用选择器 | 0 |
| 标签选择器 | 1 |
| 类选择器 | 10 |
| id选择器 | 100 |
| 伪类选择器 | 10 |
| 提升权重 | ！important 999 |
五、样式权重总结
（一）行内样式权重最高
（二）提升权重之后可以超过行内样式
（三）当同样的样式作用到同一个标签上，选择器不同，权重高的生效
（四）当同样的样式作用到同一个标签上，选择器相同，代码逐行执行，后面覆盖前面
六、常见属性
| color | font-size | font-weight | font-sytle | text-index |
| 字体颜色 | 字体大小 | 字体宽度 | 字体样式 | 首行缩进 |
| text-decoration | text-align | letter-spacing | line-height | list-style |
| 文本装饰 | 水平对齐方式 | 字间距 | 行高 | 列表样式 |
| width | height | border | border-radius | background |
| 宽度 | 高度 | 边框 | 边框弧度 | 背景 |
七、元素类型
7.1 标签按照书写形式分类
单标签
双标签
7.2 标签按照展示形式分类
行内标签：宽高失效，自己不独立占一行 例：a b i em ins del u s sub strong font span
块级标签：宽高生效，自己独立占一行 例：p h1-h6 br hr ul li ol dl dt dd form
行内块标签：宽高生效，自己不独立占一行，如果转为行内标签的话，宽高依然生效
例：img input select textarea
7.3 元素类型之间的转换
使用display属性值进行转换
p{display:block //转为块级display:inline //转为行内display:inline-block //转我行内块displau:none //隐藏
}八、盒模型
8.1 盒子标签
块级标签：div 可以放所有的内容
行内标签：span 只能放行内标签，或者小段内容获取文字
8.2 组成
context：内容 width/height
padding:内边距
border：边框
margin：外边距
8.3 auto失效的可能原因
在属性中使用auto失效的可能原因
(一) 元素不是块级元素或者未设置为块级元素
(二) 元素设置了float属性
(三) 元素的宽高未明确设置
(四) 父元素的宽高不足以容纳元素
(五) 设置了postion:abolute或者position:fixed
这是因为绝对定位和固定定位的元素脱离了正常的文档流，其定位是相对于最近的非static定位的祖先元素或视口，margin:auto 的计算方式会受到影响
解决：加left:0 right:0
8.4 高度塌陷问题
情况：父级元素内的第一个元素的margin-top作用到父级本身上了
简单的来说：就是大盒子里面的小盒子给了margin-top，大盒子跟着一起掉下来了
解决方案：
（一）父级盒子给边框：可以给透明颜色
（二）父级给溢出隐藏：overflow：hidden
（三）父级盒子给padding：1px
（四）父级或者子级盒子给浮动
九、浮动
9.1 概念
实现多个盒子在一行排列--一行中所有的盒子都给浮动
div{float:left //左浮动float:right //右浮动
}9.2 注意：
所有给了浮动的标签，元素类型会变成块级，给了浮动的标签，margin:autoo会失效，给了浮动的盒子会影响下面的布局，需要清除浮动
9.3 如何清除浮动？
（一）给所有浮动的盒子外面在套一个大盒子，给宽高
（二）给所有浮动的盒子后面，加一个盒子 宽高为0，属性clear:both
十、定位
10.1 定位类型
相对定位：relative--只有body标签自带相对定位属性
绝对定位：absolute
固定定位：fixed--参照物为浏览器视图窗口
粘性定位：sticky
生效范围一般为父级盒子大小，所以尽量把有粘性定位的盒子，当道body的直属子集位置，参照物把离子集最近的且有定位有滚动条的父级
div{position:relative //相对相对position:absolute //绝对定位position:fixed //固定定位position:sticky //粘性定位 使用粘性定位 必须加距离上或者左的距离才可以生效
}