布局
<!-- item 的 offsetWidth 是多大? --> <style> #item{ width: 100px; padding: 10px; border: 1px solid #ccc; margin: 10px; } </style> <div id="item"> </div> <script> let itemOffSetWidth = document.getElementById('item').offsetWidth console.log("itemOffSetWidth",itemOffSetWidth) </script>
offsetWidth = ( 内容宽度width + 内边距padding + 边框border) ,无外边距margin
offsetWidth = 122px;
如果让 offsetWidth 等于100px,不修改width、padding 、border等,应该怎么做?
<style> #item{ width: 100px; padding: 10px; border: 1px solid #ccc; margin: 10px; box-sizing: border-box; } </style>
<!-- AAA 到 BBB的距离是多少? --> <style> p { font-size: 16px; line-height: 1; margin-top: 10px; margin-bottom: 15px; } </style> <p>AAA</p> <p></p> <p></p> <p></p> <p>BBB</p>
答案:15px
相邻元素的 margin-top 和 margin-bottom 会发生重叠。
3.margin负值的问题
-
margin-top 和 margin-left 负值,元素向上、向左移动。
-
margin-right负值,右侧元素左移,自身不受影响。
-
margin-bottom负值,下方元素上移,自身不受影响。
BFC:一块独立渲染的区域,内部元素的渲染不会影响边界以外的元素。
形成BFC的常见条件:
-
float 不是none
-
position 是 absolute 或 fixed
-
overflow 不是 visible
-
display 是 flex inline-block 等
使用BFC清除浮动
<!-- 清除浮动前 --> <style> .container { background-color: #F1F1F1; } .left { float: left; margin-right: 10px; } </style> <div class="container"> <img src="https://asset.ibanquan.com/image/5f8184831b2b5f003372f1e2/s.jpeg?v=1602323587" class="left"> <p>使用BFC清除浮动</p> </div>
<!-- 清除浮动后 --> <style> .container { background-color: #F1F1F1; } .left { float: left; margin-right: 10px; } .bfc { overflow: hidden; /* 触发BFC */ } </style> <div class="container bfc"> <img src="https://asset.ibanquan.com/image/5f8184831b2b5f003372f1e2/s.jpeg?v=1602323587" class="left"> <p class="bfc">使用BFC清除浮动</p> </div>
5.float布局的问题,以及clearfix
<style type="text/css"> * { margin: 0; padding: 0; } body, html { height: 100%; font: 20px/40px "microsoft yahei"; color: white; } #container { width: 90%; margin: 0 auto; height: 100%; } #header, #footer { height: 12.5%; background: deepskyblue; } #main { height: 75%; } #center, #left, #right { height: 100%; float: left; } #center { width: 100%; background: lightgreen; } #right { background: lightblue; width: 20%; margin-left: -20%; } #left { background: lightcoral; width: 20%; margin-left: -100%; } #main-inner { padding-left: 20%; } </style> <body> <div id="container"> <div id="header"> header </div> <div id="main"> <div id="center"> <div id="main-inner"> center </div> </div> <div id="left"> left </div> <div id="right"> right </div> </div> <div id="footer"> footer </div> </div> </body>
双飞翼布局的目的
-
三栏布局,中间一栏最先加载和渲染(内容最重要)
-
两侧内容固定,中间内容随着宽度自适应
-
允许任意列的高度最高;
双飞翼布局的技术总结
-
-
两侧使用margin负值,以便和中间内容横向重叠
-
防止中间内容被两侧覆盖,一个用padding,一个用margin
clearfix
<style type="text/css"> .clearfix:after{ content: ''; display: table; clear: both; } .clearfix{ *zoom:1; /* 兼容IE */ } </style>
<style type="text/css"> .box{ width: 200px; height: 200px; border: 2px solid #CCC; border-radius: 10px; padding: 20px; display: flex; justify-content: space-between; } .item{ display: block; width: 40px; height: 40px; border-radius: 50%; background-color: #666; } .item:nth-child(2){ align-self: center; } .item:nth-child(3){ align-self: flex-end; } </style> <div class="box"> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div>
定位
1.absolute 和 relative 分别依据什么定位?
absolute 依据最近一层的定位元素定位
2.居中对齐有哪些实现方式?
水平居中
-
inline 元素:text-align: center
-
block 元素:margin: 0 auto
-
absolute 元素:left: 50% + margin-left 负值
-
元素为行内元素,设置父元素 text-align:center
-
使用 flex-box 布局,指定 justify-content 属性为center
垂直居中
-
inline 元素:line-height 的值等于 height 值
-
absolute 元素:top: 50% + margin-top 负值
-
absolute 元素:transform(-50%,-50%)
-
absolute 元素:top,left,bottom,right = 0 + margin: auto
-
使用 flex 布局,设置为 align-item:center
图文样式
1.line-height的继承问题
<-- p标签的行高是多少? --> <style type="text/css"> * { margin: 0; padding: 0; } body{ font-size: 20px; line-height: 200%; } p{ font-size: 16px; } </style> <body> <p>AAA</p> </body>
答案:40px = font-size * line-height。
line-height如何继承?
具体数值,如50px,继承该具体数值
比例,如果2/1.5,继承该比例
百分比,如200%,继承计算出来的值(font-size * line-height)
响应式
rem是一个长度单位
-
px:绝对长度单位
-
em:相对于父元素的长度单位
-
rem:相对于根元素(根元素:没有父节点的 dom 节点,在HTML中,根元素是html元素)的长度单位
2.如何实现响应式?
-
media-query,根据不同的屏幕宽度设置根元素font-size
-
rem,基于根元素的相对单位