CSS笔记（盒模型以及媒体查询）

最新推荐文章于 2024-06-11 15:47:56 发布

缩缩北行鸟

最新推荐文章于 2024-06-11 15:47:56 发布

阅读量648

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_38801354/article/details/74779939

版权

css 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1 盒模型（box model）

从CSS的角度看，每一个元素都是一个盒子，这个盒子由内容区（content area）、内边距（padding）、边框（border）以及外边距（margin）四样东西组成。而使用CSS可以对盒子的所有方面加以控制。

边距，无论是外边距还是内边距（包括上下边距），设置的百分数值都是相对于父元素的width 计算

1.1 内边距（padding）

内边距分为上、右、下、左，大小可以用像素或百分数设置。

p {
    padding-top:25px;
    padding-right:25px;
    padding-bottom:25px;
    padding-bottom:25px;
}

/* 也可以使用简写方法,上右下左(注意无需加逗号) */
p {
    padding:25px 25px 25px 25px;
}

/* 也可以写作 */
p {
    padding:25px;
}

1.2 外边距（margin）

CSS 外边距(margin)重叠及防止方法
 由浅入深漫谈margin属性

同理，外边距分为上、右、下、左，大小可以用像素或百分数设置。

p {
    margin-top:25px;
    margin-right:25px;
    margin-left:25px;
    margin-bottom:25px;
}

/* 也可以使用简写方法,上右下左(注意无需加逗号) */
p {
    margin:25px 25px 25px 25px;
}

/* 也可以写作 */
p {
    margin:25px;
}

1.3.1 margin的解析逻辑

参考线是box模型设置margin移动的基准点，在margin中的top，right，bottom，left的参考线并不一致为一类，top与left为一组，bottom与right为一组。

1.3.1.1 `top`与`left`

top 以 containing block（包含块）的 content 上边或者垂直上方相连元素 margin 的下边为参考线垂直向下位移；left 以 containing block（包含块）的 content 左边或者水平左方相连元素 margin 的右边为参考线水平向右位移。

1.3.1.2 `bottom`与`right`

right 以元素本身的 border 右边为参考线水平向右位移；bottom 以元素本身的border 下边为参考线垂直向下位移。从上我们可以看到 top 和 left 都是以外元素为参考，而 right 和 bottom 以本元素为参考。
margin基准线

即 top 和 left 都是以外元素为参考，而 right 和 bottom 以本元素为参考。

结论： box 最后的显示大小等于 box 的 border 及 border 内的大小加上正的 margin 值。而负的 margin 值不会影响 box 的实际大小，如果是负的 top 或 left 值会引起 box 的向上或向左位置移动，如果是 bottom 或 right 只会影响下面 box 的显示的参考线。

常用到使用一个空白div容器内嵌其他内容，而想要定义内嵌元素的margin，要注意外边距(margin)重叠

1.2.2 外边距(margin)重叠

边距合并指的是，当两个垂直外边距相遇时（其间没有任何非空内容、补白、边框），它们将形成一个外边距，水平边距永远不会重合。
竖直方向的外边距重叠有相邻与内嵌两种。
当关系是相邻时，外边距重叠会导致二者的之间的外边距之和为最大的margin值。
当关系是内嵌的时候（注意此时包含容器是一个空白元素），外边距重叠会导致，内嵌的子元素margin-top值并不能准确的作用在容器元素上，而是会被提取为容器元素margin-top值，同样的此时若容器元素也有margin-top值，这会比较选取最大值。
如图：

垂直相邻

当关系是内嵌的时候，若想要正常的显示就要终止外边距的完好重叠接触（结合下面盒模型图思考），可选取以下几个方法：

不使用margin，用外层容器元素的padding以达到相同效果
外层容器元素添加边框
外层容器元素添加overflow:hidden;
内嵌元素添加定位属性

1.3 边框

像是字体一样，对应的边框也有颜色，线条粗细，边框的样式。
而边框的样式有八种：

solid：实线
dotted：虚线
double：双线
dashed：破折线，也就是粗一点的虚线
groove：凹槽
inset：内容面内凹
outset：内容面外凸
ridge：脊线（山谷线）

边框的宽度也可以使用关键字指定：

thin
medium
thick

/* 可以只指定某一边的边框属性 */
p {
    border-color:yellow;
    border-width:1px;
    border-style:solid;
}
/* 可以简写,同样的无需添加逗号 */
p {
    border:solid yellow 1px
}

