当前位置:   article > 正文

Web前端学习:CSS基础-小终结【布局和文本常用样式、常用属性、外边距和内边距】_内边距和外边距怎么设置

内边距和外边距怎么设置

目录

一、常用样式

1、布局常用样式 

 2、文本常用样式

二、常用属性 

1、display属性 

2、overflow属性

 三、外边距和内边距

1、padding内边距 

 2、margin外边距


一、常用样式

CSS中有两种常用的样式,分别为:

  • 布局常用样式
  • 文本常用样式 

以下将对这两种样式进行演示和说明

1、布局常用样式 

  • width设置元素(标签)的宽度,如: width:100px;
  • height 设置元素(标签)的高度,如: height:200px;
  • background 设置元素背景色或者背景图片,如 : background:gold;设置元素背景色为金色
  • border设置元素四周的边框,如: border:1px solid black;设置元素四周边框是1像素宽的黑色实线 (solid是实线条,dashed是虚线)

代码演示: 

  • 例:设置一个四周边框是1像素宽的黑色虚线

  •  运行结果

 2、文本常用样式

  • color 设置文字的颜色,如: color:red;
  • font-size 设置文字的大小,如: font-size:12px;
  • font-family 设置文字的字体,如 : font-family:'微软雅黑';为了避免中文字不兼容,一般写成: font-family:'Microsoft Yahei';
  • font-weight 设置文字是否加粗,如: font-weight:bold;设置加粗 font-weight:normal 设置不加粗
  • line-height 设置文字的行高,如:line-height:24px;表示文字高度加上文字上下的间距是24px﹐也就是每一行占有的高度是24px
  • text-decoration设置文字的下划线,如: text-decoration:none;将文字下划线去掉 

二、常用属性 

1、display属性 

display属性是用来设置元素的类型及隐藏的,常用的属性有:

  • none元素隐藏且不占位置
  • block元素以块元素显示 (默认)

 代码演示:

  • 将第二个标签的文本值给隐藏起来 

  •  隐藏前和隐藏后的运行结果比较

​  ​  

2、overflow属性

overflow的设置项∶

  • visible 默认值内容不会被修剪,会呈现在元素框之外。
  • hidden 内容会被修剪,并且其余内容是不可见的。
  • scroll  内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
  • auto   如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 

 代码演示:

  •  先设置一个长方体边框

​ 

  •  在这个长方体里写入比较长的数据,这时我们会看到数据溢出的现象

  •  这时利用overflow中的hidden设置项,发现内容被修剪,其余内容不可见

 

 

  •  但是,这并不是我们想要达到的效果,我们希望能够在长方体中看到所有数据
  • 于是我们把hidden换成scroll,看其效果如何

  • 再把scroll换成auto,看其效果 ,因为是水平方向上有数据溢出,所以就只出现水平滚动条

 


 三、外边距和内边距

1、padding内边距 

padding:定义元素边框与元素内容之间的空白区域。
padding-top、padding-bottom、padding-right、padding-left

  • padding:25px 50px 75px 100px;        上、右、下、左
  • padding:25px 50px 75px;        上、左右、下
  • padding:25px 50px;        上下、左右
  • padding:25px;         上下左右 

 代码演示:

  • 先设置一个正方体边框 ,并在边框内写入内容

 

  •  查看内边距,鼠标右键,点击检查,会看到右下方有一个正方体,可以把这个正方体看成是一个盒子,这个盒子中可以看到内边距的内容。

 

  •  设置内边距:padding:25px 50px 75px;        上、左右、下

 2、margin外边距

 margin:设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。

margin-top、margin-bottom、margin-right、margin-left

  • margin:25px 50px 75px 100px;        上、右、下、左
  • margin:25px50px 75px;        上、左右、下
  • margin:25px 50px;        上下、左右
  • margin:25px;        上下左右

margin的用法和padding相同,可参照以上步骤使用。 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/631032
推荐阅读
相关标签
  

闽ICP备14008679号