行高与盒子模型

最新推荐文章于 2024-04-25 11:27:37 发布

御裔宸说

最新推荐文章于 2024-04-25 11:27:37 发布

阅读量368

点赞数

分类专栏： css知识点文章标签：行高的盒子的模型

本文链接：https://blog.youkuaiyun.com/shisjieshoufu/article/details/79310885

版权

css知识点专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了HTML中行高的概念及其与文字大小的关系，并通过实例展示了如何设置不同类型的边框样式，包括实线、虚线及点线等。此外还讲解了网页布局中的盒子模型组成部分，如边框(border)、内边距(padding)和外边距(margin)的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 
  <!DOCTYPE html 
  > 
 
  < 
  html 
  > 
 
  < 
  head 
  > 
 
  < 
  meta 
  charset= 
  "utf-8" 
   /> 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "IE=edge" 
  > 
 
  < 
  title 
  >行高与盒子模型 
  </ 
  title 
  > 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1" 
  > 
 
  < 
  link 
  rel= 
  "stylesheet" 
  type= 
  "text/css" 
  media= 
  "screen" 
  href= 
  "main.css" 
   /> 
 
  < 
  script 
  src= 
  "main.js" 
  > 
  < 
  / 
  script 
  > 
 
  < 
  style 
  type= 
  "text/css" 
  > 
 
  /* 浏览器默认文字大小 
 
   浏览器默认文字大小 16px 
 
   默认行高： 18px（inlne-height） 
 
   行高=文字大小+上间距+下间距 */ 
 
  div{ 
 
  width: 
  500px; 
 
  height: 
  300px; 
 
  background-color: 
  blue; 
 
  font-size: 
  20px; 
 
  line-height: 
  300px; 
 
   } 
 
  /* 网页中盒子的组成 
 
   ☞border(边框) 
 
   ☞内边距（padding） 
 
   ☞外边距（margin） */ 
 
  /* Border（边框） 
 
   ☞Border-width: 边框宽度 
 
   ☞border-style: 边框样式 
 
   ◆solid 边框为实线 
 
   ◆dotted 点线 
 
   ◆dashed 虚线 
 
   ☞border-color:     边框颜色 */ 
 
  input{ 
 
  border: 
  none; 
 
  outline-style: 
  none; 
  /* 去掉轮廓线 */ 
 
   } 
 
  .usernme{ 
 
  border: 
  1px 
  dashed 
  red; 
 
  background: 
  blue; 
 
   } 
 
  .usernme:focus{ 
 
  background-color: 
  yellowgreen; 
 
   } 
 
  .email{ 
 
  border-bottom: 
  1px 
  dotted 
  red; 
 
   } 
 
  .serch{ 
 
  border: 
  1px 
  solid 
  black; 
 
  background-image: 
  url( 
  "search.png"); 
 
  background-repeat: 
  no-repeat; 
 
  background-position: 
  right; 
 
   } 
 
  < 
  / 
  style 
  > 
 
  </ 
  head 
  > 
 
  < 
  body 
  > 
 
  < 
  div 
  > 
 
   小姐姐 
 
  </ 
  div 
  > 
 
  < 
  label 
  for= 
  "usernme" 
  > 
 
   用户名: 
 
  </ 
  label 
  > 
 
  < 
  input 
  type= 
  "text" 
  class= 
  "usernme" 
  id= 
  "usernme" 
  > 
 
  < 
  br 
  > 
 
  < 
  br 
  > 
 
  < 
  label 
  >邮箱： 
  </ 
  label 
  >< 
  input 
  type= 
  "text" 
  class= 
  "email" 
  > 
 
  < 
  br 
  > 
 
  < 
  br 
  > 
 
  < 
  label 
  > 搜索: 
  </ 
  label 
  >< 
  input 
  type= 
  "text" 
  class= 
  "serch" 
  > 
 
  </ 
  body 
  > 
 
  </ 
  html 
  >