padding

刚学习前端的小伙伴或许对下拉菜单css怎么设置不太了解， 小猿圈加加 今天对css下拉菜单做一个详细的解释，感兴趣的同学可以学习一下，这是前端的基础。 先用一段代码说明一下： .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } 实例解析 HTML 部分： 我们可以使用任何的 HTML 元素来打开下拉菜单，如：<span>, 或 a <button> 元素。 使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。 使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。 CSS 部分： .dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。 .dropdown

　　 一、什么是Sass/Scss. 　　 Sass和Scss是指的是同一个东西。Sass的语法更近ruby，而Scss更接近css代码。Sass/Scss是对css的扩展，但是scss/sass不能之间直接运行在浏览器中，需要编译成css. 　　 　　二、在命令行中安装Sass和使用 　　首先需要在电脑上安装node.然后使用npm安装Sass. 　 　　npm install -g sass 　　常用的命令 　　sass main.scss main.css 　　sass --watch main.scss:main.css 　　 三、Sass的语法 　　 a、nesting(嵌套) 　 #main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } } 　　 编译后： #main p { color: #00ff00; width: 97%; } #main p .redbox { background-color: #ff0000; color: #000000; } 　　属性嵌套： 　 　 .container { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex;

1. body的height不可少，如body{height:100%}，否则子元素会不认，如果子元素的高直接以百分比写的话，会不显示。因为识别不出来。 宽度则不会，因为浏览器的宽度是固定的，高度会滚，不固定。 2. border-sizing其实是将默认的content-sizing转为了老ie的盒子模型 如果元素float 可以通过转为该模式，让多个元素在width相加===1时控制在一行上 3. display:flex 弹性布局类似于word中的 按内容分布表格 的意思。按内容来自动分配。 为什么在body中定位会失效？ jusitify-content:Center 控制水平居中 没有问题 但align-items:center 控制垂直居中 就失效了 因为body没有控制大小和绝对定位！ body { height : 100 % ; width : 100 % ; display : flex ; justify-content : center ; position : absolute ; align-items : center ; } 这里position 必须和height,width一起配合来用，哪个缺少，相应位置上的定位就达不到了。 如果是一个普通的div呢？ div { width : 300 px ; height : 230 px ;

display:table-cell属性简介 display：table-cell ；会使元素表现的类似一个表格中的单元格 td ，利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性，使用 table-cell 时最好不要与 float 以及 position: absolute 一起使用，设置了 table-cell 的元素对高度和宽度高度敏感，对 margin 值无反应，可以响应 padding 的设置，表现几乎类似一个td元素。 小结： 1. 不要与 float：left; position:absolute; 一起使用 2. 可以实现大小不固定元素的垂直居中 3. margin 设置无效，响应 padding 设置 4. 对高度和宽度高度敏感 5. 不要对display：table-cell使用百分比设置宽度和高度 下面介绍几个 table-cell 的应用 1. 高度不固定内容水平垂直居中 文字水平垂直居中 < style > .table-wrap { display : table-cell ; height : 200 px ; width : 100 px ; padding : 20 px ; vertical-align : middle ; text-align : center ; border : 1 px solid red ; }

鐗堟潈澹版槑锛氭湁涓嶈冻涔嬪娆㈣繋鎸囧嚭锛屾杩庝氦娴 https://blog.csdn.net/qq_33594101/article/details/78288564 -moz-box-sizing: border-box; / Firefox3.5+ / -webkit-box-sizing: border-box; / Safari3.2+ / -o-box-sizing: border-box; / Opera9.6 / -ms-box-sizing: border-box; / IE8 / box-sizing: border-box; / W3C鏍囧噯(IE9+锛孲afari5.1+,Chrome10.0+,Opera10.6+閮界鍚坆ox-sizing鐨剋3c鏍囧噯璇硶) / 娉ㄦ剰锛歜ox-sizing灞炴€ф槸CSS3鐨勫睘鎬э紝IE浣庣増鏈笉鏀寔锛屾敞鎰忓吋瀹规€?/strong> 鏂囩珷鏉ユ簮: https://blog.csdn.net/qq_33594101/article/details/78288564

璁剧疆璇ュ厓绱犵殑鐖跺厓绱狅紝绁栧厛鍏冪礌鐨勫搴﹀拰楂樺害鍧囦负100% //闃叉浜х敓绌洪殭 *{ margin:0; padding:0 } html,body,鐩爣鍏冪礌鐨勭鍏堝厓绱爗 width:100%; heigght:100%; } 鐩爣鍏冪礌{ width:100% height:100% } 1 2 3 4 5 6 7 8 9 10 11 12 13 濡傛灉鐩爣鍏冪礌鏄鍐呭厓绱?鏃犳硶璁剧疆瀹介珮)锛屽彲璁剧疆display涓篵lock 鏈€鍚巆ss浠ｇ爜: *{ margin:0; padding:0 } html,body,鐩爣鍏冪礌鐨勭鍏堝厓绱爗 width:100%; heigght:100%; } 鐩爣鍏冪礌{ width:100%; height:100%; display:block; } --------------------- 浣滆€咃細sinat_32290679 鏉ユ簮锛欳SDN 鍘熸枃锛歨ttps://blog.csdn.net/sinat_32290679/article/details/77622236 鐗堟潈澹版槑锛氭湰鏂囦负鍗氫富鍘熷垱鏂囩珷锛岃浆杞借闄勪笂鍗氭枃閾炬帴锛 鏂囩珷鏉ユ簮: https://blog.csdn.net/weixin_43706224/article/details

銆€銆€ 涓€銆佷粈涔堟槸Sass/Scss. 銆€銆€ Sass鍜孲css鏄寚鐨勬槸鍚屼竴涓笢瑗裤€係ass鐨勮娉曟洿杩憆uby锛岃€孲css鏇存帴杩慶ss浠ｇ爜銆係ass/Scss鏄css鐨勬墿灞曪紝浣嗘槸scss/sass涓嶈兘涔嬮棿鐩存帴杩愯鍦ㄦ祻瑙堝櫒涓紝闇€瑕佺紪璇戞垚css. 銆€銆€ 銆€銆€浜屻€佸湪鍛戒护琛屼腑瀹夎Sass鍜屼娇鐢?/span> 銆€銆€棣栧厛闇€瑕佸湪鐢佃剳涓婂畨瑁卬ode.鐒跺悗浣跨敤npm瀹夎Sass. 銆€ 銆€銆€npm install -g sass 銆€銆€甯哥敤鐨勫懡浠｜/span> 銆€銆€sass main.scss main.css 銆€銆€sass --watch main.scss:main.css 銆€銆€ 涓夈€丼ass鐨勮娉旤/span> 銆€銆€ a銆乶esting(宓屽) 銆€ #main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } } 銆€銆€ 缂栬瘧鍚庯細 #main p { color: #00ff00; width: 97%; } #main p .redbox { background-color: #ff0000; color: #000000; }

CSS3盒模型 CSS有一种基础设计模式叫盒模型， 定义了Web页面中的元素是如何看做盒子来解析的。 每一个盒子有不同的展示界面， 在 CSS 中 主要有以下几种盒模型： inline、inline- block、block、table、absolute，position、float。 浏览器把每个元素看 一个盒模型， 每一个盒模型是由以下几个属性组合所决定的： display、position、float、width、height、margin、padding和border等， 不同类型的盒模型会产生不同的布局。 什么是盒模型？ CSS中每一个元素都是一个盒模型，包括HTML和body标签元素。在平时设计中，大家对content、padding、margin、background和border来说一定不会陌生了， 因为盒模型都具备这些属性。 其中width、height、border、background、padding和margin之间的层次关系和相互影响，可以 看出 padding、content、 background-image、background-color，它们四者构成了Z轴（ 垂直屏幕的坐标） 多重层叠关系。 但是border与margin、padding三者之间应该是平面上 的并级关系，并不能构成Z轴的层叠关系。 在CSS中盒模型被分为两种：第 一种 是 W3C

转自：http://www.cnblogs.com/StormSpirit/archive/2012/10/24/2736453.html 抛弃table的兼容性、seo、加载等与本文无关的内容不谈，只看属性，那么table就两个特点： 1.同行等高。 2.宽度自动调节。 那么table-cell (ie6、ie7不支持) 是不是具备这个特点呢？答案是yes，为什么呢？css中有一个有意思的规则“创建匿名表格元素”。拿table-cell来扯，就是，当某个元素被设置为display:table-cell的时候，如果她的父节点不是display：table-row，爷爷节点不是display:table，那么下面就是见证奇迹的时候，这个儿子生出了他的爸爸和爷爷（浏览器会自动创建者两个匿名盒对象）虽然你找不到你的father 和 grandfather，但这确实发生了。 那么下面来看几种情况，帮助我们了解这个不可思议的事情。我先编写代码如下： <style type="text/css"> div{padding:10px 0;} .classtd, td{height:34px; padding:10px; margin:10px; border:1px solid #ccc; vertical-align:middle;} .classtd{display:table-cell;

经典三栏布局之圣杯、双飞翼、弹性布局 经典三栏布局之圣杯、双飞翼、弹性布局 圣杯布局和双飞翼布局是前端工程师需要掌握的 布局方式 ，两者功能相同，都是为了实现两 侧宽度固定，中间宽度自适应 的布局方式，此外，使用新增的 flex布局 ，可以使布局更加简单。 双飞翼布局和圣杯布局虽然实现方式有所差异，但是基本上都遵循了以下几点： 两侧宽度固定，中间宽度自适应 中间结构在DOM上优先，以便于优先渲染 下面依次介绍圣杯布局、双飞翼布局、弹性布局实现三栏布局 圣杯布局 一、搭建主体结构 我们先搭建主体框架，将主体结构写出来 <div class="header"></div> <div class="container"></div> <div class="footer"></div> 我们将为左右预留出一定的空间，作为左右固定两栏的位置 .container{ padding-left:200px; padding-right:150px; } 这时，我们的主体结构变成这样了 二、添加中、左、右三列 接下来我们将左、中、右三列添加到主体框架中 <div id="header"></div> <div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div>