CSS的一些特性

字体缩进属性

text-indent:20px/2em/2rem;
em:相对于父元素字体大小的参考单位
rem：相对于html根标签的参考单位

text-indent：-999；隐藏文本的另外做法

css三大特性

层叠性，继承性（inherit），优先级

继承性：text-，line-height，font- ， color

字体颜色

color:
1.屌丝程序员表示法：red，blue
2.标准程序员表示法 ：color：#6位16进制 #234567：两位一组
16进制 16个数 0-9 A-F  
3.文艺程序员表示法 rgb(0-255,0-255,0-255,)

元素的分类以及展示属性

div，span，p，em，i…

大致三大类

行内元素：em，i,strong,a,span

行内元素中a比较特殊 虽然是个小盒子，但是可以装大盒子

1：宽高完全取决于内容 人为设置不起作用
2：并排 超出父元素宽度自动折行
3：具有文本特性

块级元素：div,p,hi,ul,li,ol,dl,dt,dd,form

 1、默认宽度100% 取决于内容的高度 ；2、可以设置宽高，独成一行。

行内块元素 img input

1：宽高设置起作用
2：并排放置
3：文本特性

布局的第一大块 核心–> 盒模型

盒模型的宽=width+padding-left+padding-right+border-left+border-right+margin-left+margin-right

盒模型的高度=height+padding-top+padding-bottom+border-top/bottom+margin-top/bottom

边框border

border:
1.边框  border-width：1px
2.边型 border-style：solid 实线 / dashed 虚线/ dotted小圆点/ double双实线
3.边色 border-color

边框增加后盒模型宽度要增大，如果要保证盒模型宽度不变，只能内减width

应用：三角形

网页如果图片过多–>请求次数多—>加载速度变慢–>用户体验变差

尽可能使用css代码实现图片效果

内边距padding

调整内容与边框的距离---->内边距可以撑大盒子—>内减width—>

外边距margin

1：设置盒子与盒子之间的距离

2 :调整自身的位置 margin-left，margin-top 可以为0 负值

水平居中: margin: 0 auto

现象：外边距塌陷现象只发生在垂直方向

1：父子嵌套时

​ 现象：当子元素设置上外边距时，父盒子

​ 解决方案：

​ 1：给父元素设置1px上外边框或者1px上内边距（分割公共区域）

​ 2：既然默认渲染导致外边距塌陷，就要使用浏览器的一个规则去改变默认渲染。

​ 规则：

BFC（块级格式化上下文)：不是浏览器的默认规则，所以我们要触发BFC规则

overflow：hidden–>可以触发BFC规则

​ 2：盒子垂直上下放置时

背景属性

插入图片的另外一种方式

background：背景的颜色;背景的图片路径；背景是否平铺；背景的位置 背景是否附着；
background-color：rgb，#123234，red
background-img：url(./img/xx.jpg)
background-repeat:no-repeat/repeat默认/repeat-x/repeat-y;
background-position:xpx  ypx    70%  60%   px/%;
background-attachment：fixed /scroll

background-position:10% 20% 10%是父元素宽度-图片的宽度的10%