另外还可以使用radius定义边框圆角：

p {
    border:solid yellow 1px
    border-top-left-radius:3em;
    border-top-right-radius:3em;
    border-bottom-left-radius:3em;
    border-bottom-right-radius:3em;
}
/* 也可以简写 */
p {
    border:solid yellow 1px
    border-radius:3em;
}

1.3.1 边框颜色

边框颜色可以使用可以使用前景色（color 属性值），也可以使用边框颜色border-color。
其中border-color 属性除了常规的颜色值外，还有一个transparent 属性值，该值为透明值，常用于结合动态伪类选择器：

a:link,a:vistied {
    border:solid thin transparent;
}
a:havor {
    border-color:gray;
}

1.3.2 边框背景

边框背景可以调用颜色，或者调用图片，调用颜色定义background-color就可以了，调用图片就如下：

/* 
注意网址无需引号，这与引入字体时所用到的形式是一样的，使用的是绝对路径，绝对路径！！另外如果图片小于边框本身，自定义是会自动铺满边框，所以可以使用 background-repeat 属性，属性值由：repeat-x , repeat-y , no-repeat 以及 inherit（继承父类）
*/
body {
    background-image:url(url1);
    background-repeat: no-repeat;
    background-position:top left;
}

1.4 宽度（width）

CSS样式上的width属性指的是内容区的宽度，而整个“盒子”的总宽度是：左右内边距之和 + 左右外边距之和 + 左右边框宽度之和 + 内容区宽度
盒模型

body {
    width:50%;
}
/*
当使用百分数时，其基准就是父类元素的容器宽度
*/

那么如果没有设置一个元素的宽度，它的默认宽度是”auto“，这表示它会延伸直至占满所有可用空间（减去内边距，外边距和边框之后），即没有设置宽度的每一个块元素都可以延伸占满浏览器的整一个宽度。
而当设置的宽度太小以至于内嵌的内联元素（注意是内联元素）都装不下时，内容就会“溢出”。比方说上述使用宽度的只是一个百分比，正常状态下它是可以显示出预期效果，但是当用户屏幕有变化或者说把浏览器缩小化，就可以看出毛病了，缩小浏览器大小的时候使用百分比会导致宽度也会缩小，以至于可能导致一些如图像等内联元素溢出，所以合理地计算宽度很重要。
至于高度，一般来讲都是取默认值”auto“，是不会设置的，以防指定的高度不够，导致“溢出”。

1.5 `box-sizing`（IE8版本开始支持）

上面讲的宽度也有介绍，普通定义的宽度是内容宽度，并不包含边框以及内边距，所以很多时候想要定义一个除外边距外的盒子宽度，往往要通过计算边框厚度，内边距大小以及内容大小，如果不想那么麻烦就可以使用box-sizing属性。

box-sizing : border-box | content-box | inherit

通过定义box-sizing属性为border-box，可以定义宽度（width）以及高度（height）的定义范围是否包含边框厚度以及内边距，而我们默认定义的状态，就相当于box-sizing属性为content-box。

2 媒体查询

其实以上的盒模型都只是一些概念，并没有涉及一些排版的核心东西，比如说当你想控制某个“盒子”的位置在左边时，你或许会定义这“盒子”的左，右外边距，那么问题就来了，当你正常使用该页面时，可能一切正常，但你缩小浏览器大小，或者说你的客户使用的显示屏幕本身就小于你设置页面时的大小时，那个“盒子”或许就会变形，变得不是你预期所想要的效果。
所以这里引入了HTML的media属性和CSS中的内置规则@media，让不同的设备类型的用户选择到合适的页面样式。

2.1 HTML的`media`属性（推荐使用）

利用<link>元素的media属性，来引入适用于指定设备的样式文件

<link href="url1" rel="stylesheet" media="screen and (max-device-width:480px)">
<!-- media值中的“screen”指定了有显示屏的设备而非其他诸如打印机的设备，而“max-device-width:480px”则定义了屏幕最大尺寸 -->

2.2 CSS中的伪类`@media`

在CSS文件中使用@media规则：

@media screen and (min-device-width:480px){
    body {
        margin-right:250px;
    }
}
@media screen and (max-device-width:480px){
    body {
        margin-right:30px;
    }
}
@media (max-width:1000px) {
    body {
        background-color:#444;
    }
}
@media print {
    body {
        font-family:Times;
    }
}
/*
注意：有两个花括号以及“(max-device-width:480px)”这里是无需引号的
*/