CSS个人总结
1.css用途
css全称Cascading Style Sheets，是为了美化html界面。通过选择器选中对应的盒子，从而对其美化，布局
css引入方法
css引入分三种
1：
<head>
<style>
。。。。。。
</style>
</head>
2：
<head>
<link rel="stylesheet" href="./xxxx.css">
</head>
3:
<body>
<div class="nav" style="width: auto;"></div>
</body>
常见标签
class选择器，符号是“.”，通过选择对应标签的class属性起作用
<style>
.demo{
}
</style>
<body>
<div class="demo">
</div>
</body>
如上图，可以如此选择该div并更改样式
id选择器，符号是“#”，通过选择对应标签的id属性来起作用
<style>
#demo{
}
</style>
<body>
<div id="demo">
</div>
</body>
如上图，可以如此选择该div并更改样式
需要注意的是，id一般不要重复，且css中并不常用id选择器，id选择器更适合搭配js使用
元素选择器，符号是对应的元素，例子如下:
<style>
p{
}
</style>
<body>
<p></p>
</body>
如上图，通过如此可选择该p并更改样式，当然，也可以选择其他的标签
除了以上三个简单标签之外，还有复合标签，比如：
<style>
div p{
}
</style>
<body>
<div><p></p></div>
</body>
就是选择所有div下的p，同理
<style>
.demo p{
}
</style>
<body>
<div class="demo">
<p></p>
</div>
</body>
就是选择属性为class下的p，其他暂不一一列表
在此有些常用的，比如
<style>
*｛
margin:0;
padding:0;
fontsize:14px
｝
</style>
其中，margin与padding设置为0是为了免去因此而产生的排版问题，字体大小14是常用字体大小
美化相关
字体美化相关：
常见属性如下：
font-style
用于设置字体倾斜，值为normal表示不倾斜，italic为倾斜
font-weight
用于设置字体加粗，值为normal表示不加粗，bold为加粗，并且可以通过具体的值来表示加粗的程度，比如：
<style>
p{
font-weight:200;
}
</style>
表示加粗程度为200%
font-family
用预设值字体的类型，比如宋体，黑体等，浏览器默认为宋体，可以设置多个字体，以供浏览器处理。例：
font-family:"宋体"，"黑体";
表示浏览器优先使用宋体，如果用户电脑上没有宋体，那么就用黑体
##### font-size
用于设置字体大小，如下：
font-size:14px;
表示设置字体大小为14px,浏览器最小支持字体大小为12px,上限很高
color
用于设置字体颜色，颜色可以使用英文，rgb，#xxxxxx来表示，如下:
color: #2c2c2c;
color: wheat;
color: rgb(255, 245, 220);
以上三种都可以改变字体颜色
font
这是一个综合属性，样式如下
font: normal normal bold 14px/1.5 "宋体";
意思是不倾斜，加粗，字体大小为14px，行高为字体大小的1.5倍，字体类型为宋体
也就是说，格式为:font:font-style font-weight font-size/line-height font-family
其中font-style font-weight 可以不写，也可以交换位置
而font-size/line-height font-family必须写，且不能交换位置
文本美化相关
text-decoration
用预设值文本的下划线，一般用于取消a标签的下划线：
text-decoration:none;
表示消除下划线，此外还有line-through删除线
text-intent
用于首行缩进，一般缩进两个字符:
text-intent:2em;
值也可以为负，用于隐藏文本
text-align
用于设置文本位置
text-align:center;
表示文本居中，也可以写left和right用于左对齐和右对齐
lineheight
用于设置行高，当行高=盒子的高度时，文本会垂直居中(只适用于单行文本)。不做举例
列表美化相关
list-style
用于设置列表前的东西，例：
list-style:none;
表示消除列标签的小黑点或者数字，也可以写circle 空心圆，不做举例
list-style-image
用于将图片代替原小黑点显示
盒子的分类
分为三类：行内元素，块级元素，行内块元素
行内元素
包含a、span、em、strong、b、i、u、label、br；
特点：可以多个标签存在一行，不能直接设置行内标签的高度、宽度、行高以及顶和底边距，靠内容撑开宽高
块级元素
包含p、div、ul、ol、li、dl、dt、dd、h1~h6、form；
特点：独占一行，对高度、宽度、行高以及顶和底边距都可设置的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度。
行内块元素
包含img,input,textarea
特点：除了不能单独占一行之外，和块级元素没区别，可以设置宽和高，也可以多个在一行显示
盒子占地组成
内容
表示为width与height，分别是宽和高，盒子是且只能是矩形
其中，宽度默认为auto，当为块级元素是，auto表示一整行，当为行内元素是，auto的宽度是内容的宽度
高度默认是内容的高度。
宽度和高度可以设置百分比，这里的1是父元素的宽度和高度
内填充
表示为padding，有四个方向。
padding-top 上
padding-right 右
padding-bottom 下
padding-left 左边
也可以只写padding
当后面只有一个数时，表示上下左右都是这个值
两个数，第一个表示上下，第二个表示左右
三个数，第一个表示上，第二个表示左右，第三个表示下
四个数，按照上右下左一次表示
每个数之间用空格隔开
边框
表示为border
border-width 粗细
border-style 样式，包括solid 实线 dotted 点画线 dashed 虚线 none 没有
border-color 边框颜色，也是可以用英文，rgb，#xxxxxx表示
border 复合属性，依次是 border-width border-style border-color，中间用空格隔开
也有四个方向，与padding相同，不举例
外填充
表示为margin,是不同盒子之间的距离，也有四个方向，与padding相同，不举例
注意事项
1:很多标签都有默认的morgin，为了排版方便，所以统一使用margin 0;padding 0；
2：对于块级元素来说，存在margin重叠问题，前提是块级元素，在垂直方向这两点。也叫margin的塌陷
分为两种：
(1):margin的兄弟元素重叠
.box1{ width: 200px;height: 200px;margin-bottom: 150px;}
.box2{ width: 200px;height: 200px;margin-top: 100px;}
如上，理论来讲，box1与box2应该有250px的间隔，但是实际上只有150px，也就是说，在这里那个大选择那个
解决方法：兄弟元素之间只设置一个margin
（2）margin的父子元素重叠
<div class="box1">
<p class="box2">我是一个段落</p>
</div>
.box1{
background-color: pink;
margin-top: 50px;
}
.box1 .box2{
background-color: gold;
margin-top: 30px;
}
如上，理论来讲，p标签上方应该有80px的margin，但实际上只有50px,这就是父子元素之间的margin重叠
解决方法：给父元素加border和padding（只加一个0px不行）
背景
表示为background属性如下
background-color 设置颜色
background-image 设置背景图片
background-repeat 设置图片是否平铺
background-position 设置图片位置
其中，针对于背景图片的大小有如下问题
当背景图片大于盒子大小时，会从图片的左上角开始截下盒子大小的图片
当背景图片等于盒子大小时，没问题
当背景图片小于盒子大小是，默认情况下背景图片会平铺盒子，这时可以通过background-repeat来不平铺
排版相关
浮动
浮动最初是为了解决字与图片的位置，从而实现word里的字围效果，不过后来大伙发现排版更好用
浮动元素的特点
1：贴靠性：如果多个元素都向一个方向浮动，纳闷他们就会贴在一起，当然，前提是空间要够
.box1{
float:left;
width:200px;
height:300px
}
.box2{
float:left;
width:200px;
height:300px
}
上面的box1与box2就会在同一行，不管是块级元素还是行内元素。换句话说，浮动可以解决块级元素单独占一行的问题
2：当行内元素浮动时，可以设置它的宽高，换句话说，浮动可以解决行内元素无法设置宽高的问题
综合以上两点，浮动可以使元素更统一
3：当块级元素浮动时，如果没有设置宽度，那么它的宽度会尽可能小
4：当一个元素内部所有元素都浮动，且父元素没有设置高度的情况下，父元素的高度会塌陷，即父元素高度为0
元素浮动带来的影响
解决方法：
(1)overflow:hidden;
(2)把父元素的height加大
注意：当元素浮动时，他的位置就不在了，所以它后面的元素会占据它的位置，但是后面元素的内部文字不会上去，为了解决这一点，我们需要:clear:left/right/top/bottom（哪里需要写哪里）
3245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
