前端~css

盒模型(padding)内边距

　　padding;就是内边距的意思,它是边框到内容之间的距离

　　另外padding的区域是由背景颜色的,并且背景颜色与内容颜色一样.也就是说background-color这个属性填充所有border以内的区域

padding的设置

padding有4个方向,分别描述4个方向的padding

描述的方法有两种:

写小属性分别描述不同方向的padding

padding-top: 30px
padding-left: 20px
padding-buttom:30px
padding-right: 20px

写综合属性用空格隔开

padding: 20px;
/*上下左右*/

padding: 20px 30px;
/*上下 左右*/

padding: 20px 30px 40px;
/*上 左右 下*/

padding: 20px 30px 40px 50px;
/*上 右 下 左*/

一些标签默认有padding

比如ul标签.有默认的padding-left值

那么我们一般在做站的时候,是要清除页面标签中默认的padding和margin

*{
    padding: 0;
    margin: 0;
    }

border(边框)

　　border:边框的意思,描述盒子的边框

　　边框有三要素:粗细线性样式颜色

border:solid

　　border:none;

　　border:0;

　　表示border没有设置样式

认识 margin

margin:外边距的意思.表示边框到最近盒子的距离

/*表示四个方向的外边距离为20px*/
margin: 20px;
/*表示盒子向下移动了30px*/
margin-top: 30px;
/*表示盒子向右移动了50px*/
margin-left: 50px;

margin-bottom: 100px;

标准文档流

空白折叠现象

多个空格会被折叠一个空格显示到浏览器页面中.img标签换行写,会发现每张图片见有间隙,

高矮不齐,底边对齐

文字还有图片大小不一,都会让页面的元素出现高矮不齐,浏览器查看我们的页面底边对齐

自动换行,一行写不满,换行写

在一行内写文字,文字过多,那么浏览器会自动换行显示我们的文字

标准文档流下的标签等级:

　　•行内元素

　　•块级元素

行内元素和块级元素的区别:(重要)

行内元素:

　　与其他行内元素并排

　　不能设置宽高,默认的宽度.就是文字的宽度

块级元素:

　　霸占一行,不能与其他任何元素并列

　　能接受宽,高.如果不能设置宽度,那么将默认变成父类的100%

块级元素和行内元素的分类:

　　从HTML角度来讲,标签分为:

　　　　文本级标签:p,span,a,b ,i,u,em

　　　　容器级标签:div,H系列,li,dt,dd

PS：为甚么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。

CSS角度:

　　行内元素:除了p之外,所有的文本级标签,都是行内元素,p是个文本级,但是是个块级元素

　　块级元素:所有的容器级标签都是块元素,还有p标签.

块级元素和行内元素的相互转换

可以通过display属性将块级元素和行内元素进行相互转换,display即"显示模式"

块级元素可以转换为行内元素:

一旦给一个块级元素(比如div)设置:

　　display: inline;

那么这个标签将立即变为行内元素,此时它和一个span无异. inline就是"行内"

　　此时的这个div不能设置高度,宽度

　　此时这个div可以和别的并排.

行内元素转换为块级元素:

　　同样道理一旦给一个行内元素(比如span)设置:

display: block;

那么,这个标签将立即变为块级标签,此时和一个div无异,block是"块"的意思

　　此时这个span能够设置高度,宽度

　　此时这个span必须霸占一行,

　　如不能设置宽度,将撑满父类

脱离标准流:

　　(1) 浮动

　　(2) 绝对定位

　　(3) 固定定位

浮动

　　浮动是css里面布局最多的一个属性,也是一个重要的属性.

float: 表示浮动的意思,他有四个值.

　　none:表示不浮动,默认

　　left:表示左浮动

　　right:表示右浮动

.box1{
      300px;
     height: 300px;
     background-color: red;
     float:left;
  }
 .box2{
      400px;
     height: 400px;
     background-color: green;
     float:right;
   }
   span{
     float: left;
      100px;
     height: 200px;
     background-color: yellow;
    }

三个元素并排显示,.box1和span因为是左浮动，紧挨在一起，这种现象贴边。.box2盒子因为右浮动，所以紧靠着右边。

浮动的四大特性:

1)浮动的元素拖表

2)浮动的元素互相贴靠

3)浮动的元素有字围效果

4)收缩的效果

浮动元素脱标

脱标:脱离标准文档流

    <div class="box1">小红</div>
    <div class="box2">小黄</div>
    <span>小马哥</span>
    <span>小马哥</span>

.box1{
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
        
        }
.box2{
        width: 400px;
        height: 400px;
        background-color: yellow;
        
        }
span{
        background-color: green;
        float: left;
        width: 300px;
        height: 50px;
        }

效果:红色盒子压盖住黄色盒子,一个行内的span标签竟然能够设置标签宽高了

