|
盒子模型组成 内容：实体化宽高 边框：border 内边距：padding 拉开内容到盒子边缘的距离； 外边距：margin 拉开盒子与盒子之间的距离； 边框border综合写法（工作常用，强制记忆）border:边框粗细 边框线条样式 边框的颜色； border:2pxdashed rgb(0,255,0); 绿色得到虚线 border属性分布写法（了解）边框粗细 border-width 边框的线条样式border-style 边框颜色 border-color 常见的线条样式（强制记忆）solid实线 dashed虚线 dotted点线 单独设置不同方向的边框（重点强制记忆单词）方位名词：left/right/top/bottom 如果想要设置四个方向不同的边框样式，我们只需要配合方位名词border-方位名词 border:3px solid #ccc; 四个边框都是一个样式 不同方向设置border-left:3px solid #ccc; 左边框 border-right:3px solid #ccc; 右边框 border-top:3px solid #ccc; 上边框 border-bottom:3px solid #ccc; 下边框 没有边框border：none；如果想input这样默认有边框的，我们需要先将默认的边框干掉none===== border:none;表示没有边框，然后可以根据需求书写自己的边框； 设置细线表格（记忆）01首先要新建几行几列，设置table的属性默认border不写，单元格之间的距离cellspacing="0"； 02在css里可以设置table的宽度，设置border，同时设置td和th的border；
03通过设置border-collapse:collapse;让相邻的边框合并在一起； 内边距padding作用拉开内容到盒子边缘的距离； padding的显示问题—撑大盒子（理解记忆）问题描述如果给固定宽高或者固定宽度的盒子添加padding和border就会默认将盒子撑大； 解决方案：加多少减多少：四周都加了就宽高都减，只加了左右（padding-left，padding-right，border-left，border-right）就只减宽度，只加了上下（padding-，padding-bottom，border-top，border-bottom）就只减宽度； 添加padding不撑开盒子的情况如果盒子没有固定的宽高或宽度，添加了padding是不会撑大盒子的； 盒子的实际占位大小（理解记忆）盒子的实际占位大小=内容宽高+padding+border Padding相关设置不同方向（强制记忆）：padding:30px; 四个方向的内边距都是一个值； padding-left:40px; 设置左边的内边距； padding-right:40px; 设置右边的内边距 padding-top:40px; 设置距离顶部的内边距
Padding-bottom:40px; 设置距离底部的内边距 如何让盒子水平居中（强制理解）条件：01盒子必须要有宽度，显示模式尽量是块元素； 02设置左右外边距为auto 书写方式方法1：margin-left:auto; margin-right:auto; 方法2：margin:auto; 方法3：margin:0 auto; 前面的0不一定是固定的，它表示margin-top和margin-bottom，可以根据需求进行调节； text-align文本居中显示和margin：auto；的区别01、text-align是让盒子里面的文本和行内元素或者行内块元素居中显示； 02、margin左右设置为 auto让块元素盒子居中显示； 插入图片和背景图片区别（了解）01、插入图片一般都是以内容出现是经常更改，背景图片是用来进行装饰的一般不经常更改，所以我们产品图和内容图片用插入图片，一些小的修饰要陪你过背景图； 02、插入图片移动位置要使用盒子模型的外边距margin和内边距padding设置；/03、背03、景图片移动位置用背景图片额度定位background-position进行设置； 清除元素默认的内外边距1、*{marin:0；padding:0;list-style:none;} 清除所有元素的默认边距和默认样式；
2、行内元素尽量不要设置垂直方（上下）向内外边距，因为行内元素设置了margin-top、margin-bottom和padding-top、paddinig-bottom是不显示效果；
| 
收藏
淘帖
踩
