CSS样式常见样式
1、高度和宽度
默认情况下，高度和宽度无法应用在行内标签上。
默认情况下，块级标签虽然设置的宽度，右边空白区域也不许被占用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div style="height:100px;width:200px;background-color:red">中国移动div>
<div style="height:100px;width:200px;background-color:green">中国联通div>
<span style="height:100px;width:200px;background-color:pink">中国联通span>
<span style="display:block;height:100px;width:200px;background-color:pink">中国联通span>
body>
html>
2、行内和块级标签
1）块级标签：
2）行内标签：无法应用高度和宽度
转换前代码
Title
块级标签
行内标签
行内标签有块级标签的特点
转换后代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div style="display:inline;">块级标签div>
<span style="display:block;">行内标签span>
<div style="display:inline-block;height: 100px;background-color:red;">行内标签有块级标签的特点div>
body>
html>
3、文本对齐方式
1）文本水平方向：style=text-align
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<h1 style="text-align: left">左边h1>
<h1 style="text-align: right">右边h1>
<h1 style="text-align: center">中间h1>
body>
html>
2）文本垂直方向：line-height
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<h1 style="text-align: center;width:500px;height:200px;background-color:olive;line-height:200px">垂直对齐h1>
body>
html>
案例：米商城如下图
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body{
margin:0;
}
.header{
height: 40px;
font-size: 12px;
color: #b0b0b0;
background: #333;
line-height:40px;
}
.header a{
display:inline-black;
text-align:center;
color: #b0b0b0;
text-decoration:none;
}
style>
head>
<body>
<div class="header">
<a href="https://www.mi.com/index.html">小米商城a>
<a href="https://www.miui.com/" target="_blank">MUMIa>
<a href="https://iot.mi.com/" target="_blank">IoTa>
<a href="https://i.mi.com/" target="_blank">云服务a>
div>
body>
html>
对于颜色的处理：使用RGB颜色对照表：https://www.917118.com/tool/color_3.html
4、外边距（两人离远一点）margin
margin-top：10px； /* 距上边*/
margin-left：10px； /* 距左边*/
margin：10px; /* 距上下左右边*/
margin:10px 20px; /* 距上下边10px 左右边20px*/
margin:10px 20px 30px 40px; /* 距上边10px 右边20px 下边30px 左40px --> 顺时针方向*/
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body{
margin: 0;
}
style>
head>
<body>
<div style="background-color: red;height: 100px">div>
<div style="background-color: green;height: 100px;margin-top:10px;">div>
body>
html>
特殊的margin，左右边距自动=>标签居中。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.login-box{
height: 300px;
width: 500px;
background: gray;
# 左右居中;
margin-left: auto;
margin-right: auto;
}
style>
head>
<body>
<div class="login-box">div>
body>
html>
常见布局
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body{
margin:0;
}
.header{
height: 40px;
font-size: 12px;
color: #b0b0b0;
background: #333;
line-height:40px;
}
.header a{
display:inline-black;
text-align:center;
color: #b0b0b0;
text-decoration:none;
}
.container{
width: 1226px;
margin-right: auto;
margin-left: auto;
}
style>
head>
<body>
<div class="header">
<div class="container">
<a href="https://www.mi.com/index.html">小米商城a>
<a href="https://www.miui.com/" target="_blank">MUMIa>
<a href="https://iot.mi.com/" target="_blank">IoTa>
<a href="https://i.mi.com/" target="_blank">云服务a>
<a href="https://i.mi.com/" target="_blank" style="float: right">商城a>
div>
div>
body>
html>
5、内边距（一个人吃胖一点），自己会变大。
padding-left: 10px; //内边距距离左边10
padding：10px； //内边距距离上下左右10
padding：10px 20px； //内边距距离上下10 距离左右20
padding：10px 20px 30px 40px； //内边距距离上10 距离右20 距离下30 距离左40
Title
关于内外边距的提示：
行内标签设置外边距和内边距都是无效的注意使用 display:inline-black;
6、float，页面布局必不可少的一个样式，让标签左右飘。 float可以让标签浮动展示，脱离文档流。
1）标签向左瓢
如上的效果代码如下
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body{
margin:0;
}
.item{
height: 270px;
width: 180px;
background-color: olive;
margin: 10px;
float: left;
}
style>
head>
<body>
<div class="course">
<div class="item">div>
<div class="item">div>
<div class="item">div>
<div class="item">div>
<div class="item">div>
<div class="item">div>
<div class="item">div>
<div class="item">div>
<div class="item">div>
div>
body>
html>
2）标签左右瓢
如上的效果代码如下
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body{
margin:0;
}
style>
head>
<body>
<div style="width: 500px;">
<div style="float: left">瓢向左边div>
<div style="float: right">瓢向右边div>
div>
body>
html>
没有瓢：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body{
margin:0;
}
style>
head>
<body>
<div style="background-color: green">
<div>瓢了么？div>
div>
body>
html>
如果瓢：使用笨方法处理（
）DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body{
margin:0;
}
style>
head>
<body>
<div style="background-color: green">
<div style="float: left">瓢了div>
<div style="float: right">瓢了div>
<div style="clear: both">div>
div>
body>
html>
如果瓢：使用聪明的方法处理（after伪类）
先了解after
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
li:before{
content: "他们和";
}
li:after{
content:"打篮球";
}
style>
head>
<body>
<ul>
<li>周杰伦li>
<li>刘耕宏li>
ul>
body>
html>
使用after处理瓢的问题
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body{
margin:0;
}
.bg{
background-color: green;
}
.bg:after{
display: block;
content: '';
clear: both;
}
style>
head>
<body>
<div class="bg">
<div style="float: left">瓢了div>
<div style="float: right">瓢了div>
div>
body>
html>
上面只是处理一个，要是很多该怎么处理？如下
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body{
margin:0;
}
.bg,.xxx,.hhhh{
background-color: green;
}
.clearfix:after{
display: block;
content: '';
clear: both;
}
style>
head>
<body>
<div class="bg clearfix">
<div style="float: left">瓢了div>
<div style="float: right">瓢了div>
div>
<div class="xxx clearfix">
<div style="float: left">瓢了div>
<div style="float: right">瓢了div>
div>
<div class="hhhh clearfix">
<div style="float: left">瓢了div>
<div style="float: right">瓢了div>
div>
body>
html>
7、hover 鼠标悬停
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.c1{
color: red;
}
.c1:hover{
color:green;
}
style>
head>
<body>
<div class="c1">中国移动div>
body>
html>
鼠标悬停后效果
小米案例：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body{
margin:0;
}
.top{
background: #333;
}
.container{
width: 1226px;
margin: 0 auto;
}
.clearfix:after{
display: block;
content: '';
clear: both;
}
.top a{
display: inline-block;
line-height: 40px;
color: #b0b0b0;
font-size: 12px;
text-decoration: none;
}
.top a:hover{
color:white;
}
style>
head>
<body>
<div class="top">
<div class="container clearfix">
<a href="https://www.mi.com/index.html">小米商城a>
<a href="https://www.miui.com/">MUMIa>
<a href="https://iot.mi.com/" >IoTa>
<a href="https://i.mi.com/" >云服务a>
<div style="float: right">
<a>登录a>
<a>注册a>
div>
div>
div>
body>
html>
效果如下图：
8、小米logo菜单案例
代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body {
margin: 0;
}
.top {
background: #333;
}
.container {
width: 1226px;
margin: 0 auto;
}
.clearfix:after {
display: block;
content: '';
clear: both;
}
.top a {
display: inline-block;
line-height: 40px;
color: #b0b0b0;
font-size: 12px;
text-decoration: none;
}
.top a:hover {
color: white;
}
.hd .logo {
float: left;
width: 234px;
}
.hd .main-menu{
float: left;
}
.hd .main-menu a{
display: inline-block;
padding: 40px 20px;
color: #333;
text-decoration: none;
}
.hd .main-menu a:hover{
color: #ff6700;
}
.hd .search{
float: right;
}
style>
head>
<body>
<div class="top">
<div class="container clearfix">
<a href="https://www.mi.com/index.html">小米商城a>
<a href="https://www.miui.com/">MUMIa>
<a href="https://iot.mi.com/">IoTa>
<a href="https://i.mi.com/">云服务a>
<div style="float: right">
<a>登录a>
<a>注册a>
div>
div>
div>
<div class="hd">
<div class="container clearfix">
<div class="logo">
<a href="" style="height: 56px;width: 56px;display: inline-block;margin-top: 20px">
<img src="imgs/logo-mi2.png" alt="" style="width: 100%">
a>
div>
<div class="main-menu">
<a href="https://www.mi.com/index.html">Xiaomi手机a>
<a href="https://www.mi.com/index.html">Redmi手机a>
<a href="https://www.mi.com/index.html">电视a>
<a href="https://www.mi.com/index.html">笔记本a>
<a href="https://www.mi.com/index.html">平板a>
div>
<div class="search">
asdfghj
div>
div>
div>
<div class="banner">
<div class="container">
<a href="" style="width: 1226px;">
<img src="imgs/b1.png" alt="" style="width: 100%">
a>
div>
div>
body>
html>
9、边框border实现
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.c1{
height: 100px;
width: 300px;
border: 1px solid #ff6700;
/*border-right: 1px solid #ff6700;
border-bottom: 1px solid #ff6700;*/
}
style>
head>
<body>
<div class="c1">边框div>
body>
html>
9.1、场景：当鼠标移到到某一字体上出现下滑线
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.c1{
height: 100px;
width: 300px;
border: 1px solid #ff6700;
/*border-right: 1px solid #ff6700;
border-bottom: 1px solid #ff6700;*/
}
.menu{
display: inline-block;
padding: 10px;
margin-right: 20px;
border-bottom: 2px solid transparent;
}
.menu:hover{
border-bottom: 1px solid #333;
}
style>
head>
<body>
asdfghjk边框
菜单1
菜单2
菜单3123456789
body> html>
9.2、场景：边框的圆角设计
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.btn{
display: inline-block;
padding: 10px 20px;
border: 1px solid #ff6700;
border-radius: 50px; /* 设计圆角半径*/
text-decoration: none;
background-color: #b0b0b0;
}
style>
head>
<body>
<a href="http://www.baidu.com" class="btn">点击跳转百度a>
body>
html>
10、position定位的使用
10.1、fiexed固定定位：永远固定在窗口的指定位置
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div style="height: 5000px;background-color: #b0b0b0">返回顶部案例div>
<div style="position: fixed;right: 10px;bottom: 10px;">返回顶部111div>
body>
html>
案例：登录窗体所在页面的正中间
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.login-box{
border: 1px solid red;
height: 300px;
width: 500px;
margin: 0 auto;
position: fixed;
left: 0;
right: 0;
top: 200px;
}
style>
head>
<body>
<div class="login-box">
登录窗体
div>
body>
html>
案例：登录窗体+遮罩层+内容层
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.middle{
position: fixed;
background: #333333;
left: 0px;
right: 0;
top: 0px;
bottom: 0px;
opacity: 0.7;
z-index: 100;
}
.outer{
position: fixed;
background-color: white;
height: 100px;
width: 500px;
left: 0px;
right: 0px;
margin: 0 auto;
top: 200px;
z-index:101;
}
style>
head>
<body>
<div style="height: 5000px;">
<div>a's'd'f'g'h'j'kdiv>
<div>a's'd'f'g'h'j'kdiv>
<div>a's'd'f'g'h'j'kdiv>
<div>a's'd'f'g'h'j'kdiv>
<div>a's'd'f'g'h'j'kdiv>
<div>a's'd'f'g'h'j'kdiv>
<div>a's'd'f'g'h'j'kdiv>
<div>a's'd'f'g'h'j'kdiv>
<div>a's'd'f'g'h'j'kdiv>
<div>a's'd'f'g'h'j'kdiv>
<div>a's'd'f'g'h'j'kdiv>
<div>a's'd'f'g'h'j'kdiv>
<div>a's'd'f'g'h'j'kdiv>
div>
<div class="outer">登录窗体div>
<div class="middle">div>
body>
html>
10.2、absolute 绝对定位&relative相对定位
右边弹窗的出现随左边的按钮移动而变化
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div style="height: 500px; width: 500px;border: 1px solid red;position: relative;">
<div style="position: absolute;right: 0;top: 0;">xxxdiv>
div>
body>
html>