~

、

、
• 、
  、

  、

  、

  等

  替换元素
  、、等

  如果图片既通过width来设置宽度，又通过css样式来设置宽度，最终宽度为css样式中设置的宽度

  DOCTYPE html>
  html lang="en">
  head>
      meta charset="UTF-8">
      title>Documenttitle>
      style>
           /*实际尺寸为200px*/
          img{width:200px;}
      style>
  head>
  body>
      img src="cat.jpg" alt="cat" width="100px">
      
  body>
  html>

  border-style的值

  none 定义无边框。默认值
  hidden 与 “none” 相同。除非在表格元素中解决边框冲突时
  dotted 定义点状边框。在大多数浏览器中呈现为实线
  dashed 定义虚线。在大多数浏览器中呈现为实线
  solid 定义实线
  double 定义双线
  groove 定义 3D 凹槽边框
  ridge 定义 3D 垄状边框
  inset 定义 3D inset 边框
  outset 定义 3D outset 边框
  inherit 规定应该从父元素继承边框样式

  border可以四个边分开设置

  border-left

  border-right

  border-top

  border-bottom

      style>
           p{width:200px;height:100px;border-top:1px solid blue;}
      style>

  padding缩写：

  padding : 值1； //4个方向都为值1
  padding : 值1 值2 ; // 上下=值1，左右=值2
  padding : 值1 值2 值3；// 上=值1，左右=值2，下=值3
  padding : 值1 值2 值3 值4； // 上=值1，右=值2，下=值3,左=值4

  ---

   

  margin值可以为负值，padding值不可以为负值

  垂直方向上，两个相邻元素都设置外边距，外边距会发生合并

  合并高度=两个外边距高度中的最大值

  ---

  标准盒子模型

  宽度=内容宽度

  高度=内容高度

  盒子在页面中所占的宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距

  盒子在页面中所占的高度=上边距+上边框+上填充+内容高度+下填充+下边框+下边距

  盒子的实际宽度是：左边框+左内边距+内容宽度+右内边距+右边框

  盒子的实际高度是：上边框+上填充+内容高度+下填充+下边框

  IE盒子模型

  宽度=左边框+左填充+内容宽度+右填充+右边框

  高度=上边框+上填充+内容高度+下填充+下边框

  盒子在页面中所占的宽度=左边距+宽度+右边距

  盒子在页面中所占的高度=上边距+高度+下边距

  如果有DOCTYPE文档声明，则所有浏览器会统一按照标准盒子模型来解析

  ---

  display:inline; 内联，前后没有换行符

  行内元素无法设置宽和高，外边距只能设置左右的，无法设置上下的

  display:block; 块，前后带有换行符

  内联元素之间有缝隙，是因为存在换行

  DOCTYPE html>
  html lang="en">
  head>
      meta charset="UTF-8">
      title>Documenttitle>
      style>
          span{border:1px solid;}
      style>
  head>
  body>
      span>内联元素1span>
      span>内联元素2span>
      span>内联元素3span>
  body>
  html>

  

   

   

  解决方法一：取消换行

  DOCTYPE html>
  html lang="en">
  head>
      meta charset="UTF-8">
      title>Documenttitle>
      style>
          span{border:1px solid;}
      style>
  head>
  body>
      span>内联元素1span>span>内联元素2span>span>内联元素3span>
  body>
  html>

  解决方法二：在外层加div，设置字体为0，给子元素单独设置字体

  DOCTYPE html>
  html lang="en">
  head>
      meta charset="UTF-8">
      title>Documenttitle>
      style>
          div{font-size:0px;}
          span{border:1px solid;font-size:16px;}
      style>
  head>
  body>
      div>
          span>内联元素1span>
          span>内联元素2span>
          span>内联元素3span>
      div>
      
  body>
  html>

  display:none 不显示

  DOCTYPE html>
  html lang="en">
  head>
      meta charset="UTF-8">
      title>Documenttitle>
      style>
          a{color:#000;text-decoration: none;}
          span{display: none;;}
          a:hover span{display: inline-block;}
      style>
  head>
  body>
      a href="#">指我……span>和你捉迷藏span>a>
      
  body>
  html>

  

   

  css的盒子模型

  标签：:hover   ble   ati   span   spl   dash   边框   方法   通过   

  原文地址：https://www.cnblogs.com/chenyingying0/p/12245505.html