移动网站和定制网站,个体户 做网站,网站开发 太原,怎么建设代刷网站一、让一个元素水平垂直居中#xff0c;到底有多少种方案#xff1f;水平居中对于 行内元素: text-align: center;对于确定宽度的块级元素#xff1a;width和margin实现。margin: 0 auto;绝对定位和margin-left: -width/2, 前提是父元素position: relative对于宽度未知的块级…一、让一个元素水平垂直居中到底有多少种方案水平居中对于 行内元素: text-align: center;对于确定宽度的块级元素width和margin实现。margin: 0 auto;绝对定位和margin-left: -width/2, 前提是父元素position: relative对于宽度未知的块级元素table标签配合margin左右auto实现水平居中。使用table标签(或直接将块级元素设值为display:table)再通过给该标签添加左右margin为auto。inline-block实现水平居中方法。displayinline-block和text-align:center实现水平居中。绝对定位transformtranslateX可以移动本身元素的50%。flex布局使用justify-content:center垂直居中利用 line-height实现居中这种方法适合纯文字类通过设置父容器 相对定位子级设置 绝对定位标签通过margin实现自适应居中弹性布局 flex:父级设置display: flex; 子级设置margin为auto实现自适应居中父级设置相对定位子级设置绝对定位并且通过位移 transform实现table布局父级通过转换成表格形式然后子级设置 vertical-align实现。(需要注意的是vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素)。我自己是一名从事了多年开发的web前端老程序员目前辞职在做自己的web前端私人定制课程今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货各种框架都有整理送给每一位前端小伙伴想要获取的可以关注我的头条号并在后台私信我前端即可免费获取。二、浮动布局的优点有什么缺点清除浮动有哪些方式浮动布局简介:当元素浮动以后可以向左或向右移动直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流所以文档的普通流中的框就变现的好像浮动元素不存在一样。优点这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后它有着块级元素的一些性质例如可以设置宽高等但它与inline-block还是有一些区别的第一个就是关于横向排序的时候float可以设置方向而inline-block方向是固定的还有一个就是inline-block在使用时有时会有空白间隙的问题缺点最明显的缺点就是浮动元素一旦脱离了文档流就无法撑起父元素会造成父级元素的高度塌陷。清除浮动的方式添加额外标签 //添加额外标签并且添加clear属性 父级添加overflow属性或者设置高度//auto 也可以 //将父元素的overflow设置为hidden 建立伪类选择器清除浮动(推荐)//在css中添加:after伪元素.parent:after{ /* 设置添加子元素的内容是空 */ content: ; /* 设置添加子元素为块级元素 */ display: block; /* 设置添加的子元素的高度0 */ height: 0; /* 设置添加子元素看不见 */ visibility: hidden; /* 设置clearboth */ clear: both;}三、 使用display:inline-block会产生什么问题解决方法问题复现问题: 两个displayinline-block元素放到一起会产生一段空白。如代码: Document 左 右 效果如下:产生空白的原因元素被当成行内元素排版的时候元素之间的空白符(空格、回车换行等)都会被浏览器处理根据CSS中white-space属性的处理方式(默认是normal合并多余空白)原来 HTML代码中的回车换行被转成一个空白符在字体不为0的情况下空白符占据一定宽度所以inline-block的元素之间就出现了空隙。解决办法1. 将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行 左 右 2. 父元素中设置font-size: 0在子元素上重置正确的font-size.container{ width:800px; height:200px; font-size: 0;}3. 为子元素设置float:left.left{ float: left; font-size: 14px; background: red; display: inline-block; width: 100px; height: 100px;}//right是同理四、布局题div垂直居中左右10px高度始终为宽度一半问题描述: 实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%。同时div中有一个文字A文字需要水平垂直居中。思路一利用height:0; padding-bottom: 50%; Document A 强调两点:padding-bottom究竟是相对于谁的答案是相对于 父元素的width值。那么对于这个outwrapper的用意就很好理解了。CSS呈流式布局div默认宽度填满即100%大小给outwrapper设置margin: 0 10px;相当于让左右分别减少了10px。父元素相对定位那绝对定位下的子元素宽高若设为百分比是相对谁而言的相对于父元素的(content padding)值, 注意不含border延伸如果子元素不是绝对定位那宽高设为百分比是相对于父元素的宽高标准盒模型下是content, IE盒模型是contentpaddingborder。思路二: 利用calc和vw Document A 效果如下:五、CSS如何进行品字布局第一种 品字布局1 2 3效果:第二种(全屏版) 品字布局1 2 3 效果:六、CSS如何进行圣杯布局圣杯布局如图:而且要做到左右宽度固定中间宽度自适应。1.利用flex布局 Document这里是头部 左边 中间部分 右边 这里是底部2.float布局(全部float:left) Document这里是头部 中间部分 左边 右边 这里是底部这种float布局是最难理解的主要是浮动后的负margin操作这里重点强调一下。设置负margin和left值之前是这样子:左边的盒子设置margin-left: -100%是将盒子拉上去效果:.left{ /* ... */ margin-left: -100%;}然后向左移动200px来填充空下来的padding-left部分.left{ /* ... */ margin-left: -100%; left: -200px;}效果呈现:右边的盒子设置margin-left: -250px后盒子在该行所占空间为0因此直接到上面的middle块中,效果:.right{ /* ... */ margin-left: -250px;}然后向右移动250px, 填充父容器的padding-right部分:.right{ /* ... */ margin-left: -250px; left: 250px;}现在就达到最后的效果了:3.float布局(左边float: left, 右边float: right) Document这里是头部 左边 右边 中间部分 这里是底部4. 绝对定位 Document这里是头部 左边 右边 中间部分 这里是底部5.grid布局 Documentheader left middle right footer看看grid布局其实也挺简单的吧里面的参数应该不言而喻了。另外说一点到2019年为止grid现在绝大多数浏览器已经可以兼容了可以着手使用了。当然还有table布局年代比较久远了而且对SEO不友好知道就可以这里就不浪费篇幅了。七、CSS如何实现双飞翼布局有了圣杯布局的铺垫双飞翼布局也就问题不大啦。这里采用经典的float布局来完成。 Document 双飞翼布局 八、什么是BFC什么条件下会触发渲染规则应用场景有哪些1.什么是BFCW3C对BFC的定义如下浮动元素和绝对定位元素非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions)以及overflow值不为visiable的块级盒子都会为他们的内容创建新的BFC(Block Fromatting Context 即块级格式上下文)。2.触发条件一个HTML元素要创建BFC则满足下列的任意一个或多个条件即可下列方式会创建块格式化上下文根元素()浮动元素(元素的 float 不是 none)绝对定位元素(元素的 position 为 absolute 或 fixed)行内块元素(元素的 display 为 inline-block)表格单元格(元素的 display为 table-cellHTML表格单元格默认为该值)表格标题(元素的 display 为 table-captionHTML表格标题默认为该值)匿名表格单元格元素(元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table)overflow 值不为 visible 的块元素 -弹性元素(display为 flex 或 inline-flex元素的直接子元素)网格元素(display为 grid 或 inline-grid 元素的直接子元素) 等等。3.BFC渲染规则(1)BFC垂直方向边距重叠(2)BFC的区域不会与浮动元素的box重叠(3)BFC是一个独立的容器外面的元素不会影响里面的元素(4)计算BFC高度的时候浮动元素也会参与计算4.应用场景1. 防止浮动导致父元素高度塌陷现有如下页面代码: Document接下来将inner元素设为浮动: .inner { float: left; background: #08BDEB; height: 100px; width: 100px; }会产生这样的塌陷效果但如果我们对父元素设置BFC后, 这样的问题就解决了:.container { border: 10px solid red; overflow: hidden;}同时这也是清除浮动的一种方式。2. 避免外边距折叠两个块同一个BFC会造成外边距折叠但如果对这两个块分别设置BFC那么边距重叠的问题就不存在了。现有代码如下: Document 1 2 3 此时三个元素的上下间隔都是10px, 因为三个元素同属于一个BFC。现在我们做如下操作: 1 2 3 style增加:.bfc{ overflow: hidden;}效果如下:可以明显地看到间隔变大了而且是原来的两倍符合我们的预期。关于CSS布局问题先分享到这里后续会不断地补充希望对你有所启发。如果对你有帮助的话别忘了帮忙点个赞哦。原文链接https://mp.weixin.qq.com/s/IgHNVEvK92TW2WZnWn_2BQ作者前端三元同学
