H5与CSS3常用设置
1.设置div铺满全屏 对于一个div1，要使其属性height：100%生效，需要使其所有父元素，有确定的属性height。要铺满全屏，就是从html开始，所有的height为100%。 2.垂直居中 设置以下三个属性，为子元素在其父元素中垂直居中。 position: relative; top: 50%; transform: translateY(-50%); 来源： https://www.cnblogs.com/catMann/p/11355214.html
html居中
前端学习 之 CSS（三）
九 :浮动 浮动是 css 里面布局最多的一个属性，也是很重要的一个属性。 float ：表示浮动的意思。 属性值： none: 表示不浮动，默认 left: 表示左浮动 right ：表示右浮动 例： html 内容： <div class="box1">第一个div</div> <div class="box2">第二个div</div> <span>一个span</span> View Code css 内容： *左浮动*/ .box1 { width: 300px; height: 300px; background-color: red; float: left; } /*右浮动*/ .box2 { width: 400px; height: 400px; background-color: green; float: right; } /*左浮动*/ span { float: left; width: 100px; height: 200px; background-color: yellow; } View Code 效果图： 出现的效果图，三个元素并排显示， .box1 和 span 因为是左浮动，紧挨在一起，这种现象贴边。 .box2 盒子因为右浮动，所以紧靠着右边。 浮动四大特性的学习是必不可少的： 1. 浮动的元素脱标 2. 浮动的元素互相贴靠 3.
元素垂直水平居中的多种方案
html<div class="parent"> <div class="child"></div> </div> 宽高固定的元素如何进行垂直水平居中 1.使用绝对定位与负边距实现 .parent { position: relative; width: 400px; height: 400px; margin: auto; border: 1px solid yellow; } .child { position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -100px; width: 200px; height: 200px; border: 1px solid green; } 这个的实现方法原理: 相对父元素定位，距上边和左边框一半，然后margin在减去子元素的一半。 2.绝对定位与margin:auto实现水平垂直居中 .parent { position: relative; width: 400px; height: 400px; margin: auto; border: 1px solid yellow; } .child { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 200px;
水平垂直居中
1 <html lang="en"> 2 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title></title> 8 <style> 9 .big { 10 width: 400px; 11 height: 300px; 12 background: navy; 13 margin: 0 auto; 14 position: relative; 15 } 16 17 .small { 18 width: 100px; 19 height: 100px; 20 background: violet; 21 position: absolute; 22 top: 50%; 23 left: 50%; 24 margin-top: -50px; 25 margin-left: -50px; 26 } 27 </style> 28 </head> 29 30 <body> 31 <div class="big"> 32 <div class="small"></div> 33 </div> 34 <
layui 表单遇到的小问题
select中的option 居中显示 /*select显示的option居中*/ /*.layui-select-title input{ text-align: center; }*/ /*option全部居中*/ .layui-anim.layui-anim-upbit{ text-align: center; } View Code 刚开始用layui表单时，不现实checkbox、radio等问题？ layui.use('form', function(){ var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功 //但是，如果你的HTML是动态生成的，自动渲染就会失效 //需要在相应的地方，执行方法手动渲染，类似的还有 element.init(); form.render(); }); View Code 来源： https://www.cnblogs.com/M-miao/p/11319873.html
垂直水平居中的几种方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 7 <style type="text/css"> 8 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 14 .box{ 15 width: 400px; 16 height: 400px; 17 background: skyblue; 18 } 19 .cont{ 20 width: 200px; 21 height: 200px; 22 background: pink; 23 } 24 25 26 /*方法一：IE8+*/ 27 .box{ 28 display: table-cell; 29 text-align: center; 30 vertical-align: middle; 31 } 32 .cont{ 33 display: inline-block; 34 vertical-align: middle; 35 } 36 37 /*方法二：IE8+*/ 38 /* .box{ 39 position: relative; 40 } 41 .cont{ 42 position: absolute; 43 top: 0; 44 left: 0; 45 bottom: 0
元素居中的六种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ width: 500px; height: 500px; border: 2px solid red; /* 第二种方法 */ /* display: flex; justify-content: center; align-items: center;*/ /* 将主轴方向扭转 */ /* flex-direction: column; */ /* 多余部分是否换行 */ /* flex-wrap: nowrap; */ /* flex-direction 与 flex-warp 简写形式 */ /* flex-flow: column nowrap; */ /* 第三种方法 */ /* position: relative; */ /* 第四种 */ /* text-align: center; */ /* 第五种方法 */ /*