当前位置:首页 > css相关 > 正文内容

三剑客实战之Css入门基础知识[css内外边距和宽高设置]

css外边距合并

外边距合并:定义为当两个垂直外边距相遇时,将形成一个外边距。合并之后的外边距高度是等于两个发生合并的外边距高度中的较大者。外边距合并(叠加)在实践中对网页进行布局时,它会造成许多混淆。也是一个相对比较简单的概念。当一个元素出现在另一个元素上面时,先前第一个元素的下外边距与第二个元素的上外边距会发生合并。


所有 CSS 外边距属性
属性描述关键代码
margin用于在一条声明中设置外边距属性的简写属性margin:2cm 4cm 3cm 4cm;
margin-bottom设置元素的下外边距margin-bottom:2cm;
margin-left设置元素的左外边距margin-left:2cm;
margin-right设置元素的右外边距margin-right:2cm;
margin-top设置元素的上外边距margin-top:2cm;

CSS 内边距

关键词:padding 

在CSS中,您可以完全控制内边距(填充),该属性用于在任何定义的边界内的元素内容周围生成空间,有一些属性可以为元素的每一侧(上、右、下和左侧)设置内边距。


Padding - 单独的边

CSS 拥有用于为元素的每一侧指定内边距的属性:

padding-top(上)

padding-right(右)

padding-bottom(下)

padding-left(左)

所有内边距属性都可以设置以下值:注意:不允许负值。

length以 px、pt、cm 等单位指定内边距
%指定以包含元素宽度的百分比计的内边距
inherit指定应从父元素继承内边距

关键代码示例:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Padding - 简写属性

在一个属性中指定所有内边距属性。(此举可为了缩减代码)padding 属性是以下各内边距属性的简写属性:

padding-top(上边)

padding-right(右边)

padding-bottom(下边)

padding-left(左边)


假如 padding 属性设置了一个值:

padding: 25px;

定义为:所有四个内边距都是 25px


假如 padding 属性设置了两个值:

padding: 25px 50px;

定义为:上和下内边距是 25px,右和左内边距是 50px

关键代码演示:

div {
  padding: 25px;
}


假如 padding 属性设置了三个值:

padding: 25px 50px 75px;

定义为:上内边距是 25px,右和左内边距是 50px,下内边距是 75px

关键代码演示:

div {
  padding: 25px 50px 75px;
}


假如:padding 属性有四个值:

padding: 25px 50px 75px 100px;

定义为:上内边距是 25px,右内边距是 50px,下内边距是 75px,左内边距是 100px

关键代码演示:

div {
  padding: 25px 50px 75px 100px;
}


内边距和元素宽度,内容区域是元素(盒模型)的内边距、边框和外边距内的部分。width 属性指定元素内容区域的宽度,假如元素拥有指定的宽度,则添加到该元素的内边距会添加到元素的总宽度中。这通常是不希望的结果。这里假如下例代码<div> 元素的宽度为 300px。但是,<div> 元素的实际宽度将是 350px(300px + 左内边距 25px + 右内边距 25px):

div {
  width: 300px;
  padding: 25px;
}

若要将宽度保持为 300px,无论填充量如何,那么您可以使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距,则可用的内容空间会减少。

例如:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

CSS 设置高度和宽度

width 和 height 属性用于设置元素的高度和宽度。属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。可设置如下值:

auto默认。浏览器计算高度和宽度。
length以 px、cm 等定义高度/宽度。
%以包含块的百分比定义高度/宽度。
initial 将高度/宽度设置为默认值。
inherit

从其父值继承高度/宽度。

下例为此元素的高度为 300 像素,宽度为 80%,背景色为红色。

div {
  height: 300px;
  width: 80%;
  background-color: red;
}

下例中元素的高度为 200 像素,宽度为 600 像素,背景为powderblue。

div {
  height: 200px;
  width: 600px;
  background-color: powderblue;
}

提示:width 和 height 属性不包括边框或外边距、内边距、!它们设置的是元素的外边距内区域的高度/宽度以及内边距、边框!

max-width

