##CSS知识点回顾
CSS引入方式
内部引入（行间样式）
优先级高，不会被其他样式覆盖和影响，不会产生其他请求
但是，不利于代码的维护，没有“内容、样式”分离，影响阅读体验<div class="box" style=width:300px;height:300px;></div>style标签引入(嵌入式)
实现了“内容、样式分开的规范”，比行间样式的体验要高，也不会产生其他请求
但是，不利于复用，增加了html文档的篇幅
在head标签中引入style标签
<html>
<head>
<meta charset="utf-8">
<title>CSS引入方式</title>
<style>
.box{
width:300px;
height:300px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
- link引入 (链接式)
实现了“内容样式”分离,有利于阅读体验
引入外部CSS文件
<link rel="stylesheet" type="text/css" href="reset.css"/>
href属性就代表引入的CSS文件
- @import url（）
引入外部css文件
CSS语法
标签{
属性:属性值;
}
例:
background{ color:red;}
CSS选择器
- 标签选择器
例:
div{ }
a{ }
- id选择器（名称是唯一的）
例:标签名为box的标签元素
#box{ }
- 类选择器（名字可以重复）
例:标签名为box的标签元素
.box{ }
- 层级选择器（父子选择器）
例:body下的div标签
body div{ }
*小结
优先级
标签选择器 < 类选择器 < id选择器
注意:如果加上!important,那么所有的优先级规则全部无效
- 群组选择器
每个标签元素之间用,连接
a,h,div,p{ }
通配选择器
*为通配符 用来对所有的标签设置样式 清除一些默认的属性 通配选择器的优先级最低 要谨慎使用
CSS的几种布局方式
浮动布局
float(浮动):
none;(默认值)
left;(向左浮动)
right;(向右浮动)
定位布局
相对定位
position:relative; 相对自身的位置进行定位,值可以为负数,可以对块级标签使用,不会改变标签的属性。
绝对定位
position:absolute; 脱离了文档流,改变了标签的属性。如果父级标签有设置relative,则以父级标签为起点;反之,如果父级标签没有设置,则以body为起点。
固定定位
position:fixed;
CSS清除浮动的方法
给浮动元素的父级元素设置一个高度
给浮动元素的父级设置overflow属性
overflow:
visible;默认值,内容不会被剪裁,会呈现在元素框之外。
hidden;超出父级的内容被剪裁掉,去掉滚动条。
scroll;超出父级边框的内容剪裁掉,当内容高度超出父级高度的时候,出现滚动条。- 在浮动元素的后边就上一个空标签,并在CSS中给其设置{clear:both;}属性。
