盒子模型
盒子模型：组成网页的每一个元素，主页面上的表现形式都是一个矩形（所占的位置是一个矩形），这一个个的矩形都叫做盒子（因为每一个矩形都会装有内容）
盒子模型是用来描述每一个元素之间的位置关系，和盒子本身的大小属性
元素和css属性分为两种：
- 内置属性：元素天生自带的css属性
- 自定义属性：人为添加给元素的css属性，自定属性的属性
组成
盒子模型由外边距，边框， 内边距和内容组成，
其中外边距，边框，内边距都是四个方向，内容只有宽高。
每一个元素都有自己的内置样式，在编辑页面样式之前需要将这些内置样式统一重置，保证页面样式的正常显示 组成：content+padding+border+margin
- content：width和height —-内容的宽度和高度
- padding: 内边距，有四个方向
- border：边框，边框只有宽度没有长度(高度）
- margin：外边距，盒子与盒子之间的距离，有四个方向margin的数值可以设置为负数
- 上下排布的两个盒子，上面的盒子有margin-bottom值，下面的盒子有margin-top值，那么这个两个值同时出现的时候，会发生margin值叠加(两个值取最大值)
- 父子元素嵌套关系的时候，如果父级元素没有padding或border,子级元素设置margin-top值的时候，那么子级元素的这个值会传递给父级元素
- 给父级元素添加 overflow：hidden；属性
- 给父级元素添加border-top值或者padding-top值
1、 外边距
外边距：盒子与盒子之间的距离，用css属性margin表示，margin有四个方向，分别是
- margin-top：上外边距
- margin-right：右外边距
- margin-bottom：下外边距
- margin-left：左外边距
margin值可以是数字、百分比、em、rem、并且
margin值支持负值
margin的缩写:
- margin：10px 20px 30px 40px;上右下左
- margin：10px 20px 30px;上 左右 下
- margin：10px 20px;上下 左右
- margin：10px；四个方向数值一致
外边距的兼容内容 - 当上面的盒子有下外边距，下面的盒子有上边距时候，两个值只有最大值起作用
- 子级盒子的上边距会传递给父级盒子（指的是有包含关系的所有盒子），当父级盒子没有内边距或外边距的时候，就会出现这个问题
- 解决方式:
- 给父级元素添加overflow：hidden；（溢出隐藏）属性
- 给父级元素添加内边距或边框属性
- 将子元素的margin top值变为父集元素的padding-top值【最优选项】
2、边框
边框：在内边距和外边距之间，包裹盒子的四个防线的线条
- 边框有四个方向 上 右 下 左
- 边框可以设置颜色
- 边框可以设置不同的样式
| 属性 | 描述 |
|---|---|
| border-top-width | 上边框的宽度 |
| border-top-color | 上边框的高度 |
| border-top-style | 上边框的样式 |
| border-top：1px solid red | 上边框宽度样式颜色【右，下，左边框同上】 |
| border-width：10px 20px 30px 40px | 上右下左四个方向的边框宽度 |
| border-color：red yellow green pink | 上右下左四个方向的边框颜色 |
| border-width：10px 20px 30px | 上 左右 下的边框宽度 |
| border-width：10px 20px | 上下 左右的边框宽度 |
| border-width：10px | 四个方向的边框宽度 |
| border：10px solid red； | 四个方向的宽度 颜色 样式都一致 |
利用border的
transparent透明（边框颜色透明），利用边框制作三角形
div{boder-width:30px;
boder-color： red transparent transparent；
boder-style：solid；
width：0；
height：0；
}3、内边距
内部距：边款距离内容之间的距离
padding有四个方向，分别是
- padding-top：上内边距
- padding-right：右内边距
- padding-bottom：下内边距
padding-left：左内边距
padding值可以是数字、百分比、em、rem、并且
margin的缩写:- padding：10px 20px 30px 40px;上右下左
- padding：10px 20px 30px;上 左右 下
- padding：10px 20px;上下 左右
- padding：10px；四个方向数值一致
4、内容
内容（content）分别有两个属性来代表
- 宽度 width 数字 百分比 rem em
- 高度 height数字 百分比 rem em
5、如何计算盒子的大小
- 盒子的宽度=内容的宽度+左右内边距+左右边框宽度
- boxWidth=width+(padiding-left)+(padding-right)+(borde-left-width)+(border-right-width)
- 盒子的高度=内容的高度+上下内边距边距+上下边框宽度
- boxHeight=height+(padding -top)+(padding-bottom)+(padding-top-width)+(border-bottom-width)
<style>
.box{width:100px;padding:10px 20px 30px;boder-width:20px 50px;boder-style:solid;magin-bottom:10px;}
</style>
计算：
boxWidth=100+20+20+50+50
boxHeight=0+10+30+20+20* BFC IFC*
1、BFC块级盒子的渲染模式
块级元素的特点：
- 从父级元素的左上角开始排列，每个元素都独占一行
- 可以直接设置盒子模型的所有属性
- 不设置宽度和高度的时候，宽度是父级元素内容的宽度，高度是本身内容的高度
- 可以嵌套所有元素
- ul和ol里面嵌套的第一层级需是li
- dl里面嵌套的第一层级需是dt和dd
- p标签里面不能嵌套任何的块级元素
块级盒子如何在页面中排布
- 盒子从父级盒子的左上开始
- 垂直排布
- 如果遇到上下margin值的时候，会发生margin值的折叠
- 所有BFC渲染的盒子都是基本流（文档流）内的盒子
block formatting context
块级元素有
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
|---|---|---|---|---|---|---|---|
| div | ul | ol | li | dt | dd | h1-h4 | p |
- 从父级元素的左上角开始排列，每个元素都是从左到右在一行显示，达到父级元素最大宽度的时候，自动折行
- 不能设置宽度，高度，设置margin和padding上下值的时候，浏览器可以识别但是不起作用
- 宽度高度默认是本身内容的宽高
- 行内元素不嵌套块级元素
- 行内元素因为元素之间的空格或者回车影响，在显示的时候，盒子和盒子之间会有间距
- 行内元素的垂直对齐方式是基线对
行内盒子如何在页面中排布
inline formating context - 盒子从父级盒子的左上开始
- 横向排布，达到父级宽度的最大值，自动折行
- 不能设置宽度，高度，设置padding-top，padding-bottom，margin-top，margin-bottom的时候可以识别但是不
行内元素有
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
|---|---|---|---|---|---|---|---|
| a | b | span | img | input | select | strong | i |
- 从父级元素的左上角开始排列，每个元素都是从左到右在一行显示，达到父级元素最大宽度的时候，自动折行
- 可以直接设置盒子模型的所有属性
- 在不设置宽高的时候，宽度高度是由内容决定的
- 会因为元素之间的空格或者回车的影响，显示的时候，盒子和盒子之间会有间距
- 垂直对齐方式是基线对齐
基线对齐：是指小写x的底部，只作用在行内元素和行内块级元素上
display以什么样的方式显示元素
| 属性值 | 描述 |
|---|---|
| block | 块级 |
| inline | 行内 |
| inline-block | 行内块级元素 |
| none | 没有 |
| list-item | 列表项目[列表队列] |
| table | 表格 |
| table-cell | 表格项 |
ul{display：table}
li{display：table-cell}行内元素和快级元素的区别，让行内元素改为快级元素
1、行内元素与块级元素直观上的区别
行内元素会在一条直线上排列，都是同一行的，水平方向排列
块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
2、块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
3、行内元素与块级元素属性的不同，主要是盒模型属性上
行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
行内元素转换为块级元素：display:block
(字面意思表现形式设为块级)
基线对齐是指同级元素之间的垂直对齐方式
vertical-align:baseline
| 属性值 | 描述 |
|---|---|
| baseline | 基线对齐 |
| top | 顶部对齐[兄弟元素之间最高的那个元素的顶部对齐] |
| bottom | 底部对齐[兄弟元素之间最高的那个元素的底部对齐] |
| middle | 中部对齐[兄弟之间最高的那个元素的中部对齐] |
如果想要改变基线对齐方式，那么需要给每一个改变的元素都添加上这个属性
想要改变对齐方式需要给每个元素身上重新设置这个属性
overflow溢出
在html中盒子里面的内容是允许大于盒子的，那么多出的部分默认会出现在盒子的右侧和下方，溢出的部分可以通过这个属性选择不同的展现形式
| 属性值 | 描述 |
|---|---|
| hidden | 隐藏[超出盒子的部分不显示] |
| auto | 自动识别[哪个方向内容溢出，那么哪个方向就会出现滚动条] |
| scroll | 出现滚动条[无论是否溢出，都会出现滚动条] |
| visible | 默认状态 |
| inherit | 从父元素属性上继承属性值 |
水平对齐方式
text-align：left/center/right
- 这个属性需要放在一个宽度大于内容的盒子身上
- 可以直接控制文字、行内元素、行内块级元素
文字的水平对齐
- 左对齐 text-align:left;
- 居中对齐 text-align:center;
- 右对齐 text-align:right;
这个属性需要给有宽度的元素上
盒子的水平对齐
- 行内或行内块级元素的对齐方式
- 左对齐 text-align:left;
- 居中对齐text-align:center;
- 右对齐 text-align:right；
这个属性需要给宽度的元素上
- 行内或行内块级元素的对齐方式
- 块级元素的对齐方式
- 给这个块级元素宽度，并且margin:0 auto;左右值为auto即可，那么这个块级元素就会在其父级元素内水平居中
用css实现水平垂直居中
水平垂直居中的实现分为两大内容：高度随内容自适应变化和固定高度。固定高度实现水平垂直居中
1、 方法一：是使用height+line-height的方式，设置同样的值，配合text-align的使用，即可实现文本的水平垂直居中对齐
<div class="container">chenhui</div> .container{ width: 300px; height: 300px; line-height: 300px; text-align: center; border: 1px solid red; }缺点：固定高度，无法实现两行文本的垂直居中对齐
2、 方法二：
使用绝对定位的方法，配合margin负值使用。可以实现元素的水平垂直居中效果。
<div class=".container">chenhui</div> .container{ position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -150px; width: 300px; height: 300px; border: 1px solid red; } .container{ position: absolute; margin:auto; left:0; top:0; right:0; bottom:0; } /*可自适应*/还可以使用CSS3的calc函数简化上面的CSS代码
.container{ position: absolute; left: calc(50% - 150px); top: calc(50% - 150px); width: 300px; height: 300px; border: 1px solid red; }缺点：固定高度，高度无法自适应内容。元素脱离文档流。
* 高度自适应实现水平垂直居中*
1、 方法一
CSS3中有transform属性，此属性下有一个translate移动函数，此函数接受两个函数。如果两个参数都为百分比值，此时会基于自身宽度和高度进行移动。此函数移动的机制同position:relative相似。<div class="container">chenhui</div> .container{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);//自身宽度和高度的一半 border: 1px solid red; }优点：无需定高度。高度随内容自适应。
2、方法二
可以使用 margin来实现水平居中对齐，而无法使用margin实现垂直居中的原因在于margin的百分比值是基于宽度计算的<div class="container">chenhui</div> .container{ width: 300px; margin: 50% auto 0; transform: translateyY(-50%); }上面代码中，由于百分比是基于父元素(此时的元素为body元素)的宽度计算的，所以此时的50%加上translate负值不一定实现垂直居中。
但是，CSS中存在一个vh(视口高度)，也就相当于DOM中document.body.clientHeight或者document.documentElemnet.clientHeight的高度，1vh=1%,即1vh等于视口高度的1%。vh单位的浏览器兼容问题。下面代码即可实现水平垂直居中效果。
<div class="container">chenhui</div> .container{ width: 300px; magin: 50vh auto 0; transform: translateY(-50%); border: 1px solid red; }3、方法三
CSS3中存在flex布局（伸缩布局模型，也叫弹性布局模型）。<div class="container"> <div class="inner"> <p>chen hui</p> </div> </div> .container{ display: flex; height: 100vh; } .inner{ margin: auto; }当我们使父元素display:flex时，margin: auto不仅可以水平居中，也能够实现垂直居中。这是因为auto外边距会平分或垂直方向上的额外空间
还可以使用justify-content: center来定义弹性项目主轴的对齐方式，align-items：center来定义弹性项目侧轴的对齐方式
<div class="container"> <div class="inner"> <p>chenhui</p> </div> </div> .container{ display: flex; justify-content: center; align-items: center; height: 100vh; }4、方法四
使用display:table来模拟表格，并给子集元素设置display:table-cell,让其成为表格的某个单元格，同时设置vertical-align:middle,即可实现垂直居中布局<div class="container"> <div class="inner">chenhui</div> </div> .container{ display: table;/*让div以表格的形式渲染*/ width: 100%; border: 1px solid red; } .inner{ display: table-cell;/*让子元素以表格的单元格形式渲染*/ text-align: center; vertical-align: middle; }margin:0 auto;让块级元素在父级元素内居中显示
- 控制有宽度块级元素
- margin的第一值不会起到居中的左右
- auto左右自适应
文字的垂直对齐方式
文字在一定高度内垂直居中line-height单行文字超出部分省略号代替
<style> p{ overflow:hideen;/*盒子溢出隐藏*/ text-overflow:ellipsis;/*多余根本的展现形式 ellipsis省略的意思*/ white-space:nowrap;/*文本不换行 nowrap不换行的意思*/ } </style>多行文字超出部分省略号代替
<style> <p class="text"></p> 移动端可以使用该方法 或者是webkit内核浏览器可以使用 .text{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;} </style>
float【浮动】
属性值 描述 left 从左到右依次在一行显示 right 从右到左依次 none 不浮动 inherit 从父级元素的该属性中继承 浮动最初的作用是为了实现文字该围绕盒子的排版
文档流：就是块级元素和行内元素默认的排布方式
脱离文档流：文档流内的正常元素识别不到这个元素了（脱离文档流的元素相当于平行漂浮在文档流之上）浮动元素的特点：
- 脱离文档流
- 设置属性值为left时，浮动元素会依次从父级盒子的左侧向右排布，设置属性值为right时，设置属性值为right时，浮动元素会依次从父级盒子的右侧向左侧排布
- 可以直接设置盒子模型的所有属性
- 不设置宽度高度的时候，宽高是本身内容的宽高
- 浮动元素内的子元素，不会继承浮动属性，还是按照BfC和IFL模式进行排版
- 在遇到父级盒子宽度最大值的时候，会自动折行
解决文档流元素不识别浮动元素的方法
- 给浮动的元素的父级元素添加固定的高度
- 给浮动的元素的父级元素添加溢出隐藏的属性
- 在后面一个浮动后面添加一个快级元素，这个块级元素带有clear：both；属性
- clear清除浮动元素对文档流内的元素的影响（可以让文档流内的元素识别到浮动元素的高度）
- left清除float为left的影响
- right清除float为right的影响
- both清除float所有的影响
- inherit从父级元素上继承该属性值
带有clear属性的元素需要有一下几点:
元素不能带有浮动属性
元素需要是快级元素
元素必须放在最后一个浮动元素的后面
用户是看不到这个元素
- clear清除浮动元素对文档流内的元素的影响（可以让文档流内的元素识别到浮动元素的高度）
让盒子在视野中消失- visibility:hidden —-盒子看不到，但是盒子所占的大小依然还在
- display:none —-盒子完全从页面中消失
- opacity:0 —-透明度度为0（完全透明）
visibility: visible 设置对象可视
hidden： 设置对象隐藏
collapse： 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。IE6及以下不支持此参数值zoom
是专门兼容ie浏览器的，有上升的作用
*zoom:1;/*只有ie7可识别*/ /* *属性名 的方式是 css属性名hack “*” 是用来兼容ie7版本浏览器 normal：使用对象的实际尺寸。 <number>：用浮点数来定义缩放比例。不允许负值 <percentage>：用百分比来定义缩放比例。不允许负值 */清除浮动
浮动元素的父级选择器{*zoom：1；} 浮动元素的父级选择器：after{ display：block； content：''; clear：both; } 多个一样时 .clearfix{*zoom:1} .clearfix:after{ display:block; content:""; clear:both; height:0;/*如果是在ie低版本浏览器下展示，有时候浏览器会默认空元素有1px的高度*/ visibility:hidden;/*为了防止元素内有内容显示出来*/ } /*ie低版本是指ie6 7 8*/
定位
相对定位:position：relative；
元素通过上下左右四个方向的数值来改变，该元素在页面上的位置
参照物是这个元素本身的位置；
特点：- 参照物是元素本身的位置；
- 没有脱离文本流；
- 当top和bottom同时有值的情况下，top值生效；
- 当left和right同时有值的情况下，left值生效；
- 任何元素都可以设置相对定位属性；
- 属性值支持负值
- 相对定位元素位移发生改变，但是元素原来的位置还会被占用，其他元素还是正常识别这个元素原来的位置
绝对定位absolute
特点：- 脱离文档流
- 可以设置参照物，参照物必须是其父级元素（直系父级）
- 如果是同一参照物，所有定位元素都会找同一个起点
可以设置层级关系
参照物：默认参照物是盒子在画布出现的第一位置
- 自定参照物：
- 参照物需是直系父级元素
- 参照物需是带有定位元素
绝对定位元素
- 有宽度和高度的情况下，top和bottom同时有值，top生效；left和right同时有值，left生效；
- 没有宽度的情况下:top和bottom同时设置的情况下，会将在这个盒子拉大，上下值都起作用，左右同理
固定定位
特点：- 脱离文档流
- 参照物是浏览器的可视窗口
- 任何元素都可以设置固定定位
定位元素的层级关系
- 默认是书写顺序在后的定位元素覆盖在顺序前的定位元素
- 可以使用在z-index属性修改定位元素的层级关系
- 所有定位元素的z-index默认值都是一样的
- z-index值是数字没有单位，支持负数
- 一般都是同级进行层级的比较
当参照物是相对定位或绝对定位的时候，父级元素之间没有z-index值，子级元素的z-index值会出来比较
脱离文档的元素都有共同的特点
- 不分行内和块级元素，只要脱离文档流就可以直接设置盒子模型的所有属性
- 宽高不设置的时候，默认是本身内容的宽高
- 浮动元素，绝对定位，固定定位元素脱离文档流
【定位】有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
<div class="outer"> <div class="A"></div> <div class="B"></div> </div> html，body { height: 100%; padding: 0; margin: 0; } .outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative; } .A { height: 100px; background: #BBE8F2; position: absolute; top: 0 ; left: 0 ; width: 100%; } .B { height: 100%; background: #D9C666; }用css 实现元li素两对其
1、给ul，li设置宽度，li的css display:inline-block,通过margin来实现2、方案一：
ul{text-align:justify;} li{display:inline-block;}3、方案二：通过flex来实现
ul{ list-style: none; width: 300px; display: flex; display: -webkit-flex; justify-content:space-between;/*决定子元素两端对齐，均匀间隔*/ align-item:center;/*决定子元素垂直居中*/ flex-wrap: wrap;/*子元素超出换行，默认是不换行的，当子元素的宽由flex决定时会失效*/ } li{ flex:1; height: 50px; }4、方案三：
ul{overflow: hidden;} li{ float: left; width:320px; height: 200px; background: #ccc; list-style: none; margin-right: 20px; margin-bottom: 20px; } li:nth-child(3n){ margin-right: 0; }px,em,rem的区别
1、 px
px 像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
px的特点：- （1）、IE无法调整那些使用px作为单位的字体大小；
- （2）、国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
- （3）、Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器（或内核）。
2、em
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人未设置，则相对于浏览器的默认字体尺寸。
em特点- （1）、em的值并不是固定的；
- （2）、em会继承父级元素的字体大小
注意：
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合：1rem=16px。那么12px = 0.75em， 10px = 0.625em。 为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就是rem值变为16px*62.5% = 10px，这样12px=1.2em，10px=1em，也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
所以我们在写CSS的时候，需要注意两点:- （1）、body选择器中声明Font-size = 62.5%；
- （2）、将你的原来的px数值除以10，然后换上em作为单位；
- （3）、重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2*1.2 = 1.44的现象。比如你在#content中声明了字体大小为1.2em，那么在在声明p的字体大小时就只能1rem，而不是1.2em，应为此em非比em它因继承#content的字体高而变为1em=12px。
3、rem
rem是CSS3新增的一个相对单位（root em， 根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem元素设定大小时，任然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，由可以避免字体大小逐层复合的连锁反应。目前，除了ie8及更早版本外，所有浏览器均可以支持rem。对于不支持的p{font-size:14px;font-size:.875rem;}注意：选择使用什么字体单位主要由你的项目来决定，如果你的用户群都是最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px，或者同时使用。
扫一扫
195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
