css学习笔记6(盒子模型)

2023-12-22 17:47:15

五、CSS盒子模型

1.CSS长度单位
  1. px:像素。
  2. em:相对元素font-size的倍数。
  3. rem:相对根字体大小,html标签就是根。
  4. %:相对父元素计算。

注意:CSS中设置长度必须加单位,否则样式无效!

2.元素的显示模式
  • 块元素(block)

    又称:块级元素

    特点:

    1. 在页面中独占一行,不会与任何元素共用一行,是从上到下排列的。
    2. 默认宽度:撑满父元素
    3. 默认高度:由内容撑开。
    4. 可以通过css设置宽高。
  • 行内元素(inline)

    又称:内联元素

    特点:

    1. 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排列。
    2. 默认宽度:由内容撑开。
    3. 默认高度:由内容撑开。
    4. 无法通过css设置宽高。
  • 行内块元素(inline-block)

    又称:内联块元素

    特点:

    1. 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排列。
    2. 默认宽度:由内容撑开。
    3. 默认高度:由内容撑开。
    4. 可以通过css设置宽高。

注意:元素早期只分为:行内元素块级元素,区分条件也只是一条:“是否独占一行”,如果按照这种分类方式,行内块元素应该算作行内元素。

3.总结各元素的显示模式
  • 块元素(block)

    1. 主体结构标签:html、body
    2. 排版标签:h1~h6、hr、p、pre、div
    3. 列表标签:ul、ol、li、dl、dt、dd
    4. 表格相关标签:table、tbody、thead、tfoot、tr、caption
    5. formoption
  • 行内元素(inline)

    1. 文本标签:br、em、strong、sup、sub、del、ins
    2. alabel
  • 行内块元素(inline-block)

    1. 图片:img
    2. 单元格:td、th
    3. 表单控件:input、textarea、select、button
    4. 框架标签:iframe
4.修改元素显示模式

通过CSS中的display属性可以修改元素的默认显示模式,常用值如下:

描述
none元素会被隐藏
block元素将作为块级元素显示。
inline元素将作为内联元素显示。
inline-block元素将作为行内块元素显示。
5.盒子模型的组成

CSS会把所有的HTML元素都看成一个盒子,所有的样式也都是基于这个盒子。

  1. margin(外边框):盒子与外界的距离。
  2. border(边框):盒子的边框。
  3. padding(内边距):紧贴内容的补白区域。
  4. content(内容):元素中的文本或后代元素都是它的内容。

图示如下:

在这里插入图片描述

盒子的大小=content + 左右padding + border

注意:外边框margin不会影响盒子的大小,但会影响盒子的位置。

6.盒子内容区(content)
描述属性值
width设置内容区域宽度长度
max-width设置内容区域的最大宽度长度
min-width设置内容区域的最小宽度长度
height设置内容区域的高度长度
max-height设置内容区域的最大高度长度
min-height设置内容区域的最小高度长度

注意:

max-widthmin-width一般不与width一起使用。

max-heightmin-height一般不与height一起使用。

7.关于默认宽度

所谓的默认宽度,就是不设置width属性时,元素所呈现出来的宽度。

总宽度=父的content-自身的左右margin

内容区的宽度=父的content-自身的左右margin-自身的左右border-自身的左右padding

8.盒子内边距(padding)
css属性名功能属性值
padding-top上内边距长度
padding-right右内边距长度
padding-bottom下内边距长度
padding-left左内边距长度
padding复合属性长度,可以设置1~4个值

padding复合属性的使用规则:

  1. padding10px;四个方向内边距都是10px
  2. padding10px 20px;10px,左右20px。(上下、左右)
  3. padding10px 20px 30px;10px,左右20px,下30px。(上、左右、下)
  4. padding10px;10px,右20px,下30px,左40px。(上、右、下、左)

注意:

  1. padding的值不能为负数。
  2. 行内元素的左右内边距是没问题的,上下内边距不能完美的设置。
  3. 块级元素行内块元素,四个方向内边距都可以完美设置。
9.盒子边框(border)
css属性名功能属性值
border-style边框线风格
复合了四个方向的边框风格
none:默认值
solid:实线
dashed:虚线
dotted:点线
double:双实线
border-width边框线宽度
复合了四个方向的边框宽度
长度,默认3px
border-color边框线颜色
复合了四个方向的边框颜色
颜色,默认黑色
border复合属性值没有顺序和数量要求。
border-left
border-left-style
border-left-width
border-left-color


border-right
border-right-style
border-right-width
border-right-color


border-top
border-top-style
border-top-width
border-top-color


border-bottom
border-bottom-style
border-bottom-width
border-bottom-color
分别设置各个方向的边框同上

边框相关属性共20个。

border-styleborder-widthborder-color其实也是复合属性。

