css基础

css（表现）

css层叠级联样式表

三种导入方式

1.行内样式 2.

外部样式的两种导入方式：link(链接) @import(导入)

h1 {
    color: indianred;
}

在html文件中通过link链接
1.     <link rel="stylesheet" href ="css/style.css" type="text/css" >
2.     <style>
			@import url("css/style.css")
       </style>

选择器

id>class>标签

标签选择器：将所有具有该标签的内容样式变为一致 标签{}

类选择器：在标签中加入class属性 定义标签的类 在style中定义 **.class{}**的样式 可以复用

id选择器：在标签中加入id属性，在style中以**#id**定义，id只能唯一，全局唯一

高级选择器

层次选择器 后代（ ），子选择（>），相邻兄弟选择（+），通用兄弟选择(~)

结构伪类选择器

属性选择器

美化网页元素

字体,文本,背景

盒子模型

margin 盒子到外面的外边距

padding 内边距

border 边框

浮动

display 改变块行元素的属性，

display: block

block 块元素 inline 行内元素 inline-block 是块元素但是可以内联在一行 none 不展示

float 浮动的盒子可以浮动，直到他的外边缘碰到包含框或者另一个盒子为止

父级边框塌陷

clear:right\left\both 不允许自己右边、左边、全部都不允许有浮动元素

1.增加父级元素的高度

2.增加一个空的div清除浮动 div样式clear:both margin:0 padding:0

3.overfloat 属性

4.父类添加一个伪类

#father:after{
    content:"";
    clear:both;
    display:block;
}

定位

相对定位：

任然在标准文档流中，原来的位置会被保留

position:relative
top:20px
left:20px

绝对定位

没有父级元素定位的前提下，相对于浏览器定位

假设父级元素存在定位，通常相对于父级元素进行偏移

在父级元素范围内移动

还在标准文档流中，但是其位置不会被保留

position:absolute
right:-10px;

固定定位

position:fix 无论怎么拖拉浏览器，都固定