HTML5的实用

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;