web前端页面布局学习

Web前端杂记

学习链接https://www.bilibili.com/video/av75501761?p=2

默认未设置定位

父元素

宽度最大填充父元素，高度正好容纳子元素。

如果子元素左浮动，则宽度仍在容纳子元素的基础上最大填充父元素，高度正好容纳子元素

如果子元素右浮动，则宽度正好容纳子元素，高度正好容纳子元素

这是因为子元素默认就是独占一行，向左对齐的。

可以通过对父元素overflow:hidden，来实现自身的最大填充

Div块状与浮动

div块状属性是有独占一行的特性，默认是纵向排列，一旦设置float：left，则会以行来横向浮动排列。

浮动

1.将元素排除在普通流之外

2.元素将不在页面中占据空间

3.将浮动元素放置在包含框的左边或者右边

4.浮动元素依旧位于包含框之内

• 浮动的框可以向左或者向右移动，直到他的外边缘碰到包含框或者另一个浮动框的边框为止。
• 浮动元素的外边缘不会超过其父元素的内边缘。
• 浮动元素不会相互重叠
• 浮动元素不会上下浮动
• 任何元素一旦浮动，display（left/right...）属性将失效，并且可以设置宽高并且不会独占一行。

子元素的浮动是基于父元素框体的

浮动可以通过CSS clear清除

Display属性

none,inline,block,inline-block,table-cell,flex

每个元素都有一个display属性，如div的display属性为block(块元素)，而span元素的display属性为inline(行内元素)

行内元素（inline）：

1.没有宽高属性，不会独占一行

如span,设置宽高均无用

2.行内元素一旦设置了float定位或者设置display=block(设置为块状元素)，宽高属性生效

inline-block:既有宽高属性，并且不会独占一行,但是功能多可用浮动实现，使用较少。

隐藏元素

display:none;隐藏元素，不保留物理空间

visibility:hidden;隐藏元素，保留物理空间

定位

覆盖层级

z-index:可以手动调节覆盖的参数，z-index越高越能覆盖其他元素

盒子模型

盒模型主要定义4个区域：内容(content),内边距(padding)，边框(border),外边距(margin)

margin

外边距(margin)的合并，以外边距大的为主

行内元素不占上下外边距，左右外边距也不会合并

浮动元素的外边距不会合并

允许指定负的外边距

border

border边框，默认3px，参数为长度，样式，颜色,会扩大区域

padding

padding会扩大元素边框占用区域

标准盒模型：

W3C

怪异盒模型：

IE，IE盒子模型的宽和高包括了border和padding

box-sizing允许指定标准盒模型和怪异盒模型

content-box(标准)

border-box(怪异)

前端浏览器屏幕相关参数的获取

javascript

引用自https://www.cnblogs.com/fsyz/p/7854072.html

引用自https://blog.csdn.net/feidie436/article/details/77944629