1.盒子模型
# 01.可以拿到当前网页当中所有的标签: 去掉当前网页当中所有标签的内边距和外边距
// * { margin: 0 padding: 0 }
# 02.内边距
// padding: 10px 8px 5px 15px;(上, 右, 下, 左)
# 03.边框
// border: 5px solid red;(宽度, 样式, 颜色)
# 04.外边距
// margin: 50px 10px 20px 8px;(上, 右, 下, 左)
# 05.盒子模型
// box-sizing: border-box
2-CSS3的属性
# 01.阴影
// box-shadow: 10px, 10px, 10px, oringe;(必需。水平阴影的位置, 必需。垂直阴影的位置, 可选。模糊的距离, 可选。阴影的颜色)
# 02.圆角
// border-top-left-radius: 100px;
// border-radius: 100px;
# 03.透明度
// background-color: rgba(255, 0, 0, 1.0);(红色值, 绿色值, 蓝色值, 透明度)
3-CSS的布局
# 01.float,会将标签修改成行内块级标签,脱离标准流
// float: left;
// 在便签内定义id和类:
// <div id="main">
// <div class="test1">我要左浮动</div>
# 02.定位(子绝父相)
// position: relatie;(生成相对定位的元素->子元素)
// position: fixed;(生成绝对定位的元素->浏览器)
// position: absolute;(生成绝对元素的定位->父元素)
# 03.行内标签和行内块级标签居中
// 水平居中: 在父标签中添加: text-align: center
// 垂直居中: 在父标签中添加: align: height
# 04.块级标签居中
" 水平居中: 在自身中设置margin: 0 auto;
" 垂直居中: 通过形变来实现:
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
" <p>: 块级标签, <span>: 行内标签, <button>: 行内块级标签
04-高仿百度首页
# 01.id和class的使用位置
// <div id="content">
// <div class="logo">
# 02.设置背景尺寸
// background-size: cover;(平铺)
# 03设置字体加粗
// font-weight: bolder;
# 04.设置字体不加粗
// font-weight: lighter;
# 05.去掉下划线
// text-decoration: none;
# 06.伪类
// #header a.more-product:hover { color: red; }
# 07.改变标签的类型
// display: inline-block;
# 08.设置不透明度
// opacity: 0.6;