【无标题】

  • 盒子模型

    • 边框(border)

    • border可以设置元素的边框,边框分成三部分,边框的(粗细)边框的样式,边框的颜色

    • 
      
          
       
    • 边框的简写:没有顺序,一般规定。

    • border-width: 200;
      border-style: 边框的样式 
      border-color: 边框颜色
    • 简写后:border: 5px solid pink;

    • 可以分别让四个边框各自修改

    • border-top: 大小 边框样式 边框颜色。这是让上边框改变,还有bottom left right

    • border: 1px solid bule;

    • border-top: 1px solid red;//这个最靠近body里面的容器故呈现上边框是红色,其他边其他颜色

    • 当想合并两个方框的边框使其1+1=1则

    • border-collapse:collapse;
    • 测量盒子的大小的时候,不量边框

    • 测量包括边框时需要,width/height剪切边框的宽度

    • 让内容与边框有距离则利用填充的方法

    • padding-left: 200px;//将左边的进行填充
      padding-top: 38px;//将上边进行填充
    • 【无标题】_第1张图片
  • 如果固定了和盒子的大小使用padding就会使盒子变大,故当使用padding时要将其与盒子一起相加

  • 当父类有witch/height时,子类无需在定义。定义会超出父类的范围。在子类padding不会超出父类的范围

  • 外边距margin-left: 数值

  • 右外边距margin-right: 数值

  • 上外边距margin-top: 数值

  • 下外边距margin-bottom: 数值

  • 让盒子水平居中

  • 1、盒子必须指定了宽度(width)

  • 2、盒子左右的外边距都设置为auto

  • 
        
        
  • 以上的方法是让让块级元素水平居中,行内元素或者行内块元素水平居中需要给其父类元素添加text-align: center即可

  • 嵌套块元素垂直外边距的塌陷

  • 由于两个父子关系的块元素,两个都用margin-top: 59px;最终执行的是父类的塌陷

  • 解决方法一、父类定义上边框

  • border: 1px solid transparent;//transparent是全透明

  • 方法二、给父类上内边框

  • padding: 1px ;

  • 方法三、给父类添加overflow.hidden

你可能感兴趣的:(css,前端,html)