原因1：小红设置了浮动，小黄没有设置浮动，小红脱离了标准文档流，其实就是它不在页面中占位置了，此时浏览器认为小黄是标准文档流中的第一个盒子。所以就渲染到了页面中的第一个位置上。这种现象，也有一种叫法，浮动元素“飘起来了”，但我不建议大家这样叫。

原因2：所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高

浮动元素互相贴靠

<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>

.box1{
            width: 100px;
            height: 400px;
            float: left;
            background-color: red;
        }
.box2{
            width: 150px;       
            height: 450px;
            float: left;
            background-color: yellow;
        }
.box3{
            width: 300px;
            height: 300px;
            float: left;
            background-color: green;
        }

效果:

如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。
如果没有足够的空间，那么就会靠着1哥，如果再没有足够的空间靠着1哥，自己往边靠

清除浮动:

　　1:给父盒子设置高度

　　2:clear:both

　　3:伪元素清除法

　　4:overflow:hidden

clear:both

　　left:当前元素左边不允许有浮动元素

　　right:当前元素右边不允许有浮动元素

　　both:当前元素左右两边不允许有浮动元素

伪元素清除法(常用):

　　给浮动元素的父盒子,也就是不浮动元素,添加一个clearfix的类,然后设置

.clearfix:after{
    /*必须要写这三句话*/
    content: '.';
    clear: both;
    display: block;
}

overflow:hidden(常用):

overflow属性规定当内容溢出元素框时发生的事情

这个属性定义溢出元素内容区的内容会如何处理,如果值为scroll,不论是否需要,用户代理都会提供一种滚动机制.

visible 　　默认值,内容不会被修剪会出现在元素框之外.

hidden　　内容会被修剪,并且其余内容是不可见的

scroll　　内容会被修剪,单浏览器会显示滚动条

auto 　　如果内容被修剪,则浏览器会显示滚动条

inherit 　　规定应该从父元素继承,overflow属性的值

margin的用法

前提必须是在标准文档流下

　　margin的水平不会出现任何问题

　　垂直方向上会出现"塌陷问题"

当给标准流下的兄弟盒子设置了浮动,就不会出现塌陷

margin: 0 auto;

div{
            width: 780px;
            height: 50px;
            background-color: red;
            /*水平居中盒子*/
            margin: 0px auto;
                        /*水平居中文字*/
            text-align: center;

        }

当一个div元素设置margin: 0 auto时,盒子就会居中

使用margin: 0 auto;注意点

1,使用margin: 0 auto;水平盒子居中必须有width,要有明确width,水平文字居中使用,text-align:center

2,只有标准流下的盒子,才能使用margin: 0 auto;

当一个盒子浮动了,固定定位,绝对定位,

3,margin:0 auto;居中盒子,而不是居中文本,文字水平居中,使用text-align:center

margin描述的是兄弟盒子的关系,而padding描述的是父子盒子的关系

善于使用父亲的padding,而不是margin

文本属性和字体属性

text-align属性规定元素的文本的水平对齐方式.

属性值:none center left right justify

文本颜色

color属性

文本首行缩进

text-indent 属性规定元素首行缩进的距离,单位建议使用em

文本修饰

text-decoration属性规定文本修饰的样式

属性值:underline(下划线) overline(定义文本上的一条线) line-through(定义穿过文本下的一条线) inherit继承父元素的text-decoration属性的值

行高

line-hieght就是指行高

字体粗细

font-weight表示设置字体的粗细

bold(粗体) border(更粗) lighter(更细) |100~900(设置具体粗细,400等同于normal,700等同于bold) | inherit(继承父元素字体的粗细)

字体系列

font-family

例语法: font-family:"Microsoft Yahei" ,"微软雅黑" ,"Arial" , sans-serif

如果浏览器不支持第一个字体,则会尝试下一个,浏览器会使用它可以识别的第一个值,如果不支持则显示宋体

background

background-color属性表示背景颜色

background-img表示该元素的背景图片

background-repeat表示该元素平铺方式

repeat : 　　默认背景图像将在垂直方向和水平方向重复

repeat-x:　　背景图像在水平方向重复

repeat-y:　　背景图片将在垂直方向重复

no-repeat: 　　背景图片仅显示一次

inherit　　规定应该从父元素继承background-repeat 属性的设置

定位

定位的方式有三种:

1 相对定位

2 绝对定位

3 固定定位

相对定位:相对于自己原来的位置定位

如果仅仅设置了相对定位,那么与标准流的盒子没有什么区别

设置相对定位后,我们才可以使用四个方向的属性 , top ,bottom , left, right

特性:

不脱标, 形影不离 , 原位置被保留

用途:

微调元素位置, 做绝对定位的参考(父相子绝)

绝对定位:

　　1,脱标 2, 做遮盖效果,提升了层级,设置绝对定位之后,不区分行内元素,和块级元素,都能设置宽高

固定定位

　　1,脱标 2,提升层级,遮盖 3 固定不变