margin

css元素水平居中和垂直居中的方式

由 烂漫一生 提交于 2020-01-23 04:45:32
关于居中的问题，一直处于疑惑不解的状态，知道的几种方法好像也不是每一次都会起到作用，所以更加迷惑。主要是不清楚该 在什么情况下采用哪种解决方法，所以，整理了一些方法，梳理一下思路，做一个总结。 1. line-height使单行文本垂直居中 对于单行文本，可以设置它的行高等于它父容器的高度，这样就实现了该文本的垂直居中，但是此方法只适用于单行文本。 （其实严格意义上来说，文字并不是绝对的垂直居中的，有那么很小的几像素差距，只是我们看上去它是居中的；这里的原因，就是文本的基线对齐的因素了，感兴趣的朋友可以再深入地去了解一下，这里我就不展开了）平时这样用就可以了。 对于多行文本，设置line-height就无法实现了，在这里有一个方法比较好。 还记得刚学习html的时候，大家应该都记得表格table吧，在每一个单元格里，如果我们想要让里边的文本垂直居中的话，用到的属性是 vertical-align：middle；所以在多行文本的情况下，就可以用的这个属性。 前提条件是，我们需要给文本再加一层标签，这里在 box3 中，我用 span 标签把文字包了起来。 给 span 的父级元素 div.box3 设置 display:table；给 span 设置display:table-cell;vertical-align:middle; 就可以了。 这里我没有考虑IE低版本兼容性问题

关于父元素和子元素的margin-top问题

由 谁说我不能喝 提交于 2020-01-23 04:43:58
昨天试着自己写个web简历，碰到的第一个问题竟然是margin-top的疑问，下面是经过百度后的一些理解和记录，仅作自我学习之用。 hack： 父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。 <div class="box1"> <div class="box2"></div> </div> .box1{height:200px;width:200px;background:gray;} .box2{height:100px;width:100px;background:gold;margin-top:50px;} 这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。 再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。 解决方法： 1、修改父元素的高度

CSS垂直居中

