CSS笔记一

一、语法

选择器{属性：属性值；属性：属性值}

二、书写分类

行内样式：直接通过style属性写在标签上 

123456

页内样式：在html页面创建style标签

外链样式：

三、选择器

3.1 通用选择器

*{
    padding:0px
    margin:0px
}

3.2 标签选择器

p{
    font-size:20px
    width:20px
}
div{
    width:20px
    height:20px
}

3.3 类选择器

.div1{
    width:200px
    height:200px
}

3.4 id选择器

#id1{
    width:200px
    height: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 //粘性定位 使用粘性定位 必须加距离上或者左的距离才可以生效
}

10.2 偏移属性