CSS布局基础（标签类型，盒子模型）-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS布局基础（标签类型，盒子模型）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

盒子模型

盒子组成

边框
外边距
内边距
内容

布局描述

选择标签
利用CSS布局
向盒子添加展示内容

边框

注意： 默认布局方式，边框会撑大盒子大小；要么手动计算盒子大小，减去边框大小。要么将盒子定义为怪异盒模型 box-sizing: border-box;

粗细

border-width: 1px;

颜色

border-color: #fff;

样式

border-style: solid | dashed | 等等

复合表示

border:   border-width border-style border-color;

定义单个边框样式

单独定义每个边框每个属性

border-top/left/right/bottom-width/style/color:

单独边框属性复合写法

border-top/left/right/bottom: 1px solid blue;

圆角

盒子边框角默认是直角，可通过css设置为圆角。
实现原理为：以指定半径的圆去与角对应的两条边相切，然后以圆角代替原有的直角。使用固定值时，如果圆角值超过盒子高度的一半，仅以盒子高度一般作为半径
盒子高50px，而固定值圆角一旦超过 25px，就一直是下面这个效果
CSS布局基础（标签类型，盒子模型）
这里的半径要注意，当使用百分比作为属性值时，其水平和垂直方向的实际半径大小是按盒子宽高实际计算的，也就是当盒子宽高不一致时，画出来的是一个椭圆而不是圆

只有当盒子宽高相同时，画出来的才是圆
CSS布局基础（标签类型，盒子模型）

border-radius: px 或者 25%;
border-radius: 左上 右上 右下 左下; 
border-radius: 左上 右上/左下 右下; 
border-radius: 左上/右下 右上/左下;

以上为同时设置多个角的圆角效果，还可以单独指定一个角的圆角效果
有两种方式定义单个圆角位置

上下左右

 border-top-left-radius: 10%;
 border-bottom-left-radius: 20%;
 border-top-right-radius: 30%;
 border-bottom-right-radius: 50%;

起止位置 start = left，end = right （以左上角为起点，顺时针）

 border-start-start-radius: 10%;
 border-start-end-radius: 20%;
 border-end-start-radius: 30%;
 border-end-end-radius: 40%;

内边距

定义盒子边框和盒子内元素的距离，当盒子明确（继承不算）指定了宽高时，会撑大传统盒模型的大小

padding: 10px;
padding-left/right/top/bottom: 10px;

外边距

定义盒子边框和外部元素的距离。

margin: 10px;
margin-left/right/top/bottom: 10px;

块元素居中

设置宽度
margin 10px auto;

盒子内行内（块）元素居中

给盒子设置内容居中属性

text-align: center;

外边距使用陷阱

两盒子外边距相遇时，不会叠加两个值，而是取其中较大的一个

解决：建议外边距只设一个方向

两个嵌套盒子同时设置，上外边距(margin-top)时，内部盒子的上边距会被计算到外面的盒子上，导致内不盒子上外边距不生效

解决：
方式一：

给父元素设置一个边框（可以解决，但是边框粗细不能为0，否则无效。因此会影响整体布局）

方式二：

不使用子元素的 margin-top ，改用父元素的 padding-top 实现，注意传统盒子模型下，可能会撑大父元素，影响整体布局

方式三：

给父元素设置 overflow:hidden; 属性

方式四：

给父元素设置(固定/绝对)定位或者浮动，这三种都是利用父元素脱离文档流实现的，但是不推荐，会影响整体布局

方式五：

改变父元素显示方式，简单试了下，改成 inline-block / table …

方式六：

使用伪类元素实现，借鉴了方式五

    .test1::before{
      content: "";
      display: table;
    }

清除内外边距，便于布局计算

* {
  margin: 0;
  padding: 0;
}

盒子阴影

box-shadow: 10px 10px 10px 10px color inset;

10px(阴影相对盒子的x轴位移) (必填)
10px(相对Y轴的位移) （必填）
10px（阴影模糊程度）默认 0 ：无模糊效果
10px（阴影大小）默认 0 ：阴影和盒子一样大
#6AC5AC（颜色）默认黑色
inset（内阴影，默认不填为外阴影）;
阴影位置：默认是外阴影，阴影在盒子外，不设值；inset 为内阴影，阴影在盒子内
阴影不占用空间，仅仅是一种效果，多出去的部分会被其他元素覆盖