html的样式及常见问题解决（有边距撑大盒子，盒子塌陷等）

什么是样式

样式就是通过各种属性对标签的视觉效果进行修改，一般指大小、颜色、动画等
那么怎么使用它的，这里有几种方式
一个是在标签内写，也就是行内样式例如：
< p style=“height=50px”>< /p>这里的style就是行内样式，一般来讲很少这么用，因为这会显得代码很凌乱，而且，修改起来很麻烦
第二种在head标签中写入< style type=“text/css”>< /style>把这个写在title的下面，然后在这个里面，写样式，这叫内联样式，这也是一些小型页面最常用的方式
第三种是< link rel=“stylesheet” href=“css/style.css” />通过这种方式引入一个写好的css样式文件，这叫外联样式，这个在多页面使用样式的时候比较常用，可以提高样式的重用率

选择器

在内联样式和外联样式中，操作演示都是要通过选择器来操作的，基本的有id选择器：#id名 ；类选择器：一个.+类名 ；标签选择器：直接写标签名 ；通配符选择器：* 一般是用来清除页面整体的内外边距的；
还有层次选择器
群组：两个选择器用，分隔 意思是两个选择器的标签都用这个样式
例如：div,p
后代：两个选择器用空格隔开 就是在第一个选择器的标签下寻找有第二个选择器的标签来使用这个样式
例如：div p
子选择：两个选择器之间用>相连指所有在第一个元素下的所有第二个选择器
例如：div>p
相邻弟弟：两个选择器用+链接，指紧跟着第一个元素的一个元素
例如：div+p
两个选择器用~相连，指所有跟在第一个选择器后面的第二个选择器
例如：div~p
伪类选择器：伪类选择器都有一个：
:first-child 例：p:first-child 选择第一个元素并且元素为p才生效否则不生效
例如：div p:first-child 这是寻找div下的第一个标签，且这个标签为p，如果第一个标签不是p，则这个样式不生效
:last-child 和:first-child 类似，只不过是寻找最后一个
:first-of-type 例：p:first-of-type 选择第一个p标签
例如：div p:first-of-type 先找到div下的p标签，再找到p标签中的第一个
:last-of-type 与:first-of-type类似，找最后一个
:nth-child(n) 例：p:nth-last-child(3) 找到第三个标签，且这个要为p
:nth-of-type(n) 例：p:nth-of-type(3) 先找到p标签，再找到第三个p标签
:nth-last-child(n) 与:nth-child(n)类似，不过是倒着找
:nth-last-of-type(n)与:nth-of-type(n)类似，倒着找
属性选择器
使用[]来选择还有这些属性的标签
例如[name]所有有name属性的标签
[name=_blank]所有name=_blank的标签
a[src*=“abc”] src 属性中包含 “abc” 子串的每个 < a> 元素。
a[src$=".pdf"]src 属性以 “.pdf” 结尾的所有 < a> 元素。
a[src^=“https”]src 属性值以 “https” 开头的每个 < a> 元素。

优先级

在进行样式规划时，有的时候会碰到，多次给一个标签设置样式的情况，这是优先级就很重要了，样式会由优先级来决定谁显示
其中各个选择器的优先级也不一样

选择器	权值
通用选择器(*)	0
元素选择器(标签选择器)	1
类选择器 / 属性选择器 / 伪类选择器	10
id选择器	100
内联样式	1000
!important	无穷大

优先级更大的来显示样式，
但是当优先级相同的情况下，按照就近原则
继承的样式没有权值。例如div中有一个p，div设置的样式p也能用，但p没有权值

常用样式

有color设置颜色
设置方式有color:red(颜色名)；color:#FF0000(颜色编号)；
color:rgb(220,0,0)(三原色比例)；color:rgba(220,0,0,0)(最后一个是透明度)
还有字体的设置，字体设置一般为font和text开头
行高 line-height一般是为了让字体垂直居中，例如给p设置一个高度，在p中的文字会向上跑，而将行高和p的高度设成一直后，就会垂直方向居中
letter-spacing ：文字间距，指中文
word-spacing：单词间距，指英文
伪类：常用的有：hover例如div:hover可以设置鼠标悬停时的样式
列表的样式一般一list开头，可以设置列表前的样式和列表前符号的位置等
背景图也是常用的
background-color：背景颜色
background-image: url(图片地址);背景图
background-repeat背景图是否平铺，默认是x与y轴都平铺，若想不平铺要设置为no-repeat
background-position：用来设置背景图的位置
background-position: 100px 100px;可以用数字也可以用百分比和left这些名称
background-size：用来设置背景图大小
background-size: 200px 200px;也可以用百分比
background-size: cover;背景图填充满，然后裁剪掉多余位置
background-size: contain;会将图片显示完全，但可能不会填满背景区域
background-attachment：背景图是否随滚动条滚动 fixed。

