|
CSS的盒子模型 概念：页面布局的时候我们要学习三大核心：盒子模型、浮动和定位。 盒子模型的组成 边框（border）：border属性可以设置元素的边框，边框是由三部分组成的：边框的宽度、边框的样式、边框的颜色。 语法：border：border-width、border-style、boder-color; 单独设置边框的部分样式 border-width：设置边框的宽度 border-style：设置边框的样式 常用的属性值有：solid实线边框，dotted点线边框，dashed虚线边框 边框会影响盒子的实际大小 解决方法：如果我们去页面上量盒子的时候，需要width/height减去边框的宽度*2 给表格设置细线边框 属性border-collapse:collapse; 表示将相邻的边框合并在一起 外边距（margin） 分别设置各个方向的外边距 margin-left：左外边距 margin-right：右外边距 margin-top：上外边距 margin-bottom：下外边距 外边距的简写 1、margin后写一个值，代表上下左右都是一样的外边距值 2、margin后写两个值，代表分别设置上下外边距和左右外边距 3、margin后面跟三个值，代表设置上外边距、左右外边距、下外边距 4、margin后写四个值，代表顺时针设置上、右、下、左的外边距值 外边距的典型应用 将块级盒子进行水平居中 需要满足的条件： 1、盒子必须有宽度 2、将左右的外边距设置为auto 如果让行内盒子进行水平居中，给父元素加text-algin:center即可 外边距的合并 概念 使用margin定义块元素的垂直外边距时，可能会出现外边距合并的问题。 主要有两种情况 1、相邻块元素的垂直外边距的合并 概念：当上下相邻的两个块元素相遇时，如果上面的元素有下外边距，下面盒子有上外边距，则他们之间的外边距不是上外边距和下外边距的和，而是选择两个边距值中较大来进行设置，这种现象就是相邻块元素的垂直外边距合并。 2、嵌套块元素垂直外边距的塌陷 概念 如果两个嵌套的盒子，父元素有上外边距，子元素也有上外边距。此时父元素会塌陷较大的外边距值 解决方案： 1、给父元素定义上边框 2、给父元素添加上内边距 3、给父元素添加overflow:hidden;属性 清除内外边距 概念： 网页元素很多有带有默认的内外边距，而且不同的浏览器默认的也不同，所以在进行网页布局之前，首先将元素自己带的内外边距给清除掉是很有必要的。 内边距（padding） padding的属性来设置内边距，就是边框和内容之间的距离 属性 padding-left：左内边距 padding-right：右内边距 padding-top：上内边距 padding-bottom：下内边距 如果要用padding简写，使用方法如下 1、padding后写一个值，代表上下左右都是一样的内边距值 2、padding后写两个值，代表分别设置上下内边距和左右内边距 3、padding后面跟三个值，代表设置上内边距、左右内边距、下内边距 4、padding后写四个值，代表顺时针设置上、右、下、左的内边距值 padiing不会撑开盒子的情况 如果盒子没有指定宽度，就不会被padding撑开盒子，如果指定了就会被撑开 如果不想被padding撑开盒子，将高度和宽度减去padding值即可 CSS的圆角边框 在css中使用border-radius属性来设置圆角边框 语法：border-radius：像素值/百分比 border-radius是只圆的半径 如果想要画一个正圆，就可以先设置一个正方形，然后将border-raidus设置为宽高的一半，或者直接写成50% 如果想要设置四个角的圆角边框之不一致： border-top-left-radius：左上角圆角边框设置 border-top-right-radius：右上角圆角边框设置 border-bottom-left-radius：左下角圆角边框设置 border-bottom-right-radius：右下角圆角边框设置 CSS的盒子阴影 在CSS中使用box-shadow属性来为盒子添加阴影 相应的属性值 h-shadow必须值，水平阴影的位置，允许有负值 v-shadow必须值，垂直阴影的位置，允许有负值 blur可选，模糊距离 spread可选，阴影的尺寸 color可选阴影颜色 inset可选，外部阴影是outset内部阴影是inset 注意： 默认的阴影是外部阴影（outset），但是不可以在box-shadow写这个单词，否则会造成阴影失效 盒子阴影不占有空间，不会影响其他盒子的排列
| 
