今天学习的css基础知识包括如下：
- 百度首页的设计；
- 背景图片；
- 精灵图；
- 边框属性；
- 内边距，外边距；
- css盒子模型；
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…
一、百度首页临摹中出现的问题；
今天临摹了百度首页的设计，后来老师给了一个加强版。普通版因为之前自己已经临摹了好几遍，所以轻松完成。后来的加强版由于用到一些后面学到的知识，自己过手次数太少，费劲不少，其中主要表现在三个地方：
- 1、在给一个a标签设置了文字，同时设置了背景颜色，结果设置了文字text-align：center后文字依然在背景方框的中间偏下地方，解决办法：将line-height设置成a盒子的高度，同时可以将原来a盒子 高度的代码删除，文字也就自动居中了。
- 2、在form表单中给百度的中间设置了文本输入框和右边“百度一下”按钮，作业要求是两者之间不能有空隙，但是一直不能解决这个问题，即使给文本输入框设置了margin-right=0；给按钮设置了margin-left=0，两者之间依然有间隙，最后的办法是将其设置成position：relative；微调top+left，最后两者完美贴合。
- 3、在临摹版本的百度首页下方设置了8张图片，分成两排居中放置在上面的文本输入框下方，类似广告之类的能点击的图片。设置了一个高度能容纳两排img的div，宽度不设置，默认和浏览器等宽。在嵌套一个高度和父div等高，一排能容纳4个img的宽度的div，然后放置8张img，最后效果是两排img，一排4张，结果给父div设置了text-align：center，结果图片始终不能在浏览器中居中显示。最后恍然大悟是应该设置：margin：0 auto；
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…
二、背景图片；
快捷键:bi background-image: url();
注意点:
- 1.图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址
- 2.如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充
注意：
repeat 默认, 在水平和垂直都需要平铺
no-repeat 在水平和垂直都不需要平铺
repeat-x 只在水平方向平铺
repeat-y 只在垂直方向平铺
应用场合：这种平铺的方式可以比如是一个大的背景，通过一个像素的长条平铺背景，或者一个小的类似于地砖的图案完成背景的平铺。这种方式能够有效的减轻服务器的响应负担。 - 3.如果网页上出现了图片, 那么浏览器会再次发送请求获取图片
- 4.background-position: 水平方向 垂直方向，具体的方位名词或者像素。格式:background-position: 水平方向 垂直方向;
- 5.背景属性缩写的格式
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;快捷键:bg+ background: #fff url() 0 0 no-repeat。 - 6.背景关联方式：background-attachment：scroll或者fixed
- 7.背景图片和插入图片区别：背景图片仅仅是一个装饰, 不会占用位置，插入图片会占用位置；背景图片好控制位置；插入的图片会被搜索引擎收录被检索。
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…
三、精灵图；
就是一种图像合成技术，可以减少对服务器的请求的次数, 以及可以降低服务器处理压力
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…
四、边框属性；
- 第一种格式：
快捷键:
bd+ border: 1px solid #000;
其他设置格式的快捷键： - 第二种格式：
border-top: 边框的宽度 边框的样式 边框的颜色;
border-right: 边框的宽度 边框的样式 边框的颜色;
border-bottom: 边框的宽度 边框的样式 边框的颜色;
border-left: 边框的宽度 边框的样式 边框的颜色;
快捷键:
bt+ border-top: 1px solid #000;
br+
bb+
bl+ - 第三种格式：
border-width: 上 右 下 左;
border-style: 上 右 下 左;
border-color: 上 右 下 左; - 第四种格式：
border-left-width: 20px;
border-left-style: double;
border-left-color: pink;
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…
五、内边距，外边距；
- 内边距：
格式：非连写
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
格式：连写
padding: 上 右 下 左;
- 外边距：
格式：非连写
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
格式：连写
margin: 上 右 下 左;
- 外边距合并现象：
在默认布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的。水平方向默认叠加。
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…
六、css盒子模型
在HTML中所有的标签都可以设置
宽度/高度 == 指定可以存放内容的区域
内边距 == 填充物
边框 == 手机盒子自己
外边距 == 盒子和盒子之间的间隙
1.内容的宽度和高度
就是通过width/height属性设置的宽度和高度2.元素的宽度和高度
宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
高度 同理可证3.元素空间的宽度和高度
宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
高度 同理可证
box-sizing属性：
1、content-box
元素的宽高 = 边框 + 内边距 + 内容宽高
2、border-box
元素的宽高 = width/height的宽高
盒子居中/内容居中：
text-align:center;和margin:0 auto;
区别：
text-align: center; 作用：设置盒子中存储的文字/图片水平居中
margin:0 auto; 作用：让盒子自己水平居中