很重要的一点：内外边距
padding：设置内边距
padding: 10px;四周内边距
padding: 10px 20px;上下边距10 左右20
padding: 10px 20px 30px;上边距10 左右20 下边距30
padding: 10px 20px 30px 40px;上右下左依次10 20 30 40 这是顺时针旋转设置边距
padding-top:也就可以用这样的单独设置一遍的内边距
margin：外边距，使用方式与内边距相同
border-style设置盒子的边框样式，如虚实线
有border-width边框宽度border-color边框颜色，这三个的使用和边距类似，可以只设置某一边的也可以都设置
border整体设置，如border:red soild 1px ;
border-radius这个设置的是边角的弧度
如：
border-radius: 50% ;
border-radius: 40px 30px 20px 50px ;用法和其他的属性类似

盒子被撑大的问题

在说完边距和边框后，有一点要说明，那就是边框和边距都会撑大盒子，有两种解决方式，一个是按照需求计算要设置的边距和边框大小，还有一个就是在盒子的样式中设置==box-sizing:border-box;==这一条属性，这样盒子设置多大，那么就有多大，不会被撑大

浮动

float：设置浮动的样式可以让盒子脱离普通文档流，想象一下，本来文档都是在一张纸上的但是浮动却让盒子到了另一张纸上并盖在了原来的纸上
有float：left；左浮动 right右浮动
、但是浮动也会带来一些问题，由于浮动是脱离了文档流，也就意味着，它原来的位置没有了，那么下一个盒子就会接替它的位子，但是浮动后的盒子又在文档流之上，那么就会遮住后来的盒子
第二：文字环绕在浮动盒子周围，不过这不算问题，本来有地方也需要这种效果
第三：父盒子会塌陷，因为父盒子的大小是靠子盒子的大小撑起来的，子盒子脱离文档流后，原来的位置就没有了，那么就没有东西支撑父盒子的大小了，就会出现塌陷的现象

盒子塌陷问题

在这里有两种解决方案：
第一种：根据需求提前设置好父盒子的大小，父盒子不是被撑起来的自然不存在塌陷问题
第二种：在浮动的子盒子后面加上一个盒子并在盒子中设置clear:both样式清除浮动，也可以解决塌陷问题

属性中还有定位
position: ;有absolute绝对定位和relative相对定位和fixed固定定位三种
其中relative会保留原来的位置，并以原来的位置为坐标原点进行移动
而absolute会脱离文档流，抛弃原来的位置会给予有position属性的父盒子来用移动
fixed也会脱离文档流，但它的定位是基于屏幕的也就是说不会跟着滚动条移动

动画

动画也有很多样式可以设置
首先要有transform:这是代表一个动画的操作
在其中有很多的效果
例如：
translate(x,y)横纵坐标的移动
例：transform: translate(50px,100px);从左侧移50上从顶部移100
rotate()旋转
例：
transform: rotate(30deg);把元素顺时针旋转 30 度。旋转有x，y，z三个轴可以使用
scale()调整大小
例：transform: scale(2,3);转变宽度为原来的大小的2倍，和其原始大小3倍的高度
skew()倾斜
transform: skew(20deg,30deg);元素在X轴和Y轴上倾斜20度30度。
举例：

div{
    margin: 120px auto;
    border: #FF0000 solid 1px;
    width: 100px;
    height: 100px;
    background-color: red;
    transition-property:height,width;对长度跟宽度属性进行过渡 
    transition-duration: 2s;过渡时间为2s
}

div:hover{//鼠标悬停时进行操作
    width: 200px;
    height: 200px;
    background-color: #FFFF00;
}

动画的简洁设置：

div{
    margin: 120px auto;
    border: #FF0000 solid 1px;
    width: 200px;
    height: 200px;
    background-color: red;
   /*开启动画，名称为myfirst，2s，无限循环，奇数次正向，偶数次反向。 */
    animation: myfirst 2s infinite alternate;


}

@keyframes myfirst//这是动画名称，代码块例是动画的动作
{
    0%   {background: red;width: 200px;}
    25%  {background: yellow;width: 250px;}
    50%  {background: blue;width: 300px;}
    100% {background: green;width: 350px;}
}


div:hover{
    /* 悬停的时候停止动画  */
    animation-play-state: paused ;
}