CSS三大模块: 盒子模型、浮动、定位,其余的都是细节。要求精通这三部分。 所谓盒子模型就是把HTML页面中的元素看作是一个矩形盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。
看透网页布局的本质
我们说过,行内元素比如 文字 类似牛奶,也需要一个盒子把他们装起来,我们前面学过的双标签都是一个盒子。有了盒子,我们就可以随意的,自由的,摆放位置了。 看透网页布局的本质: 把网页元素比如文字图片等等,放入盒子里,然后利用CSS摆放盒子的过程,就是网页布局。
盒子边框(border)
边框就是那层皮。橘子皮。。柚子皮。 语法:
border: border-width || border-style || border-color
边框属性——设置边框样式(border-style) 边框样式用于定义页面中边框的风格,常用属性值如下:
none | 没有边框 即忽略所有的边框的宽度(默认值) |
---|---|
solid | 边框为单实线(最常用) |
dashed | 边框为虚线 |
dotted | 边框为点线 |
double | 边框为双实线 |
盒子边框总结表
设置内容 | 样式属性 | 常用属性 |
---|---|---|
上边框 | border-top | |
下边框 | border-bottom | |
左边框 | border-left | |
右边框 | border-right | |
综合设置 | border:四边宽度 四边样式 四边颜色 |
表格的细线边框
以前学过的html表格边框很粗,这里只要写一句CSS就能让边框美观起来。
/*边框合并在一起*/
table {
border-collapse: collapse; /*collapse是合并的意思*/
}
圆角边框(CSS3)
圈圈圆圆圈圈…… radius 半径 (距离) 语法格式:
border-radius: 50%; /* 让一个正方形变为圆形 */
内边距(padding)
padding 属性用于设置内边距。是指边框与内容之间的距离。 padding-top: 上内边距 padding-right: 右内边距 padding-bottom: 下内边距 padding-left:左内边距 注意:后面跟几个数值表达的意思不一样。
值的个数 | 表达的意思 |
---|---|
1个值 | padding:上下左右边距 比如padding:3px; 表示上下左右都是3像素 |
2个值 | padding:上下边距 左右边距 如padding:3px 5px; 表示上下3像素 左右5像素 |
3个值 | padding:上 左右 下 如padding:3px 5px 10px; 表示上3像素 左右5像素 下10像素 |
4个值 | padding:上 右 下 左 如padding:3px 5px 10px 15px; 表示上3px 右5px 下10px 左15px (顺时针) |
内边距问题
padding 会撑开带有width和height的盒子。
/*
1. 我们要求这个div就是标准的200*200
2. 但是我们给了padding就会撑开 240
3. 我们怎么能保证盒子不超过200*200?
*/
div {
width: 200px;
height: 200px; /*修改宽度和高度改为 160px就可以了*/
border: 1px solid red;
padding: 20px;
}
<div></div>
外边距(margin)
margin 属性用于设置外边距。设置外边距会在元素之间创建“空白”,这段空白通常不能放置其他内容。 margin: top right down left 取值顺序和内边距相同。
外边距实现盒子居中
可以让一个盒子实现水平居中,需要满足以下两个条件:
-
必须是块级元素
-
盒子必须指定了宽度(width) 然后就给左右的外边距都设置为auto,就可使块级元素水平居中。 实际工作中常用这种方式进行网页布局,示例:
.header {
width: 960px;
margin: auto;
}
文字盒子居中 图片和背景区别
-
文字水平居中是 text-align: center
-
盒子水平居中 左右margin改为auto
text-align: center; /* 文字居中水平 可以让盒子内容(文字 行内元素 行内块元素)居中对齐 */
margin: 10px auto; /* 盒子水平居中 左右margin改为auto就阔以了 */
-
插入图片 我们用的最多 比如产品展示类
-
背景图片我们一般用于小图标背景 或者 超大背景图片
section img {
width: 200px; /*插入图片更改大小 width 和 heigth*/
heigth: 210px;
margin-top: 30px; /*插入图片更改位置 可以用margin 或 padding 盒模型*/
margin-left: 50px; /*插入当图片也是一个盒子*/
}
aside {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-size: 200px 210px; /*背景图片更改大小只能用background-size*/
background-position: 30px 50px; /*背景图片更改位置 我用background-position*/
}
清除元素的默认内外边距
为了更方便的控制网页中的元素,制作网页时,可以使用如下代码清除元素的默认内外边距:
* {
margin: 0; /*清除外边距*/
padding: 0; /*清除内边距*/
}
/*实际开发中不用*,写出清除的div。这样速度快点,如*/
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,input {
padding: 0;
margin: 0;
}
注意: 行内元素是只有左右外边距的,是没有上下外边距的。内边距,在ie6等低版本浏览器也会有问题。我们尽量不要给行内元素指定上下的内外边距就好了。
外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。
相邻块元素垂直外边距的合并
当上下相邻的两个块元素(垂直)相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直边距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。
解决方案:避免就好了。
嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并。
解决方案:
-
可以为父元素定义1像素的上边框或上内边距。
-
可以为父元素添加overflow:hidden。
content宽度和高度
使用宽度属性width和高度属性height可以对盒子的大小进行控制。 width和height的属性值可以为不同单位的数值或相对于父元素的百分比%,实际工作中最常用的是像素值。 大多数浏览器,如Firefox、IE6及以上版本都采用了W3C规范,符合CSS规范的盒子模型的总宽度和总高度的计算原则是:
/*外盒尺寸(元素空间尺寸)*/
Element空间高度 = content height + padding + border + margin
Element空间宽度 = content width + padding + border + margin
/*内盒尺寸计算(元素实际大小)*/
Element Height = content heigth + padding + border (Height为内容高度)
Element Width = content width + padding + border (Width为内容宽度)
注意:
-
宽度属性width和高度属性height仅适用于块级元素, 对行内元素无效(img标签和input除外)。
-
计算盒子模型的总高度时,还应考虑上下两个盒子垂直外边距合并的情况。
-
如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度,则padding不会影响本盒子大小。
盒子模型布局稳定性
开始学习盒子模型,大家最大的困惑就是,分不清内外边距的使用,什么情况下使用内边距,什么情况下使用外边距? 答案是: 其实它们大部分情况下是可以混用的。就是说,你用内边距也可以,用外边距也可以。你觉得哪个方便,就用哪个。但是,总有一个最好用的吧。我们根据稳定性来分,建议如下: 按照优先使用宽度(width)其次使用内边距(padding) 再次使用外边距(margin)。
width > padding > margin
原因:
-
margin 会有外边距合并还有IE6下面margin加倍的bug 所以最后使用。
-
padding 会影响盒子的大小,需要进行加减计算(麻烦)其次使用。
-
width 没有问题 我们经常使用宽度剩余法 高度剩余法来做。
盒子阴影
语法格式:
box-shadow: 水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子的大小) 阴影颜色(rgba) 内/外阴影;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置,允许负值。 |
v-shadow | 必需。垂直阴影的位置,允许负值。 |
blur | 可选。模糊距离 |
spread | 可选。阴影尺寸 |
color | 可选。阴影颜色 |
inset | 可选。将外部阴影(outset)改为内部阴影 |
-
前两个属性是必须写的。其余的可以省略。
-
外阴影(outset)但是不能写 默认 想要内阴影 inset
div {
width: 200px;
heigth: 300px;
/* box-shadow: 水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子的大小) 阴影颜色(rgba) 内/外阴影;*/
box-shadow: 0 15px 30px rgba(0,0,0,0.4)
}