上联:为需求而生,为用户而死,为浏览器奋斗一辈子!下联:吃CSS亏,上JS的当,最后死在兼容上!横批:前端人生
一、盒模型
1.内边距 padding
- 上下左右的内边距都是20px
<head>
<style>
div{
width:300px;
height:200px;
padding:20px;
}
</style>
</head>
<body>
<div>Hello CSS!</div>
</body>
- 单独设置某一个边的边内距
<head>
<style>
div{
width:300px;
height:200px;
padding-left:10px;
padding-right:20px;
padding-top:30px;
padding-bottom:40px;
}
</style>
</head>
<body>
<div>Hello CSS!</div>
</body>
- 可以混写,规则如下:
padding: 20px 30px 20px 40px; /上 右 下 左/
padding: 20px 30px 40px; /上 右左 下/
padding: 20px 30px; /上下 右左 /
2.外边距margin
- 同padding
3.边框border
- 上下左右的边框都是20px
<head>
<style>
div{
border:20px solid #f00;
}
</style>
</head>
<body>
<div>Hello CSS!</div>
</body>
- 将属性分开单独写
<head>
<style>
div{
border-width:20px;
border-style:solid;
border-color:#f00;
}
</style>
</head>
<body>
<div>Hello CSS!</div>
</body>
- 单独控制每个边的各个属性
<head>
<style>
div{
border-left-width:10px;
border-right-style:solid;
border-top-color:#f00;
}
</style>
</head>
<body>
<div>Hello CSS!</div>
</body>
- 用代码写出三角形
保留左侧边框的颜色,其余三边的颜色均设为 transparent(透明)。
<head>
<style>
p{
display:inline-block;
border-width:40px;
border-style:solid;
border-left-color:#f00;
border-right-color:transparent;
border-top-color:transparent;
border-bottom-color:transparent;
}
</style>
</head>
<body>
<p></p>
</body>
4.两种盒模型
显示宽度 = width + padding + border(box-sizing:content-box)
显示宽度 = width(box-sizing:border-box)
二、display
1.display:inline 内联元素
不是独占一行, 不能直接设置宽高
2.display:block 块级元素
独占一行, 可以设置宽高
3.display:inline-block 内联元素(内联块级元素)
不是独占一行,但是可以设置宽高
4.display:none 隐藏
三、伪类
- 鼠标移入移出
<head>
<style>
.box p{display:none;}
.box:hover p{display:block;}
</style>
</head>
<body>
<div class="box">
<h3>标题</h3>
<p>段落文字</p>
</div>
</body>
- 鼠标按下抬起
<head>
<style>
.bar p{display:none;}
.bar:active p{display:block;}
</style>
</head>
<body>
<div class="bar">
<h3>标题</h3>
<p>段落文字</p>
</div>
</body>
四、font
- 字体大小
font-size:90px;
- 字体颜色
color:#00f;
- 设置字体
font-family:"宋体";
- 字体粗细
font-weight:800;
- 字体样式
font-style:italic;
- 字间距
letter-spacing:40px;
- 行高
line-height:200px;
- 居中对齐
text-align:center;
左对齐text-align:left;
右对齐text-align:right;
- 首行缩进
text-indent:32px;
- 没有下划线
text-decoration:none;
下划线text-decoration:underline;
上划线text-decoration:overline;
删除线text-decoration:line-through;
五、background
- 背景色
background-color:#f00;
- 背景图片
background-image:url(图片路径);
- 背景位置
background-position: center;
- 背景不重复
background-repeat:no-repeat;
背景重复background-repeat:repeat;
X轴方向重复background-repeat:repeat-x;
Y轴方向重复background-repeat:repeat-y;
- 背景图片大小
具体尺寸:background-size: 400px 300px;
设置百分比:background-size: 100% 50%;
填充:background-size: cover;
适应:background-size: contain;
- 是否随着页面滚动
固定:background-attachment: fixed;
滚动:background-attachment: scroll;
六、float
左浮动:float:left;
右浮动:float:right;
清除浮动
- 设置高度
- 父级元素浮动
- 溢出:隐藏
overflow: hidden/auto/scroll;
- 在子元素后添加空元素,设置其属性为
clear:both/clear:left/clear:right
- clearfix
<head>
<style>
.clearfix:after{
content:"; display:block; height:0; visibility:hidden; clear:both; } </style>
</head>
<body class="clearfix">
</body>
- position:absolute/fixed