您的位置：首页 > Web前端 > CSS

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

2017-07-07 21:19 357 查看

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;
<
4000
span class="hljs-attribute">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
以本元素为参考。



即 
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-righ
8ae9
t: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)”这里是无需引号的
*/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航