1.css页面引入方法:
1.外联式<link rel="stylesheet" type="text/css" href="css/main.css">
2.嵌入式<style type="text/css">
3.内联式<div style=".....">
2.css文本设置:
font:nomal 12px/36px '微软雅黑' 悬空的字
line-height:24px 设置文字的行高
text-decoration:none;设置下划线
text-indent:首行缩进
text-align:水平对齐方式
3.css选择器:
1.标签选择器
2.id选择器:不可以重复[#box{color:red} <div id=”box”>]
3.类选择器
4.层级选择器
5.组选择器:就是类选择器的交集部分
6.伪类及伪元素选择器
变换效果:.box1:hover{color:red}
插入内容:.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}
4.css盒子模型
1.设置边框:
border-top:10px solid red; 大小,线,颜色
border-style:solid实线 dashed虚线 dotted点线
2.设置边内边距:
Padding:顺时针
**难点**
1.margi:x auto 水平居中
2.margin负值让元素位移及边框合并
3.外边距合并:两个外边距压在一起,只会形成较大的一个边距
a.只设置margin-top
b.设置元素为浮动或者定位
4.margin-top塌陷
1.给父盒子添加border
2.给父盒子添加padding-top
3.给父盒子添加overflow:hidden 元素溢出的时候,怎么做的属性
4.父盒子:position:fixed
5.父盒子:display:table
6.给子元素的前面添加一个兄弟元素
属性为:content:"";
overflow:hidden;
5.块元素:div,p,ul,li,h,di,dd,dt
1.支持全部的样式
2.没有设置宽度时,默认的宽度为父级宽度100%
3.盒子占据一行,即使设置了宽度
内联元素:支持所有的样式,盒子并在一行,换行盒子会产生间距[父元素可以用text-align属性设置子元素水平对齐方式,用line-height属性值设置子元素垂直对齐方式]
不支持宽高,margin,padding上下(完全由内容决定)
代码换行,盒子之间会产生间距
- 父级font-size=0,内联元素再自身设置font-size
- margin-right设置为负值
- float:left;
父元素可以用text-align设置水平对齐方式,line-height属性值设置垂直对齐方式
display属性:用来设置元素的类型及隐藏的,常用的属性有:none,block,inline,inline-block
文字绕图:浮动的块虽然脱离了正常的文档流,但是依然占据正常文档流的文本空间
Question:浏览器默认解析英文或者数字时，是按照单词进行解析
Solution:如果设置word-wrap : break-word; 这个单词就会进行换行显示
6,浮动:
- 碰到父元素边界,浮动元素,未浮动的元素才停下来
- 浮动让行内元素或块元素自动转换成为行内块元素
- 浮动元素会占据该位置
- 父元素内整体浮动的元素无法撑开父元素,需要清除浮动
- 浮动元素之间没有垂直margin的合并
清除浮动
父级上增加属性overflow：hidden
使用成熟的清浮动样式类，clearfix
.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}
清除浮动的使用方法：
.con2{... overflow:hidden}
或者
<div class="con2 clearfix">
7.定位:
position:relative absolution fixed悬浮 static等于没有设置属性 inherit继承父类的属性
8.块元素:独占一行,不能并列显示,能够设置宽高(宽度为父盒子的100%)
行内元素:默认并排显示,不能设置宽高,宽度为内容的宽度
position:absolute;一般设置父盒子为relative,这样子盒子会以父盒子作为参考
absolute,fixed分离出了标准流
绝对定位和固定定位的块元素和行内元素会自动转换为行内元素
9.background属性
color背景颜色 image背景图片地址 repeat如何重复平铺
position背景图片的位置 attachment背景图片是固定的还是随着页面滚动条滚动
background:cyan url(bg.jpg) repeat-y 颜色—图片—重复方式