盒子模型及其通用属性

2022年6月21日 172次阅读 来源: 不及0908

1.认识盒子模型

所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

《盒子模型及其通用属性》

不同部分的说明：

  • Margin(外边距) – 清除边框外的区域，外边距是透明的。
  • Border(边框) – 围绕在内边距和内容外的边框。
  • Padding(内边距) – 清除内容周围的区域，内边距是透明的。
  • Content(内容) – 盒子的内容，显示文本和图像。

为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。

盒子模型是css的基石，规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。

2.盒子模型的三个属性

1.margin主要迎来调节盒子的位置

2.padding是用来调节盒子里面的内容和盒子的距离，所以会使盒子撑大（使用text-indent时不会撑大盒子）

用法：

(1）用来调整内容在容器中的位置关系

(2）用来调整子元素在父元素中的位置关系。

注：padding属性需要添加在父元素上。

(3）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值

属性值的4种方式：

  • 四个值：上 右 下 左 {padding:0px 0px 0px 40px;}
  • 三个值：上 左右 下 {padding:10px 20px 30px ;}
  • 二个值：上下 左右 {padding:10px 20px ;}
  • 一个值：四个方向 padding:2px;/*定义元素四周填充为2px*/

3.border边框 border：10px solider(实线)/dotted(点线)、dashed(虚线) red

4.padding不能写负值，margin可以写负值

盒子的实际大小

  • 宽 =左右margin+左右border+左右padding+width，
  • 高 =上下margin+上下border+上下padding+height

 

伪类选择器（中间无空格）

a:link{color:red;}选中第一个a而不选中第二个a，未单击访问时的超链接样式(不用)

a:visited{color:;}点击链接后改变颜色（不用）

a:hover{color:；font-size:;}鼠标一碰到就改变（常用）

a:active{background-color:;}鼠标点击时的状态，即表示超链接被激活时的状态（不常用）

目前所有的标签都支持hover，active

.b1 a:hover{} 摸b1中的a才改变

.b1:hover a{} 摸b1,a就开始改变

文本溢出相关的属性

1、溢出属性（容器的）

overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;

visible:默认值，内容不会被修剪，会成现在元素框之外；

hidden：内容会被修剪，并且其余内容是不可见的；

scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;

auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;

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

2、空余空间

white-space：normal/nowrap/pre/pre-wrap /pre-line /inherit 该属性用来设置如何处理元素内的空白；

normal：默认值，空白会被浏览器忽略，

nowrap:文本不会换行，文本会在同一行上继续，直到遇到

标签为止；

pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签；

pre-wrap：保留空白符序列，但是正常的进行换行；

pre-line:合并空白符序列，但是保留换行符；

inherit：规定应该从父元素继承White-space属性的值；(ie浏览器不支持此属性值)

3、省略号显示

text-overflow:clip/ellipsis

clip：不显示省略号（...），而是简单的裁切;

ellipsis：当对象内文本溢出时，显示省略标记；

text-overflow属性仅是...，当单行文本溢出时是否显示省略标记，并不具备其它的样式属性定义

4、要实现单行文本溢出时产生省略号的效果定义：

  • 容器宽度：width：value；（span不可实现，因为其无法控制宽度）
  • 强制文本在一行内显示:white-space：nowrap;
  • 溢出内容为隐藏：overflow：hidden；
  • 溢出文本显示省略号：text-overflow：ellipsis;

省略不可以继承，哪个盒子需要就添加到哪个盒子上

 

小知识点：

li{list-style:none;}去掉列表样式

背景图：background-image;url(../img/1.jpg);

若背景图太小会发生平铺现象使用 background-repeat:no-re[eat;

若图太大会自动切图

背景图的定位：background-position:20px(左右) center/50%（上下）

background-position:-5px 10px代表的意义是背景图片向左偏移5px，向下偏移10px（第一个值代表水平，负值是向左移动，第二个值代表垂直，正直向下移动）

后面文字的位置则用 text-indent:30px;

 

让图自动更改适应的方法：

背景图片：background-size:100%（宽度） auto（高度）; 或 background-size:auto 100%;（css3新增属性）

正常图片：一定要设置大小

背景图属于css样式、img属于html结构

 

    原文作者：不及0908
    原文地址: https://blog.csdn.net/huhuhuja/article/details/110474890
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