概述:盒子模型属于CSS 三大模块之一,分别是:盒子模型、浮动、定位
一、盒子边框之border
1. 语法描述
语法: border-width border-style 设置边框样式 none: 没有边框 solid: 边框为单实线 (最为常用) dashed: 边框为虚线 dotted: 边框为点线 double: 边框为双实线 border-color 综合写法:border: 1px blue solid;
2. 对表格知识小补充之处理表格的细线边框
border-collapse: collapse; 合并两个相邻单元格的边框
3.圆形边距border-radius
border-radius: 100px; 一个参数代表上下左右 border-radius: 10px 40px; /*左上角和右下角是10px 右上角和左下角是40 (对角线)*/ border-radius: 10px 40px 80px; /*左上角是10px 右上角和左下角是40 右下角是80(按照顺时针走的)*/ border-radius: 10px 40px 80px 100px; /*左上角是10px 右上角40 右下角是80 左下角是100(按照顺时针走的)*/
二、内边距padding
1. padding用法
padding 属性用于设置内边距,指边框与内容之间的距离 padding-top padding-right padding-bottom padding-left padding: 20px padding如果只写一个值表示上下左右都是20 padding:10px 30px; 上下10 左右30 padding: 10px 30px 50px; 上10 左右30 下50 padding: 10px 20px 30px 40px; 上右下左 (顺时针) 内边距(margin) 顺序跟margin一样 一般不设置右边 (因为看不出效果) 设置外边距盒子居中 (需要满足的条件) 1.必须是块级元素 2.盒子必须指定宽度 然后给盒子左右的边距都设置为auto, 就可以实现了。
2.容易混淆点
2.1 文字居中和盒子居中
文字居中(text-align: center;)
盒子居中 margin: 0 auto;
2.2 插入图片和背景图片的调整混淆
调整图片大小 section img { width: 400px; height: 300px; } 背景图片更改大小 background: #FFF url(image/denglun.jpg) 30 50 no-repeat; background-size: 200px 210px; 背景图片不占位置 3. 一般情况下,背景图片适合做一些小图标,产品展示就用插入图片
2.3 清楚原生盒子自带的padding和margin (主要为了浏览器之间的兼容,以及更好的调整样式)
body,ul,li { margin: 0; padding: 0; }
2.4 注意事项及盒子塌陷解决方法
行内元素只有左右外边距 没有上下 在IE6一下的版本margin是不生效的 其它浏览器效果也很差 所以尽量不给行内元素指定上下内外边距就好了 外边距合并 出现在垂直的块级盒子 以最大的边距为准 解决方案,避免 只给一个盒子设置边距 塌陷原因 对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中年较大者,即使父元素上外边距为0 也会发生合并 俗称塌陷 盒子塌陷解决方案: 1. 可以为父元素定义1像素的上边框或上内边距 2. 可以为元素添加overflow:hidden border: 1px solid red; 解决外边距合并的问题 padding: 1px; overflow: hidden; /* 触发BFC*/
2.5 盒子模型的高度和宽度计算
外盒尺寸(元素空间尺寸) 空间尺寸 width + border + padding + margin 内盒尺寸(元素大小) width + border + padding 以上区别在于margin ps:padding 不会影响盒子大小的两种情况 1.如果一个盒子没有设置宽度 设置padding就不会影响宽度 2.继承下来的
2.6 调整盒子布局时的顺序以及css新增属性
盒子模型稳定性 width > padding > margin cssd新增属性 box-sizing盒模型,可指定: content-box : 以前的那种 会让盒子变大 border-box: 除了margin以外 padding和border 都是包含在盒子里面的 不会撑开盒子。
2.7 小知识点补充之取消li标签的点
ul { list-style: none; /*那些已经学习过排序*/ }
三、盒子阴影 (比文字阴影多了两个属性)
h-shadow 水平阴影 必须 允许负值 b-shadow 垂直阴影 必须 允许负值 blur 模糊距离 可选 spread 阴影的尺寸 color 阴影的颜色 inset 将外部(outset)阴影改为内部阴影 box-shadow: 5px 5px 3px 4px rgba(0,0,0, .4) inset; 如果是外面阴影 不用写否则会不生效
四、文档流介绍
普通流(标准流)、浮动、定位 普通流:一个网页标内标签元素 自上而下 浮动:指设置了浮动属性的元素会脱离标准普通流的控制 float 属性值 left right none 默认是左浮动 浮动首先创建包含块的概念(包裹)也就是说浮动的元素是找离它最近的腹肌元素对齐 但是不会超出内边距的范围,也就是说padding和border的距离 小结:一个父盒子中的子盒子,如果其中一个子级有浮动,则其他也需要浮动 这样才能一行对齐 浮动影响盒子显示模式 如果块级元素添加浮动之后,具有行内块的特性 元素大小完全取决于定义的大小,默认是内容的大小 总结:浮动的目的就是为了让多个块级元素在同一行显示
五、版心和布局流程
版心和布局流程 版心指网页中主题内容所在的区域,一般在浏览器窗口中水平居中显示,常见的值969px 980px 1000px 1200px 布局流程 1.确定页面的版心(可视区) 2.分页页面中的行模块,以及每个行模块中的列模块 3.制作HTML页面,css文件 4.css初始化,然后开始运用盒子模型的原理,通过DIV+CSS布局来控制网页的各个模块