css-总结
Posted fuyouqiang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css-总结相关的知识，希望对你有一定的参考价值。
1、 css基本语法
css页面引入方法：
1、外联式：通过link标签，连接到外部样式表到页面中
<link rel="stylesheet" type="text/css" href="CSS/main.css">
2、嵌入式：通过style 标签，在网页上创建嵌入式的样式表
<style type="text/css">
h1{
font-size:20px;
color: blue;
}
</style>
3、内联式：通过标签的style 属性，在标签上直接写样式
<a href="https://www.baidu.com/" style="font-size:24px; color:yellow;">百度</a>
2、 css文本设置
color：设置文字的颜色：如：color:red;
font-size:设置文字的大小：如font-size:12px;
font-family:设置文字的字体：如font-family:‘微软雅黑‘;
font-style:设置字体是否倾斜：
如font-style:‘normal‘;设置不倾斜
如font-style:‘italic‘;设置倾斜
font-weight:设置文字是否加粗
如font-weight:bold; 设置加粗
如font-weight:normal; 设置不加粗
line-height 设置文字的间距；如line-height:24px;
font:可以同时设置文字的几个属性，要按照一定的顺序，
font: 是否加粗 字号/行高 字体
如：font:normal 12px/36px ‘微软雅黑‘
text-decoration 设置文字的下划线
如：text-decoration:none; 将下划线去掉
如：text-decoration:underline; 设置下划线
text-indent:设置文字首行缩进
如：text-indent:40px; 首行缩进40px（20一个汉字）
text-align:设置文字水平对齐方式，
如：text-align:center 设置文字水平居中
3、 css颜色表示法：
1、颜色表示：例如 red 红色 gold 金色
2、rgb表示：例如 rgb(255, 0, 0) 表示红色
3、16进制数值表示：例如#ff0000表示红色
4、 选择器
4.1、标签选择器
影响范围大，尽量应用在层级选择器上面
div{
color: green;
font-size: 40px;
}
在所有的div 标签中都会起作用
4.2、id选择器
通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能
对应于页面上一个元素，不能复用，id一般给程序使用，所以不推荐
#id1{
font-size: 40px;
}
<p id=‘id1‘>1234</p>
4.3、类选择器
通过类选择器来选择元素，一个类可应用多个元素，一个元素上可以使用
多个类，应用灵活，可复用
.box1{
color: red;
}
.box2{
color: blue;
}
<h1 class="box1">标题1</h1>
<h2 class="box2">标题二</h2>
4.4、层级选择器
主要应用在选择父类下的子元素，或者子元素下面的子元素
可以与标签结合使用，减少命名，同时也可以通过层架，
防止命名冲突
<style type="text/css">
.box{
color: #ff00ff
}
.box span{
font-size: 40px;
}
</style>
4.5、组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器
<style type="text/css">
.box1,.box2,.box3{
font-size: 40px;
}
.box1{
color: #ff0000
}
.box2{
color: #00ff00
}
.box3{
color: #0000ff
}
</style>
4.6、伪类及伪元素选择器
常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态，
伪元素还有before 和after,他们可以通过样式在元素中插入内容
.link{
font-size: 40px;
color: green;
text-decoration: none;
}
.link:hover{
color: red;
font-style: italic;
}
.box1:before{
content: ‘前面文字‘;
color: red;
}
.box2:after{
content: ‘后面文字‘;
color: green;
}
5、 盒子模型
盒子模型解释：
元素在页面中显示成一个方块，类似一个盒子，css盒子模型就是使用现实中盒子来做比喻，
帮助我们设置元素对应的样式，盒子模型示意图如下：
margin-top（外填充）（指盒子与盒子之间的距离）
border-top（边框）
padding-top（内填充）
content(内容)
6、 盒子模型使用技巧及相关问题
margin 相关技巧
1、设置元素水平居中：margin: x auto;
2、margin 负值让元素位移及边框合并
外边距合并
外边距合并指的是 当两个垂直外边距相遇时，他们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度重的较大者。
解决方法：
1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位
margin-top 塌陷
在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，
导致内部的盒子margin-top设置失败，解决方法如下：
1、外盒子设置一个边框
2、外部盒子设置overflow:hidden
3、使用伪元素类：
.clearfix:before{
content:‘‘;
display:table;
}
<!DOCTYPE html>
<html>
<head>
<title>margin-top塌陷</title>
<style type="text/css">
.clearfix:before{
content: ‘‘;
display: table;
}
.box1{
width: 300px;
height: 300px;
/* border: 1px solid #000; 方法一*/
/* overflow: hidden; 方法二*/
}
.box2{
width: 200px;
height: 100px;
background-color: green;
margin-top: 100px;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
7、 css元素溢出
当子元素的尺寸超过父元素的尺寸是，需要设置父元素显示溢出的子元素的方式，
设置的方式通过overflow 属性设置
overflow 的设置项：
1、visible 默认值，内容不会被修建，会呈现在元素框之外
2、hidden 内容会被剪掉，并且其余内容是不可见的，此属性还有清除浮动，清除margin-top塌陷的功能
3、scroll 内容会被修剪，但浏览器会显示滚动条以便查看其余内容
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余内容
5、inherit 规定应该从父元素继承overflow 属性的值
以上是关于css-总结的主要内容，如果未能解决你的问题，请参考以下文章