一、网页布局过程
1.准备好相关的网页元素,网页元素基本都是盒子Box
2.利用CSS设置好盒子的样式,然后摆放到相应的位置
3.往盒子里面装内容
核心本质:就是利用CSS摆盒子
二、盒子模型(Box Model)组成
- border边框
- content 内容
- padding 内边框
- margin 外边距
1.边框有三部分组成:
- 边框宽度(粗细):border-width 单位是px
- 边框的样式:border-style
- 实线边框:solid
- 虚线边框:dashed
- 点线边框:dotted
- 边框颜色:border-color
CSS边框属性允许你指定一个元素边框的样式和颜色
2.边框简写语法:
border:1px solid red; 没有顺序
边框分开写法:
- border-top:
- border-bottom:
3.表格的细线边框
border-collapse控制相邻单元格的边框
基本语法:
border-collapse:collapse;
collapse 合并的意思
边框会影响盒子的实际大小
解决方案:
1.测量盒子大小的时候,不量边框
2.如果测量的时候包含了边框,则需要width/height减去边框的宽度
4.内边距(padding)
即边框与内容之间的距离
- padding-left:左内边距
- padding-right:右内边距
- padding-top:上内边距
- padding-bottom:下内边距
padding简写(重要):
- padding:5px; 一个值 代表上下左右都是5像素内边距
- padding:5px 10px 两个值 代表上下内边距是5像素 左右内边距是10像素
- padding:5px 10px 20px 三个值 代表上内边距5像素 左右内边距10像素 下内边距20像素
- padding:5px 10px 20px 30px 四个值 上是5像素 右10像素 下20像素 左是30像素
5.外边距(margin)
控制盒子和盒子之间的距离
- margin-left:左外边距
- margin-right:右外边距
- margin-top:上外边距
- margin-bottom:下外边距
margin简写方式代表的意思和padding完全一致
外边距可以让块级盒子水平居中,但是必须满足两个条件:
1.盒子必须指定了宽度(width);
2.盒子左右的外边距都设置为auto;
常见的写法:
1.margin-left:auto;
2.margin-right:auto;
3.margin:auto;
4.margin: 0 auto;
注意:行内元素或行内块元素水平居中给其父元素添加text-align:center即可
6.嵌套块元素垂直外边距的塌陷
解决方案:
1.可以为父元素定义上边框
2.可以为父元素定义上内边距
3.可以为父元素添加overflow:hidden;
7.清除内外边距
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网页元素的内外边距
基本语法:
* {
padding:0; 清除内边距
margin:0; 清除外边距
}
注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距 但是转换为块级和行内块元素就可以了
去掉li前面的小圆点
基本语法:
list-style:none;
8.圆角边框
基本语法:
border-radius:length;
参数值可以为数值或百分比的形式
如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为50%
如果是个矩形,设置为高度的一半就可以
该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角
分开写:border-top-left-radius、border-top-right-radius、border=bottom-right-radius、border-bottom-left-radius;
9.盒子阴影(重点)
可以使用box-shadow属性为盒子添加阴影
基本语法:
box-shadow: h-shadow v-shadow blur spread color inset;
- h-shadow 必需 水平阴影的位置 允许负值
- v-shadow 必需 垂直阴影的位置 允许负值
- blur 可选 模糊距离
- spread 可选 阴影的尺寸
- color 可选 阴影的颜色
- inset 可选 将外部阴影(outset)改为内部阴影
注意:
1.默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效
2.盒子阴影不占用空间,不会影响其他盒子排列
原先盒子没有影子,当我们鼠标经过就有影子
hover 鼠标经过
10.文字阴影
基本语法:
text-shadow: h-shadow v-shadow blur color;