盒模型、常用单位及媒体查询

盒模型与计算方式

基本所有的站点都是用盒子组合而成，主要属性常见为
|width|height|border|padding|marging|
|—-|—-|—-|—-|—-|
|宽度|高度|边框|内边距|外边距|
| box-sizing: content-box默认内容区大小| box-sizing: border-box;包装盒子占据的空间不变|可设置宽度及样式|透明|透明|

.box {
      width: 500px;
      height: 400px;
     border: 5px solid; 
      background-color: blue；
padding:10px；
    }
/* 注意 BOX相对BODY的STYLE来说 是一个【“文本”】 例如body style="color: burlywood" 就是会“覆盖”到BOX的颜色，除非BOX有单独设置。*/

box 关键属性的几个设置点
padding 【 四值: 上, 右,下, 左 】注意就是顺时针方向（12点开始顺时针）
如果【三值上左右下】如两值【上下，左右】因此，关键记忆点，就是第二个产生都是标识左右。单值为上下左右都一样。

box-sizing的2个很关键的属性：

box-sizing:content-box；
/*代表 默认的 盒子大小就是等于内容大小*/
.box{
width:200px;
height:200px;
padding:10px;
margin:10px;
box-sizing:content-box;
}
/*代表 这个BOX可以输入的文本框就是200*200 跟其他padding margin等 边距无关 */
box-sizing:border-box；
/*代表 这个BOX可以输入的文本框就是200*200===>(200-10-10)*(200-10-10) 跟其他padding margin等 边距有关 */

常用单位

px 绝对单位 1英寸=96px
先对单位：em rem（根元素:root中）跟字号大小有关系 font-size相互绑定
vh vw 跟可视窗口大小有关系，视窗看成100份（当前页面）
媒体查询
```css
/ 移动优先，则小屏幕开始写起 /
@media (min-width: 480px) {
html {
font-size: 12px;
```
                    }
```
@media (min-width: 640px) {
html {
font-size: 14px;
```
                    }                          
                    @media (min-width: 720px) {
```
html {
font-size: 16px;
```
                    }
```

/ PC优先，则大屏幕开始写起 /
@media (max-width: 720px) {
html {
font-size: 16px;
}
/ 得注意最大的值要配合 min-with组合 / @media (min-width: 720px) {
html {
font-size: 16px;
}

```

盒模型与计算方式

常用单位

媒体查询

更多相关文章

随机推荐