一.关于上篇博客的总结
1.高级选择器:
(1).后代选择器*****
选择的是儿子,孙子,重孙子
div p{}
(2).子代选择器
选择的是亲儿子
div>p
(3).组合选择器
div,p,a,span{}
(4).交集选择器
div.active{}
(5).属性选择器
input[type="text"]{}
(6),伪类选择器
爱恨准则
a:link{}
a:visited{}
a:hover{}
a:active{}
对a来设置字体颜色,一定要选中a
(7).伪元素选择器
p::first-letter{}
p:before{
content:""
}
//与浮动有关系
p:after{
content:""
}
2.CSS的继承性和层叠性
在CSS中,color, text-xxx, font-xxx, line-xxx这些属性是可以被继承下来
层叠性: 权重->谁的权重大就会显示谁的属性
权重大小的对比:
选择器的个数: id class 标签
①权重比较:
行内 > id > class > 标签
②权重比较:
继承来的属性,它的权重为0,与选中的标签没有可比性
③权重比较
都是继承来的,他们权重都为0,就近原则
④权重比较
都是继承来的,他们权重都为0,描述的一样近,再去数权重
⑤权重比较
权重一样大,后面的大于前面的属性
3.盒模型
标准盒模型:
width: 内容的宽度
height: 内容的高度
padding: 内边距,内容到边框的距离
border: 边框
margin: 外边框,一个盒子的边到另一个盒子边的距离
计算盒模型:
盒子的大小=width+2*padding+2*border
如果保证盒子大小不变,那么加padding,,就要减内容的width或height
4.浮动
浮动是实现元素并排,只要盒子浮动,就脱离标准文档流(不在文档流上占位置)
整理
二.盒模型的属性(重要)
1.padding
(1).padding: 10px; 上下左右
(2).padding: 20px 30px; 上下 左右
(3).padding: 20px 30px 40px; 上 左右 下
(4).padding: 20px 30px 40px 50px; 顺时针 上右下左
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>padding的使用</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
/*上下左右*/
padding: 10px;
/*上下 左右*/
padding: 20px 30px;
/*上 左右 下*/
padding: 20px 30px 40px;
/*顺时针 上 右 下 左*/
padding: 20px 30px 40px 50px;
}
</style>
</head>
<body>
<!-- padding是标准文档流，父子之间调整位置 -->
<div class="box">娃哈哈</div>
</body>
</html>
示例
2.border
三要素:线性的宽度, 线性的样式, 颜色
border: 1px solid red;
border-left: 1px solid red
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border是的使用</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
/*四个边框均为5px*/
/*border: 5px solid blue;*/
/*上下边框 蓝色实线,左右边框 黑色双线*/
/*bored-width: 5px 10px;
border-color: blue black;
border-style: solid double;*/
/*左边框黄色5px实线*/
/*border-left-style: solid;
border-left-width: 5px;
border-left-color: yellow;*/
/*左黑 右蓝 上黄 下紫*/
border-left: 5px solid black;
border-right: 2px solid blue;
border-top: 5px solid yellow;
border-bottom: 2px solid purple;
}
</style>
</head>
<body>
<!-- padding是标准文档流，父子之间调整位置 -->
<div class="box">娃哈哈</div>
</body>
</html>
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>制作三角形</title>
<style type="text/css">
div{
width: 0px;
height: 0px;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
制作三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>制作圆</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: red;
/*制作圆角*/
/*border-radius: 3px;*/
/*制作圆*/
/*border-radius: 100px;*/
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
制作圆
3.margin
前提是必须是在标准文档流下
margin的水平不会出现任何问题
垂直方向上margin会出现"塌陷问题"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin的应用</title>
<style type="text/css">
.a1{
background-color: red;
margin-right: 30px;
}
.a2{
background-color: rgb(0,123,0);
margin-left: 30px;
}
</style>
</head>
<body>
<span class="a1">娃哈哈</span><span class="a2">爽歪歪</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.s1{
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 40px;
}
.s2{
width: 200px;
height: 200px;
background-color:rgb(0,128,0);
margin-top: 100px;
}
</style>
</head>
<body>
<!-- 塌陷,两盒子之间的距离为100px -->
<div class="s1"></div>
<div class="s2"></div>
</body>
</html>
塌陷(坑)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 300px;
height: 300px;
background-color: red;
/*float: left;*/
}
.child{
width: 100px;
height: 100px;
background-color: green;
margin-left: 50px;
margin-top: 50px;
}
</style>
</head>
<body>
<!-- 子盒子向上推50px,结果带着父盒子一起推了 -->
<div class="box">
<div class="child"></div>
</div>
</body>
</html>
向上推盒子(坑)
三.display 显示(重要)
前提是必须在标准文档流下
1.属性:
(1).block 块级标签
独占一行
可以设置宽高,如果不设置宽,默认父盒子宽度为100%
(2).inline 行内标签
在一行内显示
不可以设置宽高,根据内容来显示宽高
(3).inline-block 行内块
在一行内显示
可以设置宽高
(4)none 不显示,隐藏,不在文档上占位置
(5)visibility:hidden; 隐藏,在文档上占位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display的应用</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid blue;
display: inline;
}
div a{
display: block;
width: 300px;
height: 300px;
}
span{
display: inline-block;
width: 300px;
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<div class="box">哇哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
<div class="box">呵呵呵</div>
<div>
<a href="#">
<img src="img/1.jpg" alt="" width="300px" height="200px" />
</a>
</div>
<input type="text" />
<span>啊啊啊啊啊</span>
<span>啊啊啊啊啊</span>
</body>
</html>
示例
四.浮动(重要)
浮动是css里面布局最多的一个属性，也是很重要的一个属性
float：表示浮动的意思。它有四个值
none: 表示不浮动,默认
left: 表示左浮动
right: 表示右浮动
1111
原文地址：https://www.cnblogs.com/rixian/p/9683069.html
时间： 2024-10-07 15:21:45