CSS盒子模型与浮动
1.盒子模型
(1)边框(border)
粗细 样式 颜色
语法:border:border-width || border-style || border-color
- solid 实线边框
- dashed 虚线边框
- dotted 点线边框
边框简写:border:1px solid red ;没有顺序之分
边框可以分开写:border-top / border-right / border-bottom / border-left
(2)表格的细线边框
border-collapse 属性控制浏览器绘制边框的方式
语法:border-collapse:collape;合并相邻的边框
(3)内边距(padding)
padding会影响盒子实际大小
(4)外边距(margin)
外边距可以让块级盒子水平居中,但必须满足两个条件:
- 盒子必须指定了宽度(width)
- 盒子左右的外边距都设置为auto
行内元素或者行内块元素水平居中给其父元素加text-align:center
(5)外边距合并
对于两个嵌套关系的块元素,父元素有上外边距同时子元素也有上边距,此时父元素会塌陷较大的外边距值。
解决方案:
- 可以为父元素定义上边框
- 可以为父元素定义上内边距
- 可以为父元素添加overflow=hidden
(6)清除内外边距
(7)圆角边框
语法:border-radius:length;
length的数值越大,弧度越明显。
(8)盒子阴影
box-shadow:h-shadow(水平阴影位置) v-shadow(垂直阴影位置) blur(模糊距离) spread(阴影的尺寸) color inset(默认外部阴影outset)
盒子阴影不占空间
(9)文字阴影
text-shadow:h-shadow v-shadow blur color;
2.CSS浮动
(1)浮动
网页布局第一原则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。
浮动:选择器 { float:属性值;}
浮动特性:
- 脱离标准普遍流的控制(浮)移动到指定位置(动)(俗称脱标)。
- 浮动的盒子不再保留原先的位置。
网页布局第二原则:先设置盒子大小,之后设置盒子的位置。
(2)常见网页布局
①先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置。
②浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。