盒模型

字体缩进属性

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

text-indent:-999px;  隐藏文本的另外做法

css三大特性

层叠性 ,继承性,优先级

继承性: 1）、字体系列属性
　　 font-family：字体系列
　　 font-weight：字体的粗细
　　 font-size：字体的大小
font-style：字体的风格
line-height：行高
2）、文本系列属性
　　 text-indent：文本缩进
　　 text-align：文本水平对齐
color：文本颜色
text-decoration：文本修饰

字体颜色

color: 
(1)屌丝程序员表示法  red,blue,yellow 
(2)标准程序员表示法  color:#6位16进制  #234567; 两位位一组
16进制  16个数  0-9 A-F  10 A  11 B  F 15
23 红色  45绿色  67蓝色  #333333====>#333 #000黑色  #fff白色
(3)文艺程序员 color:rgb(0-255 ,0-255 ,0-255 ) red green blue

color:rgb(234,23,12)

元素的分类以及展示属性

div,span, p,hi,img,a,em.i,strong,b,u,ins,del,s ul li ,ol li dl,dt dd table td th tr

大致三大类

行内元素: em,i,strong,b,a,span

1: 宽高完全取决于内容 人为设置不起作用

​ 2: 并排 超出父元素宽度时自动折行

​ 3:具有文本特性

​

块级元素:div,p,hi,ul,li,ol,li ,dl 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-border-top+bottom+margin-top+margin-bottom

边框 border

border:
(1)边宽 border-width: 1px 2em 3rem 
(2)边型 border-style: solid 实线 / dashed虚线/dotted小圆点 / double双实线
(3)边色  border-color: red #345678 rgb(0-255,0-255,0-255)

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

应用:三角形

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

We Can use css代码实现图片效果 尽可能

 .box {
        width: 0px;
        height: 0px;
        border-width: 100px 100px 100px 100px;
        border-style: solid;
        /* background: #000; */
        /* transparent 取底色  */
        border-color: transparent transparent palegreen transparent;
    }

内边距 padding

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

外边距margin

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

2: 调整的自己位置 margin-left ,margin-top 可以为负值

水平居中: margin:0 auto;

现象: 子元素设置上外边距父盒子一起向下移动???

正常排版下 ,父盒子和子元素在垂直方向上的外间距会互相干扰 ,一起移动,====>

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

1: 父子嵌套时

现象:当子元素设置上外边距时,父盒子会和子元素一并向下移动

解决方案:

1: 给父元素设置1px上外边框或者1px上内边距(分割公共区域)

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

规则:BFC (块级格式化上下文) 私人领域

BFC规则不是浏览器的默认规则,所以我们得触发BFC规则

overflow:hidden —>可以触发BFC规则

2:盒子垂直上下放置时

解决: 不要解决,要避免!!!

背景属性

插入图片的另外一种方式

background:背景的颜色    背景图片路径  背景是否平铺  背景的位置   背景是否附着attachment(是否随着滚动条动) ;
background-color:rgb ,#123456,red
background-image: url(./image/beijing.png)
background-repeat: no-repeat/repeat默认/repeat-x/repeat-y;
background-position: xpx ypx      70%   60%  px/% ;
background-attachment: fixed固定 不动/scroll卷曲  随着滚动条动

scroll : 位置参考点是父元素左上角
fixed : 位置参考点变成body左上角

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