第五天and第六天——盒模型和浮动

一、盒模型

css里面对便捷的样式可以这样理解：

一个盒子，层层包裹，展现最完美的状态。

四个最基本属性：最中间的是内容（用height和width设置大小），然后可以设置内边距（padding）、边框（border）和外边距（margin），使内容更加美观，同时也可以用来改变和其他内容之间的距离，方便阅读。

padding和margin都是边距，都可以和-top/-right/-bottom/-left直接相连进行设置，也可以何在一起设置，一个值就可以代表这四个方向，两个值分别代表上下、左右。

border同理，同时，还可以设计border-width（宽度），border-style（风格），border-color（颜色）,当然，也可以把这三个写在一起，直接用border： border-width border-style border-color 表示，还可以和上下左右连在一起，如border-top-style。

高级属性：

1、overflow（溢流）：处理盒子小、内容多的现象；

auto：内容被隐藏，通过滚动条查看。

hidden：内容被隐藏。

visible（默认）：内容被显示在盒子的外边

2、background-clip（背景剪裁）：控制背景到哪；

border-box：和边界一样大；

padding-box：和内边距一样大，剪掉边界的部分；

content-box：和内容一样大，剪掉边界+内边距的部分；

3、display（框类型，前三种比较常见）：

block：块，接着前面的继续，和之前的内容在同一行；

inline：行，另起一行写入内容，并且自己独占一行；

inline-block：行内块，另起一行，后面的内容可以接在它后面写；

table：像表格一样布局；

flex：弹性布局；

grid：网格布局。

4、min-width、max-width、min-height、max-height（设置高、宽约束）：通过设置百分比，让框的大小变得十分灵活。

5、border-sizing（盒模型）：border-box（变成高宽是包含border和padding的新模型）

二、浮动：

根本目的就是让文字浮动在图片周围。

img {
  float: left;
  margin-right: 30px;  
}通过设置外边距来区分和文字的距离。

进一步引申为——浮动布局。

先设置主内容，然后借助<div>用float让想要浮动的区域浮动。

以两列为例，当然通过改变宽度和float：left可以设置n多个浮动区域。

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

div:nth-of-type(1) {
  width: 48%;
  float: left;
}

div:nth-of-type(2) {
  width: 48%;
  float: right;
}

clear（清除浮动）：浮动在哪就清哪（left、right、both）。

第五天and第六天——盒模型和浮动

猜你喜欢