该属性定义于设置元素的最大宽度。假如将其设置为默认值, none 代表没有最大宽度),长度值(例如 px、cm 等)或包含块的百分比(%)来指定 max-width(最大宽度),当浏览器窗口小于元素的宽度(500px)时,会发生之前那个 <div> 的问题。而后浏览器会将水平滚动条添加到页面。此举为使用 max-width 能够改善浏览器对小窗口的处理。下例关键代码演示中元素的高度为 150 像素,最大宽度为 550 像素。提示:max-width 属性的值将覆盖 width(宽度)。

div {
  max-width: 550px;
  height: 150px;
  background-color: powderblue;
}

用百分号表示一个图像的宽和高:

img.one {
  height: auto;
  width: auto;
}

img.two {
  height: 50%;
  width: 50%;
}

设置元素的最大宽度和最小宽度并赋于背景色:

div {
  max-width: 400px;
  min-width: 100px;
  background-color: powderblue;
}

设置元素的最大高度和最小高度并赋于背景色:

div {
  max-height: 600px;
  min-height: 400px;
  background-color: powderblue;
}
CSS 尺寸属性
属性描述关键代码
height设置元素的高度height:100px;



max-height设置元素的最大高度max-height:100px;



max-width设置元素的最大宽度max-width:100px;



min-height设置元素的最小高度min-height:100px;



min-width设置元素的最小宽度min-width:100px;



width设置元素的宽度width:100px;

可能的值:

auto -----默认值。浏览器可计算出实际的宽度。

length---使用 px、cm 等单位定义宽度。

%--------定义基于包含块(父元素)宽度的百分比宽度。

inherit---规定应该从父元素继承 width 属性的值。


word-break 

该属性规定自动换行,可通过使用 word-break 属性,使浏览器实现在任意位置的换行。

normal     使用浏览器默认的换行规则。(默认值)

break-all 允许在单词内换行。

keep-all 只能在半角空格或连字符处换行。

继承性: yes

版本: CSS3

JavaScript 语法: object.style.wordBreak="keep-all"

比如在恰当的断字点进行换行:

p.test {word-break:hyphenate;}


扫描二维码推送至手机访问。

版权声明:本文由uuucd.cn发布,如需转载请注明出处。

本文链接:https://www.uuucd.cn/css/60.html

标签: css相关

相关文章

利用css隐藏元素的5种方法之[Display属性简介]

利用css隐藏元素的5种方法之[Display属性简介]

用 CSS 隐藏页面元素有许多种方法。但是每个方法之前是存在着细微的不同,这些不同决定了在一个特定的场合下使用哪一个方法。你可以将 将 visibility 设为 hidden、将 display 设为 none、opacity 设为 0、...

Css 及 Html5之初学者基础教程[前端语言基础]

Css 及 Html5之初学者基础教程[前端语言基础]

前端语言基础:HTML5 & CSS(一) HTML5:超文本标记语言1) :基本概念Ω是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 )Ö这些标签以<标签名称>的形式出现,用于标记...

三剑客实战之Css入门基础知识[css控制颜色]

三剑客实战之Css入门基础知识[css控制颜色]

css中,控制指定颜色是通过使用预定义的颜色名称,或 RGB、HEX、HSL、RGBA、HSLA 值,在 CSS 中,可以使用颜色名称来指定颜色,CSS/HTML 支持 140 种标准颜色名。CSS 文本颜色下面是简单设置文本的颜...

三剑客实战之Css入门基础知识[CSS 背景属性定义]

三剑客实战之Css入门基础知识[CSS 背景属性定义]

CSS 背景属性:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position background-color...

 三剑客实战之Css入门基础知识[css边框属性教程一]

三剑客实战之Css入门基础知识[css边框属性教程一]

CSS 边框属性关键词:borderborder 属性允许您指定元素边框的颜色和宽度以及样式。CSS 边框样式关键词:border-style border-style 属性作用于指定显示的边框外观类型。可以设置一到四个值(用于上...

三剑客实战之Css入门基础知识[css边框属性教程二]

三剑客实战之Css入门基础知识[css边框属性教程二]

CSS 圆角边框关键词:border-radius 用于向元素添加圆角边框关键代码及举例:p { border: 3px; solid red;/*普通边框*/ } p ...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。