盒子模型及其通用属性

缺乏、安全感 2022-12-25 13:55 108阅读 0赞

### 1.认识盒子模型 ###

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70][]

不同部分的说明：

*  **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结构

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70]: /images/20221120/808e9cb185ef4a8a91a776775d03cce2.png