盒子模型(padding-margining)-样式继承-浮动

1 回顾

1. 常用属性背景属性： background-color、background-image、background-repeat、background-position、background-attachment、background鼠标光标样式： cursor 值： pointer、move列表样式： list-style-type、list-style-position、list-style-image、list-style表格样式： table-layout、border-collapse2. 选择器组合选择器： 后代元素选择器、子元素选择器、并集选择器、交集选择器伪类选择器： :link :visited :hover :active3. 选择器优先级ID 选择器  > 类名选择器、伪类选择器 > 标签名选择器 > 全局选择器

2 盒子模型深入讲解

2.1 盒子模型的组成

① 盒子模型的相关概念

内容区域 content： 盒子的主要区域，盒子中的文本内容或者后代元素都显示在内容区域中。

内边距 padding： 盒子的边界（边框）与内容的间距。

边框 border： 在盒子的边界上。

外边距 margin： 盒子与其他盒子的距离。

② 影响盒子大小的因素

盒子大小 = 内容区域大小 + 内边距 + 边框宽度

注意： 外边距不会影响盒子的大小，外边距会影响盒子的位置。

2.2 盒子中的内容区域

① 设置内容区域的宽高

CSS 属性名	功能	属性值
width	设置内容区域宽度	长度
height	设置内容区域高度	长度
max-width	设置内容区域的最大宽度	长度
max-height	设置内容区域的最大高度	长度
min-width	设置内容区域的最小宽度	长度
min-height	设置内容区域的最小高度	长度

注意：

宽高最大最小限制一般不会与设置固定的宽高一起使用，主要对元素默认宽高进行限制。

使用百分比设置元素的宽高，参考父元素内容的宽高！

② 块级元素的默认内容宽度的计算规则

行内元素和行内块元素默认的宽高都是被内容撑开，没有内容就没有宽高。

块级元素的默认高度被内容撑开，没有内容就没有高度。块级元素的默认宽度计算规则如下：

元素默认总宽度 = 父元素内容的宽度 - 自己左右外边距元素默认内容宽度 = 父元素内容的宽度 - 自己左右外边距 - 自己左右边框宽度 - 自己左右内边距

2.3 盒子的内边距 padding

CSS 属性名	功能	属性值
padding-left	设置左内边距	长度
padding-right	设置右内边距	长度
padding-top	设置上内边距	长度
padding-bottom	设置下内边距	长度
padding	复合属性，设置多个方向的内边距	长度

padding 复合属性可以设置一个值、二个值、三个值、四个值，规则如下：
padding: 10px;  /* 四个方向内边距都是 10px */
padding: 20px 30px;  /* 上下  左右 */
padding: 1px 2px 3px;  /*上 左右 下*/
padding: 10px 20px 30px 40px;  /*上 右 下 左*/
内边距值的一些规则：

使用百分比作为长度设置内边距，不论设置的哪个方向的内边距，都参考父元素内容的宽度。

内边距的值不可以是负数，不能是 auto（该元素在父元素中水平居中）。

不同显示模式的元素，设置内边距的规则：

块级元素、行内块元素可以完美设置各个方向内边距。

行内元素可以完美地设置左右内边距，但是上下内边距设置不完美。

2.4 边框 border

CSS 属性名	功能	属性值
border-style	设置边框线风格	none：无边框线，默认值 solid：实线 dashed：虚线 dotted：点线 double：双实线
border-width	设置边框宽度	长度，默认值 3px
border-color	设置边框颜色	颜色值，默认黑色
border	复合属性	同时设置四个方向的边框颜色、宽度、风格
border-left border-left-style border-left-color border-left-width border-right border-right-style border-right-color border-right-width border-top border-top-style border-top-color border-top-width border-bottom border-bottom-style border-bottom-color border-bottom-width	…	…

注意： border 复合属性，对值没有顺序和数量要求。

2.5 外边距 margin

① 相关 css 属性

CSS 属性名	功能	属性值
margin-left	设置左外边距	长度
margin-right	设置右外边距	长度
margin-top	设置上外边距	长度
margin-bottom	设置下外边距	长度
margin	复合属性，设置各个方向的外边距	1 ~ 4 值

② margin 设置规则

margin 复合属性，可以设置一个值、两个值、三个值、四个值，规则如下：

margin： 10px;  /*设置 4 个方向的外边距*/
margin: 10px 20px; /*上下  左右*/
margin: 10px 20px 30px;  /*上 左右 下*/
margin: 10px 20px 30px 40px;  /*上 右 下 左*/

外边距值的规则：

如果使用百分比设置长度作为外边距的值，参照父元素内容的宽度。
外边距的值可以负数，也可以设置为 auto。

不同显示的元素，设置外边距的规则：

块级元素、行内块元素可以完美设置各个方向的外边距。
行内元素，可以完美设置左右外边距，上下外边距无法设置。

③ margin 塌陷

什么是 margin 塌陷?

第一个子元素的上外边距和最后一个子元素的下外边距，会作用在父元素上，这种现象称之为margin 塌陷。

margin 塌陷只发生在块级元素上。

如何解决 margin 塌陷？

方案一：给父元素设置边框。
方案二：给父元素设置内边距。
方案三：给父元素设置 CSS 属性 overflow:hidden。

④ margin 合并

什么是 margin 合并？

上一个兄弟元素的下外边距会与下一个兄弟元素的上外边距进行合并，二者之间的距离取较大的那个外边距。

margin 合并只发生在块级元素之间。

