前端布局学习笔记（第一篇：入门）

朴灿烈づ我的快乐病毒、 2023-01-19 08:26 101阅读 0赞

### 文章目录 ###

*  一、知识点
 *   *  1、margin、padding有什么区别，不想再混乱了
     *  2、五种最常见的CSS页面布局
     *  3、box-sizing属性是什么作用？
     *  4、行内元素水平方向不对齐有哪些原因？
     *  5、块标签、行内标签、行内块标签有哪些？区别是什么？
     *  6、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
     *  7、display有哪些值？说明他们的作用?
     *  8、请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？
     *  9、CSS3有哪些新特性？
     *  10、display:none与visibility：hidden的区别？
     *  11、持续更新中……

# 一、知识点 #

## 1、margin、padding有什么区别，不想再混乱了 ##

> margin 英\['mɑ:dʒɪn\] 美\[ˈmɑrdʒɪn\]
> 
> 意思是：栏外，页边空白，边缘。一般是指容器中元素和元素/容器边缘之间的空白。所以通常叫它：外边距。
> 
> padding 英\[ˈpædɪŋ\] 美\[ˈpædɪŋ\]
> 
> 意思是：衬垫，填料。一般是指元素中元素内容和元素边缘之间的空白。所以通常叫它：填充，内边距。
> 
> border 英\['bɔ:də®\] 美\[ˈbɔrdɚ\]
> 
> 意思是：包边，边界。一般是指元素的边框。所以通常叫它：边框。
> 
> align 英\[əˈlaɪn\] 美\[əˈlaɪn\]
> 
> 意思是：排整齐，使成一线。一般是指元素之间的对齐方式。所以通常叫它：对齐。
> 
> 百科上有人总结说：padding就是内容与边框的空隙，而margin 则是模块与模块的空隙。
> 
> 下面一张图可以更直观的理解：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70_pic_center]

## 2、五种最常见的CSS页面布局 ##

*  流动布局：浮动布局(float布局);
 *  定位布局：也叫绝对定位布局（absolute布局;
 *  弹性布局：也叫弹性盒子布局（flex布局）
 *  表格布局：（table布局）
 *  网格布局：是一个基于网格的二维布局系统（grid布局）

## 3、box-sizing属性是什么作用？ ##

语法：box-sizing: content-box|border-box|inherit;

> content-box：在宽度和高度之外绘制元素的内边距和边框。
> 
> border-box：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
> 
> inherit： 规定应从父元素继承 box-sizing 属性的值。

[实例讲解][Link 1]

## 4、行内元素水平方向不对齐有哪些原因？ ##

*  行内块元素默认的box-sizing属性值不一致；
 *  行内块元素默认的中线对齐值不一致；

[实例][Link 2]

## 5、块标签、行内标签、行内块标签有哪些？区别是什么？ ##

块标签：div p h1-h6 hr ul ol li dl dd dt form

>  *  支持宽高，自上而下排列
>  *  不受空格影响
>  *  一般用于其他标签的容器
>  *  默认宽度为100%（独占一行）。

行内标签：span i a b strong em sub sup u label br font

>  *  不支持宽高（宽高根据内容大小自动撑开），自左向右排列
>  *  受空格影响
>  *  不独占一行

行内块标签：img textarea input select button textarea

>  *  支持宽高，自左向右排列
>  *  受空格影响
>  *  不独占一行

标签之间的转换

*  display：inline（转为行内元素）
 *  inline-block（转为行内块元素）
 *  block（转为块元素）
 *  none（隐藏 不显示）

**注意：当元素浮动（float）时会转化成行内块元素特点。**

## 6、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？ ##

border: 1px solid red;
    margin: 0 auto; 
    height: 50px;
    width: 80px;

## 7、display有哪些值？说明他们的作用? ##

*  inline（默认）–内联
 *  none–隐藏
 *  block–块显示
 *  table–表格显示
 *  list-item–项目列表
 *  inline-block

## 8、请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？ ##

> 该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block布局是把块在垂直方向从上到下依次排列的；而 inline布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。  
> 试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

## 9、CSS3有哪些新特性？ ##

*  RGBA和透明度 background-image
 *  background-origin(content-box/padding-box/border-box) background-size
 *  background-repeat word-wrap（对长的不可分割单词换行）word-wrap：break-word
 *  文字阴影：text-shadow： 5px 5px 5px \#FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
 *  font-face属性：定义自己的字体 圆角（边框半径）：border-radius 属性用于创建圆角
 *  边框图片：border-image: url(border.png) 30 30 round 盒阴影：box-shadow: 10px
 *  10px 5px \#888888 媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

## 10、display:none与visibility：hidden的区别？ ##

*  display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘
 *  visibility：hidden隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

## 11、持续更新中…… ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70_pic_center]: /images/20221021/f4b793c5b1f44f0abd4d66be8dd634c1.png
[Link 1]: https://blog.csdn.net/houpeibin2012/article/details/116562722
[Link 2]: https://blog.csdn.net/houpeibin2012/article/details/116596586