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