网页设计前端——盒子模型

1、盒子模型的宽高以及padding和border的认识

  盒子的宽高不是CSS样式的宽高,CSS样式里的宽高只是内容的宽高,而盒子真实的宽高计算:宽:内容宽+padding+边框的高度    高:内容高+padding+边框的高度。这个地方要有所意识。padding的背景颜色和内容一个颜色。

2、padding是有4个方向的,要控制这4个方向有两种方法。

  ①用小属性的方法:

    padding-left:;左

    padding-right:;右

    padding-top:;上

    padding-bottom:;下

  ②综合写法:

    padding:上  右  下  左;

用小属性可以层叠掉综合写法。

3、border是一个大的综合属性,border:粗细   线型   颜色;

  ①按要素拆开

    border-10px;

    border-style:solid;//线型   实线

    border-color:red;  //颜色

    但是,如果值用空格隔开,他就代表一种顺序,上  右  下  左  一种顺时针顺序去设置border。

  ②按方向拆开

    border-top:10px solid red;

    border-right:10px dashed red;

    border-bottom:10px solid green;

    border-left:10px solid red;

    还可以再拆,即把每个方向的每个元素拆开border-top-10px;

  可以用盒子的border属性做一个三角形。网易多数三角形的角标就是用border做的,这样的话相比图片加载速度会更快。他利用的是border边的临接处平分那个正方形。

    0;

    height:0;

    border:10px  solid  white;//用白色消除

    border-bottom:none;//消除下三角

    border-top-color:blue;//借助前边的白色,只给一个top设置颜色,这样就可以出来一个三角形

原文地址:https://www.cnblogs.com/sylz/p/5698545.html