html/css-css-盒子模型

1.盒子模型

是什么，又称为框模型，装html元素，设计html和实现布局

有四个边：外边距margin、边框、内边距padding、内容区

大小：宽度和高度

div

所有元素都可以当作盒子模型

元素占页面空间的大小；width+2*padding+2*border；height+2*padding+2*border

2.阴影

box-shadow{px; px; 大小 px; 模糊程度 grey; 颜色}

3.边框

宽度默认为1px 样式无默认，不能不写  颜色默认为黑色

显示效果：同时出现上右下左四个方向的边框，可以拆分成

                 三个属性：border-width -style -color，最好写一起

                 四个属性：border-top -right -bottom -left

                 三个属性：-width:10px 20px 上下 左右 10px 20px 30px 上 左右 下 10px 20px 30px 40px 上右下左 style color同

5.三角形

color： white wHite white black； 点点点线 三角形  black的那里就有一个三角形

6.边框圆角

Border-radius:20px;

特殊用法：radius:50px(1/2的高和宽)  得到一个圆  比如微博头像

          椭圆：50px 20px 对角线  这只有两个，设置4个得到椭圆

7.边框的图像

Border-img:url(.png)  使用时会替代b-style,类似背景图像设置

Border: 10px solid transparent;加入

Border-backgroundcolor：green；删除

<div>gudhkgv</div>  加字

加入：

border-image:url ()   30;

b-image-source:        设置边框图像来源/路径

b-image-width:  30px

b-image-repeat:  stretch

 

b-image-slice           分割为9个区域

b-image-outset       定义超出边框盒

没有这个会很麻烦，需要9个元素，8个图片

<div><img><img><img></div>表格一行

8.内边距

padding

内边距背景颜色和div大盒子一致，不能设置颜色，透明的

也有top right bottom left

9.注册按钮模型

文字位置优化  文字是内容 距离是内边距

padding 加多少 width就要减多少  50px   换行了

1.强制一行 2.减小字体 font-size: 12px;   还可以每个都改一下，加id

hover还会变色 两张图

10.上外和左外边距

margin-left    top

正同词向，负数相反

第一个的设置相对于页面，设置当前元素

第二个的设置相对于第一个

11.下外 右外边距

下外 正，下一个向下   负，下一个向下

控制内联元素或下一个兄弟元素的位置

正 下一个向右 负 下一个向左

移动 一左/二右/一左+二右

12.外边距重叠

取最大值 上下有这个问题，左右没有

解决 元素1下外300 或者  元素2上外300 或者（不推荐）在他们之间增加一个模块，要有内容，就元素不行

13.外边距传递

父级和子级子级设置上外边距100px

父级和子级同时向下移动100px

解决  子级的上外修改为父级的下外，高/宽要相应变

子级当作盒子，设置的高度对应的区域就是当前盒子的上外，父级当作盒子，就是当前的上内

14.外边距实现水平方向居中

text-align：center；

margin：0 auto；

15 注册按钮案例

抓取  元素界面箭头左上角按钮

需要完善 位置

tip 注意大括号包括的范围

utf-8 不要写成=

：和=

大小写 拼写 看清楚

16.块级元素 内联元素和行内块级元素的盒子模型

研究边框 内边距padding 外边距margin用的大多数块级元素

唯一要注意内外边距的是内联元素

17 盒子模型的类型

box-sizing

1.content-box  标准盒子模型

2.border-box  怪异盒子模型

我们就叫1默认值  实际占面积和高宽不一致   width +2*padding+ border*2

2 =width+2*外边距

处理方式也不一样