CSS基础

artea奶茶

引用CSS

1. 外联式

<link rel="stylesheet" type="text/css" href="css/main.css">

2. 嵌入式

<style type="text/css">
    div{ width:666px; height:666px; color:blue }
</style>

3. 内联式

<div style="width:100px; height:100px; color:green "></div>

常见文本样式

color:blue;（颜色）
font-size:12px;（大小）
font-family:‘微软雅黑’;（字体）
font-style:font-style:‘normal’;（normal不倾斜，italic倾斜）
font-weight:normal;（normal不加粗，bold加粗）
line-height:24;（行高：文字高度+文字上下间距）
font:normal 12px/24px ‘;微软雅黑’;（不加粗，大小12，行高24）
text-decoration:none;（去下划线）
text-indent:24px; （文字首行缩进24）
text-align:center;（文字居中对齐）

CSS选择器

1. 标签选择器

div{color:blue} 
<div>/div> 

2. id选择器

#artea{color:red} 
<div id="artea"></div> 

3. 类选择器

.artea{color:blue}
<div class="artea"></div>

4. 层级选择器

.artea span{color:red}
<div class="artea ">
    <span></span>
</div>

5. 组选择器

.a, .b, .c{
	width:100px;height:100px
}
.a{background:red}
.b{background:blue}
.c{background:green}
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

6. 伪元素选择器

.a:hover{color:blue}
.b:before{content:'行首文字';}
.c:after{content:'行尾文字';}
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

CSS盒子模型

把元素当成盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

注意：
width:100px;
height:100px;
设置盒子的宽度和高度，此宽度和高度是指盒子内容的宽度和高度，不是盒子整体宽度和高度

border padding margin
border padding margin-加方向
四个方向等价于本身，如
border:1px solid red;

margin-top 塌陷

解决方法：
1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：

.clearfix:before{
    content: '';
    display:table;
}

css元素溢出

overflow的设置项：

1. visible：默认值，内容不会被修剪，会呈现在元素框之外。
2. hidden：内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动
3. 清除margin-top塌陷的功能。
4. scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
5. auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
6. inherit 规定应该从父元素继承 overflow 属性的值。

块元素、内联元素、内联块元素

块元素

常用块元素：div、p、ul、li、h1~h6、dl、dt、dd

• 支持全部的样式
• 如果没有设置宽度，默认的宽度为父级宽度100%
• 盒子占据一行、即使设置了宽度

行内元素

常用行内元素有a、span、em、b、strong、i

• 支持部分样式（不支持宽、高、margin上下、padding上下）
• 宽高由内容决定
• 盒子并在一行
• 代码换行，盒子之间会产生间距
• 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式

问题：
解决内联元素间隙的方法：
1、去掉内联元素之间的换行
2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size

块级元素

• 支持全部样式
• 如果没有设置宽高，宽高由内容决定
• 盒子并在一行
• 代码换行，盒子会产生间距
• 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。

拓展：
这三种元素，可以通过display属性来相互转化，不过实际开发中，块级元素用得比较多，所以我们经常把行内元素转化为块级元素。

display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示

浮动

浮动特性

1. 相邻浮动的块元素可以并在一行，超出父级宽度就换行
2. 浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)
3. 父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动 （margin坍陷）
4. 浮动元素之间没有垂直margin的合并

清除浮动

终极方案

.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}

定位

使用css的position属性来设置元素的定位类型，postion的设置项如下：

• relative：相对定位元素，以自身为参照物。

• absolute：绝对定位，父绝子相。

• fixed：固定定位，元素脱离文档流，相对于浏览器视口进行定位。

• static：默认值，没有定位，元素出现在正常的文档流中。

• inherit 从父元素继承 position 属性的值。

定位元素的偏移

定位的元素以left、right、top或者bottom偏移多少偏移量

定位元素特性

绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素