如何解决 margin 合并？

把margin合并作为一种现象，布局的时候多加注意。

2.6 内容溢出

CSS 属性名	功能	属性值
overflow	设置溢出内容显示方式	visible：显示溢出的内容，默认值 hidden：隐藏溢出的内容 scroll：显示滚动条，不论内容是否溢出都有滚动条 auto：内容溢出显示滚动条，内容不溢出没有滚动条。
overflow-x	水平方向溢出内容的显示方式	同上
overflow-y	垂直方向溢出内容的显示方式	同上

2.7 隐藏元素

要想隐藏元素，可以设置 CSS 属性 display:none 或者 visibility:hidden。

两种设置方式的区别：

display:none 让元素完全不占任何位置。
visibility：hidden 只是看不到元素，元素仍然占据原来的位置。

3 样式继承和默认样式

3.1 样式继承

样式继承指的是：设置在父元素上的样式也会作用在子元素或后代元素。不是所有的样式都可以继承。

可以继承的样式： 字体样式、文字颜色、文本样式（除了 vertical-align）.

不可以继承的样式： 宽高、内外边距、边框、背景等等。

3.2 默认样式

许多元素具有默认的样式，如 a 元素具有默认的字体颜色和下划线、stong 默认字体加粗、em 默认字体变斜体、p 元素具有默认的上下外边距，h1~h6 具有默认的上下外边距和默认的字体大小以及字体加粗，ul 和 ol 具有默认的左内边距、body具有默认的外边距等等。

默认样式的优先级大于继承过来的样式！

5 浮动

5.1 浮动的简介

浮动设计的最初想法是为了实现文字环绕图片的效果。

目前浮动成为了前端主流的布局方式。

5.2 元素浮动之后的特点

不论元素原来是行内元素、块级元素还是行内块元素，设置浮动之后，就成了浮动元素，具有浮动元素自己的特性。
浮动元素默认的宽高是被内容撑开，没有内容就没有宽高；可以通过属性设置元素的宽高。
浮动元素可以完美地设置各个方向的内外边距，且不会有margin的塌陷和合并。
浮动的元素会脱离文档流，多个浮动的元素会水平排列，浮动元素位置如果与不浮动元素重合会显示在上面，不浮动元素中的文本会被挤出。

5.3 浮动元素产生的影响

① 元素浮动之后产生的影响

浮动元素会对后面的兄弟元素产生影响；后面的兄弟元素会在浮动元素的下面显示导致元素重叠。
浮动元素会被父元素产生影响，无法撑开父元素的高度，导致父元素高度塌陷

② 解决浮动的影响（清除浮动）

解决对后面兄弟元素的影响：

给后面的兄弟元素设置 CSS 属性 clear:both既可

HTML-盒子模型(padding-margining)-样式继承-浮动相关推荐

【CSS】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )
文章目录一.网页底部盒子模型测量及样式 1.盒子布局说明 2.底部的大盒子测量及样式 3.版心盒子 4.版权盒子 5.链接盒子二.代码示例 1.HTML 标签结构 2.CSS 样式 3.显示效果 ...
【CSS】课程网站网格商品展示模块制作 ② ( 网格商品展示盒子模型测量及样式 | 处理列表间隙导致意外换行问题 | 代码示例 )
文章目录一.网格展示盒子模型测量及样式 1.盒子尺寸测量 2.处理列表间隙导致意外换行问题 3.列表项测量及样式二.网格展示盒子模型代码示例 1.HTML 标签结构 2.CSS 样式 3.展示效果 ...
html盒子模型子元素怎么水平占满父元素_CSS盒子模型、溢出处理、浮动、高度坍塌问题...
盒子模型 1.内容区 width 盒子内容区宽度 height 盒子内容区高度 background-color 背景颜色盒子可见大小由内容区,内边距和边框共同决定为元素设置边框,必须指定3个样式 ...
【CSS学习（三）盒子模型、边距重叠浮动、清除浮动】
盒子模型盒子模型在CSS学习中尤为重要,对盒子模型的深刻理解有利于 CSS开发水平的提示,在开发中遇到难以理解的现象,往往是因为对模型的理解不够. 盒子模型这个名词来自英文里面的Box modelm ...
html盒模型中border的写法,【前端】盒子模型的边框样式属性和应用技巧讲解
分割页面中不同的盒子,常常需要给元素设置边框效果.在CSS中边框属性包括边框样式属性(border-style).边框宽度属性(border-width).边框颜色属性(border-color).单 ...
盒子模型——padding
内边距的特点 1. padding可以撑大元素的尺寸 padding可以撑开盒子的尺寸,但是设置的高度和宽度并不包含padding,所以,如果测量的时候包含了padding,在设置宽高的时候需要减去p ...
CSS 入门2（样式属性+元素溢出+显示特性+盒子模型）
css样式属性常用布局样式属性常用文本样式属性元素溢出显示特性盒子模型常用布局样式属性 <!DOCTYPE html> <html lang="en" ...
HTML元素 span,div,p,h,a盒子模型中padding属性的演示和理解
在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容. 盒模型允许我们在其 ...
初识HTML（五）进阶：CSS盒子模型、页面布局
目录 CSS 盒子模型(Box Model) 页面布局浮动流制作导航栏如何页面布局定位流 relative相对定位 absolute绝对定位 fixed固定定位 CSS 盒子模型(Box Mo ...

HTML-盒子模型(padding-margining)-样式继承-浮动