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
相邻弟弟：两个选择器用+链接，指紧跟着第一个元素的一个元素

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
相邻弟弟：两个选择器用+链接，指紧跟着第一个元素的一个元素