1.盒子模型
1.1盒子模型的传参
margin:0; //四个方向都改变
margin:0 10px; //top,bottom为0px;left,right为10px
margin:0 10px 20px; //top 0;left,right 10px;bottom 20px;
padding如上
1.2元素在盒子中的起始位置
从自身宽度的地方开始
2.HTML标签的分类
2.1 标签分类
//特点
1.独占一行
2.能够设置width,height
//常用的块标签
div,h1~h6,p,ul,li,dl,dt,dd
//特点
1.并排显示
2.不能设置width,height
3.不能设置margin-top,margin-bottom
a,span,em,strong
//特点
1.并排显示
2.可以设置宽高
//常用的内联块标签
button,img,input
2.2 原理
块标签：独占一行,能够设置宽高
div,h1~h6,p,ul,li,dl,dt,dd
display:block;
内联标签:并排显示,不能设置宽高,margin-top,margin-bottom
a,span,em,strong
display:inline-block
内联块:并排显示,可以设置宽高
button,img,input
display:inline-block
2.3 skill
a.如何让内联元素和内联块元素水平居中
display:block;
margin-left:auto;
margin-right:auto;
b.如何让内联元素和内联块元素水平居中
//给父级加
text-align:center
3.css选择器
定义选定你所要改变的元素的一种方式。
3.1分类
<p class="test" id="first">hello world</p>
<h4>标题</h4>
(1)css元素选择器
p{color:pink}
(2)class选择器
.test{color:yellow}
(3)id选择器
#first{color:blue}
(4)分组选择器
p,h4{background:gray}
(5)后代选择器
div>span{} //选取div所有子元素为span的标签
div span{} //选中div之后的所有span元素
(6)兄弟选择器
div+p{}选取紧邻div之后的第一个兄弟元素
div~p{}选取紧邻div之后的所有兄弟元素
(7)伪类选择器
div:hover{}
input:focus{}
(8)伪元素-->用css自定义生成的元素
":before" 伪元素可以在元素的内容前面插入新内容
p:before{
content:''
}
":after" 伪元素可以在元素的内容之后插入新内容。
p:after{
content:''
}
(9).属性选择
div[class='test']{}
http://www.w3school.com.cn/cssref/css_selectors.asp
3.2选择器的优先级别排序
<div class='test' id='first'>hello world</div>
元素选择器<class选择器<ID选择器<!important
div{color:pink}<div.test{color:blue}<div#first{color:yellow}<div{color:red !important}
3.3选择器的权重
<div class="parent">
<div class="child">child</div>
</div>
/* 选择器嵌套的层次越深,那么权重越高 */
.child{
color:red;
}
.parent>.child{
color:green;
}
1.css基本样式
1.1背景
背景颜色:background-color
背景图片:backgorund-image
背景重复:background-repeat
背景吸附:background-attachment:fixed | scroll
背景位置:background-position: x y
//第一个参数表示离x轴的距离,y表示离y轴的距离
//简写
background: color image repeat position
background-size
//指定背景图片大小。
background-size: x y;
//x表示宽度，y表示高度
background-size:cover;
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
相当于background-size:100% 100%;
1.2文本
color:设置字体的颜色
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
text-align文本对齐方式
text-align: right|left|center
text-decoration文本修饰
text-decoration: underline|overline|line-through
text-indent文本缩进
text-transform文本转换(了解)
text-transform:uppercase|lowercase|capitalize
1.3字体
//font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体
p{font-family:Helvetica,Microsoft YaHei}
推荐使用简书的
font-family: -apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
font-size
font-style:normal | italic
font-weight:normal | bold | lighter
行高
line-height
1.4链接
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
//*若单独设置几个链接，必须遵守如下规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
1.5列表(针对ul)
list-style:none;
list-style-type:circle|square
list-style-image:url("xxx")
1.6边框
border-width 边框的宽度
border-style 边框的样式
border-color 边框的颜色
//可以简写成
border： width style color
p{border:1px solid #333}
//边框-单独设置各边
p
{
border-top:1px solid #ccc;
}
1.7表格
border-collapse
//设置表格的边框被折叠成一个单一的边框
table{border-collapse:collapse}
//可以在td,th设置这个两个属性
colspan:value //跨越的列
rowspan:value //跨越的行
1.8轮廓（了解）
//轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
p{outline:1px solid pink}
1.9透明
opacity
visibility:hidden|visible和display:none的区别
2.css样式的继承
继承:是子元素对父元素的继承
2.1width和height
- width
如果子元素不设置宽度，默认情况下继承父元素的宽度
- Height(特殊)
如果父元素不设置高度，默认情况下父元素继承子元素的高度
2.2css可以继承的属性
//文本相关属性
color,text-align,text-decoration,text-transform,text-indent(内联标签不能设置此属性)
//字体相关属性
font-family,font-style,font-size,font-weight,line-height
//列表相关属性
list-style
//表格相关属性
border-collapse
//其他属性
cursor,visibility