10.盒子外边距(margin)
css属性名功能属性值
margin-left外边距CSS中的长度值
margin-right外边距CSS中的长度值
margin-top外边距CSS中的长度值
margin-bottom外边距CSS中的长度值
margin复合属性,可以写1~4个值,规律同padding(顺时针)CSS中的长度值
10.1 margin注意事项
  1. 子元素的margin,是参考父元素的content计算的。(因为是父亲的content中承装着子元素)
  2. margin、左margin:影响自己的位置;下margin、右margin:影响后面兄弟元素的位置。
  3. 块级元素、行内块元素,均可以完美地设置四个方向得margin;但行内元素,左右margin可以完美设置,上下margin设置无效。
  4. margin的值也可以是auto,如果给一个块级元素设置左右margin都为auto,该块级元素会在父元素中水平居中。
  5. margin的值可以是负值。
10.2 margin塌陷问题

什么是margin塌陷?

? 第一个子元素的margin会作用在父元素上,最后一个子元素的margin会作用在父元素上。

如何解决margin塌陷?

  • 方案一:给父元素设置不为0的padding
  • 方案二:给父元素设置宽度不为0的border
  • 方案三:给父元素设置css样式overflow:hidden
10.3 margin合并问题

什么是margin合并?

? 上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并,取一个最大的值,而不是相加。

如何解决margin塌陷?

? 无需解决,布局的时候上下的兄弟元素,只给一个设置上下外边距就可以了。

11.处理内容溢出
css属性名功能属性值
overflow溢出内容的处理方式visible:显示,默认值
hidden:隐藏
scroll:显示滚动条,不论内容是否溢出
auto:自动显示滚动条,内容不溢出不显示
overflow-x水平方向溢出内容的处理方式overflow
overflow-y垂直方向溢出内容的处理方式overflow

注意:

  1. overflow-xoverflow-y 不能一个是hidden,一个是visible,是实验性属性,不建议使用。
  2. overflow常用的值是hiddenauto,除了能处理溢出的显示方式,还可以解决很多疑难杂症。
12.隐藏元素的方式

方式一:visibility属性

visibility属性默认值是show,如果设置为hidden,元素会隐藏。

元素看不见了,还占有原来的位置(元素的大小依然保持)。

方式二:display属性

设置display:none,就可以让元素隐藏。

彻底地隐藏,不但看不见,也不占用任何位置,没有大小宽高。

13.样式的继承

有些样式会继承,元素如果本身设置了某个样式,就使用本身设置的样式;但如果本身没有设置某个样式,会从父元素开始一级一级继承(优先继承离得近的祖先元素)。

会继承的css属性

字体属性、文本属性(除了vertical-align)、文本颜色等。

会继承的css属性

边框、背景、内边距、外边距、宽高、溢出方式等。

一个规律:能继承的属性,都是不影响布局的,简单说:都是和盒子模型没关系的。

14.默认样式

元素一般都有默认得样式,例如:

  1. a元素:下划线、字体颜色、鼠标小手。
  2. h1~h6元素:文字加粗、文字大小、上下外边距。
  3. p元素:上下外边距。
  4. ul、ol元素:左内边距
  5. body元素:8px外边距(4个方向)

? …

优先级:元素的默认样式 > 继承的样式,所以如果要重置元素的默认样式,选择器一定要直接选择到该元素。

15.布局小技巧
  1. 行内元素、行内块元素,可以被父元素当作文本处理。

    即:可以像处理文本对齐一样,去处理:行内、行内块在父元素中的对齐。

    例如:text-alignline-heighttext-indent等。

  2. 如何让子元素,在父亲中水平居中

    • 若子元素为块元素,给父元素加上:margin:0 auto;
    • 若子元素为行内元素行内块元素,给父元素加上:text-align:center;
  3. 如何让子元素,在父亲中垂直居中

    • 若子元素为块元素,给父元素加上:margin-top;,值为:(父元素content?子元素盒子总高)?2。

    • 若子元素为行内元素行内块元素

      ? 让父元素的height=line-height,每个子元素都加上:vertical-align:middle;

      ? 补充:若想绝对垂直居中,父元素font-size设置为0

16.元素之间的空白问题

产生的原因:

? 行内元素、行内块元素,彼此之间的换行会被浏览器解析为一个空白字符。

解决方案:

  1. 方案一:去掉换行和空格(不推荐)。
  2. 方案二:给父元素设置font-size:0,再给需要显示文字的元素,单独设置字体大小(推荐)。
17.行内块的幽灵空白问题

产生的原因:

? 行内块元素与文本的基线对齐,而文本的基线与文本最底端之间是有一定距离的。

解决方案:

  1. 方案一:给行内块设置vertical,值不为baseline即可,设置为middelbottomtop均可。
  2. 方案二:若父元素中只有一张图片,设置图片为display:block
  3. 方案三:给父元素设置font-size:0。如果该行内块内部还有文本,则需要单独设置font-size

文章来源:https://blog.csdn.net/qq_42236791/article/details/135155830
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。