由 守給你的承諾、 提交于 2020-01-23 04:43:14
1.文本的水平垂直居中 line-height + text-align:center 1 <div class='wrap'> 2 水平垂直居中水平垂直居中 3 </div> 1 html,body{ 2 margin: 0; 3 } 4 .wrap{ 5 line-height: 400px; 6 text-align:center; 7 8 height: 400px; 9 font-size: 36px; 10 background-color: #ccc; 11 } 2.利用盒模型的水平垂直居中 我们一般讲的盒模型都是说的块级盒的盒模型，也只有块级盒的盒模型用得多一点，块级盒block-level box又是分别由content-box、padding-box、border-box、margin-box组成的，如下图： 用css3的calc()动态计算: 1 <div class="wrap"> 2 <div class="content"></div> 3 </div> 1 .wrap{ 2 margin-top: 20px; 3 margin-left: auto; 4 margin-right: auto; 5 width: 400px; 6 height: 400px; 7 background-color: #ccc; 8 .content{ 9 padding

html/css-仿写百度搜索首页

由 妖精的绣舞 提交于 2020-01-23 02:44:42
html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="baibuA.css"> </head> <body> <div class="content"> <div class="top"> <ul> <li><a href="#"class="a1">新闻</a></li> <li><a href="#"class="a1">hao123</a></li> <li><a href="#"class="a1">地图</a></li> <li><a href="#"class="a1">视频</a></li> <li><a href="#"class="a1">贴吧</a></li> <li><a href="#"class="a1">学术</a></li> <li><a href="#">登录</a></li> <li><a href="#">设置</a></li> <li><a href="#" class="more">更多产品</a></li> </ul> </div> <div class="middle"> <img src="images/百度.gif" alt="" class=

我的博客园配置

由 ≡放荡痞女 提交于 2020-01-23 02:40:02
CSS代码： /*公用*/ body { font-size:13px; padding:0; margin:0; font-family:"微软雅黑","宋体",Arial; background:#205424 url("https://www.cnblogs.com/images/cnblogs_com/carcar/1468123/o_18002.jpg") no-repeat top center fixed; background-size:100% 100%; min-width:1200px; } #home { opacity: 0.65; filter: alpha(opacity=95); box-shadow:0 0 10px #000; margin:40px auto; width:1200px; background:#fff; overflow:auto; border:solid 1px #fff; } /*段落*/ .postBody p,.postCon p { margin:7px 0; line-height:24px; } h1 { margin:0; } h3 { font-size:15px; font-weight:bold; } /*超链接*/ a { color:#464646; text-decoration:none; }

CSS margin与padding的区别

由 浪尽此生 提交于 2020-01-23 01:06:35
在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。 下面讲解 padding和margin常用的用法 一、padding 1、语法结构 （1）padding-left:10px; 左内边距 （2）padding-right:10px; 右内边距 （3）padding-top:10px; 上内边距 （4）padding-bottom:10px; 下内边距 （5）padding：10px; 四边统一内边距 （6）padding:10px 20px; 上下、左右内边距 （7）padding:10px 20px 30px; 上、左右、下内边距 （8）padding:10px 20px 30px 40px; 上、右、下、左内边距 2、可能取的值 （1）length 规定具体单位记的内边距长度 （2）% 基于父元素的宽度的内边距的长度 （3）auto 浏览器计算内边距 （4）inherit 规定应该从父元素继承内边距 3、浏览器兼容问题 （1）所有浏览器都支持padding属性 （2）任何版本IE都不支持属性值“inherit” 二、margin 1、语法结构 （1）margin-left:10px; 左外边距 （2）margin-right:10px; 右外边距 （3

【经典面试题】圣杯布局以及双飞翼布局原理

由 半城伤御伤魂 提交于 2020-01-22 17:38:01
什么是圣杯布局以及双飞翼布局 上图就是一个经典的圣杯布局和双飞翼布局的模型，即三列结构，左右两边定宽，中间自适应，能根据屏幕大小做响应。 实现方式 浮动(经典方式) 在介绍这种方式之前要先说一下margin设置负值的作用： margin-top / margin-left 设置负值会将元素拉入对应位置 可以看到，当margin-top负值增大时，元素也跟着上移了，margin-left同理，负值增大会左移，两者都会导致元素溢出视口 margin-right / margin-bottom 设置负值会让后续元素拉入 上图看到当margin-right增大时，元素本身不变，后续元素会跟过来并覆盖本元素，margin-bottom同理，负值增大时后续元素会上移并覆盖。 如何实现 先给出html结构，注意中间自适应的center元素放在最前面： <body> <div id="header">#header</div> <div id="container"> <div id="center" class="column">#center</div> <div id="left" class="column">#left</div> <div id="right" class="column">#right</div> </div> <div id="footer">#footer<

盒模型的属性

由 懵懂的女人 提交于 2020-01-22 07:36:39
一.属性 　　 width：内容的宽度 　　height: 内容的高度 　　padding：内边距，边框到内容的距离 　　border: 边框，就是指的盒子的宽度 　　margin：外边距，盒子边框到附近最近盒子的距离 1.padding(内边距) 　　 padding：就是内边距的意思，它是边框到内容之间的距离 　　另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域 　　padding有四个方向，分别描述4个方向的padding。 描述的方法有两种 　 　1、写小属性,分别设置不同方向的padding padding-top: 30px; 离上边30 padding-right: 30px; 离右边30 padding-bottom: 30px; 离下边30 padding-left: 30px; 离左边30 　　 2、写综合属性，用空格隔开 /*上 右 下 左*/ padding: 20px 30px 40px 50px ; /*上 左右 下*/ padding: 20px 30px 40px; /* 上下 左右*/ padding: 20px 30px; /*上下左右*/ padding: 20px; 一些标签默认有padding 　　比如ul标签，有默认的padding

.NET CORE(C#) WPF 重新设计Instagram

由 二次信任 提交于 2020-01-22 00:56:37
微信公众号： Dotnet9 ，网站： Dotnet9 ，问题或建议： 请网站留言 ， 如果对您有所帮助： 欢迎赞赏 。 .NET CORE(C#) WPF 重新设计Instagram 阅读导航 本文背景 代码实现 本文参考 源码 1. 本文背景 老外的一个界面设计，站长觉得不错，分享给大家作为参考，难度不大，主要是界面布局设计。 2. 代码实现 使用 .NET CORE 3.1 创建名为 “InstagramRedesign” 的WPF模板项目，添加1个Nuget库：MaterialDesignThemes，版本为最新预览版3.1.0-ci948。 解决方案主要文件目录组织结构： InstagramRedesign Assets 数张图片，从Github上下载 App.xaml MainWindow.xaml MainWindow.xaml.cs 2.1 引入样式 文件【App.xaml】，在 StartupUri 中设置启动的视图【MainWindow.xaml】，并在【Application.Resources】节点增加 MaterialDesignThemes库的样式文件： <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries>

JS实现浏览器打印、打印预览

由 故事扮演 提交于 2020-01-21 22:09:58
1.JS实现打印的方式 方式一：window.print() window.print();会弹出打印对话框，打印的是window.document.body.innerHTML中的内容，下面是从网上摘到的一个局部打印的例子，该例子的不足是打印会修改页面的内容。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>局部打印案例</title> <script type="text/javascript"> function doPrint() { if (confirm('确定打印吗？')){ try{ print.portrait = false ;//横向打印 }catch(e){ //alert("不支持此方法"); } bdhtml=window.document.body.innerHTML; sprnstr="<!--startprint-->"; eprnstr="<!--endprint-->"; prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
订阅 margin