布局

文章目录

• 布局
• • 1.1 盒子布局
  • • 1.2 元素分类
    • 1.3 浮动布局
    • 1.4 定位布局
    • 1.5 其他属性
    • • 1.5.1 overflow
      • 1.5.2 zoom
    • 1.6 CSS3弹性盒子
    • • 1.6.1 flex-direction
      • 1.6.2 flex-wrap
      • 1.6.3 flex-flow
      • 1.6.4 align-items
      • 1.6.5 align-content
      • 1.6.6 justify-content

1.1 盒子布局

border ： 简写属性在一个声明设置所有的边框属性
默认值为 not specified

值	描述
dotted	定义点状边框，在大多数浏览器中呈现为实线
dashed	定义虚线，在大多数浏览器中呈现为实线
solid	定义实线
double	定义双线，双线的宽度等于 border-width 的值

padding： 简写属性在一个声明中设置所有内边距属性。
  这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；所以，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定 负边距值

padding:10px 5px 15px 20px;

• 上边距是 10px
• 右边距是 5px
• 下边距是 15px
• 左边距是 20px

注： 属性中决定边距的元素从上开始顺时针旋转 第一个永远是上内边距 不能取负值。

值	描述
auto	浏览器计算内边距
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比的内边距
inherit	规定应该从父元素继承内边距

margin： 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 这四个值。
设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
margin:10px 5px 15px 20px;

• 上边距是 10px
• 右边距是 5px
• 下边距是 15px
• 左边距是 20px

与padding一样的是顺时针排列 不过可以使用负值。

值	描述
auto	浏览器计算内边距
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比的内边距
inherit	规定应该从父元素继承内边距

1.2 元素分类

display: 属性规定元素应该生成的框的类型

值	描述
none	此元素不会被显示
block	此元素将会显示为块级元素，前后会带有换行符
inline	默认，此元素会被显示为内联元素，元素前后没有换行符

块级元素是独占一行，可以设置宽和高的
内联元素是不会自动换行，设置宽和高的时候是不起作用的
注： 块级元素和内联元素可以进行相互转换
CSS隐藏元素的方式:display:none;
                                  width:0 ;height:0;
                                  overflow:hidden;

1.3 浮动布局

float: 定义元素在哪个方向浮动，总应用于图像，使文本围绕在图像周围，在CSS中任何元素都可以浮动，浮动的元素会产生一个块级框，如果浮动元素非替换元素，则要指定一个明确的高度，否则会变形。
注： 如果在一行之内没有足够的空间供给浮动元素，则这个元素会跳到下一行，如果下一行空间也不够则会继续向下一行跳，以此类推直至空间足够则不再跳转。

值	描述
left	元素向左浮动，后面的内容流向对象的左侧
right	元素向右浮动 ，后面的内容流向对象的左侧
none	默认值，元素不浮动，并会显示在其在文本中出现的位置
inherit	规定从父元素继承float属性的值

1.4 定位布局

position 规定元素的定位类型，建立元素布局所用的定位机制。

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
. static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

1.5 其他属性

1.5.1 overflow

overflow: 规定当内容溢出元素框时决定以什么样的形式，是对溢出元素内容区的内容进行处理。

值	描述
visible	默认值，内容不被修剪，会呈现在冤死框之外。
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但会添加滚条以便查看其余内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看剩余内容，如果未被修剪就不会出现滚动条

1.5.2 zoom

zoom: 是对图片放大和缩小的一个属性，取值为1或者100%的时候是按原比例显示。
代码形式：

效果：

1.6 CSS3弹性盒子

1.6.1 flex-direction

flex-direction: 规定弹性项目的方向,如果元素不是弹性项目，则flex无效。

值	描述
row	默认值，作为一行，水平地显示弹性项目。
row-reverse	等同行，但方向相反。
column	作为列，垂直的显示弹性项目
column-reverse	等同列，但方向相反。

代码形式：

注： 在style当中必须加display:flex 否则flex-direction无效。

1.6.2 flex-wrap

flex-wrap： 规定弹性项目是否应换行，如果元素不是弹性项目，则 flex 属性无效。

值	描述
nowrap	默认值，规定项目不会换行。
wrap	规定弹性项目在需要时换行。
wrap-reverse	规定弹性项目在需要时以反方向换行。

1.6.3 flex-flow

flex-flow： 是flex-direction与flex-wrap这两个属性的简写属性，如果元素不是弹性项目，则 flex 属性无效。
代码形式：

1.6.4 align-items

align-items: 属性为弹性容器内的项目指定默认对齐方式。

值	描述
stretch	默认值，项目被拉伸已合适的容器。
center	项目位于容器的*。
flex-start	项目位于容器的开头
flex-end	项目位于容器的末端。
baseline	项目被定义到容器的基线。

1.6.5 align-content

align-content： 属性为修改 flex-wrap 属性的行为。与 align-items 相似，但是它不对齐弹性项目，而是对齐弹性线。在多行项目时该属性才能生效。可使用 justify-content 属性将主轴上的项目水平对齐。

值	描述
stretch	默认值，行拉伸以占据剩余空间。
center	朝着弹性容器的*对行打包。
flex-start	朝着弹性容器的开头对行打包。
flex-end	朝着弹性容器的结尾对行打包。
space-between	行均匀分布在弹性容器中。
space-around	行均匀分布在弹性容器中，两端各占一半。

1.6.6 justify-content

justify-content： 当项目不占用主轴上所有可用空间时，justify-content属性对齐弹性容器的项目。

值	描述
flex-start	默认值，项目位于容器开头
flex-end	项目位于容器的结尾
center	项目位于容器*
space-between	项目在行与行之间留有间隔
space-around	项目在行之前、行之间和行之后留有空间