CSS盒子模型

空扰寡人 提交于 2019-12-05 04:05:55

概述:盒子模型属于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布局来控制网页的各个模块

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!