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)常见网页布局

①先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置。

②浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。

 

posted @ 2021-12-02 20:33  _不吃香菜  阅读(125)  评论(0编辑  收藏  举报